Skip to content

Commit

Permalink
test(selection): update to rtl (#13073)
Browse files Browse the repository at this point in the history
* test(selection): update to rtl

* test(selection): remove obsolete snapshot

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
francinelucca and kodiakhq[bot] authored Feb 3, 2023
1 parent f4c904c commit 6edae3e
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 93 deletions.
155 changes: 86 additions & 69 deletions packages/react/src/internal/__tests__/Selection-test.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
/**
* Copyright IBM Corp. 2016, 2018
* Copyright IBM Corp. 2016, 2022
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import Selection from '../Selection';
import { mount } from 'enzyme';
import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';

describe('Selection', () => {
let mockProps;
Expand All @@ -19,87 +20,103 @@ describe('Selection', () => {
};
});

it('should render', () => {
const wrapper = mount(<Selection {...mockProps} />);
expect(wrapper).toMatchSnapshot();
describe('renders as expected - Component API', () => {
it('should render', () => {
const { container } = render(<Selection {...mockProps} />);
expect(container).toMatchSnapshot();
});
});

it('should be able to add or remove an item from the callback props', () => {
const wrapper = mount(
<Selection
{...mockProps}
render={({ onItemChange }) => (
<button type="button" onClick={() => onItemChange(1)} />
)}
/>
);
expect(wrapper.state('selectedItems').length).toBe(0);
wrapper.find('button').simulate('click');
expect(wrapper.state('selectedItems').length).toBe(1);
wrapper.find('button').simulate('click');
expect(wrapper.state('selectedItems').length).toBe(0);
});

it('should give a list of all selected items from the callback props', () => {
const wrapper = mount(
<Selection
{...mockProps}
render={({ selectedItems, onItemChange }) => (
<div>
describe('behaves as expected', () => {
it('should be able to add or remove an item from the callback props', () => {
let selectedItems = [];
const onChange = (selectionState) =>
(selectedItems = selectionState.selectedItems);
render(
<Selection
{...mockProps}
render={({ onItemChange }) => (
<button type="button" onClick={() => onItemChange(1)} />
<ul>
{selectedItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
)}
/>
);
expect(wrapper.find('li').length).toBe(0);
wrapper.find('button').simulate('click');
expect(wrapper.find('li').length).toBe(1);
});
)}
onChange={onChange}
/>
);
expect(selectedItems.length).toBe(0);
userEvent.click(screen.getByRole('button'));
expect(selectedItems.length).toBe(1);
userEvent.click(screen.getByRole('button'));
expect(selectedItems.length).toBe(0);
});

it('should be able to clear the selection from the callback props', () => {
const wrapper = mount(
<Selection
{...mockProps}
render={({ onItemChange, clearSelection }) => (
<div>
<button
type="button"
id="add-item"
onClick={() => onItemChange(1)}
/>
<button
type="button"
id="clear-selection"
onClick={clearSelection}
/>
</div>
)}
/>
);
expect(wrapper.state('selectedItems')).toEqual([]);
wrapper.find('#add-item').simulate('click');
expect(wrapper.state('selectedItems')).toEqual([1]);
wrapper.find('#clear-selection').simulate('click');
expect(wrapper.state('selectedItems')).toEqual([]);
it('should give a list of all selected items from the callback props', () => {
const { container } = render(
<Selection
{...mockProps}
render={({ selectedItems, onItemChange }) => (
<div>
<button type="button" onClick={() => onItemChange(1)} />
<ul>
{selectedItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
)}
/>
);
expect(container.querySelectorAll('li').length).toBe(0);
userEvent.click(screen.getByRole('button'));
expect(container.querySelectorAll('li').length).toBe(1);
});

it('should be able to clear the selection from the callback props', () => {
let selectedItems = [];
const onChange = (selectionState) =>
(selectedItems = selectionState.selectedItems);
const { container } = render(
<Selection
{...mockProps}
render={({ onItemChange, clearSelection }) => (
<div>
<button
type="button"
id="add-item"
onClick={() => onItemChange(1)}
/>
<button
type="button"
id="clear-selection"
onClick={clearSelection}
/>
</div>
)}
onChange={onChange}
/>
);
expect(selectedItems).toEqual([]);
userEvent.click(container.querySelector('#add-item'));
expect(selectedItems).toEqual([1]);
userEvent.click(container.querySelector('#clear-selection'));
expect(selectedItems).toEqual([]);
});
});

it('should disallow selection when disabled', () => {
const wrapper = mount(
let selectedItems = [];
const onChange = (selectionState) =>
(selectedItems = selectionState.selectedItems);
render(
<Selection
{...mockProps}
render={({ onItemChange }) => (
<button type="button" onClick={() => onItemChange(1)} />
)}
disabled
onChange={onChange}
/>
);
expect(wrapper.state('selectedItems').length).toBe(0);
wrapper.find('button').simulate('click');
expect(wrapper.state('selectedItems').length).toBe(0);
expect(selectedItems.length).toBe(0);
userEvent.click(screen.getByRole('button'));
expect(selectedItems.length).toBe(0);
});
});
Original file line number Diff line number Diff line change
@@ -1,28 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Selection should render 1`] = `
<Selection
initialSelectedItems={Array []}
render={
[MockFunction] {
"calls": Array [
Array [
Object {
"clearSelection": [Function],
"onItemChange": [Function],
"selectedItems": Array [],
},
],
],
"results": Array [
Object {
"type": "return",
"value": <div />,
},
],
}
}
>
exports[`Selection renders as expected - Component API should render 1`] = `
<div>
<div />
</Selection>
</div>
`;

0 comments on commit 6edae3e

Please sign in to comment.