@cainiaofe/cn-ui-m
Version:
46 lines (45 loc) • 2.96 kB
JavaScript
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { CnStep, CnStepItem } from '../index';
describe('CnStep', function () {
it('renders the step container correctly', function () {
var _a = render(React.createElement(CnStep, { direction: "hoz", shape: "circle", disabled: false },
React.createElement(CnStepItem, { title: "Step 1" }),
React.createElement(CnStepItem, { title: "Step 2" }),
React.createElement(CnStepItem, { title: "Step 3" }))), getByText = _a.getByText, container = _a.container;
expect(getByText('Step 1')).toBeInTheDocument();
expect(container.firstChild.firstChild).toHaveClass('cn-ui-m-step-container--hoz');
expect(container.firstChild.firstChild.firstChild).toHaveClass('cn-ui-m-step-item--shape-circle');
});
it('renders the step items correctly', function () {
render(React.createElement(CnStep, { direction: "hoz", shape: "circle", disabled: false },
React.createElement(CnStepItem, { title: "Step 1" }),
React.createElement(CnStepItem, { title: "Step 2" }),
React.createElement(CnStepItem, { title: "Step 3" })));
var stepItems = screen.getAllByTestId('cn-step-item');
expect(stepItems).toHaveLength(3);
expect(stepItems[0]).toHaveTextContent('Step 1');
expect(stepItems[0]).toHaveClass('cn-ui-m-step-item--hoz');
expect(stepItems[0]).toHaveClass('cn-ui-m-step-item--shape-circle');
expect(stepItems[0]).toHaveClass('cn-ui-m-step-item--wait');
expect(stepItems[1]).toHaveTextContent('Step 2');
expect(stepItems[1]).toHaveClass('cn-ui-m-step-item--hoz');
expect(stepItems[1]).toHaveClass('cn-ui-m-step-item--shape-circle');
expect(stepItems[1]).toHaveClass('cn-ui-m-step-item--wait');
expect(stepItems[2]).toHaveTextContent('Step 3');
expect(stepItems[2]).toHaveClass('cn-ui-m-step-item--hoz');
expect(stepItems[2]).toHaveClass('cn-ui-m-step-item--shape-circle');
expect(stepItems[2]).toHaveClass('cn-ui-m-step-item--wait');
});
it('changes the step status on click', function () {
render(React.createElement(CnStep, { shape: "circle", current: 1 },
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 1", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 2", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 3", content: "error\u72B6\u6001\u63CF\u8FF0\u6587\u6848" })));
var stepItems = screen.getAllByTestId('cn-step-item');
fireEvent.click(stepItems[1]);
expect(stepItems[0]).toHaveClass('cn-ui-m-step-item--finish');
expect(stepItems[1]).toHaveClass('cn-ui-m-step-item--process');
expect(stepItems[2]).toHaveClass('cn-ui-m-step-item--wait');
});
});