Skip to content

Commit

Permalink
Fix tests failing because of userEvent
Browse files Browse the repository at this point in the history
  • Loading branch information
@m1r0
m1r0 committed Nov 5, 2024
1 parent 0b4e592 commit 5c7e889
Show file tree
Hide file tree
Showing 6 changed files with 36 additions and 32 deletions.
22 changes: 12 additions & 10 deletions assets/admin/exit-survey/form.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,50 +18,52 @@ describe( '<ExitSurveyForm />', () => {
skip: () => screen.getByRole( 'button', { name: 'Skip Feedback' } ),
};

it( 'Submit is disabled until an item is selected and details filled out (if provided)', () => {
it( 'Submit is disabled until an item is selected and details filled out (if provided)', async () => {
const { getByLabelText, getByPlaceholderText } = render(
<ExitSurveyForm />
);

expect( buttons.submit() ).toBeDisabled();

// This reason does not require details.
userEvent.click( getByLabelText( 'I no longer need the plugin' ) );
await userEvent.click(
getByLabelText( 'I no longer need the plugin' )
);
expect( buttons.submit() ).not.toBeDisabled();

// This reason does expect details.
userEvent.click( getByLabelText( 'I found a better plugin' ) );
await userEvent.click( getByLabelText( 'I found a better plugin' ) );
expect( buttons.submit() ).toBeDisabled();
userEvent.type(
await userEvent.type(
getByPlaceholderText( "What's the name of the plugin?" ),
'Test detail'
);

expect( buttons.submit() ).not.toBeDisabled();
} );

it( 'Skip button skips submission', () => {
it( 'Skip button skips submission', async () => {
const skip = jest.fn();
const submit = jest.fn();
render( <ExitSurveyForm submit={ submit } skip={ skip } /> );
userEvent.click( buttons.skip() );
await userEvent.click( buttons.skip() );

expect( skip ).toHaveBeenCalled();
expect( submit ).not.toHaveBeenCalled();
} );

it( 'Submits selected reason and details', () => {
it( 'Submits selected reason and details', async () => {
const submit = jest.fn();
const { getByLabelText, getByPlaceholderText } = render(
<ExitSurveyForm submit={ submit } />
);

userEvent.click( getByLabelText( 'I found a better plugin' ) );
userEvent.type(
await userEvent.click( getByLabelText( 'I found a better plugin' ) );
await userEvent.type(
getByPlaceholderText( "What's the name of the plugin?" ),
'Test detail'
);
userEvent.click( buttons.submit() );
await userEvent.click( buttons.submit() );

expect( submit ).toHaveBeenCalledWith( {
reason: 'found-better-plugin',
Expand Down
10 changes: 6 additions & 4 deletions assets/blocks/course-outline/outline-block/outline-placeholder.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,19 @@ describe( '<OutlinePlaceholder />', () => {
expect( getByText( 'Generate with AI' ) ).toBeVisible();
} );

it( 'Should create empty lessons', () => {
it( 'Should create empty lessons', async () => {
const { getByRole } = render(
<OutlinePlaceholder addBlocks={ addBlocksMock } />
);

userEvent.click( getByRole( 'button', { name: 'Start with blank' } ) );
await userEvent.click(
getByRole( 'button', { name: 'Start with blank' } )
);

expect( addBlocksMock ).toHaveBeenCalled();
} );

it( 'Should open the tailored modal', () => {
it( 'Should open the tailored modal', async () => {
const openTailoredModalMock = jest.fn();

const { getByRole } = render(
Expand All @@ -56,7 +58,7 @@ describe( '<OutlinePlaceholder />', () => {
/>
);

userEvent.click(
await userEvent.click(
getByRole( 'button', { name: 'Generate with AI Pro' } )
);

Expand Down
4 changes: 2 additions & 2 deletions assets/blocks/course-outline/status-preview/status-control/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ describe( '<StatusControl />', () => {
setStatus={ setStatusMock }
/>
);
userEvent.click( getByLabelText( 'Completed' ) );
await userEvent.click( getByLabelText( 'Completed' ) );
expect( setStatusMock ).toBeCalledWith( Status.COMPLETED );

userEvent.click( getByLabelText( 'In Progress' ) );
await userEvent.click( getByLabelText( 'In Progress' ) );
expect( setStatusMock ).toBeCalledWith( Status.IN_PROGRESS );
} );
} );
16 changes: 8 additions & 8 deletions assets/blocks/editor-components/limited-text-control/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ describe( '<LimitedTextControl />', () => {
expect( queryByText( 'Characters: 10/20' ) ).toBeTruthy();
} );

it( 'Should not call the `onChange` method when already at maxLength capacity', () => {
it( 'Should not call the `onChange` method when already at maxLength capacity', async () => {
const onChangeMock = jest.fn();
const { queryByRole } = render(
<LimitedTextControl
Expand All @@ -65,12 +65,12 @@ describe( '<LimitedTextControl />', () => {
/>
);

userEvent.type( queryByRole( 'textbox' ), 'DEF' );
await userEvent.type( queryByRole( 'textbox' ), 'DEF' );

expect( onChangeMock ).toHaveBeenCalledTimes( 0 );
} );

it( 'Should ignore new lines', () => {
it( 'Should ignore new lines', async () => {
const onChangeMock = jest.fn();
const { queryByRole } = render(
<LimitedTextControl
Expand All @@ -82,7 +82,7 @@ describe( '<LimitedTextControl />', () => {

const element = queryByRole( 'textbox' );

userEvent.type( element, '{enter}' );
await userEvent.type( element, '{enter}' );

expect( onChangeMock ).toHaveBeenCalledTimes( 0 );
} );
Expand Down Expand Up @@ -144,7 +144,7 @@ describe( '<LimitedTextControl multiline={ true }/>', () => {
expect( queryByText( 'Characters: 10/20' ) ).toBeTruthy();
} );

it( 'Should not call the `onChange` method when already at maxLength capacity', () => {
it( 'Should not call the `onChange` method when already at maxLength capacity', async () => {
const onChangeMock = jest.fn();
const { queryByRole } = render(
<LimitedTextControl
Expand All @@ -155,12 +155,12 @@ describe( '<LimitedTextControl multiline={ true }/>', () => {
/>
);

userEvent.type( queryByRole( 'textbox' ), 'DEF' );
await userEvent.type( queryByRole( 'textbox' ), 'DEF' );

expect( onChangeMock ).toHaveBeenCalledTimes( 0 );
} );

it( 'Should accept new lines', () => {
it( 'Should accept new lines', async () => {
const onChangeMock = jest.fn();
const { queryByRole } = render(
<LimitedTextControl
Expand All @@ -173,7 +173,7 @@ describe( '<LimitedTextControl multiline={ true }/>', () => {

const element = queryByRole( 'textbox' );

userEvent.type( element, '{enter}' );
await userEvent.type( element, '{enter}' );

expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
} );
Expand Down
4 changes: 2 additions & 2 deletions assets/shared/blocks/block-metadata.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ describe( 'Block metadata', () => {
expect( getByText( 'Block metadata' ) ).toBeTruthy();
} );

it( 'Provides metadata setter to block', () => {
it( 'Provides metadata setter to block', async () => {
const Block = withBlockMeta( ( { setMeta } ) => (
<button
onClick={ () => setMeta( { secondTestMeta: 'clicked' } ) }
Expand All @@ -102,7 +102,7 @@ describe( 'Block metadata', () => {
</button>
) );
const { getByText } = render( <Block clientId="test-block-4" /> );
userEvent.click( getByText( 'Update' ) );
await userEvent.click( getByText( 'Update' ) );

const meta = select( STORE ).getBlockMeta(
'test-block-4',
Expand Down
12 changes: 6 additions & 6 deletions assets/shared/blocks/single-line-input/single-line-input.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,18 @@ describe( '<SingleLineInput />', () => {
expect( onChangeMock ).toBeCalledWith( 'changed' );
} );

it( 'Should not allow line breaks', () => {
it( 'Should not allow line breaks', async () => {
const onChangeMock = jest.fn();
const { getByRole } = render(
<SingleLineInput onChange={ onChangeMock } />
);

userEvent.type( getByRole( 'textbox' ), 'input {enter}line' );
await userEvent.type( getByRole( 'textbox' ), 'input {enter}line' );

expect( onChangeMock ).toHaveBeenLastCalledWith( 'input line' );
} );

it( 'Calls onRemove on backspace with an empty title', () => {
it( 'Calls onRemove on backspace with an empty title', async () => {
const onRemoveMock = jest.fn();
const { getByRole } = render(
<SingleLineInput
Expand All @@ -59,18 +59,18 @@ describe( '<SingleLineInput />', () => {
/>
);

userEvent.type( getByRole( 'textbox' ), '{backspace}' );
await userEvent.type( getByRole( 'textbox' ), '{backspace}' );

expect( onRemoveMock ).toHaveBeenCalledTimes( 1 );

Check failure on line 64 in assets/shared/blocks/single-line-input/single-line-input.test.js

View workflow job for this annotation

GitHub Actions / JS Testing 

Error: expect(jest.fn()).toHaveBeenCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0
    at Object.toHaveBeenCalledTimes (/home/runner/work/***/***/assets/shared/blocks/single-line-input/single-line-input.test.js:64:26)
} );

it( 'Calls onEnter on enter', () => {
it( 'Calls onEnter on enter', async () => {
const onEnterMock = jest.fn();
const { getByRole } = render(
<SingleLineInput onEnter={ onEnterMock } onChange={ jest.fn() } />
);

userEvent.type( getByRole( 'textbox' ), 'Title{enter}' );
await userEvent.type( getByRole( 'textbox' ), 'Title{enter}' );

expect( onEnterMock ).toHaveBeenCalledTimes( 1 );

Check failure on line 75 in assets/shared/blocks/single-line-input/single-line-input.test.js

View workflow job for this annotation

GitHub Actions / JS Testing 

Error: expect(jest.fn()).toHaveBeenCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0
    at Object.toHaveBeenCalledTimes (/home/runner/work/***/***/assets/shared/blocks/single-line-input/single-line-input.test.js:75:25)
} );
Expand Down

0 comments on commit 5c7e889

Please sign in to comment.