Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit aa2443c

Browse files
AbdelrahmanOmar29147aymen94
AbdelrahmanOmar29147
and
aymen94
authored
feat(test): implemented unit tests for the navigation components (#3032)
* Navigation component tests feat(test): implemented tests for the navigation components * Removed duplicated code I have removed duplicated code and ran 'npm run test -- -u' to update snapshots * Updated navigationItem test description Co-authored-by: Aymen Naghmouchi <aymenadvance@gmail.com>
1 parent b3f1db4 commit aa2443c

File tree

6 files changed

+135
-0
lines changed

6 files changed

+135
-0
lines changed

‎src/components/NavigationComponents/Navigation/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Navigation component renders correctly 1`] = `
4+
<div>
5+
<nav
6+
aria-label="API Navigation"
7+
class="navigation"
8+
id="main-navigation"
9+
>
10+
<button
11+
aria-expanded="false"
12+
class="navigationOpen"
13+
type="button"
14+
>
15+
Menu
16+
</button>
17+
</nav>
18+
</div>
19+
`;
20+

‎src/components/NavigationComponents/Navigation/__tests__/index.test.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import userEvent from '@testing-library/user-event';
3+
import { render, screen } from '@testing-library/react';
4+
import NavigationContainer from '../index';
5+
6+
describe('Navigation component', (): void => {
7+
let isOpen: boolean;
8+
let label: string;
9+
10+
beforeEach(() => {
11+
isOpen = false;
12+
label = 'API Navigation';
13+
});
14+
15+
it('renders correctly', (): void => {
16+
const { container } = render(
17+
<NavigationContainer
18+
isOpen={isOpen}
19+
toggleNavigation={jest.fn()}
20+
label={label}
21+
/>
22+
);
23+
24+
expect(container).toMatchSnapshot();
25+
});
26+
27+
it('utilizes click handler correctly', async () => {
28+
const mockHandler = jest.fn();
29+
30+
render(
31+
<NavigationContainer
32+
isOpen={isOpen}
33+
toggleNavigation={mockHandler}
34+
label={label}
35+
/>
36+
);
37+
38+
await userEvent.click(screen.getByText('Menu'));
39+
40+
expect(mockHandler.mock.calls.length).toBe(1);
41+
});
42+
});

‎src/components/NavigationComponents/NavigationItem/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`NavigationItem component renders correctly 1`] = `
4+
<div>
5+
<a
6+
class="t-body2 navigationItem"
7+
href="/blog/anouncements/"
8+
id="/blog/anouncements/"
9+
>
10+
Anouncements
11+
</a>
12+
</div>
13+
`;

‎src/components/NavigationComponents/NavigationItem/__tests__/index.test.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import NavigationItem from '../index';
4+
5+
describe('NavigationItem component', (): void => {
6+
it('renders correctly', (): void => {
7+
const slug = '/blog/anouncements/';
8+
const title = 'Anouncements';
9+
const isActive = false;
10+
const { container } = render(
11+
<NavigationItem slug={slug} title={title} isActive={isActive} />
12+
);
13+
14+
expect(container).toMatchSnapshot();
15+
});
16+
});

‎src/components/NavigationComponents/NavigationSection/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`NavigationSection component renders correctly 1`] = `
4+
<div>
5+
<div
6+
class="navigationSection"
7+
>
8+
<h1>
9+
Mock Title
10+
</h1>
11+
<div
12+
aria-label="API Navigation Section"
13+
role="region"
14+
style="display: none;"
15+
>
16+
<p>
17+
Mock content
18+
</p>
19+
</div>
20+
</div>
21+
</div>
22+
`;

‎src/components/NavigationComponents/NavigationSection/__tests__/index.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import NavigationSection from '../index';
4+
5+
describe('NavigationSection component', (): void => {
6+
it('renders correctly', (): void => {
7+
const label = 'API Navigation Section';
8+
const isOpen = false;
9+
const mockTitle = <h1>Mock Title</h1>;
10+
const mockContent = <p>Mock content</p>;
11+
const { container } = render(
12+
<NavigationSection
13+
isOpen={isOpen}
14+
label={label}
15+
title={mockTitle}
16+
content={mockContent}
17+
/>
18+
);
19+
20+
expect(container).toMatchSnapshot();
21+
});
22+
});

0 commit comments

Comments
 (0)