From 0db33a20d6f56e268c6f8e5327c9104298dbe3a5 Mon Sep 17 00:00:00 2001 From: Caleb Cox Date: Thu, 5 Sep 2024 13:52:34 -0500 Subject: [PATCH] Add setup tour tests --- .../Layouts/Primary/NavBar/NavBar.test.tsx | 79 ++++++++++++------- .../Primary/NavBar/NavTools/NavTools.test.tsx | 62 ++++++++++----- .../ProfileMenuPanel.test.tsx | 61 ++++++++------ .../Items/ProfileMenu/ProfileMenu.test.tsx | 73 +++++++++++------ .../Layouts/Primary/TopBar/TopBar.test.tsx | 68 ++++++++-------- 5 files changed, 216 insertions(+), 127 deletions(-) diff --git a/src/components/Layouts/Primary/NavBar/NavBar.test.tsx b/src/components/Layouts/Primary/NavBar/NavBar.test.tsx index 5b588181bc..36008b9387 100644 --- a/src/components/Layouts/Primary/NavBar/NavBar.test.tsx +++ b/src/components/Layouts/Primary/NavBar/NavBar.test.tsx @@ -2,49 +2,72 @@ import React from 'react'; import { MockedProvider } from '@apollo/client/testing'; import { ThemeProvider } from '@mui/material/styles'; import { render } from '@testing-library/react'; -import { SetupProvider } from 'src/components/Setup/SetupProvider'; +import TestRouter from '__tests__/util/TestRouter'; +import { useSetupContext } from 'src/components/Setup/SetupProvider'; import theme from 'src/theme'; import { getTopBarMultipleMock } from '../TopBar/TopBar.mock'; import { NavBar } from './NavBar'; -jest.mock('next/router', () => ({ - useRouter: () => { - return { - query: { accountListId: 'abc' }, - isReady: true, - }; - }, -})); +jest.mock('src/components/Setup/SetupProvider'); + +const router = { + query: { accountListId: 'abc' }, + isReady: true, + push: jest.fn(), +}; + +interface TestComponentProps { + openMobile?: boolean; +} + +const TestComponent: React.FC = ({ + openMobile = false, +}) => ( + + + + + + + +); const onMobileClose = jest.fn(); const mocks = [getTopBarMultipleMock()]; describe('NavBar', () => { - it('default', async () => { - const { queryByTestId } = render( - - - - - - - , - ); + beforeEach(() => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: false, + }); + }); + + it('default', () => { + const { queryByTestId } = render(); expect(queryByTestId('NavBarDrawer')).not.toBeInTheDocument(); }); - it('opened', async () => { - const { queryByTestId } = render( - - - - - - - , + it('opened', () => { + const { getAllByRole, queryByTestId } = render( + , ); expect(queryByTestId('NavBarDrawer')).toBeInTheDocument(); + expect( + getAllByRole('button', { name: 'Dashboard' })[0], + ).toBeInTheDocument(); + }); + + it('hides links during the setup tour', () => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: true, + }); + + const { queryByRole } = render(); + + expect( + queryByRole('button', { name: 'Dashboard' }), + ).not.toBeInTheDocument(); }); }); diff --git a/src/components/Layouts/Primary/NavBar/NavTools/NavTools.test.tsx b/src/components/Layouts/Primary/NavBar/NavTools/NavTools.test.tsx index ad04905ca8..e42ef7c2ee 100644 --- a/src/components/Layouts/Primary/NavBar/NavTools/NavTools.test.tsx +++ b/src/components/Layouts/Primary/NavBar/NavTools/NavTools.test.tsx @@ -1,35 +1,55 @@ import React from 'react'; import { MockedProvider } from '@apollo/client/testing'; import { ThemeProvider } from '@mui/material/styles'; -import { render } from '@testing-library/react'; -import { SetupProvider } from 'src/components/Setup/SetupProvider'; +import { render, waitFor } from '@testing-library/react'; +import TestRouter from '__tests__/util/TestRouter'; +import { useSetupContext } from 'src/components/Setup/SetupProvider'; import theme from 'src/theme'; import { getTopBarMultipleMock } from '../../TopBar/TopBar.mock'; import { NavTools } from './NavTools'; -jest.mock('next/router', () => ({ - useRouter: () => { - return { - query: { accountListId: 'abc' }, - isReady: true, - }; - }, -})); +jest.mock('src/components/Setup/SetupProvider'); -const mocks = [getTopBarMultipleMock()]; +const router = { + query: { accountListId: 'abc' }, + isReady: true, + push: jest.fn(), +}; -describe('AddMenuPanel', () => { +const TestComponent = () => ( + + + + + + + +); + +describe('NavTools', () => { it('default', async () => { - const { getByTestId } = render( - - - - - - - , - ); + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: false, + }); + + const { findByText, getByTestId, getByText } = render(); expect(getByTestId('NavTools')).toBeInTheDocument(); + expect(getByText('Add')).toBeInTheDocument(); + expect(await findByText('John Smith')).toBeInTheDocument(); + }); + + it('hides links during the setup tour', async () => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: true, + }); + + const { queryByText, getByTestId } = render(); + + expect(getByTestId('NavTools')).toBeInTheDocument(); + expect(queryByText('Add')).not.toBeInTheDocument(); + await waitFor(() => + expect(queryByText('John Smith')).not.toBeInTheDocument(), + ); }); }); diff --git a/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.test.tsx b/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.test.tsx index a7aaa1b6b0..2ae1bf3d29 100644 --- a/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.test.tsx +++ b/src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.test.tsx @@ -5,11 +5,13 @@ import userEvent from '@testing-library/user-event'; import { signOut } from 'next-auth/react'; import TestRouter from '__tests__/util/TestRouter'; import TestWrapper from '__tests__/util/TestWrapper'; -import { SetupProvider } from 'src/components/Setup/SetupProvider'; +import { useSetupContext } from 'src/components/Setup/SetupProvider'; import theme from '../../../../../../theme'; import { getTopBarMock } from '../../../TopBar/TopBar.mock'; import { ProfileMenuPanel } from './ProfileMenuPanel'; +jest.mock('src/components/Setup/SetupProvider'); + const router = { pathname: '/accountLists/[accountListId]/test', query: { accountListId: '1' }, @@ -20,40 +22,42 @@ const TestComponent = () => ( - - - + ); describe('ProfileMenuPanelForNavBar', () => { - it('default', async () => { + beforeEach(() => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: false, + }); + }); + + it('default', () => { const { getByTestId } = render(); expect(getByTestId('ProfileMenuPanelForNavBar')).toBeInTheDocument(); }); it('render an account list button', async () => { - const { getByTestId } = render(); + const { findByTestId, getByTestId, getByText } = render(); - await waitFor(() => - expect(getByTestId('accountListSelectorButton')).toBeInTheDocument(), - ); - userEvent.click(getByTestId('accountListSelectorButton')); + userEvent.click(await findByTestId('accountListSelectorButton')); expect(getByTestId('accountListButton-1')).toBeInTheDocument(); expect(getByTestId('accountListButton-1')).toHaveStyle( 'backgroundColor: #383F43;', ); + expect(getByText('Preferences')).toBeInTheDocument(); }); it('should toggle the account list selector drawer', async () => { - const { getByTestId, queryByTestId } = render(); - - await waitFor(() => - expect(getByTestId('accountListSelectorButton')).toBeInTheDocument(), + const { findByTestId, getByTestId, queryByTestId } = render( + , ); + + expect(await findByTestId('accountListSelectorButton')).toBeInTheDocument(); expect( queryByTestId('closeAccountListDrawerButton'), ).not.toBeInTheDocument(); @@ -62,12 +66,9 @@ describe('ProfileMenuPanelForNavBar', () => { }); it('should call router push', async () => { - const { getByTestId } = render(); + const { findByTestId, getByTestId } = render(); - await waitFor(() => - expect(getByTestId('accountListSelectorButton')).toBeInTheDocument(), - ); - userEvent.click(getByTestId('accountListSelectorButton')); + userEvent.click(await findByTestId('accountListSelectorButton')); userEvent.click(getByTestId('accountListButton-1')); await waitFor(() => expect(router.push).toHaveBeenCalledWith({ @@ -77,11 +78,25 @@ describe('ProfileMenuPanelForNavBar', () => { ); }); - it('Ensure Sign Out is called with callback', async () => { - const { getByText } = render(); + it('Ensure Sign Out is called with callback', () => { + const { getByRole } = render(); - await waitFor(() => expect(getByText(/sign out/i)).toBeInTheDocument()); - userEvent.click(getByText(/sign out/i)); + userEvent.click(getByRole('button', { name: 'Sign Out' })); expect(signOut).toHaveBeenCalledWith({ callbackUrl: 'signOut' }); }); + + it('hides links during the setup tour', async () => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: true, + }); + + const { findByTestId, getByRole, getByTestId, queryByText } = render( + , + ); + + userEvent.click(await findByTestId('accountListSelectorButton')); + userEvent.click(getByTestId('accountListButton-1')); + expect(getByRole('button', { name: 'Sign Out' })).toBeInTheDocument(); + expect(queryByText('Preferences')).not.toBeInTheDocument(); + }); }); diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.test.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.test.tsx index 2eae4c3a85..ffaf2ad591 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.test.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.test.tsx @@ -9,7 +9,7 @@ import { session } from '__tests__/fixtures/session'; import TestRouter from '__tests__/util/TestRouter'; import TestWrapper from '__tests__/util/TestWrapper'; import { render, waitFor } from '__tests__/util/testingLibraryReactMock'; -import { SetupProvider } from 'src/components/Setup/SetupProvider'; +import { useSetupContext } from 'src/components/Setup/SetupProvider'; import theme from '../../../../../../theme'; import { getTopBarMock, @@ -17,6 +17,8 @@ import { } from '../../TopBar.mock'; import ProfileMenu from './ProfileMenu'; +jest.mock('src/components/Setup/SetupProvider'); + const mockEnqueue = jest.fn(); jest.mock('notistack', () => ({ @@ -51,31 +53,39 @@ interface TestComponentProps { const TestComponent: React.FC = ({ router, mocks }) => ( - - - - - + + + ); describe('ProfileMenu', () => { + beforeEach(() => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: false, + }); + }); + it('default', async () => { - const { getByTestId, queryByText, getByText } = render(); - await waitFor(() => expect(getByText('John Smith')).toBeInTheDocument()); + const { getByTestId, getByRole, getByText, findByText } = render( + , + ); + expect(await findByText('John Smith')).toBeInTheDocument(); userEvent.click(getByTestId('profileMenuButton')); - expect(queryByText('Manage Organizations')).toBeInTheDocument(); - expect(queryByText('Admin Console')).toBeInTheDocument(); - expect(queryByText('Backend Admin')).toBeInTheDocument(); - expect(queryByText('Sidekiq')).toBeInTheDocument(); + expect(getByText('Preferences')).toBeInTheDocument(); + expect(getByText('Manage Organizations')).toBeInTheDocument(); + expect(getByText('Admin Console')).toBeInTheDocument(); + expect(getByText('Backend Admin')).toBeInTheDocument(); + expect(getByText('Sidekiq')).toBeInTheDocument(); + expect(getByRole('button', { name: 'Sign Out' })).toBeInTheDocument(); }); it('should not show setting links when no accountListId selected', async () => { - const { getByTestId, queryByText, getByText } = render( + const { getByTestId, queryByText, findByText } = render( , ); - await waitFor(() => expect(getByText('John Smith')).toBeInTheDocument()); + expect(await findByText('John Smith')).toBeInTheDocument(); userEvent.click(getByTestId('profileMenuButton')); expect(queryByText('Manage Organizations')).not.toBeInTheDocument(); expect(queryByText('Admin Console')).not.toBeInTheDocument(); @@ -84,8 +94,8 @@ describe('ProfileMenu', () => { }); it('should change account list in the router', async () => { - const { getByTestId, getByText } = render(); - await waitFor(() => expect(getByText('John Smith')).toBeInTheDocument()); + const { getByTestId, findByText } = render(); + expect(await findByText('John Smith')).toBeInTheDocument(); userEvent.click(getByTestId('profileMenuButton')); userEvent.click(getByTestId('accountListSelector')); userEvent.click(getByTestId('accountListButton-1')); @@ -99,7 +109,7 @@ describe('ProfileMenu', () => { }); it('should change account list in the router and persist query parameters', async () => { - const { getByTestId, getByText } = render( + const { getByTestId, findByText } = render( { }} />, ); - await waitFor(() => expect(getByText('John Smith')).toBeInTheDocument()); + expect(await findByText('John Smith')).toBeInTheDocument(); userEvent.click(getByTestId('profileMenuButton')); userEvent.click(getByTestId('accountListSelector')); userEvent.click(getByTestId('accountListButton-1')); @@ -123,10 +133,10 @@ describe('ProfileMenu', () => { }); it('should route to path with account list', async () => { - const { getByTestId, getByText, queryByTestId } = render( + const { getByTestId, findByText, queryByTestId } = render( , ); - await waitFor(() => expect(getByText('John Smith')).toBeInTheDocument()); + expect(await findByText('John Smith')).toBeInTheDocument(); expect(queryByTestId('accountListName')).not.toBeInTheDocument(); userEvent.click(getByTestId('profileMenuButton')); userEvent.click(getByTestId('accountListSelector')); @@ -141,19 +151,19 @@ describe('ProfileMenu', () => { }); it('should display account name if user has two or more account lists', async () => { - const { getByTestId, getByText } = render( + const { findByText, getByTestId, getByText } = render( , ); - await waitFor(() => expect(getByText('John Smith')).toBeInTheDocument()); + expect(await findByText('John Smith')).toBeInTheDocument(); expect(getByTestId('accountListName')).toBeInTheDocument(); expect(getByText('Staff Account')).toBeInTheDocument(); }); it('Ensure Sign Out is called with callback', async () => { - const { getByTestId, getByText, queryByTestId } = render( + const { findByText, getByTestId, getByText, queryByTestId } = render( , ); - await waitFor(() => expect(getByText('John Smith')).toBeInTheDocument()); + expect(await findByText('John Smith')).toBeInTheDocument(); expect(queryByTestId('accountListName')).not.toBeInTheDocument(); userEvent.click(getByTestId('profileMenuButton')); await waitFor(() => @@ -163,6 +173,21 @@ describe('ProfileMenu', () => { userEvent.click(getByText(/sign out/i)); expect(signOut).toHaveBeenCalledWith({ callbackUrl: 'signOut' }); }); + + it('hides links during the setup tour', async () => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: true, + }); + + const { findByText, getByRole, getByTestId, queryByText } = render( + , + ); + + expect(await findByText('John Smith')).toBeInTheDocument(); + userEvent.click(getByTestId('profileMenuButton')); + expect(queryByText('Preferences')).not.toBeInTheDocument(); + expect(getByRole('button', { name: 'Sign Out' })).toBeInTheDocument(); + }); }); describe('ProfileMenu while Impersonating', () => { diff --git a/src/components/Layouts/Primary/TopBar/TopBar.test.tsx b/src/components/Layouts/Primary/TopBar/TopBar.test.tsx index 2a4a931b8e..c6d6453a8e 100644 --- a/src/components/Layouts/Primary/TopBar/TopBar.test.tsx +++ b/src/components/Layouts/Primary/TopBar/TopBar.test.tsx @@ -1,16 +1,17 @@ -import * as nextRouter from 'next/router'; import React from 'react'; import { MockedProvider } from '@apollo/client/testing'; import { ThemeProvider } from '@mui/material/styles'; import { render } from '@testing-library/react'; import { SnackbarProvider } from 'notistack'; import TestRouter from '__tests__/util/TestRouter'; -import { SetupProvider } from 'src/components/Setup/SetupProvider'; +import { useSetupContext } from 'src/components/Setup/SetupProvider'; import theme from '../../../../theme'; import { getNotificationsMocks } from './Items/NotificationMenu/NotificationMenu.mock'; import TopBar from './TopBar'; import { getTopBarMultipleMock } from './TopBar.mock'; +jest.mock('src/components/Setup/SetupProvider'); + const accountListId = 'accountListId'; const onMobileNavOpen = jest.fn(); @@ -32,38 +33,43 @@ jest.mock('notistack', () => ({ }, })); -describe('TopBar', () => { - const useRouter = jest.spyOn(nextRouter, 'useRouter'); - const mocks = [getTopBarMultipleMock(), ...getNotificationsMocks()]; - beforeEach(() => { - ( - useRouter as jest.SpyInstance< - Pick - > - ).mockImplementation(() => ({ - query: { accountListId }, - isReady: true, - })); - }); +const TestComponent = () => ( + + + + + + + + + +); +describe('TopBar', () => { it('default', () => { - const { getByTestId } = render( - - - - - - - - - - - , - ); + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: false, + }); + + const { getByTestId, getByText } = render(); expect(getByTestId('TopBar')).toBeInTheDocument(); + expect(getByText('Dashboard')).toBeInTheDocument(); + }); + + it('hides links during the setup tour', () => { + (useSetupContext as jest.MockedFn).mockReturnValue({ + onSetupTour: true, + }); + + const { queryByText } = render(); + + expect(queryByText('Dashboard')).not.toBeInTheDocument(); }); });