Skip to content

Commit 932f57d

Browse files
ArcAnyaArcAnya
committed
part of Utils snapshot tests
1 parent 0c22db0 commit 932f57d

10 files changed

+338
-36
lines changed

‎__tests__/Utils/LinkDropdown.test.js

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,18 @@
22
* @jest-environment jsdom
33
*/
44
import React from 'react';
5-
import { render, screen } from '../../test-utils';
65
import LinkDropdown from '../../components/Utils/LinkDropdown';
7-
import nextRouter from 'next/router';
8-
// Test cases for full balances, empty balances, and undefined balances.
9-
10-
nextRouter.useRouter = jest.fn();
11-
const push = jest.fn(() => {
12-
return { catch: jest.fn };
13-
});
6+
import renderer from 'react-test-renderer';
147

158
describe('LinkDropdown', () => {
169
// Test cases for
1710

18-
beforeEach(() => {
19-
nextRouter.useRouter.mockImplementation(() => ({
20-
query: { type: null },
21-
prefetch: jest.fn(() => {
22-
return { catch: jest.fn };
23-
}),
24-
push,
25-
}));
26-
});
2711
const items = [
2812
{ name: 'View', url: '/' },
2913
{ name: 'Fund', url: '/asd' },
3014
];
31-
it('should display LinkDropdown', async () => {
32-
// ARRANGE
33-
render(<LinkDropdown items={items} />);
34-
// ASSERT
35-
expect(screen.getAllByTestId('link')[0]).toBeInTheDocument();
15+
it('should match DOM Snapshot', () => {
16+
const tree = renderer.create(<LinkDropdown items={items} />);
17+
expect(tree.toJSON()).toMatchSnapshot('and should display LinkDropdown');
3618
});
3719
});

‎__tests__/Utils/ModalDefault.test.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import ModalDefault from '../../components/Utils/ModalDefault';
3+
import renderer from 'react-test-renderer';
4+
5+
const title = 'My Title';
6+
const children = <div>My Children</div>;
7+
const footerLeft = <div>My left footer</div>;
8+
const footerRight = <div>My right footer</div>;
9+
10+
describe('ModalDefault', () => {
11+
it('should match DOM Snapshot', () => {
12+
const tree = renderer.create(
13+
<ModalDefault title={title} footerLeft={footerLeft} footerRight={footerRight}>
14+
{children}
15+
</ModalDefault>
16+
);
17+
expect(tree.toJSON()).toMatchSnapshot();
18+
});
19+
});

‎__tests__/Utils/SmallToggle.test.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import SmallToggle from '../../components/Utils/SmallToggle';
3+
import renderer from 'react-test-renderer';
4+
5+
const names = ['Ready for work', 'All issues'];
6+
7+
describe('SmallToggle', () => {
8+
it('should atch DOM Snapshot', () => {
9+
const tree = renderer.create(<SmallToggle names={names} />);
10+
expect(tree.toJSON()).toMatchSnapshot();
11+
});
12+
});

‎__tests__/Utils/Submenu.test.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { render, screen } from '../../test-utils';
66
import SubMenu from '../../components/Utils/SubMenu';
77
import userEvent from '@testing-library/user-event';
88
import Add from '../../components/svg/add.js';
9+
import renderer from 'react-test-renderer';
910
// Test cases for full balances, empty balances, and undefined balances.
1011

1112
describe('SubMenu', () => {
@@ -16,6 +17,16 @@ describe('SubMenu', () => {
1617
{ name: 'View', SVG: Add },
1718
{ name: 'Fund', SVG: Add },
1819
];
20+
it('should match DOM Snapshot and match horizontal style', () => {
21+
const tree = renderer.create(<SubMenu updatePage={mockUpdatePage} internalMenu={'Fund'} items={items} />);
22+
expect(tree.toJSON()).toMatchSnapshot();
23+
});
24+
it('should match DOM Snapshot and match vertical style', () => {
25+
const tree = renderer.create(
26+
<SubMenu updatePage={mockUpdatePage} vertical={true} internalMenu={'Fund'} items={items} />
27+
);
28+
expect(tree.toJSON()).toMatchSnapshot();
29+
});
1930
it('should display SubMenu', async () => {
2031
// ARRANGE
2132
const user = userEvent.setup();

‎__tests__/Utils/Toggle.test.js

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,24 @@ import React from 'react';
55
import { render, screen } from '../../test-utils';
66
import Toggle from '../../components/Utils/Toggle';
77
import userEvent from '@testing-library/user-event';
8+
import renderer from 'react-test-renderer';
89
// Test cases for full balances, empty balances, and undefined balances.
910

1011
describe('Toggle', () => {
1112
// Test cases for
1213
const mockToggle = jest.fn();
13-
beforeEach(() => {});
1414
const names = ['foo', 'bar'];
1515

16-
it('should display toggle', async () => {
17-
// ARRANGE
18-
render(<Toggle toggleFunc={mockToggle} names={names} toggleVal={names[0]} />);
19-
// ASSERT
20-
expect(screen.getByText(names[0])).toHaveClass('bg-[#21262d]');
21-
expect(screen.getByText(names[1])).not.toHaveClass('bg-[#21262d]');
16+
it('should match DOM Snapshot & foo should have class bg-[#21262d] while bar should not', () => {
17+
const tree = renderer.create(<Toggle toggleFunc={mockToggle} names={names} toggleVal={names[0]} />);
18+
expect(tree.toJSON()).toMatchSnapshot();
2219
});
23-
it('should display toggle', async () => {
24-
// ARRANGE
25-
render(<Toggle toggleFunc={mockToggle} names={names} toggleVal={names[1]} />);
26-
// ASSERT
27-
expect(screen.getByText(names[0])).not.toHaveClass('bg-[#21262d]');
28-
expect(screen.getByText(names[1])).toHaveClass('bg-[#21262d]');
20+
it('should match DOM Snapshot & foo should not have class bg-[#21262d] while bar should', () => {
21+
const tree = renderer.create(<Toggle toggleFunc={mockToggle} names={names} toggleVal={names[1]} />);
22+
expect(tree.toJSON()).toMatchSnapshot();
2923
});
3024

31-
it('should display toggle', async () => {
25+
it('should call toggleFunc', async () => {
3226
// ARRANGE
3327
const user = userEvent.setup();
3428
render(<Toggle toggleFunc={mockToggle} names={names} toggleVal={names[1]} />);

‎__tests__/Utils/__snapshots__/LinkDropdown.test.js.snap

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`LinkDropdown should match DOM Snapshot: and should display LinkDropdown 1`] = `
4+
<div
5+
className="max-h-0 undefined px-1 hidden group-focus-within:block group-focus:block text-sm text-muted "
6+
open={true}
7+
>
8+
<div
9+
className="w-full"
10+
>
11+
<ul
12+
className="z-20 overflow-hidden relative bg-subtle w-full -mt-1 mb-4 shadow-[rgb(1,_4,_9)_0px_8px_24px_0px] border-web-gray border-x border-b rounded-b-sm"
13+
>
14+
<li>
15+
<div
16+
className="cursor-pointer flex w-full gap-4 hover:bg-link-colour text-white py-2 px-4 border-t border-web-gray"
17+
data-testid="link"
18+
onClick={[Function]}
19+
onMouseEnter={[Function]}
20+
onTouchStart={[Function]}
21+
>
22+
<svg
23+
className="fill-primary relative top-0.5"
24+
height="16"
25+
viewBox="0 0 16 16"
26+
width="16"
27+
xmlns="http://www.w3.org/2000/svg"
28+
>
29+
<path
30+
d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"
31+
fillRule="evenodd"
32+
/>
33+
</svg>
34+
<span
35+
className="max-w-[100px] truncate "
36+
>
37+
View
38+
</span>
39+
</div>
40+
</li>
41+
<li>
42+
<div
43+
className="cursor-pointer flex w-full gap-4 hover:bg-link-colour text-white py-2 px-4 border-t border-web-gray"
44+
data-testid="link"
45+
onClick={[Function]}
46+
onMouseEnter={[Function]}
47+
onTouchStart={[Function]}
48+
>
49+
<svg
50+
className="fill-primary relative top-0.5"
51+
height="16"
52+
viewBox="0 0 16 16"
53+
width="16"
54+
xmlns="http://www.w3.org/2000/svg"
55+
>
56+
<path
57+
d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"
58+
fillRule="evenodd"
59+
/>
60+
</svg>
61+
<span
62+
className="max-w-[100px] truncate "
63+
>
64+
Fund
65+
</span>
66+
</div>
67+
</li>
68+
</ul>
69+
</div>
70+
</div>
71+
`;

‎__tests__/Utils/__snapshots__/ModalDefault.test.js.snap

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ModalDefault should match DOM Snapshot 1`] = `
4+
<div>
5+
<div
6+
className="flex justify-center items-end sm:items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50"
7+
>
8+
<div
9+
className="flex w-full sm:w-[480px] h-[320px] border border-gray-700 sm:rounded-sm bg-[#161B22]"
10+
>
11+
<div
12+
className="flex flex-col relative w-full"
13+
>
14+
<button
15+
className="absolute top-4 right-4 cursor-pointer"
16+
data-testid="cross"
17+
onClick={[Function]}
18+
>
19+
<svg
20+
className="fill-muted hover:fill-blue-400 w-4 h-4"
21+
height="16"
22+
viewBox="0 0 16 16"
23+
width="16"
24+
xmlns="http://www.w3.org/2000/svg"
25+
>
26+
<path
27+
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
28+
fillRule="evenodd"
29+
/>
30+
</svg>
31+
</button>
32+
<div
33+
className="py-2 px-4 border-b border-gray-700 text-2xl w-full h-[50px]"
34+
>
35+
My Title
36+
</div>
37+
<div
38+
className="py-2 px-4 w-full h-[220px] overflow-x-hidden overflow-y-auto"
39+
>
40+
<div>
41+
My Children
42+
</div>
43+
</div>
44+
<div
45+
className="flex justify-between py-2 px-4 border-t border-gray-700 w-full h-[50px]"
46+
>
47+
<div>
48+
<div>
49+
My left footer
50+
</div>
51+
</div>
52+
<div>
53+
<div>
54+
My right footer
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
<div
62+
className="bg-overlay z-10 fixed inset-0"
63+
/>
64+
</div>
65+
`;

‎__tests__/Utils/__snapshots__/SmallToggle.test.js.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[`SmallToggle should atch DOM Snapshot 1`] = `
4+
<div
5+
className="flex text-sm rounded-sm overflow-hidden w-fit undefined text-primary "
6+
>
7+
<button
8+
className="w-fit min-w-[80px] py-[5px] px-4 rounded-l-sm border whitespace-nowrap border-web-gray"
9+
onClick={[Function]}
10+
>
11+
Ready for work
12+
</button>
13+
<button
14+
className="w-fit min-w-[80px] py-[5px] px-4 rounded-r-sm border whitespace-nowrap border-web-gray"
15+
onClick={[Function]}
16+
>
17+
All issues
18+
</button>
19+
</div>
20+
`;

‎__tests__/Utils/__snapshots__/Submenu.test.js.snap

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`SubMenu should match DOM Snapshot and match horizontal style 1`] = `
4+
<div
5+
className="px-2 sm:px-8 text-primary w-full flex h-12 overflow-x-auto overflow-y-hidden border-web-gray border-b items-center gap-x-1 md:gap-x-4 relative undefined "
6+
>
7+
<li
8+
className="w-fit list-none relative"
9+
>
10+
<button
11+
className="undefined cursor-pointer px-1 flex gap-1 sm:gap-2 items-center text-sm hover:bg-inactive-gray leading-5 py-1 hover:bg-active-gray rounded-sm justify-center w-fit false"
12+
onClick={[Function]}
13+
type="button"
14+
>
15+
<span
16+
className="whitespace-nowrap"
17+
>
18+
View
19+
</span>
20+
</button>
21+
<div
22+
className="absolute w-full top-9 border border-transparent"
23+
/>
24+
</li>
25+
<li
26+
className="w-fit list-none relative"
27+
>
28+
<button
29+
className="undefined cursor-pointer px-1 flex gap-1 sm:gap-2 items-center text-sm hover:bg-inactive-gray leading-5 py-1 hover:bg-active-gray rounded-sm justify-center w-fit undefined "
30+
onClick={[Function]}
31+
type="button"
32+
>
33+
<span
34+
className="whitespace-nowrap"
35+
>
36+
Fund
37+
</span>
38+
</button>
39+
<div
40+
className="absolute w-full top-9 border border-link-colour bg-link-colour"
41+
/>
42+
</li>
43+
</div>
44+
`;
45+
46+
exports[`SubMenu should match DOM Snapshot and match vertical style 1`] = `
47+
<div
48+
className="px-2 px-0 text-primary w-full flex flex-col gap-2 gap-x-1 md:gap-x-4 relative undefined "
49+
>
50+
<li
51+
className="w-fit list-none relative"
52+
>
53+
<button
54+
className="pl-2 cursor-pointer px-1 flex gap-1 sm:gap-2 items-center text-sm hover:bg-inactive-gray leading-5 py-1 hover:bg-active-gray rounded-sm justify-center w-fit false"
55+
onClick={[Function]}
56+
type="button"
57+
>
58+
<span
59+
className="whitespace-nowrap"
60+
>
61+
View
62+
</span>
63+
</button>
64+
</li>
65+
<li
66+
className="w-fit list-none relative"
67+
>
68+
<button
69+
className="pl-2 cursor-pointer px-1 flex gap-1 sm:gap-2 items-center text-sm hover:bg-inactive-gray leading-5 py-1 hover:bg-active-gray rounded-sm justify-center w-fit after:h-5 after:left-0 after:w-0.5 after:absolute after:bg-link-colour "
70+
onClick={[Function]}
71+
type="button"
72+
>
73+
<span
74+
className="whitespace-nowrap"
75+
>
76+
Fund
77+
</span>
78+
</button>
79+
</li>
80+
</div>
81+
`;

0 commit comments

Comments
 (0)