diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index 2cd0991d5ce2..fda420019087 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -6,12 +6,10 @@
*/
import React from 'react';
-import { mount } from 'enzyme';
import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {
findListBoxNode,
- findMenuNode,
assertMenuOpen,
assertMenuClosed,
generateItems,
@@ -19,10 +17,9 @@ import {
} from '../ListBox/test-helpers';
import ComboBox from '../ComboBox';
-const prefix = 'cds';
-const findInputNode = (wrapper) => wrapper.find(`.${prefix}--text-input`);
-const openMenu = (wrapper) => {
- wrapper.find(`[role="combobox"]`).simulate('click');
+const findInputNode = () => screen.getByRole('combobox');
+const openMenu = () => {
+ userEvent.click(findInputNode());
};
describe('ComboBox', () => {
@@ -38,28 +35,23 @@ describe('ComboBox', () => {
};
});
- it('should display the placeholder text when no items are selected and the control is not focused', () => {
- const wrapper = mount();
- expect(findInputNode(wrapper).prop('value')).toBe('');
- expect(findInputNode(wrapper).prop('placeholder')).toBe(
- mockProps.placeholder
- );
- });
-
it('should display the menu of items when a user clicks on the input', () => {
- const wrapper = mount();
- findInputNode(wrapper).simulate('click');
+ render();
- assertMenuOpen(wrapper, mockProps);
+ userEvent.click(findInputNode());
+
+ assertMenuOpen(mockProps);
});
it('should call `onChange` each time an item is selected', () => {
- const wrapper = mount();
+ render();
expect(mockProps.onChange).not.toHaveBeenCalled();
for (let i = 0; i < mockProps.items.length; i++) {
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(i).simulate('click');
+ openMenu();
+
+ userEvent.click(screen.getAllByRole('option')[i]);
+
expect(mockProps.onChange).toHaveBeenCalledTimes(i + 1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[i],
@@ -69,41 +61,40 @@ describe('ComboBox', () => {
it('capture filter text events', () => {
const onInputChange = jest.fn();
- const wrapper = mount(
-
- );
+ render();
- findInputNode(wrapper).simulate('change', {
- target: { value: 'something' },
- });
+ userEvent.type(findInputNode(), 'something');
expect(onInputChange).toHaveBeenCalledWith('something');
});
it('should render custom item components', () => {
- const wrapper = mount();
- wrapper.setProps({
- itemToElement: (item) =>
{item.text}
,
+ const itemToElement = jest.fn((item) => {
+ return {item.text}
;
});
- openMenu(wrapper);
+ render();
+ openMenu();
- expect(wrapper.find(`.mock-item`).length).toBe(mockProps.items.length);
+ expect(itemToElement).toHaveBeenCalled();
});
it('should let the user select an option by clicking on the option node', () => {
- const wrapper = mount();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(0).simulate('click');
+ render();
+ openMenu();
+
+ userEvent.click(screen.getAllByRole('option')[0]);
+
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[0],
});
- assertMenuClosed(wrapper);
+ assertMenuClosed();
mockProps.onChange.mockClear();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(1).simulate('click');
+ openMenu();
+
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[1],
@@ -112,12 +103,10 @@ describe('ComboBox', () => {
describe('should display initially selected item found in `initialSelectedItem`', () => {
it('using an object type for the `initialSelectedItem` prop', () => {
- const wrapper = mount(
+ render(
);
- expect(findInputNode(wrapper).prop('value')).toEqual(
- mockProps.items[0].label
- );
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
});
it('using a string type for the `initialSelectedItem` prop', () => {
@@ -127,22 +116,19 @@ describe('ComboBox', () => {
items: ['1', '2', '3'],
};
- const wrapper = mount(
+ render(
);
- expect(findInputNode(wrapper).prop('value')).toEqual(mockProps.items[1]);
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]);
});
});
describe('should display selected item found in `selectedItem`', () => {
it('using an object type for the `selectedItem` prop', () => {
- const wrapper = mount(
-
- );
- expect(findInputNode(wrapper).prop('value')).toEqual(
- mockProps.items[0].label
- );
+ render();
+
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
});
it('using a string type for the `selectedItem` prop', () => {
@@ -152,55 +138,37 @@ describe('ComboBox', () => {
items: ['1', '2', '3'],
};
- const wrapper = mount(
-
- );
+ render();
- expect(findInputNode(wrapper).prop('value')).toEqual(mockProps.items[1]);
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]);
});
});
describe('when disabled', () => {
it('should not let the user edit the input node', () => {
- const wrapper = mount();
- expect(findInputNode(wrapper).prop('disabled')).toBe(true);
- expect(findInputNode(wrapper).prop('value')).toBe('');
-
- findInputNode(wrapper).simulate('change', {
- target: {
- value: 'a',
- },
- });
+ render();
+
+ expect(findInputNode()).toHaveAttribute('disabled');
+
+ expect(findInputNode()).toHaveDisplayValue('');
+
+ userEvent.type(findInputNode(), 'a');
- expect(findInputNode(wrapper).prop('value')).toBe('');
+ expect(findInputNode()).toHaveDisplayValue('');
});
it('should not let the user expand the menu', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(findListBoxNode(wrapper).hasClass('bx--list-box--expanded')).toBe(
- false
- );
+ render();
+ openMenu();
+ expect(findListBoxNode()).not.toHaveClass('cds--list-box--expanded');
});
});
describe('downshift quirks', () => {
- it('should not trigger the menu when typing a space in input', () => {
- const wrapper = mount();
-
- openMenu(wrapper);
- findInputNode(wrapper).simulate('change', {
- target: {
- value: ' ',
- },
- });
-
- expect(findMenuNode(wrapper).length).toBe(1);
- });
-
it('should set `inputValue` to an empty string if a false-y value is given', () => {
- const wrapper = mount();
- expect(wrapper.find('input').instance().value).toBe('');
+ render();
+
+ expect(findInputNode()).toHaveDisplayValue('');
});
it('should only render one listbox at a time when multiple comboboxes are present', () => {
diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
index 6e8e26df10be..b4adc91c994e 100644
--- a/packages/react/src/components/Dropdown/Dropdown-test.js
+++ b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -5,9 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
-import { cleanup, render } from '@testing-library/react';
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import {
assertMenuOpen,
assertMenuClosed,
@@ -33,39 +33,38 @@ describe('Dropdown', () => {
};
});
- it('should render', () => {
- const wrapper = mount();
- expect(wrapper).toMatchSnapshot();
- });
-
it('should initially render with the menu not open', () => {
- const wrapper = mount();
- assertMenuClosed(wrapper);
+ render();
+ assertMenuClosed();
});
it('should let the user open the menu by clicking on the control', () => {
- const wrapper = mount();
- openMenu(wrapper);
- assertMenuOpen(wrapper, mockProps);
+ render();
+ openMenu();
+ assertMenuOpen(mockProps);
});
it('should render with strings as items', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(wrapper).toMatchSnapshot();
+ render();
+ openMenu();
+
+ expect(screen.getByText('zar')).toBeInTheDocument();
+ expect(screen.getByText('doz')).toBeInTheDocument();
});
it('should render custom item components', () => {
- const wrapper = mount();
- wrapper.setProps({
- itemToElement: (item) => {item.label}
,
+ const itemToElement = jest.fn((item) => {
+ return {item.label}
;
});
- openMenu(wrapper);
- expect(wrapper).toMatchSnapshot();
+
+ render();
+ openMenu();
+
+ expect(itemToElement).toHaveBeenCalled();
});
it('should render selectedItem as an element', () => {
- const wrapper = mount(
+ render(
{
/>
);
// custom element should be rendered for the selected item
- expect(wrapper.find('#a-custom-element-for-selected-item')).toHaveLength(1);
+ expect(
+ document.querySelector('#a-custom-element-for-selected-item')
+ ).toBeDefined();
// the title should use the normal itemToString method
- expect(wrapper.find('button').instance()).toHaveAttribute(
- 'title',
- 'Item 1'
- );
+
+ expect(screen.getByText('Item 1')).toBeInTheDocument();
});
describe('title', () => {
- let wrapper;
- let renderedLabel;
-
- beforeEach(() => {
- wrapper = mount();
- renderedLabel = wrapper.find('label[className="cds--label"]');
- });
-
it('renders a title', () => {
- expect(renderedLabel.length).toBe(1);
+ render();
+ expect(screen.getByText('Email Input')).toBeInTheDocument();
});
it('has the expected classes', () => {
- expect(renderedLabel.hasClass(`${prefix}--label`)).toEqual(true);
- });
-
- it('should set title as expected', () => {
- expect(renderedLabel.text()).toEqual('Email Input');
+ render();
+ expect(screen.getByText('Email Input')).toHaveClass(`${prefix}--label`);
});
});
describe('helper', () => {
it('renders a helper', () => {
- const wrapper = mount(
-
- );
- const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
- expect(renderedHelper.length).toEqual(1);
+ render();
+ expect(screen.getByText('Email Input')).toBeInTheDocument();
});
it('renders children as expected', () => {
- const wrapper = mount(
+ render(
@@ -131,43 +117,35 @@ describe('Dropdown', () => {
{...mockProps}
/>
);
- const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
- expect(renderedHelper.props().children).toEqual(
-
- This helper text has a link.
-
- );
- });
- it('should set helper text as expected', () => {
- const wrapper = mount();
- wrapper.setProps({ helperText: 'Helper text' });
- const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
- expect(renderedHelper.text()).toEqual('Helper text');
+ expect(screen.getByRole('link')).toBeInTheDocument();
});
});
it('should specify light version as expected', () => {
- const wrapper = mount();
- expect(wrapper.props().light).toEqual(false);
- wrapper.setProps({ light: true });
- expect(wrapper.props().light).toEqual(true);
+ render();
+
+ expect(document.querySelector('.cds--list-box')).toHaveClass(
+ 'cds--dropdown--light'
+ );
});
it('should let the user select an option by clicking on the option node', () => {
- const wrapper = mount();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(0).simulate('click');
+ render();
+ openMenu();
+
+ userEvent.click(screen.getByText('Item 0'));
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[0],
});
- assertMenuClosed(wrapper);
+ assertMenuClosed();
mockProps.onChange.mockClear();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(1).simulate('click');
+ openMenu();
+ userEvent.click(screen.getByText('Item 1'));
+
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[1],
@@ -176,13 +154,11 @@ describe('Dropdown', () => {
describe('should display initially selected item found in `initialSelectedItem`', () => {
it('using an object type for the `initialSelectedItem` prop', () => {
- const wrapper = mount(
+ render(
);
- expect(wrapper.find(`span.${prefix}--list-box__label`).text()).toEqual(
- mockProps.items[0].label
- );
+ expect(screen.getByText(mockProps.items[0].label)).toBeInTheDocument();
});
it('using a string type for the `initialSelectedItem` prop', () => {
@@ -192,13 +168,11 @@ describe('Dropdown', () => {
items: ['1', '2', '3'],
};
- const wrapper = mount(
+ render(
);
- expect(wrapper.find(`span.${prefix}--list-box__label`).text()).toEqual(
- mockProps.items[1]
- );
+ expect(screen.getByText(mockProps.items[1])).toBeInTheDocument();
});
});
@@ -216,14 +190,9 @@ describe('Dropdown', () => {
describe('DropdownSkeleton', () => {
describe('Renders as expected', () => {
it('Has the expected classes', () => {
- const wrapper = mount();
- expect(wrapper.childAt(0).hasClass(`${prefix}--skeleton`)).toEqual(true);
- expect(wrapper.childAt(0).hasClass(`${prefix}--dropdown-v2`)).toEqual(
- true
- );
- expect(wrapper.childAt(0).hasClass(`${prefix}--list-box--sm`)).toEqual(
- true
- );
+ render();
+
+ expect(document.querySelector(`${prefix}--skeleton`)).toBeDefined();
});
});
});
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
deleted file mode 100644
index 368e56917620..000000000000
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ /dev/null
@@ -1,663 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dropdown should render 1`] = `
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Dropdown should render custom item components 1`] = `
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Dropdown should render with strings as items 1`] = `
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/packages/react/src/components/ListBox/test-helpers.js b/packages/react/src/components/ListBox/test-helpers.js
index d454370cc55a..ad45c27f49e1 100644
--- a/packages/react/src/components/ListBox/test-helpers.js
+++ b/packages/react/src/components/ListBox/test-helpers.js
@@ -6,42 +6,64 @@
*/
const prefix = 'cds';
+import userEvent from '@testing-library/user-event';
// Finding nodes in a ListBox
-export const findListBoxNode = (wrapper) =>
- wrapper.find(`.${prefix}--list-box`);
-export const findMenuNode = (wrapper) =>
- wrapper.find(`.${prefix}--list-box__menu`);
-export const findMenuItemNode = (wrapper, index) =>
- wrapper.find('ListBoxMenuItem').at(index);
-export const findMenuIconNode = (wrapper) =>
- wrapper.find(`.${prefix}--list-box__menu-icon`);
-export const findFieldNode = (wrapper) =>
- wrapper.find(`.${prefix}--list-box__field`);
-export const findComboboxNode = (wrapper) =>
- wrapper.find(`.${prefix}--list-box[role="combobox"]`);
-export const findPopupNode = (wrapper) =>
- wrapper.find('[aria-haspopup="listbox"]').hostNodes();
+export const findListBoxNode = () => {
+ return document.querySelector('.cds--list-box');
+};
+
+export const findMenuNode = () => {
+ return document.querySelector(`.${prefix}--list-box__menu`);
+};
+
+export const findMenuItemNode = (index) => {
+ const nodes = document.querySelectorAll(`.${prefix}--list-box__menu-item`);
+ if (nodes[index]) {
+ return nodes[index];
+ }
+ throw new Error(`Unable to find node at index: ${index} in: ${nodes}`);
+};
+
+export const findMenuIconNode = () => {
+ return document.querySelector(`.${prefix}--list-box__menu-icon`);
+};
+
+export const findFieldNode = () => {
+ return document.querySelector(`.${prefix}--list-box__field`);
+};
+
+export const findComboboxNode = () => {
+ return document.querySelector(`.${prefix}--list-box[role="combobox"]`);
+};
+
+export const findPopupNode = () => {
+ return document.querySelector('[aria-haspopup="listbox"]');
+};
// Actions
-export const openMenu = (wrapper) => findFieldNode(wrapper).simulate('click');
+export const openMenu = () => {
+ userEvent.click(findFieldNode());
+};
// Common assertions, useful for validating a11y props are set when needed
-export const assertMenuOpen = (wrapper, mockProps) => {
- expect(findMenuNode(wrapper).children().length).toBe(mockProps.items.length);
- expect(findMenuIconNode(wrapper).prop('className')).toEqual(
- expect.stringContaining(`${prefix}--list-box__menu-icon--open`)
+export const assertMenuOpen = (mockProps) => {
+ expect(findMenuNode().childNodes.length).toBe(mockProps.items.length);
+
+ expect(findMenuIconNode()).toHaveClass(
+ `${prefix}--list-box__menu-icon--open`
);
- expect(findPopupNode(wrapper).prop('aria-expanded')).toBe(true);
+
+ expect(findPopupNode()).toHaveAttribute('aria-expanded', 'true');
};
-export const assertMenuClosed = (wrapper) => {
- expect(findMenuIconNode(wrapper).prop('className')).toEqual(
- expect.stringContaining(`${prefix}--list-box__menu-icon`)
- );
- expect(findMenuIconNode(wrapper).prop('className')).not.toEqual(
- expect.stringContaining(`${prefix}--list-box__menu-icon--open`)
+
+export const assertMenuClosed = () => {
+ expect(findMenuIconNode()).toHaveClass(`${prefix}--list-box__menu-icon`);
+
+ expect(findMenuIconNode()).not.toHaveClass(
+ `${prefix}--list-box__menu-icon--open`
);
- expect(findPopupNode(wrapper).prop('aria-expanded')).toBe(false);
+ expect(findPopupNode()).toHaveAttribute('aria-expanded', 'false');
};
/**
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 633ffa3f5e76..ce474b6214f6 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -6,7 +6,8 @@
*/
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import FilterableMultiSelect from '../FilterableMultiSelect';
import {
assertMenuOpen,
@@ -16,9 +17,8 @@ import {
generateGenericItem,
} from '../../ListBox/test-helpers';
-const listItemName = 'ListBoxMenuItem';
-const openMenu = (wrapper) => {
- wrapper.find(`[role="combobox"]`).simulate('click');
+const openMenu = () => {
+ userEvent.click(screen.getByRole('combobox'));
};
describe('FilterableMultiSelect', () => {
@@ -36,76 +36,67 @@ describe('FilterableMultiSelect', () => {
};
});
- it('should render', () => {
- const wrapper = mount();
- expect(wrapper).toMatchSnapshot();
- });
-
- it('should display all items when the menu is open initially', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+ it('should display all items when the menu is open', () => {
+ render();
+ openMenu();
+ expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
});
it('should initially have the menu open when open prop is provided', () => {
- const wrapper = mount();
- assertMenuOpen(wrapper, mockProps);
+ render();
+ assertMenuOpen(mockProps);
});
it('should open the menu with a down arrow', () => {
- const wrapper = mount();
- const menuIconNode = findMenuIconNode(wrapper);
+ render();
+ const menuIconNode = findMenuIconNode();
- menuIconNode.simulate('keyDown', { key: 'ArrowDown' });
- assertMenuOpen(wrapper, mockProps);
+ userEvent.type(menuIconNode, '{arrowdown}');
+ expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
});
it('should let the user toggle the menu by the menu icon', () => {
- const wrapper = mount();
- findMenuIconNode(wrapper).simulate('click');
- assertMenuOpen(wrapper, mockProps);
- findMenuIconNode(wrapper).simulate('click');
- assertMenuClosed(wrapper);
+ render();
+ userEvent.click(findMenuIconNode());
+
+ assertMenuOpen(mockProps);
+ userEvent.click(findMenuIconNode());
+
+ assertMenuClosed();
});
it('should not close the menu after a user makes a selection', () => {
- const wrapper = mount();
- openMenu(wrapper);
+ render();
+ openMenu();
- const firstListItem = wrapper.find(listItemName).at(0);
+ userEvent.click(screen.getAllByRole('option')[0]);
- firstListItem.simulate('click');
- assertMenuOpen(wrapper, mockProps);
+ assertMenuOpen(mockProps);
});
it('should filter a list of items by the input value', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+ render();
+ openMenu();
+ expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
- wrapper
- .find('[placeholder="Placeholder..."]')
- .at(1)
- .simulate('change', { target: { value: '3' } });
+ userEvent.type(screen.getByPlaceholderText('test'), '3');
- expect(wrapper.find(listItemName).length).toBe(1);
+ expect(screen.getAllByRole('option').length).toBe(1);
});
it('should call `onChange` with each update to selected items', () => {
- const wrapper = mount(
-
- );
- openMenu(wrapper);
+ render();
+ openMenu();
// Select the first two items
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [mockProps.items[0]],
});
- wrapper.find(listItemName).at(1).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(2);
expect(mockProps.onChange).toHaveBeenCalledWith({
@@ -113,13 +104,13 @@ describe('FilterableMultiSelect', () => {
});
// Un-select the next two items
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
expect(mockProps.onChange).toHaveBeenCalledTimes(3);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [mockProps.items[0]],
});
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
expect(mockProps.onChange).toHaveBeenCalledTimes(4);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [],
@@ -127,20 +118,18 @@ describe('FilterableMultiSelect', () => {
});
it('should let items stay at their position after selecting', () => {
- const wrapper = mount(
-
- );
- openMenu(wrapper);
+ render();
+ openMenu();
// Select the first two items
- wrapper.find(listItemName).at(1).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [mockProps.items[1]],
});
- wrapper.find(listItemName).at(1).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(2);
expect(mockProps.onChange).toHaveBeenCalledWith({
@@ -149,18 +138,13 @@ describe('FilterableMultiSelect', () => {
});
it('should not clear input value after a user makes a selection', () => {
- const wrapper = mount();
- openMenu(wrapper);
+ render();
+ openMenu();
- wrapper
- .find('[placeholder="Placeholder..."]')
- .at(1)
- .simulate('change', { target: { value: '3' } });
+ userEvent.type(screen.getByPlaceholderText('test'), '3');
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
- expect(
- wrapper.find('[placeholder="Placeholder..."]').at(1).props().value
- ).toEqual('3');
+ expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
});
});
diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
deleted file mode 100644
index 166398a5594e..000000000000
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
+++ /dev/null
@@ -1,187 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilterableMultiSelect should render 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;