fix: toggle button and action message remain in DOM when sidebar is o…

…pen (#23)

This commit fixes a bug where the toggle button and action message remain in the DOM when the sidebar is open. Typically, they aren't visible because they're obfuscated by the open sidebar. However, on smaller screen sizes, or when the window is made smaller, the toggle button and action message are visible behind the sidebar. This commit conditionally renders the toggle button and action message only when the sidebar is closed.

src/components/ToggleXpertButton/index.jsx

@@ -28,6 +28,7 @@ const ToggleXpert = ({ isOpen, setIsOpen, courseId }) => {
   };
 
   return (
+    (!isOpen && (
     <div className="toggle closed d-flex flex-column position-fixed justify-content-end align-items-end mx-3 border-0">
       {!hasDismissed && (
         <div className="d-flex justify-content-end flex-row" data-testid="action-message">
@@ -57,6 +58,7 @@ const ToggleXpert = ({ isOpen, setIsOpen, courseId }) => {
         <XpertLogo />
       </Button>
     </div>
+    ))
   );
 };
 

src/widgets/Xpert.test.jsx

@@ -182,15 +182,14 @@ test('clicking the close button closes the sidebar', async () => {
   // assert that UI elements in the sidebar are not in the DOM
   assertSidebarElementsNotInDOM();
 });
-test('clicking the toggle button closes the sidebar', async () => {
+test('toggle elements do not appear when sidebar is open', async () => {
   const user = userEvent.setup();
   render(<Xpert courseId={courseId} />, { preloadedState: initialState });
 
   await user.click(screen.queryByTestId('toggle-button'));
-  await user.click(screen.getByTestId('toggle-button'));
 
-  // assert that UI elements in the sidebar are not in the DOM
-  assertSidebarElementsNotInDOM();
+  expect(screen.queryByTestId('toggle-button')).not.toBeInTheDocument();
+  expect(screen.queryByTestId('action-message')).not.toBeInTheDocument();
 });
 test('error message should disappear upon succesful api call', async () => {
   const user = userEvent.setup();