feat: add multiSearchInput test

DTStack · Aug 11, 2020 · c0fcb43 · c0fcb43
1 parent d736d1b
commit c0fcb43
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 9 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -4,7 +4,9 @@ module.exports = {
     globals: {
     },
     // setupFilesAfterEnv: ["./setupTests.js"], // enzyme adapter
-    transformIgnorePatterns: ["/node_modules/", "lib", "dist"],
+    transformIgnorePatterns: ["/node_modules/",  "dist"
+    // "lib",
+],
     testPathIgnorePatterns: ['/node_modules/'],
     transform: {
         "^.+\\.[jt]s?(x)$": "babel-jest"

diff --git a/src/components/multiSearchInput/__tests__/multiSearchInput.test.tsx b/src/components/multiSearchInput/__tests__/multiSearchInput.test.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { render, fireEvent, cleanup } from '@testing-library/react'
+import MulSelectDropdown from '../index';
+
+describe('mulSelectDropdown Component test', () => {
+    afterEach(() => {
+        cleanup()
+    })
+    it('custom filter rendering', () => {
+        const { queryByTestId } = render(<MulSelectDropdown filterOptions={['front', 'tail']}/>)
+        expect(queryByTestId('icon-front')).not.toBeNull()
+        expect(queryByTestId('icon-tail')).not.toBeNull()
+        expect(queryByTestId('icon-caseSensitive')).toBeNull()
+        expect(queryByTestId('icon-precise')).toBeNull()
+    })
+    it('input value change', () => {
+        const myMockChange = jest.fn((value) => value)
+        const { queryByTestId } = render(<MulSelectDropdown
+            searchType='tail'
+            onChange={myMockChange}
+        />)
+        fireEvent.change(queryByTestId('input'), { target: { value: '1234567891011' } });
+        expect(myMockChange).toHaveBeenCalled();
+        expect(myMockChange.mock.results[0].value).toBe('1234567891011');
+    })
+    it('input search', () => {
+        const myMockSearch = jest.fn((value: any, searchType: any) => { return { value: value, searchType: searchType } })
+        const { queryByTestId } = render(<MulSelectDropdown
+            searchType='tail'
+            value="this is value"
+            placeholder="hello"
+            onSearch={myMockSearch}
+        />)
+        fireEvent.keyPress(queryByTestId('input'), { key: 'Enter', code: 'Enter' })
+        expect(myMockSearch).toHaveBeenCalled();
+    })
+})
diff --git a/src/components/multiSearchInput/index.tsx b/src/components/multiSearchInput/index.tsx
@@ -26,13 +26,13 @@ const searchTypeList: any = [
 ]
 
 export interface MultiSearchInputProps {
-    placeholder: string;
-    style: object;
-    value: any; // input框的值
-    onChange: any;
-    onSearch: any;
-    onTypeChange: any;
-    searchType: string; // input框中选中的筛选方式
+    placeholder?: string;
+    style?: object;
+    value?: any; // input框的值
+    onChange?: any;
+    onSearch?: any;
+    onTypeChange?: any;
+    searchType?: string; // input框中选中的筛选方式
     filterOptions?: any[]; // 数组
     [propName: string]: any;
 }
@@ -76,6 +76,7 @@ class MultiSearchInput extends React.Component<MultiSearchInputProps, any> {
                 }}
             >
                 <Input
+                    data-testid='input'
                     value={propsValue != null ? propsValue : value}
                     placeholder={placeholder}
                     style={{
@@ -87,6 +88,7 @@ class MultiSearchInput extends React.Component<MultiSearchInputProps, any> {
                         onChange(e.target.value);
                     }}
                     onPressEnter={(e: any) => {
+                        console.log('执行了')
                         onSearch(e.target.value, searchType);
                     }}
                 />
@@ -107,6 +109,8 @@ class MultiSearchInput extends React.Component<MultiSearchInputProps, any> {
                         _.map(filterList, (item: any) => {
                             return (
                                 <div
+                                    data-testid={`icon-${item.key}`}
+                                    key={`icon-${item.key}`}
                                     style={{
                                         cursor: 'pointer',
                                         display: 'block',

diff --git a/src/stories/chromeDownload.stories.tsx b/src/stories/chromeDownload.stories.tsx
@@ -35,6 +35,7 @@ stories.add('chromeDownload', () => {
         <ChromeDownload downloadChrome={() => {}} />
         ~~~
         `,
-        TableComponent: () => PropsTable({ propDefinitions })
+        TableComponent: () => PropsTable({ propDefinitions }),
+
     }
 })