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>
2024-11-28 05:05:48 +08:00 · 2022-08-08 22:42:57 +08:00 · 2022-08-08 22:42:57 +08:00 · 8129bfee8b
commit 8129bfee8b
parent 019666e57c
4 changed files with 66 additions and 145 deletions
--- a/components/auto-complete/tests/snapshots/index.test.js.snap
+++ b/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>
-`;
--- a/components/auto-complete/tests/snapshots/index.test.tsx.snap
+++ b/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>
+`;
--- a/components/auto-complete/tests/index.test.tsx
+++ b/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 not filter data source defaultly
-    expect(container.querySelectorAll('.ant-select-item-option').length).toBe(3);
+    // should show options when type in input
+    await userEvent.type(screen.getByRole('combobox'), '123');
+
+    // 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');
  });
 });
--- a/package.json
+++ b/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",