Skip to content

Commit d3d24ba

Browse files
Added: jest testing setup and added test cases for button and divider component
1 parent 50cc336 commit d3d24ba

15 files changed

+1613
-69
lines changed

README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# React UI Library
1+
<h1 align="center"> React UI Library</h1>
22

33
<p align="center">
4-
<img alt="GitHub package.json dynamic" src="https://img.shields.io/github/package-json/version/rameshmane7218/react-ui-library/master">
5-
<img alt="MIT License" src="https://img.shields.io/npm/l/@rameshmane7218/react-ui-library">
4+
<a href="https://www.npmjs.com/package/@rameshmane7218/react-ui-library" target="_blank"><img alt="npm" src="https://img.shields.io/npm/v/@rameshmane7218/react-ui-library"></a>
5+
<a href="https://github.com/rameshmane7218/react-ui-library/blob/master/LICENSE" target="_blank"><img alt="MIT License" src="https://img.shields.io/npm/l/@rameshmane7218/react-ui-library"></a>
66
<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@rameshmane7218/react-ui-library">
77
<img alt="GitHub language count" src="https://img.shields.io/github/languages/count/rameshmane7218/react-ui-library">
88
<img alt="GitHub top language" src="https://img.shields.io/github/languages/top/rameshmane7218/react-ui-library">

eslint.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"extends": [
3+
"plugin:jest-dom/recommended",
4+
"plugin:react-hooks/recommended",
5+
"plugin:testing-library/recommended",
6+
"plugin:testing-library/react"
7+
],
8+
9+
"plugins": ["react-hooks", "jest-dom", "testing-library"],
10+
11+
"overrides": [
12+
{
13+
"env": {
14+
"node": true,
15+
"commonjs": true,
16+
"browser": true,
17+
"jest": true
18+
}
19+
}
20+
]
21+
}

jest.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
roots: ['<rootDir>/test'],
3+
preset: 'ts-jest',
4+
testEnvironment: 'jest-environment-jsdom',
5+
transform: {
6+
'^.+\\.tsx?$': 'ts-jest',
7+
},
8+
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
9+
transformIgnorePatterns: ['<rootDir>/node_modules/'],
10+
};

package.json

