@cainiaofe/cn-ui-m
Version:
175 lines (174 loc) • 9.24 kB
JavaScript
import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import SelectDrawer from '../select-drawer';
describe('SelectDrawer', function () {
it('renders placeholder when content is empty', function () {
var getByText = render(React.createElement(SelectDrawer, null)).getByText;
expect(getByText('请选择')).toBeInTheDocument();
});
it('renders content when content is a string', function () {
var getByText = render(React.createElement(SelectDrawer, { content: "Hello World" })).getByText;
expect(getByText('Hello World')).toBeInTheDocument();
});
it('opens drawer when clicked', function () {
var getByTestId = render(React.createElement(SelectDrawer, null)).getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByTestId('select-drawer-drawer')).toBeVisible();
});
});
it('calls onOk when Ok button is clicked', function () {
var handleOk = jest.fn();
var getByTestId = render(React.createElement(SelectDrawer, { onOk: handleOk })).getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
fireEvent.click(getByTestId('select-drawer-btn-ok'));
expect(handleOk).toHaveBeenCalledTimes(1);
});
});
it('calls onCancel when Cancel button is clicked', function () {
var handleCancel = jest.fn();
var getByTestId = render(React.createElement(SelectDrawer, { onCancel: handleCancel })).getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
fireEvent.click(getByTestId('select-drawer-btn-cancel'));
expect(handleCancel).toHaveBeenCalledTimes(1);
});
});
it('calls onCancel when Clear button clicked', function () {
var handleClear = jest.fn();
var getByTestId = render(React.createElement(SelectDrawer, { hasClear: true })).getByTestId;
waitFor(function () {
fireEvent.click(getByTestId('select-drawer-clear-icon'));
expect(handleClear).toHaveBeenCalledTimes(1);
});
});
it('renders content when content is a string', function () {
var getByText = render(React.createElement(SelectDrawer, { content: "Hello World" })).getByText;
expect(getByText('Hello World')).toBeInTheDocument();
});
it('renders content when content is null', function () {
var getByText = render(React.createElement(SelectDrawer, { content: "" })).getByText;
expect(getByText('请选择')).toBeInTheDocument();
});
it('renders content when content is reactDom', function () {
var getByText = render(React.createElement(SelectDrawer, { content: React.createElement("div", null, "2222") })).getByText;
expect(getByText('2222')).toBeInTheDocument();
});
it('renders drawerTitle when drawerTitle is a string', function () {
var _a = render(React.createElement(SelectDrawer, { drawerTitle: "Hello World" })), getByText = _a.getByText, getByTestId = _a.getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByText('Hello World')).toBeInTheDocument();
});
});
// 测试iconType
it('renders iconType', function () {
render(React.createElement(SelectDrawer, { iconType: "triangle-down-fill" }));
// 使用 querySelector 和类名来选取元素
var element = document.querySelector('.cn-ui-m-icon-icon-triangle-down-fill');
// 判断元素是否存在于 document 中
expect(element).toBeInTheDocument();
});
it('renders iconType correct in filter', function () {
render(React.createElement(SelectDrawer, { insideFilter: true }));
// 使用 querySelector 和类名来选取元素
var element = document.querySelector('.cn-ui-m-icon-icon-triangle-down-fill');
// 判断元素是否存在于 document 中
expect(element).toBeInTheDocument();
});
it('renders iconType correct in not filter', function () {
render(React.createElement(SelectDrawer, null));
// 使用 querySelector 和类名来选取元素
var element = document.querySelector('.cn-ui-m-icon-icon-arrow-right');
// 判断元素是否存在于 document 中
expect(element).toBeInTheDocument();
});
it('render insideForm corrent ', function () {
render(React.createElement(SelectDrawer, { insideForm: true }));
var element = document.querySelector('.cn-ui-m-selectdrawer-form');
expect(element).toBeInTheDocument();
var element2 = document.querySelector('.cn-ui-m-selectdrawer-icon-text');
expect(element2).not.toBeInTheDocument();
});
it('render insideFilter corrent ', function () {
render(React.createElement(SelectDrawer, { insideFilter: true }));
var element = document.querySelector('.cn-ui-m-selectdrawer-filter');
expect(element).toBeInTheDocument();
var element2 = document.querySelector('.cn-ui-m-selectdrawer-content--inside-filter');
expect(element2).toBeInTheDocument();
var element3 = document.querySelector('.cn-ui-m-selectdrawer-content--overflow');
expect(element3).not.toBeInTheDocument();
});
it('call disabled corrent ', function () {
var getByTestId = render(React.createElement(SelectDrawer, { disabled: true })).getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByTestId('select-drawer-drawer')).not.toBeVisible();
});
});
it('render disabled corrent with content is empty ', function () {
render(React.createElement(SelectDrawer, { disabled: true }));
var element = document.querySelector('.cn-ui-m-selectdrawer-placeholder--disabled');
expect(element).toBeInTheDocument();
});
it('render disabled corrent with string content ', function () {
render(React.createElement(SelectDrawer, { disabled: true, content: "helllo" }));
var contentDisabledElement = document.querySelector('.cn-ui-m-selectdrawer-content-text--disabled');
expect(contentDisabledElement).toBeInTheDocument();
});
it('render readOnly corrent ', function () {
var getByTestId = render(React.createElement(SelectDrawer, { readOnly: true })).getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByTestId('select-drawer-drawer')).not.toBeVisible();
});
});
it('render notFoundContent correct with string', function () {
var _a = render(React.createElement(SelectDrawer, { notFoundContent: "\u672A\u627E\u5230" })), getByText = _a.getByText, getByTestId = _a.getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByText('未找到')).toBeInTheDocument();
});
});
it('render notFoundContent correct with dom', function () {
var _a = render(React.createElement(SelectDrawer, { notFoundContent: React.createElement("div", null, "empty") })), getByText = _a.getByText, getByTestId = _a.getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByText('empty')).toBeInTheDocument();
});
});
it('render okText correct', function () {
var _a = render(React.createElement(SelectDrawer, { okText: "\u6211\u786E\u5B9A" })), getByText = _a.getByText, getByTestId = _a.getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByText('我确定')).toBeInTheDocument();
});
});
it('render cancelText corrent', function () {
var _a = render(React.createElement(SelectDrawer, { cancelText: "\u6211\u53D6\u6D88" })), getByText = _a.getByText, getByTestId = _a.getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByText('我取消')).toBeInTheDocument();
});
});
it('render zIndex corrent', function () {
var getByTestId = render(React.createElement(SelectDrawer, { zIndex: 999 })).getByTestId;
fireEvent.click(getByTestId('select-drawer'));
waitFor(function () {
expect(getByTestId('select-drawer-drawer')).toHaveStyle('z-index: 999');
});
});
it('render size corrent', function () {
render(React.createElement(SelectDrawer, { size: "small" }));
var element = document.querySelector('.cn-ui-m-selectdrawer--small');
expect(element).toBeInTheDocument();
var contentElement = document.querySelector('.cn-ui-m-selectdrawer-content--small');
expect(contentElement).toBeInTheDocument();
});
it('render isOverflowEllipsis corrent', function () {
render(React.createElement(SelectDrawer, { isOverflowEllipsis: true, insideFilter: true }));
var element = document.querySelector('.cn-ui-m-selectdrawer-content--overflow');
expect(element).toBeInTheDocument();
});
});