Remove the settings menu during the setup tour

CruGlobal · Sep 9, 2024 · 86109a8 · 86109a8
1 parent 7589602
commit 86109a8
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 41 deletions.
diff --git a/src/components/Shared/MultiPageLayout/MultiPageHeader.test.tsx b/src/components/Shared/MultiPageLayout/MultiPageHeader.test.tsx
@@ -2,26 +2,41 @@ import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { TestSetupProvider } from 'src/components/Setup/SetupProvider';
 import theme from 'src/theme';
 import { HeaderTypeEnum, MultiPageHeader } from './MultiPageHeader';
 
 const totalBalance = 'CA111';
 const title = 'test title';
 const onNavListToggle = jest.fn();
 
+interface TestComponentProps {
+  headerType?: HeaderTypeEnum;
+  noRightExtra?: boolean;
+  onSetupTour?: boolean;
+}
+
+const TestComponent: React.FC<TestComponentProps> = ({
+  headerType = HeaderTypeEnum.Report,
+  noRightExtra = false,
+  onSetupTour,
+}) => (
+  <ThemeProvider theme={theme}>
+    <TestSetupProvider onSetupTour={onSetupTour}>
+      <MultiPageHeader
+        isNavListOpen={true}
+        title={title}
+        onNavListToggle={onNavListToggle}
+        rightExtra={noRightExtra ? undefined : totalBalance}
+        headerType={headerType}
+      />
+    </TestSetupProvider>
+  </ThemeProvider>
+);
+
 describe('MultiPageHeader', () => {
   it('default', async () => {
-    const { getByRole, getByText } = render(
-      <ThemeProvider theme={theme}>
-        <MultiPageHeader
-          isNavListOpen={true}
-          title={title}
-          onNavListToggle={onNavListToggle}
-          rightExtra={totalBalance}
-          headerType={HeaderTypeEnum.Report}
-        />
-      </ThemeProvider>,
-    );
+    const { getByRole, getByText } = render(<TestComponent />);
 
     expect(getByText(title)).toBeInTheDocument();
     expect(getByText('CA111')).toBeInTheDocument();
@@ -32,49 +47,41 @@ describe('MultiPageHeader', () => {
   });
 
   it('should not render rightExtra if undefined', async () => {
-    const { queryByText } = render(
-      <ThemeProvider theme={theme}>
-        <MultiPageHeader
-          isNavListOpen={true}
-          title={title}
-          onNavListToggle={onNavListToggle}
-          rightExtra={undefined}
-          headerType={HeaderTypeEnum.Report}
-        />
-      </ThemeProvider>,
+    const { queryByText } = render(<TestComponent noRightExtra />);
+
+    expect(queryByText('CA111')).not.toBeInTheDocument();
+  });
+
+  it('should render the Reports menu', async () => {
+    const { getByTestId, getByText } = render(
+      <TestComponent headerType={HeaderTypeEnum.Report} />,
     );
 
-    expect(queryByText('CA111')).toBeNull();
+    expect(getByText('Toggle Navigation Panel')).toBeInTheDocument();
+    expect(getByTestId('ReportsFilterIcon')).toBeInTheDocument();
   });
 
   it('should render the Settings menu', async () => {
     const { getByTestId, getByText } = render(
-      <ThemeProvider theme={theme}>
-        <MultiPageHeader
-          isNavListOpen={true}
-          title={title}
-          onNavListToggle={onNavListToggle}
-          rightExtra={undefined}
-          headerType={HeaderTypeEnum.Settings}
-        />
-      </ThemeProvider>,
+      <TestComponent headerType={HeaderTypeEnum.Settings} />,
     );
 
     expect(getByText('Toggle Preferences Menu')).toBeInTheDocument();
     expect(getByTestId('SettingsMenuIcon')).toBeInTheDocument();
   });
 
+  it('should not render the Settings menu during the setup tour', async () => {
+    const { queryByTestId, queryByText } = render(
+      <TestComponent headerType={HeaderTypeEnum.Settings} onSetupTour />,
+    );
+
+    expect(queryByText('Toggle Preferences Menu')).not.toBeInTheDocument();
+    expect(queryByTestId('SettingsMenuIcon')).not.toBeInTheDocument();
+  });
+
   it('should render the Tools menu', async () => {
     const { getByTestId, getByText } = render(
-      <ThemeProvider theme={theme}>
-        <MultiPageHeader
-          isNavListOpen={true}
-          title={title}
-          onNavListToggle={onNavListToggle}
-          rightExtra={undefined}
-          headerType={HeaderTypeEnum.Tools}
-        />
-      </ThemeProvider>,
+      <TestComponent headerType={HeaderTypeEnum.Tools} />,
     );
 
     expect(getByText('Toggle Tools Menu')).toBeInTheDocument();

diff --git a/src/components/Shared/MultiPageLayout/MultiPageHeader.tsx b/src/components/Shared/MultiPageLayout/MultiPageHeader.tsx
@@ -4,6 +4,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { Box, IconButton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { useSetupContext } from 'src/components/Setup/SetupProvider';
 import theme from 'src/theme';
 
 export enum HeaderTypeEnum {
@@ -65,6 +66,7 @@ export const MultiPageHeader: FC<MultiPageHeaderProps> = ({
   headerType,
 }) => {
   const { t } = useTranslation();
+  const { onSetupTour } = useSetupContext();
 
   let titleAccess;
   if (headerType === HeaderTypeEnum.Report) {
@@ -90,7 +92,7 @@ export const MultiPageHeader: FC<MultiPageHeaderProps> = ({
               data-testid="ReportsFilterIcon"
             />
           )}
-          {headerType === HeaderTypeEnum.Settings && (
+          {!onSetupTour && headerType === HeaderTypeEnum.Settings && (
             <NavMenuIcon
               titleAccess={titleAccess}
               data-testid="SettingsMenuIcon"