From 0caa218c7dd08b8fa492156b4bfecca10c8ef4fd Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 5 May 2022 07:55:16 +0200 Subject: [PATCH 1/2] Setup `user-event` inline once per test --- .../src/form-file-upload/test/index.js | 12 ++- .../src/unit-control/test/index.tsx | 88 ++++++++++++++++++- 2 files changed, 92 insertions(+), 8 deletions(-) diff --git a/packages/components/src/form-file-upload/test/index.js b/packages/components/src/form-file-upload/test/index.js index 6e7e86547d2fd2..e8b47b914fcfe5 100644 --- a/packages/components/src/form-file-upload/test/index.js +++ b/packages/components/src/form-file-upload/test/index.js @@ -14,10 +14,6 @@ import FormFileUpload from '../'; */ const { File } = window; -const user = userEvent.setup( { - advanceTimers: jest.advanceTimersByTime, -} ); - // @testing-library/user-event considers changing 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( { @@ -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( @@ -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( diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx index 7c0f4ed99048d2..9d4e70e00815cb 100644 --- a/packages/components/src/unit-control/test/index.tsx +++ b/packages/components/src/unit-control/test/index.tsx @@ -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, }: { @@ -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 ) ); @@ -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 ); @@ -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 ); @@ -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 ); @@ -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 ); @@ -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 ); @@ -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(); @@ -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(); @@ -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( <> @@ -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 ); @@ -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 ); @@ -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 ); @@ -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 ); @@ -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( ); const [ inputA, inputB ] = screen.getAllByRole( 'spinbutton' ); @@ -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' }, @@ -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(); @@ -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 ) ); @@ -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 ) ); @@ -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 ) ); @@ -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 ) ); @@ -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 ) ); From e89585a80de755949e31de61b760900d1156e3c1 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 5 May 2022 08:01:39 +0200 Subject: [PATCH 2/2] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c44134fdb096ec..b469d127aee7a2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -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)). ### Enhancements