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

Edit Post: Refactor PageAttributesOrder tests to @testing-library/react #43980

Merged
merged 2 commits into from
Sep 9, 2022
Merged

Edit Post: Refactor PageAttributesOrder tests to @testing-library/react #43980

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
18f79ca
Edit Post: Refactor PageAttributesOrder tests to @testing-library/react
tyxla Sep 8, 2022
35179ad
Make spinbutton more specific
tyxla Sep 8, 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
121 changes: 57 additions & 64 deletions packages/editor/src/components/page-attributes/test/order.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,93 @@
/**
* External dependencies
*/
import { mount } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
* Internal dependencies
*/
import { PageAttributesOrder } from '../order';

describe( 'PageAttributesOrder', () => {
it( 'should reject invalid input', () => {
const onUpdateOrder = jest.fn();
const wrapper = mount(
<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />
);

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: 'bad',
},
} );

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: '----+++',
},
} );

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: '-',
},
/**
* When starting to type inside the spinbutton, select the current value
* in order to override it with the new value afterwards.
*/
const typeOptions = {
initialSelectionStart: 0,
initialSelectionEnd: 1,
};
Comment on lines +13 to +20
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know I'm late, but wouldn't this only the first character in the input's value, instead of the whole value?

A good alternative could be to use the clear utility

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did try .clear() but didn't like the end result, because it was adding additional invocations of the mocks, while this approach kept them the same as the original.


it( 'should reject invalid input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: '+',
},
} );
const onUpdateOrder = jest.fn();

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: '',
},
} );
render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: ' ',
},
} );
const input = screen.getByRole( 'spinbutton', { name: 'Order' } );
await user.type( input, 'bad', typeOptions );
await user.type( input, '----+++', typeOptions );
await user.type( input, '-', typeOptions );
await user.type( input, '+', typeOptions );
await user.type( input, ' ', typeOptions );

expect( onUpdateOrder ).not.toHaveBeenCalled();
} );

it( 'should update with zero input', () => {
it( 'should update with zero input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onUpdateOrder = jest.fn();
const wrapper = mount(
<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />

render(
<PageAttributesOrder order={ 4 } onUpdateOrder={ onUpdateOrder } />
);

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: 0,
},
} );
const input = screen.getByRole( 'spinbutton', { name: 'Order' } );

await user.type( input, '0', typeOptions );

expect( onUpdateOrder ).toHaveBeenCalledWith( 0 );
} );

it( 'should update with valid positive input', () => {
it( 'should update with valid positive input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onUpdateOrder = jest.fn();
const wrapper = mount(
<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />
);

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: '4',
},
} );
render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );

await user.type(
screen.getByRole( 'spinbutton', { name: 'Order' } ),
'4',
typeOptions
);

expect( onUpdateOrder ).toHaveBeenCalledWith( 4 );
} );

it( 'should update with valid negative input', () => {
it( 'should update with valid negative input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

const onUpdateOrder = jest.fn();
const wrapper = mount(
<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />
);

wrapper.find( 'input' ).simulate( 'change', {
target: {
value: '-1',
},
} );
render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );

await user.type(
screen.getByRole( 'spinbutton', { name: 'Order' } ),
'-1',
typeOptions
);

expect( onUpdateOrder ).toHaveBeenCalledWith( -1 );
} );
Expand Down