rtl 14

openedx · Nov 15, 2023 · 119eeb0 · 119eeb0
1 parent 4384c90
commit 119eeb0
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 70 deletions.
diff --git a/src/Form/FormAutosuggest.jsx b/src/Form/FormAutosuggest.jsx
@@ -113,7 +113,7 @@ function FormAutosuggest({
     <IconButton
       className="pgn__form-autosuggest__icon-button"
       data-testid="autosuggest-iconbutton"
-      tabindex="-1"
+      tabIndex="-1"
       src={isMenuClosed ? KeyboardArrowDown : KeyboardArrowUp}
       iconAs={Icon}
       size="sm"

diff --git a/src/Form/tests/FormAutosuggest.test.jsx b/src/Form/tests/FormAutosuggest.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
@@ -43,6 +43,13 @@ FormAutosuggestTestComponent.propTypes = {
   onClick: PropTypes.func,
 };
 
+function setup(jsx) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  }
+}
+
 describe('render behavior', () => {
   it('renders component without error', () => {
     render(<FormAutosuggestWrapper />);
@@ -65,32 +72,32 @@ describe('render behavior', () => {
     expect(screen.getByDisplayValue('Test Value')).toBeInTheDocument();
   });
 
-  it('renders component with options', () => {
-    const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('renders component with options', async () => {
+    const { user, getByTestId, queryAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
   });
 
-  it('renders with error msg', () => {
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
+  it('renders with error msg', async () => {
+    const { user, getByText, getByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders component with options that all have IDs', () => {
-    const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('renders component with options that all have IDs', async () => {
+    const { user, getByTestId, getAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const optionItemIds = getAllByTestId('autosuggest-optionitem').map(item => item.id);
 
     expect(optionItemIds).not.toContain(null);
@@ -103,169 +110,168 @@ describe('render behavior', () => {
     expect(getByTestId('autosuggest-screen-reader-options-count').getAttribute('aria-live')).toEqual('assertive');
   });
 
-  it('displays correct amount of options found to screen readers', () => {
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
+  it('displays correct amount of options found to screen readers', async () => {
+    const { user, getByText, getByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
   });
 });
 
 describe('controlled behavior', () => {
-  it('sets input value based on clicked option', () => {
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
+  it('sets input value based on clicked option', async () => {
+    const { user, getByText, getByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(input.value).toEqual('Option 1');
   });
 
-  it('calls onSelected based on clicked option', () => {
+  it('calls onSelected based on clicked option', async () => {
     const onSelected = jest.fn();
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onSelected={onSelected} />);
+    const { user, getByText, getByTestId } = setup(<FormAutosuggestTestComponent onSelected={onSelected} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onSelected).toHaveBeenCalledWith('Option 1');
     expect(onSelected).toHaveBeenCalledTimes(1);
   });
 
-  it('calls the function passed to onClick when an option with it is selected', () => {
+  it('calls the function passed to onClick when an option with it is selected', async () => {
     const onClick = jest.fn();
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
+    const { user, getByText, getByTestId } = setup(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 2');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('does not call onClick when an option without it is selected', () => {
+  it('does not call onClick when an option without it is selected', async () => {
     const onClick = jest.fn();
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
+    const { user, getByText, getByTestId } = setup(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(0);
   });
 
-  it('should set the correct activedescendant', () => {
-    const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('should set the correct activedescendant', async () => {
+    const { user, getByTestId, getAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const expectedOptionId = getAllByTestId('autosuggest-optionitem')[0].id;
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     expect(input.getAttribute('aria-activedescendant')).toEqual(expectedOptionId);
   });
 
-  it('filters dropdown based on typed field value with one match', () => {
-    const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('filters dropdown based on typed field value with one match', async () => {
+    const { user, getByTestId, getAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, 'Option 1');
+    await user.click(input);
+    await user.type(input, 'Option 1');
 
-    const list = queryAllByTestId('autosuggest-optionitem');
+    const list = getAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(1);
   });
 
-  it('toggles options list', () => {
-    const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('toggles options list', async () => {
+    const { user, getByTestId, queryAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const dropdownBtn = getByTestId('autosuggest-iconbutton');
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const reopenedList = queryAllByTestId('autosuggest-optionitem');
     expect(reopenedList.length).toBe(3);
   });
 
-  it('filters dropdown based on typed field value with multiple matches', () => {
-    const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('filters dropdown based on typed field value with multiple matches', async () => {
+    const { user, getByTestId, queryAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(2);
   });
 
-  it('closes options list on click outside', () => {
-    const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('closes options list on click outside', async () => {
+    const { user, getByTestId, queryAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(document.body);
+    await user.click(document.body);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('updates screen reader option count based on typed field value with multiple matches', () => {
-    const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
+  it('updates screen reader option count based on typed field value with multiple matches', async () => {
+    const { user, getByText, getByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     expect(getByText('2 options found')).toBeInTheDocument();
   });
 
-  it('closes options list when tabbed out and the input is no longer active', () => {
-    const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
+  it('closes options list when tabbed out and the input is no longer active', async () => {
+    const { user, getByTestId, queryAllByTestId } = setup(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     expect(document.activeElement).toBe(getByTestId('autosuggest-textbox-input'));
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).not.toBe(getByTestId('autosuggest-textbox-input'));
 
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('check focus on input after esc', () => {
-    const { getByTestId } = render(<FormAutosuggestTestComponent />);
-    const input = getByTestId('autosuggest-textbox-input');
-    const dropdownBtn = getByTestId('autosuggest-iconbutton');
-    userEvent.click(dropdownBtn);
-
-    userEvent.keyboard('{esc}');
+  it('check focus on input after esc', async () => {
+    const { user, findByTestId } = setup(<FormAutosuggestTestComponent />);
+    const dropdownBtn = await findByTestId('autosuggest-iconbutton');
+    await user.click(dropdownBtn);
+    await user.keyboard('{esc}');
+    const input = await findByTestId('autosuggest-textbox-input');
 
-    expect(input.matches(':focus')).toBe(true);
+    await waitFor(() => expect(input.matches(':focus')).toBe(true));
   });
 });