1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import { describe, expect, it } from '@jest/globals';
import { userEvent } from '@testing-library/user-event';
import mockRouter from 'next-router-mock';
import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
import {
render,
screen as rtlScreen,
waitFor,
} from '../../../../../tests/utils';
import { SiteNavbar } from './site-navbar';
import { ROUTES } from 'src/utils/constants';
describe('SiteNavbar', () => {
it('renders the main nav, a search form and a settings form', () => {
render(<SiteNavbar />);
expect(
rtlScreen.getByRole('checkbox', { name: 'Open menu' })
).toBeInTheDocument();
expect(
rtlScreen.getByRole('checkbox', { name: 'Open search' })
).toBeInTheDocument();
expect(
rtlScreen.getByRole('checkbox', { name: 'Open settings' })
).toBeInTheDocument();
});
it('can give focus to the search input on activation', async () => {
const user = userEvent.setup();
render(<SiteNavbar />);
/* It seems we cannot use it with waitFor... the assertions count is
* inaccurate. */
// expect.assertions(1);
await user.click(rtlScreen.getByRole('checkbox', { name: 'Open search' }));
await waitFor(() => {
expect(rtlScreen.getByRole('searchbox')).toHaveFocus();
});
});
it('can submit the search form', async () => {
const user = userEvent.setup();
const keywords = 'keywords';
render(
<MemoryRouterProvider>
<SiteNavbar />
</MemoryRouterProvider>
);
await user.click(rtlScreen.getByRole('checkbox', { name: 'Open search' }));
await user.type(rtlScreen.getByRole('searchbox'), keywords);
await user.click(rtlScreen.getByRole('button', { name: 'Search' }));
expect(mockRouter.asPath).toBe(`${ROUTES.SEARCH}?s=${keywords}`);
});
it('does not submit the search form without keywords', async () => {
const user = userEvent.setup();
render(<SiteNavbar />);
await user.click(rtlScreen.getByRole('checkbox', { name: 'Open search' }));
await user.click(rtlScreen.getByRole('button', { name: 'Search' }));
expect(
rtlScreen.getByText(/Query must be longer than one character./)
).toBeInTheDocument();
});
});
|
