Skip to content

Commit 918f8c7

Browse files
ImaginingMakerImaginingMaker
authored
test(divider): merged test cases for the divider component and optimized (#735)
* test(divider): merged test cases for the divider component and optimized Merged the original two test files into one, removed duplicates, and optimized the format. fix #697 * test(divider): standardize divider test cases standardize Divider test cases fix #697 * test(divider): removed some unnecessary snapshots - Align, layout, dashed assertions: no snapshot storage (verify CSS classes). fix #697
1 parent b1ea98b commit 918f8c7

File tree

3 files changed

+95
-129
lines changed

3 files changed

+95
-129
lines changed

src/divider/__tests__/__snapshots__/vitest-divider.test.jsx.snap renamed to src/divider/__tests__/__snapshots__/divider.test.tsx.snap

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`Divider Component > props.align is equal to center 1`] = `
3+
exports[`Divider > props > :content 1`] = `
44
<div>
55
<div
66
class="t-divider t-divider--horizontal t-divider--center"
@@ -9,43 +9,32 @@ exports[`Divider Component > props.align is equal to center 1`] = `
99
<div
1010
class="t-divider__content"
1111
>
12-
Text
13-
</div>
14-
</div>
15-
</div>
16-
`;
17-
18-
exports[`Divider Component > props.align is equal to left 1`] = `
19-
<div>
20-
<div
21-
class="t-divider t-divider--horizontal t-divider--left"
22-
role="separator"
23-
>
24-
<div
25-
class="t-divider__content"
26-
>
27-
Text
12+
<span
13+
class="custom-node"
14+
>
15+
TNode
16+
</span>
2817
</div>
2918
</div>
3019
</div>
3120
`;
3221

33-
exports[`Divider Component > props.align is equal to right 1`] = `
22+
exports[`Divider > props > :content 2`] = `
3423
<div>
3524
<div
36-
class="t-divider t-divider--horizontal t-divider--right"
25+
class="t-divider t-divider--horizontal t-divider--center"
3726
role="separator"
3827
>
3928
<div
4029
class="t-divider__content"
4130
>
42-
Text
31+
TDesign
4332
</div>
4433
</div>
4534
</div>
4635
`;
4736

48-
exports[`Divider Component > props.children works fine 1`] = `
37+
exports[`Divider > slot > :content 1`] = `
4938
<div>
5039
<div
5140
class="t-divider t-divider--horizontal t-divider--center"
@@ -56,6 +45,7 @@ exports[`Divider Component > props.children works fine 1`] = `
5645
>
5746
<span
5847
class="custom-node"
48+
data-testid="divider-content-test-slot-id"
5949
>
6050
TNode
6151
</span>
@@ -64,7 +54,7 @@ exports[`Divider Component > props.children works fine 1`] = `
6454
</div>
6555
`;
6656

67-
exports[`Divider Component > props.content works fine 1`] = `
57+
exports[`Divider > slot > :default 1`] = `
6858
<div>
6959
<div
7060
class="t-divider t-divider--horizontal t-divider--center"
@@ -73,33 +63,31 @@ exports[`Divider Component > props.content works fine 1`] = `
7363
<div
7464
class="t-divider__content"
7565
>
76-
<span
77-
class="custom-node"
78-
>
79-
TNode
80-
</span>
66+
TDesign
8167
</div>
8268
</div>
8369
</div>
8470
`;
8571

