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

Setup user-event inline once per test #40839

Merged
merged 3 commits into from
May 5, 2022
Merged

Setup user-event inline once per test #40839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0caa218
Setup `user-event` inline once per test
ciampo May 5, 2022
e89585a
CHANGELOG
ciampo May 5, 2022
8b2e3fc
Merge branch 'trunk' into fix/user-event-local-setup
ciampo May 5, 2022
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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

- `UnitControl`: migrate unit tests to TypeScript ([#40697](https://github.com/WordPress/gutenberg/pull/40697)).
- `DatePicker`: Add improved unit tests ([#40754](https://github.com/WordPress/gutenberg/pull/40754)).
- Setup `user-event` in unit tests inline, once per test ([#40839](https://github.com/WordPress/gutenberg/pull/40839)).
- `DatePicker`: Update `react-dates` to 21.8.0 ([#40801](https://github.com/WordPress/gutenberg/pull/40801)).

### Enhancements
Expand Down
12 changes: 8 additions & 4 deletions packages/components/src/form-file-upload/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ import FormFileUpload from '../';
*/
const { File } = window;

const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

// @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
const fakePath = expect.objectContaining( {
target: expect.objectContaining( {
Expand Down Expand Up @@ -45,6 +41,10 @@ describe( 'FormFileUpload', () => {
} );

it( 'should not fire a change event after selecting the same file', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onChange = jest.fn();

render(
Expand All @@ -68,6 +68,10 @@ describe( 'FormFileUpload', () => {
} );

it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onChange = jest.fn();

render(
Expand Down
88 changes: 84 additions & 4 deletions packages/components/src/unit-control/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ import UnitControl from '..';
import { parseQuantityAndUnitFromRawValue } from '../utils';
import type { UnitControlOnChangeCallback } from '../types';

const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const getInput = ( {
isInputTypeText = false,
}: {
Expand Down Expand Up @@ -147,6 +143,10 @@ describe( 'UnitControl', () => {

describe( 'Value', () => {
it( 'should update value on change', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state = '50px';
const setState = jest.fn( ( value ) => ( state = value ) );

Expand All @@ -165,6 +165,10 @@ describe( 'UnitControl', () => {
} );

it( 'should increment value on UP press', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | undefined = '50px';
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand All @@ -178,6 +182,10 @@ describe( 'UnitControl', () => {
} );

it( 'should increment value on UP + SHIFT press, with step', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | undefined = '50px';
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand All @@ -191,6 +199,10 @@ describe( 'UnitControl', () => {
} );

it( 'should decrement value on DOWN press', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | number | undefined = 50;
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand All @@ -204,6 +216,10 @@ describe( 'UnitControl', () => {
} );

it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | number | undefined = 50;
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand All @@ -217,6 +233,10 @@ describe( 'UnitControl', () => {
} );

it( 'should cancel change when ESCAPE key is pressed', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | number | undefined = 50;
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand Down Expand Up @@ -244,6 +264,10 @@ describe( 'UnitControl', () => {
} );

it( 'should run onBlur callback when quantity input is blurred', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onChangeSpy = jest.fn();
const onBlurSpy = jest.fn();

Expand Down Expand Up @@ -275,6 +299,10 @@ describe( 'UnitControl', () => {
} );

it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onUnitChangeSpy = jest.fn();
const onChangeSpy = jest.fn();

Expand Down Expand Up @@ -316,6 +344,10 @@ describe( 'UnitControl', () => {
} );

it( 'should update value correctly when typed and blurred when a single unit is passed', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onChangeSpy = jest.fn();
render(
<>
Expand Down Expand Up @@ -348,6 +380,10 @@ describe( 'UnitControl', () => {

describe( 'Unit', () => {
it( 'should update unit value on change', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | undefined = '14rem';
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand Down Expand Up @@ -388,6 +424,10 @@ describe( 'UnitControl', () => {
} );

it( 'should reset value on unit change, if unit has default value', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | number | undefined = 50;
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand Down Expand Up @@ -417,6 +457,10 @@ describe( 'UnitControl', () => {
} );

it( 'should not reset value on unit change, if disabled', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | number | undefined = 50;
const setState: UnitControlOnChangeCallback = ( nextState ) =>
( state = nextState );
Expand Down Expand Up @@ -446,6 +490,10 @@ describe( 'UnitControl', () => {
} );

it( 'should set correct unit if single units', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state: string | undefined = '50%';
const setState: UnitControlOnChangeCallback = ( value ) =>
( state = value );
Expand All @@ -466,6 +514,10 @@ describe( 'UnitControl', () => {
} );

it( 'should update unit value when a new raw value is passed', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

render( <ControlledSyncUnits /> );

const [ inputA, inputB ] = screen.getAllByRole( 'spinbutton' );
Expand Down Expand Up @@ -494,6 +546,10 @@ describe( 'UnitControl', () => {
} );

it( 'should maintain the chosen non-default unit when value is cleared', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const units = [
{ value: 'pt', label: 'pt' },
{ value: 'vmax', label: 'vmax' },
Expand All @@ -511,6 +567,10 @@ describe( 'UnitControl', () => {
} );

it( 'should run onBlur callback when the unit select is blurred', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onUnitChangeSpy = jest.fn();
const onBlurSpy = jest.fn();

Expand Down Expand Up @@ -540,6 +600,10 @@ describe( 'UnitControl', () => {

describe( 'Unit Parser', () => {
it( 'should parse unit from input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state = '10px';
const setState = jest.fn( ( nextState ) => ( state = nextState ) );

Expand All @@ -561,6 +625,10 @@ describe( 'UnitControl', () => {
} );

it( 'should parse PX unit from input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state = '10px';
const setState = jest.fn( ( nextState ) => ( state = nextState ) );

Expand All @@ -582,6 +650,10 @@ describe( 'UnitControl', () => {
} );

it( 'should parse EM unit from input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state = '10px';
const setState = jest.fn( ( nextState ) => ( state = nextState ) );

Expand All @@ -603,6 +675,10 @@ describe( 'UnitControl', () => {
} );

it( 'should parse % unit from input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state = '10px';
const setState = jest.fn( ( nextState ) => ( state = nextState ) );

Expand All @@ -624,6 +700,10 @@ describe( 'UnitControl', () => {
} );

it( 'should parse REM unit from input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

let state = '10px';
const setState = jest.fn( ( nextState ) => ( state = nextState ) );

Expand Down