@cainiaofe/cn-ui-m
Version:
219 lines (218 loc) • 11.2 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import React from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { CnListPro, CnListProItem } from '../index';
describe('CnListPro', function () {
test('renders without crashing', function () {
var container = render(React.createElement(CnListPro, null)).container;
expect(container.querySelector('.cn-ui-m-list-pro')).toBeInTheDocument();
});
test('renders correct number of CnListProItem components', function () {
var dataSource = [{ key: '1' }, { key: '2' }, { key: '3' }];
var container = render(React.createElement(CnListPro, { dataSource: dataSource })).container;
expect(Array.from(container.querySelectorAll('.cn-ui-m-list-pro-item'))).toHaveLength(dataSource.length);
});
jest.mock('../view/cn-list-pro-item', function () {
return {
CnListProItem: jest.fn(function (_a) {
var itemKey = _a.itemKey;
return (React.createElement("div", { "data-testid": "cn-list-pro-item", "data-item-key": itemKey }));
}),
};
});
test('passes itemKey prop to CnListProItem components', function () { return __awaiter(void 0, void 0, void 0, function () {
var dataSource, onChange, getByText, Item;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
dataSource = [
{ id: '1', title: 'test1' },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
];
onChange = jest.fn();
getByText = render(React.createElement(CnListPro, { dataSource: dataSource, itemKey: "id", rowSelection: { onChange: onChange, type: 'multiple' } })).getByText;
Item = getByText('test1').parentNode.parentNode.querySelector('.cn-ui-m-checkbox-circle');
fireEvent.click(Item);
return [4 /*yield*/, waitFor(function () {
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith({ id: '1', title: 'test1' }, ['1'], [{ id: '1', title: 'test1' }]);
})];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); });
test('passes rowSelection prop to CnListProContext.Provider', function () {
var rowSelection = { onChange: jest.fn() };
render(React.createElement(CnListPro, { rowSelection: rowSelection }));
// Test that rowSelection.onChange is called when a CnListProItem is clicked
});
test('renders children when dataSource prop is not provided', function () {
render(React.createElement(CnListPro, null,
React.createElement("div", { "data-testid": "child" }, "Child")));
expect(screen.getByTestId('child')).toBeInTheDocument();
});
test('passes rowSelection multiple', function () { return __awaiter(void 0, void 0, void 0, function () {
var dataSource, onChange, getByText, Item;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
dataSource = [
{ id: '1', title: 'test1' },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
];
onChange = jest.fn();
getByText = render(React.createElement(CnListPro, { dataSource: dataSource, itemKey: "id", rowSelection: { onChange: onChange, type: 'multiple' } })).getByText;
Item = getByText('test1').parentNode.parentNode.querySelector('.cn-ui-m-checkbox-circle');
fireEvent.click(Item);
return [4 /*yield*/, waitFor(function () {
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith({ id: '1', title: 'test1' }, ['1'], [{ id: '1', title: 'test1' }]);
})];
case 1:
_a.sent();
fireEvent.click(Item);
return [4 /*yield*/, waitFor(function () {
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenCalledWith({ id: '1', title: 'test1' }, [], []);
})];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); });
test('passes rowSelection single', function () { return __awaiter(void 0, void 0, void 0, function () {
var dataSource, onChange, getByText, Item;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
dataSource = [
{ id: '1', title: 'test1' },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
];
onChange = jest.fn();
getByText = render(React.createElement(CnListPro, { dataSource: dataSource, itemKey: "id", rowSelection: { onChange: onChange, type: 'single' } })).getByText;
Item = getByText('test1').parentNode.parentNode.querySelector('.cn-ui-m-radio-circle');
fireEvent.click(Item);
return [4 /*yield*/, waitFor(function () {
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith({ id: '1', title: 'test1' }, ['1'], [{ id: '1', title: 'test1' }]);
})];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); });
test('renderItem prop', function () {
var dataSource = [
{ id: '1', title: 'test1' },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
];
var getByText = render(React.createElement(CnListPro, { dataSource: dataSource, renderItem: function (item) {
return React.createElement(CnListProItem, { title: item.title });
} })).getByText;
expect(getByText('test1')).toBeInTheDocument();
});
test('click rowSelection', function () {
var dataSource = [
{ id: '1', title: 'test1', disabled: true },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
];
var handleClickMock = jest.fn();
var getByText = render(React.createElement(CnListPro, { dataSource: dataSource, renderItem: function (item) {
return (React.createElement(CnListProItem, { title: item.title, onClick: handleClickMock, disabled: item.disabled }));
} })).getByText;
var item1 = getByText('test1');
fireEvent.click(item1);
expect(handleClickMock).toHaveBeenCalledTimes(0);
var item2 = getByText('test2');
fireEvent.click(item2);
expect(handleClickMock).toHaveBeenCalledTimes(1);
});
test('render imagePosition equal top correctly', function () {
var dataSource = [
{ id: '1', title: 'test1', disabled: true },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
];
var getByText = render(React.createElement(CnListPro, { dataSource: dataSource, imagePosition: "top", renderItem: function (item) {
return React.createElement(CnListProItem, { title: item.title, imagePosition: "top" });
} })).getByText;
expect(getByText('test1')).toBeInTheDocument();
});
test('ref bind correctly', function () {
var ref = React.createRef();
var dataSource = [
{ id: '1', title: 'test1', disabled: true },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
];
render(React.createElement(CnListPro, { ref: ref, dataSource: dataSource, imagePosition: "top", renderItem: function (item) {
return React.createElement(CnListProItem, { title: item.title, imagePosition: "top" });
} }));
expect(ref.current).not.toBeNull();
});
test('render loading correctly', function () {
var container = render(React.createElement(CnListPro, { loading: true })).container;
expect(container.querySelector('.cn-ui-m-loading')).toBeInTheDocument();
});
test('render pagination correctly', function () {
var pagination = {
totalCount: 100,
pageSize: 20,
currentPage: 1,
};
var container = render(React.createElement(CnListPro, { loading: false, pagination: pagination })).container;
expect(container.querySelector('.cn-ui-m-scroll-view')).toBeInTheDocument();
});
test('render empty correctly', function () {
var container = render(React.createElement(CnListPro, { loading: false })).container;
expect(container.querySelector('.cn-result-type-empty')).toBeInTheDocument();
});
test('pagination works correctly', function () {
var mockFn = jest.fn();
var dataSource = [
{ id: '1', title: 'test1', disabled: true },
{ id: '2', title: 'test2' },
{ id: '3', title: 'test3' },
{ id: '4', title: 'test4' },
{ id: '5', title: 'test5' },
];
var pagination = {
totalCount: 100,
pageSize: 5,
currentPage: 1,
onChange: mockFn,
};
render(React.createElement(CnListPro, { loading: false, dataSource: dataSource, pagination: pagination }));
waitFor(function () {
expect(mockFn).toHaveBeenCalledTimes(1);
});
});
test('should call onClick when an item is clicked', function () {
var onClickMock = jest.fn();
var getByText = render(React.createElement(CnListPro, null,
React.createElement(CnListProItem, { title: "\u6807\u98981", description: "\u63CF\u8FF01", avatar: "\u5934\u50CF1", actions: "actions1", extra: "\u989D\u59161", key: "1", onClick: onClickMock }))).getByText;
var firstItem = getByText('标题1');
fireEvent.click(firstItem);
// 验证 onClick 是否被调用
expect(onClickMock).toHaveBeenCalledTimes(1);
});
test('should call onClickCapture when an item is clicked', function () {
var onClickCaptureMock = jest.fn();
var getByText = render(React.createElement(CnListPro, null,
React.createElement(CnListProItem, { title: "\u6807\u98981", description: "\u63CF\u8FF01", avatar: "\u5934\u50CF1", actions: "actions1", extra: "\u989D\u59161", key: "1", onClickCapture: onClickCaptureMock }))).getByText;
var firstItem = getByText('标题1');
fireEvent.click(firstItem);
// 验证 onClick 是否被调用
expect(onClickCaptureMock).toHaveBeenCalledTimes(1);
});
});