Skip to content

Commit 7399f0f

Browse files
LuckyFBBLuckyFBB
committed
test(button): change button unit test
1 parent a9cae88 commit 7399f0f

File tree

2 files changed

+124
-25
lines changed

2 files changed

+124
-25
lines changed

‎src/button/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Button should support contentLayout success render 1`] = `
4+
{
5+
"asFragment": [Function],
6+
"baseElement": <body>
7+
<div>
8+
<button
9+
class="ant-btn ant-btn-default dtc-button"
10+
type="button"
11+
>
12+
<span
13+
class="dtc-button__icon dtc-button__icon--middle"
14+
>
15+
<span
16+
data-mock-icon="UploadOutlined"
17+
/>
18+
</span>
19+
<span
20+
class="dtc-button__text dtc-button__text--middle"
21+
>
22+
Primary
23+
</span>
24+
</button>
25+
</div>
26+
</body>,
27+
"container": <div>
28+
<button
29+
class="ant-btn ant-btn-default dtc-button"
30+
type="button"
31+
>
32+
<span
33+
class="dtc-button__icon dtc-button__icon--middle"
34+
>
35+
<span
36+
data-mock-icon="UploadOutlined"
37+
/>
38+
</span>
39+
<span
40+
class="dtc-button__text dtc-button__text--middle"
41+
>
42+
Primary
43+
</span>
44+
</button>
45+
</div>,
46+
"debug": [Function],
47+
"findAllByAltText": [Function],
48+
"findAllByDisplayValue": [Function],
49+
"findAllByLabelText": [Function],
50+
"findAllByPlaceholderText": [Function],
51+
"findAllByRole": [Function],
52+
"findAllByTestId": [Function],
53+
"findAllByText": [Function],
54+
"findAllByTitle": [Function],
55+
"findByAltText": [Function],
56+
"findByDisplayValue": [Function],
57+
"findByLabelText": [Function],
58+
"findByPlaceholderText": [Function],
59+
"findByRole": [Function],
60+
"findByTestId": [Function],
61+
"findByText": [Function],
62+
"findByTitle": [Function],
63+
"getAllByAltText": [Function],
64+
"getAllByDisplayValue": [Function],
65+
"getAllByLabelText": [Function],
66+
"getAllByPlaceholderText": [Function],
67+
"getAllByRole": [Function],
68+
"getAllByTestId": [Function],
69+
"getAllByText": [Function],
70+
"getAllByTitle": [Function],
71+
"getByAltText": [Function],
72+
"getByDisplayValue": [Function],
73+
"getByLabelText": [Function],
74+
"getByPlaceholderText": [Function],
75+
"getByRole": [Function],
76+
"getByTestId": [Function],
77+
"getByText": [Function],
78+
"getByTitle": [Function],
79+
"queryAllByAltText": [Function],
80+
"queryAllByDisplayValue": [Function],
81+
"queryAllByLabelText": [Function],
82+
"queryAllByPlaceholderText": [Function],
83+
"queryAllByRole": [Function],
84+
"queryAllByTestId": [Function],
85+
"queryAllByText": [Function],
86+
"queryAllByTitle": [Function],
87+
"queryByAltText": [Function],
88+
"queryByDisplayValue": [Function],
89+
"queryByLabelText": [Function],
90+
"queryByPlaceholderText": [Function],
91+
"queryByRole": [Function],
92+
"queryByTestId": [Function],
93+
"queryByText": [Function],
94+
"queryByTitle": [Function],
95+
"rerender": [Function],
96+
"unmount": [Function],
97+
}
98+
`;

‎src/button/__tests__/index.test.tsx

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,47 @@
11
import React from 'react';
22
import { UploadOutlined } from '@dtinsight/react-icons';
3-
import { render, screen } from '@testing-library/react';
3+
import { render } from '@testing-library/react';
4+
import '@testing-library/jest-dom/extend-expect';
45

5-
import Button from '../index';
6+
import Button from '..';
67

78
describe('Button', () => {
8-
it('renders button with text correctly', () => {
9-
render(<Button>Test Button</Button>);
10-
expect(screen.getByText('Test Button')).toBeInTheDocument();
9+
test('should support contentLayout success render', () => {
10+
const wrapper = render(<Button icon={<UploadOutlined />}>Primary</Button>);
11+
expect(wrapper).toMatchSnapshot();
1112
});
1213

13-
it('renders button with icon correctly', () => {
14-
const { container } = render(<Button icon={<UploadOutlined />}>With Icon</Button>);
15-
expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
16-
expect(screen.getByText('With Icon')).toBeInTheDocument();
14+
it('renders text correctly', () => {
15+
const { getByText } = render(<Button>Hello</Button>);
16+
expect(getByText('Hello')).toBeInTheDocument();
1717
});
1818

19-
it('renders icon-only button correctly', () => {
19+
it('renders icon correctly', () => {
2020
const { container } = render(<Button icon={<UploadOutlined />} />);
2121
expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
22-
expect(container.querySelector('.dtc-button__text')).toBeNull();
22+
expect(container.querySelector('.dtc-button__text')).not.toBeInTheDocument();
2323
});
2424

25-
it('applies custom className correctly', () => {
26-
const { container } = render(<Button className="custom-class">Custom Class</Button>);
27-
expect(container.querySelector('.dtc-button.custom-class')).toBeInTheDocument();
25+
it('renders icon and text correctly', () => {
26+
const { getByText, container } = render(<Button icon={<UploadOutlined />}>Search</Button>);
27+
expect(getByText('Search')).toBeInTheDocument();
28+
expect(container.querySelector('.dtc-button__icon')).toBeInTheDocument();
2829
});
2930

30-
it('passes other props to antd Button', () => {
31-
render(
32-
<Button type="primary" data-testid="primary-button">
33-
Primary
34-
</Button>
35-
);
36-
const button = screen.getByTestId('primary-button');
37-
expect(button).toHaveClass('ant-btn-primary');
31+
it('applies custom className', () => {
32+
const { container } = render(<Button className="custom-class">Test</Button>);
33+
expect(container.firstChild).toHaveClass('custom-class');
34+
});
35+
36+
it('passes other props to AntdButton', () => {
37+
const { getByText } = render(<Button type="primary">Primary</Button>);
38+
expect(getByText('Primary').parentNode).toHaveClass('ant-btn-primary');
3839
});
3940

40-
it('applies correct size to icon and text', () => {
41+
it('applies size class to icon and text', () => {
4142
const { container } = render(
42-
<Button size="small" icon={<UploadOutlined />}>
43-
Small Button
43+
<Button icon={<UploadOutlined />} size="small">
44+
Test
4445
</Button>
4546
);
4647
expect(container.querySelector('.dtc-button__icon--small')).toBeInTheDocument();

0 commit comments

Comments
 (0)