86-
exports[`Divider Component > props.layout is equal to horizontal 1`] = `
72+
exports[`Divider > vertical divider > applies align class on vertical divider 1`] = `
8773
<div>
8874
<div
89-
class="t-divider t-divider--horizontal t-divider--center"
75+
class="t-divider t-divider--vertical t-divider--left"
9076
role="separator"
9177
>
9278
<div
9379
class="t-divider__content"
94-
/>
80+
>
81+
text
82+
</div>
9583
</div>
9684
</div>
9785
`;
9886

99-
exports[`Divider Component > props.layout is equal to vertical 1`] = `
87+
exports[`Divider > vertical divider > applies dashed class on vertical divider 1`] = `
10088
<div>
10189
<div
102-
class="t-divider t-divider--vertical t-divider--center"
90+
class="t-divider t-divider--vertical t-divider--center t-divider--dashed"
10391
role="separator"
10492
>
10593
<div

‎src/divider/__tests__/divider.test.tsx‎

Lines changed: 75 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,99 @@
11
import React from 'react';
2-
import { describe, expect, it, render, waitFor } from '@test/utils';
2+
import { describe, expect, it, render } from '@test/utils';
33
import Divider from '../Divider';
4-
import { TdDividerProps } from '../type';
54

65
describe('Divider', () => {
76
describe('props', () => {
8-
it(':align', async () => {
9-
const testId = 'divider test align';
10-
const aligns: TdDividerProps['align'][] = ['left', 'right', 'center'];
11-
const { getByTestId } = render(
12-
<div data-testid={testId}>{aligns?.map((align, index) => <Divider key={index} align={align} />)}</div>,
13-
);
14-
15-
const instance = await waitFor(() => getByTestId(testId));
7+
it(':align', () => {
8+
const aligns = ['left', 'right', 'center'] as const;
169

17-
for (let index = 0; index < aligns.length; index++) {
18-
const align = aligns[index];
19-
expect(() => instance.querySelector(`.t-divider--${align}`)).toBeTruthy();
10+
function checkAlign(align: (typeof aligns)[number]) {
11+
const { container } = render(<Divider align={align}>Text</Divider>);
12+
expect(container.firstChild).toHaveClass(`t-divider--${align}`);
2013
}
21-
});
2214

23-
it(':layout', async () => {
24-
const testId = 'divider test layout';
25-
const layouts: TdDividerProps['layout'][] = ['horizontal', 'vertical'];
26-
const { getByTestId } = render(
27-
<div data-testid={testId}>{layouts?.map((layout, index) => <Divider key={index} layout={layout} />)}</div>,
28-
);
15+
aligns.forEach(checkAlign);
16+
});
2917

30-
const instance = await waitFor(() => getByTestId(testId));
18+
it(':layout', () => {
19+
const layouts = ['horizontal', 'vertical'] as const;
3120

32-
for (let index = 0; index < layouts.length; index++) {
33-
const layout = layouts[index];
34-
expect(() => instance.querySelector(`.t-divider--${layout}`)).toBeTruthy();
21+
function checkLayout(layout: (typeof layouts)[number]) {
22+
const { container } = render(<Divider layout={layout} />);
23+
expect(container.firstChild).toHaveClass(`t-divider--${layout}`);
3524
}
25+
26+
layouts.forEach(checkLayout);
3627
});
3728

38-
it(':dashed', async () => {
39-
const { container } = render(<Divider dashed />);
40-
const dividerElement = container.firstChild;
41-
expect(dividerElement).toHaveClass('t-divider--dashed');
29+
it(':content', () => {
30+
// Test content as a function
31+
const { container: container1 } = render(<Divider content={() => <span className="custom-node">TNode</span>} />);
32+
expect(container1.querySelector('.custom-node')).toBeTruthy();
33+
expect(container1).toMatchSnapshot();
34+
35+
// Test content as a string
36+
const { container: container2 } = render(<Divider content="TDesign" />);
37+
expect(container2.textContent).toBe('TDesign');
38+
expect(container2).toMatchSnapshot();
4239
});
4340

44-
it(':content', async () => {
45-
const content = 'DividerContent';
46-
const { getByText } = render(<Divider content={content}></Divider>);
47-
expect(getByText(content).textContent).toBeTruthy();
41+
it(':dashed', () => {
42+
// Test default value (false)
43+
const { container: container1 } = render(<Divider />);
44+
expect(container1.firstChild).not.toHaveClass('t-divider--dashed');
45+
46+
// Test dashed = true
47+
const { container: container2 } = render(<Divider dashed={true} />);
48+
expect(container2.firstChild).toHaveClass('t-divider--dashed');
49+
50+
// Test dashed = false
51+
const { container: container3 } = render(<Divider dashed={false} />);
52+
expect(container3.firstChild).not.toHaveClass('t-divider--dashed');
4853
});
4954
});
5055

51-
describe('function', () => {
52-
it(':content', async () => {
53-
const content = () => 'DividerContent';
54-
const { getByText } = render(<Divider>{content}</Divider>);
55-
expect(getByText(content()).textContent).toBeTruthy();
56+
describe('slot', () => {
57+
it(':default', () => {
58+
const { container } = render(<Divider>TDesign</Divider>);
59+
expect(container).toMatchSnapshot();
60+
});
61+
62+
it(':content', () => {
63+
const testSlotContentId = 'divider-content-test-slot-id';
64+
const { container } = render(
65+
<Divider>
66+
<span className="custom-node" data-testid={testSlotContentId}>
67+
TNode
68+
</span>
69+
</Divider>,
70+
);
71+
expect(container.querySelector('.custom-node')).toBeTruthy();
72+
expect(container.querySelector(`[data-testid="${testSlotContentId}"]`)).toBeTruthy();
73+
expect(container).toMatchSnapshot();
5674
});
5775
});
5876

59-
describe('slot', () => {
60-
it(':children', async () => {
61-
const content = 'DividerContent';
62-
const { getByText } = render(<Divider>{content}</Divider>);
63-
expect(getByText(content).textContent).toBeTruthy();
77+
it('content prop and default slot exist meanwhile', () => {
78+
const { container } = render(<Divider content="prop content">TDesign</Divider>);
79+
expect(container.textContent).toBe('prop content');
80+
});
81+
82+
describe('vertical divider', () => {
83+
it('applies dashed class on vertical divider', () => {
84+
const { container } = render(<Divider layout="vertical" dashed={true} />);
85+
expect(container.firstChild).toHaveClass('t-divider--dashed');
86+
expect(container).toMatchSnapshot();
87+
});
88+
89+
it('applies align class on vertical divider', () => {
90+
const { container } = render(
91+
<Divider layout="vertical" align="left">
92+
text
93+
</Divider>,
94+
);
95+
expect(container.firstChild).toHaveClass('t-divider--left');
96+
expect(container).toMatchSnapshot();
6497
});
6598
});
6699
});

‎src/divider/__tests__/vitest-divider.test.jsx‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

0 commit comments

Comments
 (0)