xx
@@ -997,28 +908,25 @@ exports[`Steps render renders step with description and status 1`] = `
class="rc-steps-item rc-steps-item-finish"
>
-
-
-
+ />
xx
@@ -1028,7 +936,7 @@ exports[`Steps render renders step with description and status 1`] = `
`;
-exports[`Steps render renders step with tailContent 1`] = `
+exports[`Steps render renders stepIcon function correctly 1`] = `
@@ -1036,34 +944,25 @@ exports[`Steps render renders step with tailContent 1`] = `
class="rc-steps-item rc-steps-item-process rc-steps-item-active"
>
-
- text
-
-
- 1
-
-
+ />
@@ -1072,36 +971,25 @@ exports[`Steps render renders step with tailContent 1`] = `
class="rc-steps-item rc-steps-item-wait"
>
@@ -1110,34 +998,25 @@ exports[`Steps render renders step with tailContent 1`] = `
class="rc-steps-item rc-steps-item-wait"
>
@@ -1146,34 +1025,22 @@ exports[`Steps render renders step with tailContent 1`] = `
class="rc-steps-item rc-steps-item-wait"
>
-
- text
-
-
- 4
-
-
+ />
@@ -1181,121 +1048,112 @@ exports[`Steps render renders step with tailContent 1`] = `
`;
-exports[`Steps render renders step with type inline 1`] = `
+exports[`Steps render renders vertical correctly 1`] = `
-
-
-
-
-
+ />
- Step 1
-
-
- This is a description.
+
+ 已完成
+
+
-
-
-
-
-
+ />
- Step 2
-
-
- This is a description.
+
+ 进行中
+
+
+
+
+
+
+
- Step 3
-
-
- This is a description.
+
+ 待运行
+
@@ -1303,499 +1161,135 @@ exports[`Steps render renders step with type inline 1`] = `
`;
-exports[`Steps render renders step with type navigation 1`] = `
+exports[`Steps render renders with falsy children 1`] = `
-
-
-
+ />
- Step 1
- 剩余 00:00:05 超长隐藏
+ 已完成
+
- This is a description.
+ xx
-
-
- 2
-
-
+ />
- Step 2
+
+ 进行中
+
+
+ 剩余 00:00:07
+
+
- This is a description.
+ xx
-
-
- 3
-
-
+ />
- This is a description.
-
-
-
-
-
-`;
-
-exports[`Steps render renders stepIcon function correctly 1`] = `
-
-`;
-
-exports[`Steps render renders vertical correctly 1`] = `
-
-`;
-
-exports[`Steps render renders with falsy children 1`] = `
-
-
-
-
-
-
- 2
-
-
-
- 进行中
- 剩余 00:00:07
+ 待运行
- xx
-
-
-
-
-
-
-
-
-
-
-
-
-
- 待运行
-
-
xx
@@ -1805,138 +1299,6 @@ exports[`Steps render renders with falsy children 1`] = `
`;
-exports[`Steps render should render svg finishIcon and errorIcon correctly 1`] = `
-
-
-
-
-
-
-
- Finished
-
-
- This is a description
-
-
-
-
-
-
-
-
-
-
- In Process
-
-
- This is a description
-
-
-
-
-
-
-
-
-
- 3
-
-
-
-
- Waiting
-
-
- This is a description
-
-
-
-
-
-`;
-
exports[`Steps should render customIcon correctly 1`] = `
@@ -1976,25 +1334,25 @@ exports[`Steps should render customIcon correctly 1`] = `
class="rc-steps-item rc-steps-item-process rc-steps-item-custom rc-steps-item-active"
>
@@ -2003,25 +1361,22 @@ exports[`Steps should render customIcon correctly 1`] = `
class="rc-steps-item rc-steps-item-wait rc-steps-item-custom"
>
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 413c859f..f0a2d034 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -1,10 +1,11 @@
import React from 'react';
-import { render, fireEvent, createEvent } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
import Steps from '../src';
describe('Steps', () => {
describe('render', () => {
- let description = 'xx';
+ const description = 'xx';
+
const setSteps = (props) => (
{
);
expect(container.firstChild).toMatchSnapshot();
});
-
- it('renders step with tailContent', () => {
- const { container } = render(
- content ,
- },
- {
- title: '待运行',
- description,
- tailContent: 3,
- },
- {
- title: '待运行',
- description,
- tailContent: 'text',
- },
- ]}
- />,
- );
- expect(container.firstChild).toMatchSnapshot();
- });
-
- it('renders step with type navigation', () => {
- description = 'This is a description.';
- const { container } = render(
-
{}}
- items={[
- {
- title: 'Step 1',
- subTitle: '剩余 00:00:05 超长隐藏',
- description,
- },
- {
- title: 'Step 2',
- description,
- },
- {
- title: 'Step 3',
- description,
- disabled: true,
- },
- ]}
- />,
- );
- expect(container.firstChild).toMatchSnapshot();
- });
-
- it('renders step with type inline', () => {
- description = 'This is a description.';
- const { container } = render(
- {}}
- items={[
- {
- title: 'Step 1',
- description,
- },
- {
- title: 'Step 2',
- description,
- },
- {
- title: 'Step 3',
- description,
- disabled: true,
- },
- ]}
- itemRender={(item, stepItem) => React.cloneElement(stepItem, { title: item.description })}
- />,
- );
- expect(container.firstChild).toMatchSnapshot();
- });
-
- function getFinishIcon() {
- const path =
- 'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' +
- '5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139' +
- '.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5' +
- '-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 ' +
- '55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33' +
- '.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99' +
- '.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.' +
- '7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 10' +
- '1.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 ' +
- '20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z';
- return (
-
- );
- }
-
- function getErrorIcon() {
- const path1 =
- 'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' +
- '.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 9' +
- '4.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99' +
- '.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.' +
- '4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-4' +
- '0.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 3' +
- '4.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C' +
- '940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 9' +
- '9.5-94.4 139.9z';
- const path2 =
- 'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' +
- '.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0' +
- '-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36' +
- '-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382' +
- '.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z';
- return (
-
- );
- }
- it('should render svg finishIcon and errorIcon correctly', () => {
- const icons = {
- finish: getFinishIcon(),
- error: getErrorIcon(),
- };
- const { container } = render(
- ,
- );
- expect(container.firstChild).toMatchSnapshot();
- });
});
it('should render customIcon correctly', () => {
@@ -380,7 +210,7 @@ describe('Steps', () => {
]}
/>,
);
- const items = container.querySelectorAll('.rc-steps-item-container');
+ const items = container.querySelectorAll('.rc-steps-item-wrapper');
fireEvent.click(items[1]);
expect(onChange).toBeCalledWith(1);
});
@@ -403,7 +233,7 @@ describe('Steps', () => {
,
);
- const step = container.querySelectorAll('.rc-steps-item-container')[1];
+ const step = container.querySelectorAll('.rc-steps-item-wrapper')[1];
fireEvent.click(step);
rerender();
expect(container.querySelectorAll('.rc-steps-item')[1].classList).toContain(
@@ -435,7 +265,7 @@ describe('Steps', () => {
/>,
);
- const btn = container.querySelectorAll('.rc-steps-item-container')[0];
+ const btn = container.querySelectorAll('.rc-steps-item-wrapper')[0];
fireEvent.click(btn);
expect(onClick).toHaveBeenCalled();
});
@@ -446,7 +276,7 @@ describe('Steps', () => {
,
);
- const items = container.querySelectorAll('.rc-steps-item-container');
+ const items = container.querySelectorAll('.rc-steps-item-wrapper');
fireEvent.click(items[2]);
expect(onChange).not.toBeCalled();
});
@@ -475,4 +305,43 @@ describe('Steps', () => {
expect(onChange).toHaveBeenCalledWith(1);
});
+
+ it('itemRender', () => {
+ const { container } = render(
+ {
+ return {oriNode}
;
+ }}
+ />,
+ );
+
+ expect(container.querySelector('.bamboo')).toBeTruthy();
+ expect(container.querySelectorAll('.bamboo')).toHaveLength(1);
+ expect(container.querySelector('.rc-steps-item')).toBeTruthy();
+ });
+
+ it('itemWrapperRender', () => {
+ const { container } = render(
+ {
+ return {oriNode}
;
+ }}
+ />,
+ );
+
+ expect(container.querySelector('.bamboo')).toBeTruthy();
+ expect(container.querySelectorAll('.bamboo')).toHaveLength(1);
+ expect(container.querySelector('.rc-steps-item')).toBeTruthy();
+ expect(container.querySelector('.rc-steps-item > .bamboo')).toBeTruthy();
+ });
});
diff --git a/tests/semantic.test.tsx b/tests/semantic.test.tsx
new file mode 100644
index 00000000..d84b7355
--- /dev/null
+++ b/tests/semantic.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Steps, { type StepsProps } from '../src';
+import type { SemanticName } from '../src/Steps';
+
+describe('Steps.Semantic', () => {
+ const renderSteps = (props: Partial) => (
+ ({
+ title: `Step ${index + 1}`,
+ subTitle: `SubTitle ${index + 1}`,
+ description: `Description ${index + 1}`,
+ }))}
+ {...props}
+ />
+ );
+
+ it('semantic structure', () => {
+ const classNames: Record = {
+ root: 'custom-root',
+ item: 'custom-item',
+ itemWrapper: 'custom-item-wrapper',
+ itemIcon: 'custom-item-icon',
+ itemSection: 'custom-item-section',
+ itemHeader: 'custom-item-header',
+ itemTitle: 'custom-item-title',
+ itemSubtitle: 'custom-item-subtitle',
+ itemContent: 'custom-item-content',
+ itemRail: 'custom-item-rail',
+ };
+
+ const classNamesTargets: Record = {
+ root: 'rc-steps',
+ item: 'rc-steps-item',
+ itemWrapper: 'rc-steps-item-wrapper',
+ itemIcon: 'rc-steps-item-icon',
+ itemSection: 'rc-steps-item-section',
+ itemHeader: 'rc-steps-item-header',
+ itemTitle: 'rc-steps-item-title',
+ itemSubtitle: 'rc-steps-item-subtitle',
+ itemContent: 'rc-steps-item-content',
+ itemRail: 'rc-steps-item-rail',
+ };
+
+ const styles: Record> = {
+ root: { color: 'red' },
+ item: { color: 'blue' },
+ itemWrapper: { color: 'green' },
+ itemIcon: { color: 'yellow' },
+ itemSection: { color: 'purple' },
+ itemHeader: { color: 'orange' },
+ itemTitle: { color: 'pink' },
+ itemSubtitle: { color: 'cyan' },
+ itemContent: { color: 'magenta' },
+ itemRail: { color: 'lime' },
+ };
+
+ const { container } = render(
+ renderSteps({
+ classNames,
+ styles,
+ }),
+ );
+
+ Object.keys(classNames).forEach((key) => {
+ const className = classNames[key as SemanticName];
+ const oriClassName = classNamesTargets[key as SemanticName];
+ const style = styles[key as SemanticName];
+
+ const element = container.querySelector(`.${className}`);
+ expect(element).toBeTruthy();
+ expect(element).toHaveClass(oriClassName);
+ expect(element).toHaveStyle(style);
+ });
+ });
+});