@cainiaofe/cn-ui-m
Version:
70 lines (69 loc) • 3.71 kB
JavaScript
import React from 'react';
import { act, render, screen, fireEvent } from '@testing-library/react';
import { CnInput } from '../index';
import { FORM_EMPTY_CONTENT } from '@cainiaofe/cn-ui-common';
describe('CnInput', function () {
test('renders input element with the correct props', function () {
var getByPlaceholderText = render(React.createElement(CnInput, { placeholder: "Enter text" })).getByPlaceholderText;
var inputElement = getByPlaceholderText('Enter text');
expect(inputElement).toBeInTheDocument();
expect(inputElement).toHaveAttribute('type', 'text');
});
test('只读态空值渲染测试', function () {
var container = render(React.createElement(CnInput, { readOnly: true })).container;
expect(container.textContent).toContain(FORM_EMPTY_CONTENT);
});
test('只读态没有清空按钮', function () {
var container = render(React.createElement(CnInput, { hasClear: true, value: "test", readOnly: true })).container;
var element = container.querySelector('.cn-ui-m-input--icon-clear');
expect(element).toBeNull();
});
test('禁用状态无清空按钮', function () {
var container = render(React.createElement(CnInput, { hasClear: true, disabled: true, value: "test" })).container;
var element = container.querySelector('.cn-ui-m-input--icon-clear');
expect(element).toBeNull();
});
test('测试 CnInput 输入内容', function () {
render(React.createElement(CnInput, null));
var inputElement = screen.getByTestId('cn-input__input');
// 模拟用户输入
fireEvent.change(inputElement, { target: { value: 'test input' } });
// 断言输入结果
expect(inputElement.value).toBe('test input');
});
test('测试 CnInput 输入内容超出被限制是否成功', function () {
render(React.createElement(CnInput, { maxLength: 10 }));
var inputElement = screen.getByTestId('cn-input__input');
// 模拟用户输入
fireEvent.change(inputElement, { target: { value: 'test input is ok' } });
// 断言输入结果
expect(inputElement.value).toBe('test input');
});
test('测试 CnInput 聚焦、失焦后，className 逻辑是否正常', function () {
render(React.createElement(CnInput, { highlightable: true }));
var inputElement = screen.getByTestId('cn-input__input');
// 模拟聚焦事件
fireEvent.focus(inputElement);
var parentElement = screen.getByTestId('cn-input');
expect(parentElement).toHaveClass('cn-ui-m-input--highlighted');
// 失去焦点后，className 消失
fireEvent.blur(inputElement);
expect(parentElement).not.toHaveClass('cn-ui-m-input--highlighted');
});
test('测试 ref api 是否正常工作', function () {
var _a, _b, _c;
var ref = React.createRef();
var value = 'test';
act(function () {
render(React.createElement(CnInput, { highlightable: true, defaultValue: value, ref: ref }));
});
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
var parentElement = screen.getByTestId('cn-input');
var inputElement = screen.getByTestId('cn-input__input');
expect(parentElement).toHaveClass('cn-ui-m-input--highlighted');
(_b = ref.current) === null || _b === void 0 ? void 0 : _b.blur();
expect(parentElement).not.toHaveClass('cn-ui-m-input--highlighted');
var nativeElement = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.nativeElement;
expect(inputElement).toEqual(nativeElement);
});
});