Skip to content

Commit 9207383

Browse files
AbhinavMVAbhinavMV
committed
chore: fix tests and vitest support added
1 parent 80817bd commit 9207383

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+3402
-2390
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
**/dist
33
**/*.tsbuildinfo
44
**/.DS_Store
5-
.env
5+
.env
6+
**/coverage

‎.storybook/preview.js ‎.storybook/preview.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import { initialize } from 'msw-storybook-addon';
2+
// Start Mock Service Worker
3+
initialize({ onUnhandledRequest: 'bypass' });
4+
15
export const parameters = {
26
actions: { argTypesRegex: '^on[A-Z].*' },
37
controls: {

‎package.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"scripts": {
1212
"build": "nx run-many --target=build --all --parallel --verbose=true",
1313
"test": "nx affected --target=test --all --parallel --verbose=true",
14+
"test:ui": "nx affected --target=test:ui --all --parallel --verbose=true",
1415
"nm:clear": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
1516
"nx:clear": "nx clear-cache",
1617
"nx:graph": "nx graph --skip-nx-cache",
@@ -48,11 +49,14 @@
4849
"@typescript-eslint/eslint-plugin": "~5.18.0",
4950
"@typescript-eslint/parser": "~5.18.0",
5051
"@vitejs/plugin-react": "^1.3.2",
52+
"@vitest/ui": "^0.15.1",
5153
"eslint": "~8.12.0",
5254
"eslint-config-prettier": "8.1.0",
5355
"fast-glob": "^3.2.11",
5456
"jest": "^28.1.0",
5557
"jest-styled-components": "^7.0.8",
58+
"msw": "^0.42.1",
59+
"msw-storybook-addon": "^1.6.3",
5660
"react": "^18.0.0",
5761
"react-dom": "^18.0.0",
5862
"react-lazily": "^0.9.1",
@@ -65,6 +69,10 @@
6569
"typescript": "^4.6.3",
6670
"vite": "^2.9.5",
6771
"vite-plugin-dts": "^1.1.1",
68-
"vite-tsconfig-paths": "^3.4.1"
72+
"vite-tsconfig-paths": "^3.4.1",
73+
"vitest": "^0.15.1"
74+
},
75+
"msw": {
76+
"workerDirectory": "public"
6977
}
7078
}

‎packages/core/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
}
1818
},
1919
"scripts": {
20-
"build": "vite build"
20+
"build": "vite build",
21+
"test": "vitest run",
22+
"test:coverage": "vitest run --coverage",
23+
"test:ui": "vitest --ui"
2124
},
2225
"peerDependencies": {
2326
"react": "^18.0.0",

‎packages/core/src/lib/Accordion/Accordion.tsx

+22-4
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,19 @@ const Accordion: React.FC<AccordionProps> = ({
6161
>
6262
<DivStyled>
6363
{isOpen ? (
64-
<Minus fill={getThemeColor(theme)} fontSize="2px" />
64+
<Minus
65+
title="minus icon"
66+
titleId="accordion minus icon"
67+
fill={getThemeColor(theme)}
68+
fontSize="2px"
69+
/>
6570
) : (
66-
<Plus fill={getThemeColor(theme)} fontSize="10px" />
71+
<Plus
72+
title="plus icon"
73+
titleId="accordion plus icon"
74+
fill={getThemeColor(theme)}
75+
fontSize="10px"
76+
/>
6777
)}
6878

6979
<H4Styled data-testid="test-accordion-title">
@@ -77,9 +87,17 @@ const Accordion: React.FC<AccordionProps> = ({
7787
)}
7888
{hasLockIcon &&
7989
(isOpen ? (
80-
<LockOpen fill={getThemeColor(theme)} />
90+
<LockOpen
91+
title="lock open icon"
92+
titleId="accordion lock open icon"
93+
fill={getThemeColor(theme)}
94+
/>
8195
) : (
82-
<LockClosed fill={getThemeColor(theme)} />
96+
<LockClosed
97+
title="lock closed icon"
98+
titleId="accordion lock closed icon"
99+
fill={getThemeColor(theme)}
100+
/>
83101
))}
84102
{tagText && (
85103
<Tag text={tagText} color={theme} tone="dark" />

‎packages/core/src/lib/Breadcrumbs/Breadcrumbs.test.tsx

+87-76
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import { fireEvent, waitFor, screen, render } from '@testing-library/react';
32
import { composeStories } from '@storybook/testing-react';
43
import * as stories from './Breadcrumbs.stories';
@@ -14,96 +13,108 @@ const separatorId = 'breadcrumbs-separator-test-id';
1413
const breadcrumbId = 'breadcrumb-test-id';
1514

1615
test('Renders - Breadcrumbs One', () => {
17-
render(<One />);
18-
expect(screen.getByTestId(navId)).not.toBeNull();
19-
expect(screen.queryByTestId(separatorId)).toBeNull();
20-
expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
21-
expect(screen.queryByTestId(olId)).not.toBeNull();
16+
render(<One />);
17+
expect(screen.getByTestId(navId)).not.toBeNull();
18+
expect(screen.queryByTestId(separatorId)).toBeNull();
19+
expect(
20+
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
21+
).toBeDefined();
22+
expect(screen.queryByTestId(olId)).not.toBeNull();
2223
});
2324

24-
xtest('Renders - Breadcrumbs One: Hover Test', async () => {
25-
render(<One />);
26-
// TODO: Hover/MouseOver Event does not work as expected so it passes. Need to Fix
27-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
28-
fireEvent.mouseOver(breadcrumbElement);
29-
await waitFor(() => breadcrumbElement);
30-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
25+
test.skip('Renders - Breadcrumbs One: Hover Test', async () => {
26+
render(<One />);
27+
// TODO: Hover/MouseOver Event does not work as expected so it passes. Need to Fix
28+
const breadcrumbElement = screen.getByTestId(breadcrumbId);
29+
fireEvent.mouseOver(breadcrumbElement);
30+
await waitFor(() => breadcrumbElement);
31+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
3132
});
3233

3334
test('Renders - Breadcrumbs Two', async () => {
34-
render(<Two />);
35-
expect(screen.getByTestId(navId)).not.toBeNull();
36-
expect(screen.queryByTestId(separatorId)).not.toBeNull();
37-
expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
38-
expect(screen.queryByTestId(olId)).not.toBeNull();
35+
render(<Two />);
36+
expect(screen.getByTestId(navId)).not.toBeNull();
37+
expect(screen.queryByTestId(separatorId)).not.toBeNull();
38+
expect(
39+
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
40+
).toBeDefined();
41+
expect(screen.queryByTestId(olId)).not.toBeNull();
3942
});
4043

41-
xtest('Renders - Breadcrumbs Two: Hover Test', async () => {
42-
render(<Two />);
43-
// TODO: Hover Event does not work as expected so it passes. Need to Fix
44-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
45-
fireEvent.mouseOver(breadcrumbElement);
46-
await waitFor(() => breadcrumbElement);
47-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
48-
const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
49-
fireEvent.mouseOver(breadcrumbElement1);
50-
await waitFor(() => breadcrumbElement1);
51-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
44+
test.skip('Renders - Breadcrumbs Two: Hover Test', async () => {
45+
render(<Two />);
46+
// TODO: Hover Event does not work as expected so it passes. Need to Fix
47+
const breadcrumbElement = screen.getByTestId(breadcrumbId);
48+
fireEvent.mouseOver(breadcrumbElement);
49+
await waitFor(() => breadcrumbElement);
50+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
51+
const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
52+
fireEvent.mouseOver(breadcrumbElement1);
53+
await waitFor(() => breadcrumbElement1);
54+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
5255
});
5356

5457
test('Renders - Breadcrumbs Three', () => {
55-
render(<Three />);
56-
expect(screen.getByTestId(navId)).not.toBeNull();
57-
expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(1);
58-
expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
59-
expect(screen.queryByTestId(olId)).not.toBeNull();
58+
render(<Three />);
59+
expect(screen.getByTestId(navId)).not.toBeNull();
60+
expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(
61+
1,
62+
);
63+
expect(
64+
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
65+
).toBeDefined();
66+
expect(screen.queryByTestId(olId)).not.toBeNull();
6067
});
6168

62-
xtest('Renders - Breadcrumbs Three: Hover Test', async () => {
63-
render(<Three />);
64-
// TODO: Hover Event does not work as expected so it passes. Need to Fix
65-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
66-
fireEvent.mouseOver(breadcrumbElement);
67-
await waitFor(() => breadcrumbElement);
68-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
69-
const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
70-
fireEvent.mouseOver(breadcrumbElement1);
71-
await waitFor(() => breadcrumbElement1);
72-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
73-
// third breadcrumb should not change color on hover
74-
const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
75-
fireEvent.mouseOver(breadcrumbElement2);
76-
await waitFor(() => breadcrumbElement2);
77-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
69+
test.skip('Renders - Breadcrumbs Three: Hover Test', async () => {
70+
render(<Three />);
71+
// TODO: Hover Event does not work as expected so it passes. Need to Fix
72+
const breadcrumbElement = screen.getByTestId(breadcrumbId);
73+
fireEvent.mouseOver(breadcrumbElement);
74+
await waitFor(() => breadcrumbElement);
75+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
76+
const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
77+
fireEvent.mouseOver(breadcrumbElement1);
78+
await waitFor(() => breadcrumbElement1);
79+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
80+
// third breadcrumb should not change color on hover
81+
const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
82+
fireEvent.mouseOver(breadcrumbElement2);
83+
await waitFor(() => breadcrumbElement2);
84+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
7885
});
7986

8087
test('Renders - Breadcrumbs Four', () => {
81-
render(<Four />);
82-
expect(screen.getByTestId(navId)).not.toBeNull();
83-
expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(1);
84-
expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
85-
expect(screen.queryByTestId(olId)).not.toBeNull();
88+
render(<Four />);
89+
expect(screen.getByTestId(navId)).not.toBeNull();
90+
expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(
91+
1,
92+
);
93+
expect(
94+
screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
95+
).toBeDefined();
96+
expect(screen.queryByTestId(olId)).not.toBeNull();
8697
});
8798

88-
xtest('Renders - Breadcrumbs Four: Hover Test', async () => {
89-
render(<Four />);
90-
// TODO: Hover Event does not work as expected so it passes. Need to Fix
91-
const breadcrumbElement = screen.getByTestId(breadcrumbId);
92-
fireEvent.mouseOver(breadcrumbElement);
93-
await waitFor(() => breadcrumbElement);
94-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
95-
const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
96-
fireEvent.mouseOver(breadcrumbElement1);
97-
await waitFor(() => breadcrumbElement1);
98-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
99-
// third breadcrumb should change color on hover
100-
const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
101-
fireEvent.mouseOver(breadcrumbElement2);
102-
await waitFor(() => breadcrumbElement2);
103-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
104-
// third breadcrumb should not change color on hover
105-
const breadcrumbElement3 = screen.getByTestId(`${breadcrumbId}-3`);
106-
fireEvent.mouseOver(breadcrumbElement3);
107-
await waitFor(() => breadcrumbElement3);
108-
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
99+
test.skip('Renders - Breadcrumbs Four: Hover Test', async () => {
100+
render(<Four />);
101+
// TODO: Hover Event does not work as expected so it passes. Need to Fix
102+
const breadcrumbElement = screen.getByTestId(breadcrumbId);
103+
fireEvent.mouseOver(breadcrumbElement);
104+
await waitFor(() => breadcrumbElement);
105+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
106+
const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
107+
fireEvent.mouseOver(breadcrumbElement1);
108+
await waitFor(() => breadcrumbElement1);
109+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
110+
// third breadcrumb should change color on hover
111+
const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
112+
fireEvent.mouseOver(breadcrumbElement2);
113+
await waitFor(() => breadcrumbElement2);
114+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
115+
// third breadcrumb should not change color on hover
116+
const breadcrumbElement3 = screen.getByTestId(`${breadcrumbId}-3`);
117+
fireEvent.mouseOver(breadcrumbElement3);
118+
await waitFor(() => breadcrumbElement3);
119+
expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
109120
});

‎packages/core/src/lib/Breadcrumbs/Breadcrumbs.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,12 @@ function renderList(
5151
data-testid={'breadcrumbs-separator-test-id'}
5252
>
5353
{separator ?? (
54-
<ChevronRight fill="currentColor" fontSize={24} />
54+
<ChevronRight
55+
title="chevron right icon"
56+
titleId="breadcrumbs chevron right icon"
57+
fill="currentColor"
58+
fontSize={24}
59+
/>
5560
)}
5661
</BreadcrumbsSeparator>,
5762
);

‎packages/core/src/lib/Button/Button.stories.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ PrimaryWithIcon.args = {
4242
text: 'Primary with icon',
4343
theme: 'primary',
4444
type: 'button',
45-
icon: <Plus fontSize="5px" height={'10px'} width={'10px'} />,
45+
icon: (
46+
<Plus fontSize="5px" height={'10px'} width={'10px'} title="plus icon" />
47+
),
4648
};
4749

4850
export const PrimaryWithIconAfter = Template.bind({});

0 commit comments

Comments
 (0)