Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: switch data-testid to kebab case for consistency #2620

Merged
merged 1 commit into from
Sep 20, 2023
+30 −25
Merged

chore: switch data-testid to kebab case for consistency #2620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/Form/FormAutosuggest.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ function FormAutosuggest({
const iconToggle = (
<IconButton
className="pgn__form-autosuggest__icon-button"
data-testid="autosuggest_iconbutton"
data-testid="autosuggest-iconbutton"
src={isMenuClosed ? KeyboardArrowDown : KeyboardArrowUp}
iconAs={Icon}
size="sm"
Expand Down Expand Up @@ -231,7 +231,7 @@ function FormAutosuggest({
onChange={handleOnChange}
onClick={handleClick}
trailingElement={iconToggle}
data-testid="autosuggest_textbox_input"
data-testid="autosuggest-textbox-input"
{...props}
/>

Expand All @@ -255,7 +255,12 @@ function FormAutosuggest({
>
{isLoading ? (
<div className="pgn__form-autosuggest__dropdown-loading">
<Spinner animation="border" variant="dark" screenReaderText={screenReaderText} data-testid="autosuggest_loading_spinner" />
<Spinner
animation="border"
variant="dark"
screenReaderText={screenReaderText}
data-testid="autosuggest-loading-spinner"
/>
</div>
) : state.dropDownItems.length > 0 && state.dropDownItems}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/Form/FormAutosuggestOption.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function FormAutosuggestOption({
return (
<MenuItem
as="li"
data-testid="autosuggest_optionitem"
data-testid="autosuggest-optionitem"
role="option"
tabIndex="-1"
onClick={onClick}
Expand Down
42 changes: 21 additions & 21 deletions src/Form/tests/FormAutosuggest.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import { IntlProvider } from 'react-intl';
import FormAutosuggest from '../FormAutosuggest';
import FormAutosuggestOption from '../FormAutosuggestOption';
Expand Down Expand Up @@ -50,13 +50,13 @@ describe('render behavior', () => {

it('renders without loading state', () => {
const { queryByTestId } = render(<FormAutosuggestTestComponent />);
const spinner = queryByTestId('autosuggest_loading_spinner');
const spinner = queryByTestId('autosuggest-loading-spinner');
expect(spinner).not.toBeInTheDocument();
});

it('render with loading state', () => {
const { queryByTestId } = render(<FormAutosuggestWrapper isLoading />);
const spinner = queryByTestId('autosuggest_loading_spinner');
const spinner = queryByTestId('autosuggest-loading-spinner');
expect(spinner).toBeInTheDocument();
});

Expand All @@ -67,15 +67,15 @@ describe('render behavior', () => {

it('renders component with options', () => {
const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');
userEvent.click(input);
const list = queryAllByTestId('autosuggest_optionitem');
const list = queryAllByTestId('autosuggest-optionitem');
expect(list.length).toBe(3);
});

it('renders with error msg', () => {
const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

// if you click into the input and click outside, you should see the error message
userEvent.click(input);
Expand All @@ -90,7 +90,7 @@ describe('render behavior', () => {
describe('controlled behavior', () => {
it('sets input value based on clicked option', () => {
const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

userEvent.click(input);
const menuItem = getByText('Option 1');
Expand All @@ -102,7 +102,7 @@ describe('controlled behavior', () => {
it('calls onSelected based on clicked option', () => {
const onSelected = jest.fn();
const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onSelected={onSelected} />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

userEvent.click(input);
const menuItem = getByText('Option 1');
Expand All @@ -115,7 +115,7 @@ describe('controlled behavior', () => {
it('calls the function passed to onClick when an option with it is selected', () => {
const onClick = jest.fn();
const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

userEvent.click(input);
const menuItem = getByText('Option 2');
Expand All @@ -127,7 +127,7 @@ describe('controlled behavior', () => {
it('does not call onClick when an option without it is selected', () => {
const onClick = jest.fn();
const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

userEvent.click(input);
const menuItem = getByText('Option 1');
Expand All @@ -138,53 +138,53 @@ describe('controlled behavior', () => {

it('filters dropdown based on typed field value with one match', () => {
const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

userEvent.click(input);
userEvent.type(input, 'Option 1');

const list = queryAllByTestId('autosuggest_optionitem');
const list = queryAllByTestId('autosuggest-optionitem');
expect(list.length).toBe(1);
});

it('toggles options list', () => {
const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
const dropdownBtn = getByTestId('autosuggest_iconbutton');
const dropdownBtn = getByTestId('autosuggest-iconbutton');

userEvent.click(dropdownBtn);
const list = queryAllByTestId('autosuggest_optionitem');
const list = queryAllByTestId('autosuggest-optionitem');
expect(list.length).toBe(3);

userEvent.click(dropdownBtn);
const updatedList = queryAllByTestId('autosuggest_optionitem');
const updatedList = queryAllByTestId('autosuggest-optionitem');
expect(updatedList.length).toBe(0);

userEvent.click(dropdownBtn);
const reopenedList = queryAllByTestId('autosuggest_optionitem');
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 />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

userEvent.click(input);
userEvent.type(input, '1');

const list = queryAllByTestId('autosuggest_optionitem');
const list = queryAllByTestId('autosuggest-optionitem');
expect(list.length).toBe(2);
});

it('closes options list on click outside', () => {
const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
const input = getByTestId('autosuggest_textbox_input');
const input = getByTestId('autosuggest-textbox-input');

userEvent.click(input);
const list = queryAllByTestId('autosuggest_optionitem');
const list = queryAllByTestId('autosuggest-optionitem');
expect(list.length).toBe(3);

userEvent.click(document.body);
const updatedList = queryAllByTestId('autosuggest_optionitem');
const updatedList = queryAllByTestId('autosuggest-optionitem');
expect(updatedList.length).toBe(0);
});
});
Loading