test: refactor autocomplete test with screen and userEvent (#36953)

* AutoComplete(test): refactor custom input autocomplete with userEvent and screen

* AutoComplete(test): refactor dataSource is object array with screen and userEvent

* AutoComplete(test): update file name to tsx and refactor with screen

* AutoComplete(test): option test refactor

* AutoComplete(test): className test refactor

* remove fireEvent

* ignore ts error

* disable no-console

Co-authored-by: ian.xufeng <ian.xufeng@shopee.com>

components/auto-complete/__tests__/__snapshots__/index.test.js.snap

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AutoComplete legacy dataSource should accept react element option 1`] = `
-<div
-  class="ant-select ant-select-auto-complete ant-select-single ant-select-open ant-select-show-search"
->
-  <div
-    class="ant-select-selector"
-  >
-    <span
-      class="ant-select-selection-search"
-    >
-      <input
-        aria-activedescendant="rc_select_TEST_OR_SSR_list_-1"
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-expanded="true"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="ant-select-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        role="combobox"
-        type="search"
-        value=""
-      />
-    </span>
-    <span
-      class="ant-select-selection-placeholder"
-    />
-  </div>
-  <div>
-    <div
-      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-      style="opacity: 0; min-width: 0; width: 0px;"
-    >
-      <div>
-        <div
-          id="rc_select_TEST_OR_SSR_list"
-          role="listbox"
-          style="height: 0px; width: 0px; overflow: hidden;"
-        >
-          <div
-            aria-label="ReactNode"
-            aria-selected="false"
-            id="rc_select_TEST_OR_SSR_list_0"
-            role="option"
-          >
-            key
-          </div>
-        </div>
-        <div
-          class="rc-virtual-list"
-          style="position: relative;"
-        >
-          <div
-            class="rc-virtual-list-holder"
-            style="max-height: 256px; overflow-y: auto;"
-          >
-            <div>
-              <div
-                class="rc-virtual-list-holder-inner"
-                style="display: flex; flex-direction: column;"
-              >
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  title="ReactNode"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    ReactNode
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
-<div
-  class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search"
->
-  <div
-    class="ant-select-selector"
-  >
-    <span
-      class="ant-select-selection-search"
-    >
-      <input
-        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="ant-select-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        role="combobox"
-        type="search"
-        value=""
-      />
-    </span>
-    <span
-      class="ant-select-selection-placeholder"
-    />
-  </div>
-</div>
-`;

components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-search"
+    >
+      <input
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+        aria-autocomplete="list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
+        aria-haspopup="listbox"
+        aria-owns="rc_select_TEST_OR_SSR_list"
+        autocomplete="off"
+        class="ant-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
+        role="combobox"
+        type="search"
+        value=""
+      />
+    </span>
+    <span
+      class="ant-select-selection-placeholder"
+    />
+  </div>
+</div>
+`;

components/auto-complete/__tests__/index.test.js → components/auto-complete/__tests__/index.test.tsx

@@ -1,30 +1,35 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import AutoComplete from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { render, screen } from '../../../tests/utils';
 import Input from '../../input';
 
 describe('AutoComplete', () => {
   mountTest(AutoComplete);
   rtlTest(AutoComplete);
 
-  it('AutoComplete with custom Input render perfectly', () => {
-    const { container } = render(
+  it('AutoComplete with custom Input render perfectly', async () => {
+    render(
       <AutoComplete dataSource={['12345', '23456', '34567']}>
         <textarea />
       </AutoComplete>,
     );
 
-    expect(container.querySelectorAll('textarea').length).toBe(1);
-    fireEvent.change(container.querySelector('textarea'), { target: { value: '123' } });
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+
+    // should show options when type in input
+    await userEvent.type(screen.getByRole('combobox'), '123');
 
-    // should not filter data source defaultly
-    expect(container.querySelectorAll('.ant-select-item-option').length).toBe(3);
+    // should not filter data source by default
+    expect(screen.getByTitle('12345')).toBeInTheDocument();
+    expect(screen.getByTitle('23456')).toBeInTheDocument();
+    expect(screen.getByTitle('34567')).toBeInTheDocument();
   });
 
-  it('AutoComplete should work when dataSource is object array', () => {
-    const { container } = render(
+  it('AutoComplete should work when dataSource is object array', async () => {
+    render(
       <AutoComplete
         dataSource={[
           { text: 'text', value: 'value' },
@@ -34,17 +39,19 @@ describe('AutoComplete', () => {
         <input />
       </AutoComplete>,
     );
-    expect(container.querySelectorAll('input').length).toBe(1);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'a' } });
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    await userEvent.type(screen.getByRole('combobox'), 'a');
 
-    // should not filter data source defaultly
-    expect(container.querySelectorAll('.ant-select-item-option').length).toBe(2);
+    // should not filter data source by default
+    expect(screen.getByTitle('text')).toBeInTheDocument();
+    expect(screen.getByTitle('abc')).toBeInTheDocument();
   });
 
   it('AutoComplete throws error when contains invalid dataSource', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
 
     render(
+      // @ts-ignore
       <AutoComplete dataSource={[() => {}]}>
         <textarea />
       </AutoComplete>,
@@ -54,22 +61,23 @@ describe('AutoComplete', () => {
   });
 
   it('legacy dataSource should accept react element option', () => {
-    const { asFragment } = render(
-      <AutoComplete open dataSource={[<span key="key">ReactNode</span>]} />,
-    );
-    expect(asFragment().firstChild).toMatchSnapshot();
+    render(<AutoComplete open dataSource={[<span key="key">ReactNode</span>]} />);
+
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByTitle(/reactnode/i)).toBeInTheDocument();
   });
 
-  it('legacy AutoComplete.Option should be compatiable', () => {
-    const { container } = render(
+  it('legacy AutoComplete.Option should be compatiable', async () => {
+    render(
       <AutoComplete>
         <AutoComplete.Option value="111">111</AutoComplete.Option>
         <AutoComplete.Option value="222">222</AutoComplete.Option>
       </AutoComplete>,
     );
-    expect(container.querySelectorAll('input').length).toBe(1);
-    fireEvent.change(container.querySelector('input'), { target: { value: '1' } });
-    expect(container.querySelectorAll('.ant-select-item-option').length).toBe(2);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    await userEvent.type(screen.getByRole('combobox'), '1');
+    expect(screen.getByTitle(/111/i)).toBeInTheDocument();
+    expect(screen.getByTitle(/222/i)).toBeInTheDocument();
   });
 
   it('should not warning when getInputElement is null', () => {
@@ -77,16 +85,17 @@ describe('AutoComplete', () => {
     render(<AutoComplete placeholder="input here" allowClear />);
     // eslint-disable-next-line no-console
     expect(console.warn).not.toBeCalled();
+    // @ts-ignore
     // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
 
   it('should not override custom input className', () => {
-    const { container } = render(
+    render(
       <AutoComplete>
         <Input className="custom" />
       </AutoComplete>,
     );
-    expect(container.querySelector('input').classList.contains('custom')).toBeTruthy();
+    expect(screen.getByRole('combobox')).toHaveClass('custom');
   });
 });

package.json

@@ -119,6 +119,7 @@
     "@ant-design/react-slick": "~0.29.1",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.4.0",
+    "@testing-library/user-event": "^14.4.2",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.21",