From fece5d5dd27637960a6687f18163cc4b64ba5118 Mon Sep 17 00:00:00 2001
From: Muxing Lin <61750044+ivalkshfoeif@users.noreply.github.com>
Date: Thu, 22 Jun 2023 14:38:03 -0700
Subject: [PATCH] [MM-23413] : Migrate "components/list_modal.test.jsx" to
 Typescript (#23655)

---
 ...test.jsx.snap => list_modal.test.tsx.snap} | 12 +++----
 ...ist_modal.test.jsx => list_modal.test.tsx} | 36 +++++++++++--------
 2 files changed, 28 insertions(+), 20 deletions(-)
 rename webapp/channels/src/components/__snapshots__/{list_modal.test.jsx.snap => list_modal.test.tsx.snap} (96%)
 rename webapp/channels/src/components/{list_modal.test.jsx => list_modal.test.tsx} (70%)

diff --git a/webapp/channels/src/components/__snapshots__/list_modal.test.jsx.snap b/webapp/channels/src/components/__snapshots__/list_modal.test.tsx.snap
similarity index 96%
rename from webapp/channels/src/components/__snapshots__/list_modal.test.jsx.snap
rename to webapp/channels/src/components/__snapshots__/list_modal.test.tsx.snap
index b7053a4df3..5796fb618c 100644
--- a/webapp/channels/src/components/__snapshots__/list_modal.test.jsx.snap
+++ b/webapp/channels/src/components/__snapshots__/list_modal.test.tsx.snap
@@ -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
diff --git a/webapp/channels/src/components/list_modal.test.jsx b/webapp/channels/src/components/list_modal.test.tsx
similarity index 70%
rename from webapp/channels/src/components/list_modal.test.jsx
rename to webapp/channels/src/components/list_modal.test.tsx
index 8de3d14271..74f065bf00 100644
--- a/webapp/channels/src/components/list_modal.test.jsx
+++ b/webapp/channels/src/components/list_modal.test.tsx
@@ -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);