test(Steps): 迁移 #3757 测试

Author: RSS1102

packages/components/steps/__tests__/steps.branches.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, waitFor } from '@test/utils';
+import { vi } from 'vitest';
+import Steps from '../Steps';
+import StepItem from '../StepItem';
+
+const TEST_ROOT_ID = 'step-test-branches';
+
+describe('Steps branches', () => {
+  test('options reverse order and index mapping', async () => {
+    const opts = [
+      { title: 'first', content: 'c1', value: 0 },
+      { title: 'second', content: 'c2', value: 1 },
+      { title: 'third', content: 'c3', value: 2 },
+    ];
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <Steps options={opts} sequence="reverse" current={1} />
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    const titles = Array.from(root.querySelectorAll('.t-steps-item__title')).map((n) => n.textContent);
+    // when reverse, display order should be same length but titles still present
+    expect(titles.length).toBe(3);
+    expect(titles).toContain('first');
+    expect(titles).toContain('second');
+    expect(titles).toContain('third');
+  });
+
+  test('children cloneElement branch and FINISH current', async () => {
+    const onChange = vi.fn?.() ?? (() => undefined);
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <Steps current={'FINISH'} onChange={onChange}>
+          <StepItem title="A" content="a" value={0} />
+          <StepItem title="B" content="b" value={1} />
+        </Steps>
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    // all items should be finish
+    const finish = root.querySelectorAll('.t-steps-item--finish');
+    expect(finish.length).toBe(2);
+  });
+
+  test('StepItem default icon number rendered when icon=true and theme=default', async () => {
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <Steps current={0}>
+          <StepItem title="X" content="x" index={0} icon={true as any} status={'default'} />
+        </Steps>
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    const number = root.querySelector('.t-steps-item__icon--number');
+    expect(number).not.toBeNull();
+    expect(number).toHaveTextContent('1');
+  });
+});

packages/components/steps/__tests__/steps.extra.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, waitFor, fireEvent, vi } from '@test/utils';
+import Steps from '../Steps';
+import StepItem from '../StepItem';
+import StepsContext from '../StepsContext';
+
+const TEST_ROOT_ID = 'step-test-root-extra';
+
+const defaultOptions = [
+  { title: '0', content: '这里', value: 0 },
+  { title: '1', content: '这里', value: 1 },
+  { title: '2', content: '这里', value: 2 },
+];
+
+describe('Steps extra branches', () => {
+  test("current='FINISH' -> all items finish (options)", async () => {
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <Steps current={'FINISH'} options={defaultOptions} />
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    const finishes = root.querySelectorAll('.t-steps-item--finish');
+    expect(finishes.length).toBe(defaultOptions.length);
+  });
+
+  test('item.status override (error) renders error class', async () => {
+    const opts = [
+      { title: 'a', content: 'a', value: 0, status: 'error' as any },
+      { title: 'b', content: 'b', value: 1 },
+    ];
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <Steps current={0} options={opts} />
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    const errorItem = root.querySelector('.t-steps-item--error');
+    expect(errorItem).not.toBeNull();
+  });
+
+  test('current value not exist triggers console.warn and defaults to wait', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+    const opts = [
+      { title: 'a', content: 'a', value: 'a' },
+      { title: 'b', content: 'b', value: 'b' },
+    ];
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <Steps current={'not-exist'} options={opts as any} />
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    expect(warnSpy).toHaveBeenCalledWith('TDesign Steps Warn: The current `value` is not exist.');
+    const waitItems = root.querySelectorAll('.t-steps-item--wait');
+    // both should be in default/wait state
+    expect(waitItems.length).toBe(opts.length);
+    warnSpy.mockRestore();
+  });
+
+  test('status=process prevents click triggering onChange', async () => {
+    const onChange = vi.fn();
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <StepsContext.Provider value={{ current: 0, theme: 'default', readonly: false, onChange }}>
+          <StepItem title="t" index={0} status={'process'} />
+        </StepsContext.Provider>
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    const inner = root.querySelector('.t-steps-item__inner');
+    fireEvent.click(inner);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test('icon=false results in no icon content', async () => {
+    const { getByTestId } = render(
+      <div data-testid={TEST_ROOT_ID}>
+        <StepsContext.Provider value={{ current: 0, theme: 'default', readonly: false, onChange: null }}>
+          <StepItem title="t" index={0} status={'default'} icon={false as any} />
+        </StepsContext.Provider>
+      </div>,
+    );
+    const root = await waitFor(() => getByTestId(TEST_ROOT_ID));
+    const icon = root.querySelector('.t-steps-item__icon');
+    // icon container exists but should have no child nodes when icon=false
+    expect(icon).not.toBeNull();
+    expect(icon.childNodes.length).toBe(0);
+  });
+});