IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-23413] : Migrate "components/list_modal.test.jsx" to Typescript (#23655)

Browse Source
This commit is contained in:
Muxing Lin 2023-06-22 14:38:03 -07:00 committed by GitHub
parent c1eb9c01ab
commit fece5d5dd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/channels/src/components/__snapshots__/list_modal.test.jsx.snap → webapp/channels/src/components/__snapshots__/list_modal.test.tsx.snap
View File

@ -41,7 +41,7 @@ exports[`components/ListModal should match snapshot 1`] = `
<span
className="name"
>
foo list modal
list modal
</span>
</ModalTitle>
</ModalHeader>
@ -62,13 +62,13 @@ exports[`components/ListModal should match snapshot 1`] = `
className="hidden-label"
htmlFor="searchUsersInput"
>
search for foos
search for name
</label>
<input
className="form-control filter-textbox"
id="searchUsersInput"
onChange={[Function]}
placeholder="search for foos"
placeholder="search for name"
/>
</div>
<div
@ -153,7 +153,7 @@ exports[`components/ListModal should match snapshot with title bar button 1`] =
<span
className="name"
>
foo list modal
list modal
</span>
</ModalTitle>
</ModalHeader>
@ -174,13 +174,13 @@ exports[`components/ListModal should match snapshot with title bar button 1`] =
className="hidden-label"
htmlFor="searchUsersInput"
>
search for foos
search for name
</label>
<input
className="form-control filter-textbox"
id="searchUsersInput"
onChange={[Function]}
placeholder="search for foos"
placeholder="search for name"
/>
</div>
<div

36
webapp/channels/src/components/list_modal.test.jsx → webapp/channels/src/components/list_modal.test.tsx
View File

@ -4,17 +4,22 @@
import React from 'react';
import {shallow} from 'enzyme';
import ListModal from './list_modal';
import ListModal, {DEFAULT_NUM_PER_PAGE} from './list_modal';
import {Group} from '@mattermost/types/groups';
import {TestHelper} from 'utils/test_helper';
describe('components/ListModal', () => {
const mockItems = [{id: '123', foo: 'bar31'}, {id: '234', foo: 'bar2'}];
const mockItemsPage2 = [{id: '123', foo: 'bar3'}];
const mockItem1 = TestHelper.getGroupMock({id: '123', name: 'bar31'});
const mockItem2 = TestHelper.getGroupMock({id: '234', name: 'bar2'});
const mockItem3 = TestHelper.getGroupMock({id: '345', name: 'bar3'});
const mockItems = [mockItem1, mockItem2];
const mockItemsPage2 = [mockItem3];
const mockSearchTerm = 'ar3';
const mockItemsSearch = mockItems.concat(mockItemsPage2).filter((item) => item.foo.includes(mockSearchTerm));
const mockItemsSearch = mockItems.concat(mockItemsPage2).filter((item) => item.name.includes(mockSearchTerm));
const totalCount = mockItems.length + mockItemsPage2.length;
const baseProps = {
loadItems: async (pageNumber, searchTerm) => {
loadItems: async (pageNumber: number, searchTerm: string) => {
if (searchTerm === mockSearchTerm) {
return {items: mockItemsSearch, totalCount};
}
@ -23,18 +28,21 @@ describe('components/ListModal', () => {
}
return {items: mockItemsPage2, totalCount};
},
renderRow: (item) => {
renderRow: (item: Group) => {
return (
<div
className='item'
key={item.id}
>
{item.foo}
{item.id}
</div>
);
},
titleText: 'foo list modal',
searchPlaceholderText: 'search for foos',
titleText: 'list modal',
searchPlaceholderText: 'search for name',
numPerPage: DEFAULT_NUM_PER_PAGE,
titleBarButtonText: 'DEFAULT',
titleBarButtonTextOnClick: () => {},
};
it('should match snapshot', () => {
@ -45,7 +53,7 @@ describe('components/ListModal', () => {
setTimeout(() => {
expect(wrapper.state('items')).toEqual(mockItems);
expect(wrapper.state('totalCount')).toEqual(totalCount);
expect(wrapper.state('numPerPage')).toEqual(ListModal.DEFAULT_NUM_PER_PAGE);
expect(wrapper.state('numPerPage')).toEqual(DEFAULT_NUM_PER_PAGE);
}, 0);
});
@ -77,7 +85,7 @@ describe('components/ListModal', () => {
const wrapper = shallow(
<ListModal {...props}/>,
);
wrapper.instance().handleExit();
(wrapper.instance() as ListModal).handleExit();
expect(onHide).toHaveBeenCalledTimes(1);
});
@ -85,12 +93,12 @@ describe('components/ListModal', () => {
const wrapper = shallow(
<ListModal {...baseProps}/>,
);
wrapper.instance().onNext();
(wrapper.instance() as ListModal).onNext();
setTimeout(() => {
expect(wrapper.state('page')).toEqual(1);
expect(wrapper.state('items')).toEqual(mockItemsPage2);
}, 0);
wrapper.instance().onPrev();
(wrapper.instance() as ListModal).onPrev();
setTimeout(() => {
expect(wrapper.state('page')).toEqual(0);
expect(wrapper.state('items')).toEqual(mockItems);
@ -101,7 +109,7 @@ describe('components/ListModal', () => {
const wrapper = shallow(
<ListModal {...baseProps}/>,
);
wrapper.instance().onSearchInput({target: {value: mockSearchTerm}});
(wrapper.instance() as ListModal).onSearchInput({target: {value: mockSearchTerm}} as React.ChangeEvent<HTMLInputElement>);
setTimeout(() => {
expect(wrapper.state('searchTerm')).toEqual(mockSearchTerm);
expect(wrapper.state('items')).toEqual(mockItemsSearch);