Skip to content

Commit

Permalink
Add setup tour tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@canac
canac committed Sep 6, 2024
1 parent 75424da commit 692cae0
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 127 deletions.
79 changes: 51 additions & 28 deletions src/components/Layouts/Primary/NavBar/NavBar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<TestComponentProps> = ({
openMobile = false,
}) => (
<ThemeProvider theme={theme}>
<TestRouter router={router}>
<MockedProvider mocks={mocks} addTypename={false}>
<NavBar onMobileClose={onMobileClose} openMobile={openMobile} />
</MockedProvider>
</TestRouter>
</ThemeProvider>
);

const onMobileClose = jest.fn();
const mocks = [getTopBarMultipleMock()];

describe('NavBar', () => {
it('default', async () => {
const { queryByTestId } = render(
<ThemeProvider theme={theme}>
<MockedProvider>
<SetupProvider>
<NavBar onMobileClose={onMobileClose} openMobile={false} />
</SetupProvider>
</MockedProvider>
</ThemeProvider>,
);
beforeEach(() => {
(useSetupContext as jest.MockedFn<typeof useSetupContext>).mockReturnValue({
onSetupTour: false,
});
});

it('default', () => {
const { queryByTestId } = render(<TestComponent />);

expect(queryByTestId('NavBarDrawer')).not.toBeInTheDocument();
});

it('opened', async () => {
const { queryByTestId } = render(
<ThemeProvider theme={theme}>
<MockedProvider mocks={mocks} addTypename={false}>
<SetupProvider>
<NavBar onMobileClose={onMobileClose} openMobile={true} />
</SetupProvider>
</MockedProvider>
</ThemeProvider>,
it('opened', () => {
const { getAllByRole, queryByTestId } = render(
<TestComponent openMobile />,
);

expect(queryByTestId('NavBarDrawer')).toBeInTheDocument();
expect(
getAllByRole('button', { name: 'Dashboard' })[0],
).toBeInTheDocument();
});

it('hides links during the setup tour', () => {
(useSetupContext as jest.MockedFn<typeof useSetupContext>).mockReturnValue({
onSetupTour: true,
});

const { queryByRole } = render(<TestComponent openMobile />);

expect(
queryByRole('button', { name: 'Dashboard' }),
).not.toBeInTheDocument();
});
});
62 changes: 41 additions & 21 deletions src/components/Layouts/Primary/NavBar/NavTools/NavTools.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = () => (
<ThemeProvider theme={theme}>
<TestRouter router={router}>
<MockedProvider mocks={[getTopBarMultipleMock()]} addTypename={false}>
<NavTools />
</MockedProvider>
</TestRouter>
</ThemeProvider>
);

describe('NavTools', () => {
it('default', async () => {
const { getByTestId } = render(
<ThemeProvider theme={theme}>
<MockedProvider mocks={mocks} addTypename={false}>
<SetupProvider>
<NavTools />
</SetupProvider>
</MockedProvider>
</ThemeProvider>,
);
(useSetupContext as jest.MockedFn<typeof useSetupContext>).mockReturnValue({
onSetupTour: false,
});

const { findByText, getByTestId, getByText } = render(<TestComponent />);

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<typeof useSetupContext>).mockReturnValue({
onSetupTour: true,
});

const { queryByText, getByTestId } = render(<TestComponent />);

expect(getByTestId('NavTools')).toBeInTheDocument();
expect(queryByText('Add')).not.toBeInTheDocument();
await waitFor(() =>
expect(queryByText('John Smith')).not.toBeInTheDocument(),
);
});
});
61 changes: 38 additions & 23 deletions src/components/Layouts/Primary/NavBar/NavTools/ProfileMenuPanel/ProfileMenuPanel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand All @@ -20,40 +22,42 @@ const TestComponent = () => (
<ThemeProvider theme={theme}>
<TestWrapper mocks={[getTopBarMock()]}>
<TestRouter router={router}>
<SetupProvider>
<ProfileMenuPanel />
</SetupProvider>
<ProfileMenuPanel />
</TestRouter>
</TestWrapper>
</ThemeProvider>
);

describe('ProfileMenuPanelForNavBar', () => {
it('default', async () => {
beforeEach(() => {
(useSetupContext as jest.MockedFn<typeof useSetupContext>).mockReturnValue({
onSetupTour: false,
});
});

it('default', () => {
const { getByTestId } = render(<TestComponent />);

expect(getByTestId('ProfileMenuPanelForNavBar')).toBeInTheDocument();
});

it('render an account list button', async () => {
const { getByTestId } = render(<TestComponent />);
const { findByTestId, getByTestId, getByText } = render(<TestComponent />);

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(<TestComponent />);

await waitFor(() =>
expect(getByTestId('accountListSelectorButton')).toBeInTheDocument(),
const { findByTestId, getByTestId, queryByTestId } = render(
<TestComponent />,
);

expect(await findByTestId('accountListSelectorButton')).toBeInTheDocument();
expect(
queryByTestId('closeAccountListDrawerButton'),
).not.toBeInTheDocument();
Expand All @@ -62,12 +66,9 @@ describe('ProfileMenuPanelForNavBar', () => {
});

it('should call router push', async () => {
const { getByTestId } = render(<TestComponent />);
const { findByTestId, getByTestId } = render(<TestComponent />);

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({
Expand All @@ -77,11 +78,25 @@ describe('ProfileMenuPanelForNavBar', () => {
);
});

it('Ensure Sign Out is called with callback', async () => {
const { getByText } = render(<TestComponent />);
it('Ensure Sign Out is called with callback', () => {
const { getByRole } = render(<TestComponent />);

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<typeof useSetupContext>).mockReturnValue({
onSetupTour: true,
});

const { findByTestId, getByRole, getByTestId, queryByText } = render(
<TestComponent />,
);

userEvent.click(await findByTestId('accountListSelectorButton'));
userEvent.click(getByTestId('accountListButton-1'));
expect(getByRole('button', { name: 'Sign Out' })).toBeInTheDocument();
expect(queryByText('Preferences')).not.toBeInTheDocument();
});
});
Loading

0 comments on commit 692cae0

Please sign in to comment.