+15-3
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@
2929
"scripts": {
3030
"start": "tsdx watch",
3131
"build": "tsdx build",
32-
"test": "tsdx test --passWithNoTests",
32+
"test": "jest",
3333
"lint": "tsdx lint",
3434
"prepare": "tsdx build",
3535
"size": "size-limit",
3636
"analyze": "size-limit --why",
3737
"storybook": "start-storybook -p 6006",
3838
"build-storybook": "build-storybook"
3939
},
40+
4041
"peerDependencies": {
4142
"react": ">=16.8.0",
4243
"react-dom": ">=16.8.0"
@@ -64,8 +65,7 @@
6465
}
6566
],
6667
"dependencies": {
67-
"polished": "^4.2.2",
68-
"styled-components": "^5.3.6"
68+
"polished": "^4.2.2"
6969
},
7070
"devDependencies": {
7171
"@babel/core": "^7.19.6",
@@ -78,16 +78,28 @@
7878
"@storybook/addons": "^6.5.13",
7979
"@storybook/mdx2-csf": "^0.0.3",
8080
"@storybook/react": "^6.5.13",
81+
"@testing-library/jest-dom": "^5.16.5",
82+
"@testing-library/react": "^13.4.0",
83+
"@testing-library/user-event": "^14.4.3",
84+
"@types/jest": "^29.2.1",
85+
"@types/node": "^18.11.9",
8186
"@types/react": "^18.0.24",
8287
"@types/react-dom": "^18.0.8",
8388
"@types/styled-components": "^5.1.26",
89+
"@types/testing-library__jest-dom": "^5.14.5",
8490
"babel-loader": "^9.0.0",
91+
"eslint-plugin-jest-dom": "^4.0.2",
92+
"eslint-plugin-react-hooks": "^4.6.0",
93+
"eslint-plugin-testing-library": "^5.9.1",
8594
"husky": "^8.0.1",
95+
"jest": "^29.2.2",
96+
"jest-environment-jsdom": "^29.2.2",
8697
"react": "^18.2.0",
8798
"react-dom": "^18.2.0",
8899
"react-is": "^18.2.0",
89100
"size-limit": "^8.1.0",
90101
"styled-components": "^5.3.6",
102+
"ts-jest": "^29.0.3",
91103
"tsconfig-paths-webpack-plugin": "^4.0.0",
92104
"tsdx": "^0.14.1",
93105
"tslib": "^2.4.0",

setupTests.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// jest-dom adds custom jest matchers for asserting on DOM nodes.
2+
// allows you to do things like:
3+
// expect(element).toHaveTextContent(/react/i)
4+
// learn more: https://github.com/testing-library/jest-dom
5+
import '@testing-library/jest-dom/extend-expect';
6+
7+
// "test": "tsdx test --passWithNoTests",
8+
// "jest": {
9+
// "collectCoverageFrom": [
10+
// "test/**/*.{ts,tsx}"
11+
// ],
12+
// "setupFilesAfterEnv": [
13+
// "<rootDir>/test/setupTests.ts"
14+
// ],
15+
// "modulePaths": [
16+
// "<rootDir>/test"
17+
// ],
18+
// "testEnvironment": "jest-environment-jsdom"
19+
// },

src/Button/Button.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
2727
},
2828
ref
2929
) => {
30-
console.log('size', size, rest);
31-
3230
return (
3331
<ButtonStyled
3432
ref={ref}

src/Divider/Divider.styled.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { HrProps } from './Divider';
44
export const StyledHr = styled.hr<HrProps>`
55
border-width: 0 0 1px;
66
border-color: ${({ colorScheme }) => colorScheme || '#CBD5E0'};
7-
border-style: ${({ variant }) => variant}
7+
border-style: ${({ variant }) => variant};
88
width: ${({ width }) => {
99
if (typeof width === 'number') {
1010
return `${width}px`;

src/Divider/Divider.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ import { StyledHr } from './Divider.styled';
33
export interface HrProps extends HTMLAttributes<HTMLHRElement> {
44
colorScheme?: string;
55
width?: string | number;
6-
variant?: 'solid' | 'dashed';
6+
variant?: 'solid' | 'dashed' | 'dotted';
77
}
88
export const Divider = ({
99
colorScheme,
10-
width = '100%',
1110
variant = 'solid',
11+
width = '100%',
1212
...rest
1313
}: HrProps) => {
1414
return (
1515
<StyledHr
16+
variant={variant}
1617
colorScheme={colorScheme}
1718
width={width}
18-
variant={variant}
1919
{...rest}
2020
/>
2121
);

src/utils/size.utils.ts

-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const paddings = {
3737
};
3838

3939
export const padding = (size: sizeProps) => {
40-
console.log('size', size);
4140
if (typeof size !== undefined) {
4241
return paddings[size];
4342
} else {

test/Button/Button.test.tsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { fireEvent, render } from '@testing-library/react';
3+
import { Button } from '../../src';
4+
5+
describe('Button', () => {
6+
it('render without crashing', () => {
7+
const { getByText } = render(<Button>button</Button>);
8+
expect(getByText('button')).toBeInTheDocument();
9+
});
10+
it('matches snapshot', () => {
11+
const { asFragment } = render(<Button variant="primary">button</Button>);
12+
expect(asFragment()).toMatchSnapshot();
13+
});
14+
it('should disabled button', () => {
15+
const { getByTestId } = render(
16+
<Button data-testid="disabled" disabled={true}>
17+
Button
18+
</Button>
19+
);
20+
expect(getByTestId('disabled')).toBeDisabled();
21+
});
22+
it('should render all variant', () => {
23+
const { asFragment } = render(
24+
<>
25+
<Button variant="primary">primary</Button>
26+
<Button variant="secondary">secondary</Button>
27+
</>
28+
);
29+
expect(asFragment()).toMatchSnapshot();
30+
});
31+
it('should render all sizes', () => {
32+
const { asFragment } = render(
33+
<>
34+
<Button size="xs">xs</Button>
35+
<Button size="sm">sm</Button>
36+
<Button size="md">md</Button>
37+
<Button size="lg">lg</Button>
38+
</>
39+
);
40+
expect(asFragment()).toMatchSnapshot();
41+
});
42+
it('onClick event fire', () => {
43+
let count = 0;
44+
45+
const { getByTestId } = render(
46+
<Button data-testid="click" onClick={() => (count = 1)}>
47+
increment
48+
</Button>
49+
);
50+
fireEvent.click(getByTestId('click'));
51+
expect(count).toBe(1);
52+
});
53+
it('onClick event fire on disabled button', () => {
54+
let count = 0;
55+
56+
const { getByTestId } = render(
57+
<Button
58+
data-testid="click-disabled"
59+
disabled={true}
60+
onClick={() => (count = 1)}
61+
>
62+
increment
63+
</Button>
64+
);
65+
fireEvent.click(getByTestId('click-disabled'));
66+
expect(count).toBe(0);
67+
});
68+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Button matches snapshot 1`] = `
4+
<DocumentFragment>
5+
<button
6+
class="sc-bcXHqe czdsTe"
7+
>
8+
button
9+
</button>
10+
</DocumentFragment>
11+
`;
12+
13+
exports[`Button should render all sizes 1`] = `
14+
<DocumentFragment>
15+
<button
16+
class="sc-bcXHqe jnPCbJ"
17+
>
18+
xs
19+
</button>
20+
<button
21+
class="sc-bcXHqe kHDZeg"
22+
>
23+
sm
24+
</button>
25+
<button
26+
class="sc-bcXHqe czdsTe"
27+
>
28+
md
29+
</button>
30+
<button
31+
class="sc-bcXHqe cBNtft"
32+
>
33+
lg
34+
</button>
35+
</DocumentFragment>
36+
`;
37+
38+
exports[`Button should render all variant 1`] = `
39+
<DocumentFragment>
40+
<button
41+
class="sc-bcXHqe czdsTe"
42+
>
43+
primary
44+
</button>
45+
<button
46+
class="sc-bcXHqe cbjsJS"
47+
>
48+
secondary
49+
</button>
50+
</DocumentFragment>
51+
`;

test/Divider/Divider.test.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { Divider } from '../../src';
4+
5+
describe('Divider Component', () => {
6+
it('should render the divider component without crashing', () => {
7+
render(<Divider />);
8+
});
9+
it('should render all variant', () => {
10+
const { asFragment } = render(
11+
<>
12+
<Divider variant="solid" />
13+
<Divider variant="dashed" />
14+
<Divider variant="dotted" />
15+
</>
16+
);
17+
expect(asFragment()).toMatchSnapshot();
18+
});
19+
it('should have correct css properties', () => {
20+
const { getByTestId } = render(
21+
<Divider data-testid="divider" width={'10px'} />
22+
);
23+
expect(getByTestId('divider')).toHaveStyle({
24+
width: '10px',
25+
borderStyle: 'solid',
26+
});
27+
});
28+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Divider Component should render all variant 1`] = `
4+
<DocumentFragment>
5+
<hr
6+
class="sc-jSUZER gfvkWP"
7+
width="100%"
8+
/>
9+
<hr
10+
class="sc-jSUZER haKBbh"
11+
width="100%"
12+
/>
13+
<hr
14+
class="sc-jSUZER hgbkZc"
15+
width="100%"
16+
/>
17+
</DocumentFragment>
18+
`;

test/blah.test.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
2-
import * as ReactDOM from 'react-dom';
2+
import { render } from '@testing-library/react';
33
import { Default as Thing } from '../stories/Thing.stories';
44

55
describe('Thing', () => {
66
it('renders without crashing', () => {
7-
const div = document.createElement('div');
8-
ReactDOM.render(<Thing />, div);
9-
ReactDOM.unmountComponentAtNode(div);
7+
render(<Thing />);
108
});
119
});

0 commit comments

Comments
 (0)