@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
74 lines • 1.96 kB
JavaScript
import React from 'react';
import { render } from '@testing-library/react';
import MultiSelect from "../MultiSelect";
const options = [{
id: 1,
text: 'custom 1',
optionType: 'custom'
}, {
id: 2,
text: 'custom 2',
optionType: 'custom'
}, {
id: 3,
text: 'custom 3',
optionType: 'custom'
}, {
id: 4,
text: 'custom 4',
optionType: 'custom'
}, {
id: 5,
text: 'custom 5',
optionType: 'custom'
}, {
id: 6,
text: 'custom 6',
optionType: 'custom'
}, {
id: 7,
text: 'custom 7',
optionType: 'custom'
}];
const testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
const testSelectedData = ['text1', 'text2', 'text3'];
describe('MultiSelect', () => {
test('rendering the defult props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(MultiSelect, null));
expect(asFragment()).toMatchSnapshot();
});
test('Should render with renderCustomSelectedValue', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(MultiSelect, {
options: options,
renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "MultiSelect Custom Value")
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering with limit feature', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(MultiSelect, {
valueField: "id",
textField: "text",
options: testData,
selectedOptions: testSelectedData,
needSelectAll: true,
selectAllText: "Select All",
placeHolder: "Select Text",
i18nKeys: {
clearText: 'Clear Selected Items',
loadingText: 'Fetching...',
emptyText: 'No Options .',
noMoreText: 'No More Options .',
searchEmptyText: 'No Matches Found .'
},
needResponsive: true,
limit: 3
}));
expect(asFragment()).toMatchSnapshot();
});
});