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.

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

Cover block: Add integration tests #45409

Merged
merged 39 commits into from
Mar 28, 2023
Merged
Show file tree
Hide file tree
Changes from 37 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
042428d
Add more block toolbar tests, and initial toolspanel test
glendaviesnz Oct 27, 2022
fa0a316
Add more tests and switch to userEvent instead of fireEvent
glendaviesnz Oct 28, 2022
2e41650
remove inadvertent change
glendaviesnz Oct 28, 2022
4fdb78b
Change the way the controls are mocked
glendaviesnz Oct 28, 2022
214c315
Finish off the inspector control tests
glendaviesnz Oct 30, 2022
5654827
Update comment
glendaviesnz Oct 30, 2022
019d5a3
Add some tests for edit cmponent
glendaviesnz Oct 31, 2022
80316b6
remove inadvertent commit
glendaviesnz Oct 31, 2022
6360966
Remove jest advance timers
glendaviesnz Jan 17, 2023
69b066e
Fix broken test
glendaviesnz Jan 17, 2023
249f9b1
Wrap the Cover Edit component in a SlotProvider for testing
glendaviesnz Mar 13, 2023
2aa6d55
Woop Woop - fire up an editor instance to integration test a block Ed…
glendaviesnz Mar 14, 2023
fd77c1f
set up function to prevent duplication of user events
glendaviesnz Mar 15, 2023
0117b24
Replace Cover e2e tests than can be replaced as integration tests
glendaviesnz Mar 16, 2023
3043e47
Tidy up integration test editor
glendaviesnz Mar 16, 2023
65bfc75
move to integration tests folder and add wrapper to fix issue with as…
glendaviesnz Mar 16, 2023
43d855d
Tidy up test editor setup
glendaviesnz Mar 16, 2023
15ac92a
Move inspector control tests to use new integration editor
glendaviesnz Mar 16, 2023
8af2060
Move block toolbar tests to new integration test editor
glendaviesnz Mar 16, 2023
d56dc26
Remove unnecessary useEffect
glendaviesnz Mar 16, 2023
fbc56c4
Attempt to fix CI error
glendaviesnz Mar 16, 2023
408e22e
Add some debugging for CI issue
glendaviesnz Mar 16, 2023
21f97c7
Revert "Add some debugging for CI issue"
glendaviesnz Mar 16, 2023
4697a69
Comment out media related tests to see if that fixes test failures
glendaviesnz Mar 17, 2023
6f19aef
Put url related tests back in
glendaviesnz Mar 17, 2023
29bf6ba
Add await to the block creation
glendaviesnz Mar 17, 2023
19552d1
try different way of wrapping async call to see if that fixes CI issue
glendaviesnz Mar 17, 2023
7bf0bce
Revert "try different way of wrapping async call to see if that fixes…
glendaviesnz Mar 17, 2023
a2f16fa
Add polyfill for missing string method on CI
glendaviesnz Mar 17, 2023
431b2ba
remove optional chain that wasn't actually needed
glendaviesnz Mar 17, 2023
a293716
changes from code review
glendaviesnz Mar 19, 2023
f201a3b
Add some doc comments to the integration test editor methods
glendaviesnz Mar 22, 2023
50a264a
changes from code review
glendaviesnz Mar 22, 2023
a58601f
Move some of the block initialisation into the editor component to av…
glendaviesnz Mar 26, 2023
7a2b353
Fix type in comment
glendaviesnz Mar 26, 2023
b0f0746
Move the setup to initialise method rather than an effect
glendaviesnz Mar 26, 2023
8948961
Add doc block comment
glendaviesnz Mar 26, 2023
c5fccc6
Fixes from review
glendaviesnz Mar 28, 2023
93148ca
Remove the class selectors that can use `img` instead
glendaviesnz Mar 28, 2023
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
62 changes: 0 additions & 62 deletions packages/block-library/src/cover/test/block-controls.js

This file was deleted.

321 changes: 321 additions & 0 deletions packages/block-library/src/cover/test/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,321 @@
/**
* External dependencies
*/
import { screen, fireEvent, act, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
* Internal dependencies
*/
import {
initializeEditor,
selectBlock,
} from 'test/integration/helpers/integration-test-editor';

async function setup( attributes ) {
const testBlock = { name: 'core/cover', attributes };
return initializeEditor( testBlock );
}

async function createAndselectBlock() {
glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
await userEvent.click(
screen.getByRole( 'button', {
name: 'Color: Black',
} )
);
await userEvent.click(
screen.getByRole( 'button', {
name: 'Select Cover',
} )
);
}

describe( 'Cover block', () => {
describe( 'Editor canvas', () => {
test( 'shows placeholder if background image and color not set', async () => {
await setup();

expect(
screen.getByRole( 'group', {
name: 'To edit this block, you need permission to upload media.',
} )
).toBeInTheDocument();
} );

test( 'can set overlay color using color picker on block placeholder', async () => {
const { container } = await setup();
const colorPicker = screen.getByRole( 'button', {
name: 'Color: Black',
} );
await userEvent.click( colorPicker );
const color = colorPicker.style.backgroundColor;
expect(
screen.queryByRole( 'group', {
name: 'To edit this block, you need permission to upload media.',
} )
).not.toBeInTheDocument();

// eslint-disable-next-line testing-library/no-node-access
const overlay = container.getElementsByClassName(
Copy link
Member

Choose a reason for hiding this comment

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

We still have class name selectors here (and a couple more below), do we also want to change these as well? Or is it a different case?

Copy link
Contributor Author

@glendaviesnz glendaviesnz Mar 28, 2023

Choose a reason for hiding this comment

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

I have updated the ones that related to the img but the remaining ones are just a span - I can't see another way of getting these other than adding a data-testid or something, so maybe we should leave them as is until there is a resolution to that question about whether they should be stripped from production code.

'wp-block-cover__background'
);
expect( overlay[ 0 ] ).toHaveStyle(
`background-color: ${ color }`
);
} );

test( 'can have the title edited', async () => {
await setup();

await userEvent.click(
screen.getByRole( 'button', {
name: 'Color: Black',
} )
);

const title = screen.getByLabelText( 'Empty block;', {
exact: false,
} );
await userEvent.click( title );
await userEvent.keyboard( 'abc' );
expect( title ).toHaveTextContent( 'abc' );
} );
} );

describe( 'Block toolbar', () => {
test( 'full height toggle sets minHeight style attribute to 100vh when clicked', async () => {
await setup();
await createAndselectBlock();

expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveStyle(
' min-height: 100vh;'
glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
);

await userEvent.click(
screen.getByLabelText( 'Toggle full height' )
);

expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
' min-height: 100vh;'
);
} );

test( 'content position button sets content position', async () => {
await setup();
await createAndselectBlock();

await userEvent.click(
screen.getByLabelText( 'Change content position' )
);

expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
'has-custom-content-position'
);

await act( async () =>
glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
within( screen.getByRole( 'grid' ) )
.getByRole( 'gridcell', {
name: 'top left',
} )
.focus()
);

expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
'has-custom-content-position'
);
expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
'is-position-top-left'
);
} );
} );

describe( 'Inspector controls', () => {
describe( 'Media settings', () => {
test( 'does not display media settings panel if url is not set', async () => {
await setup();
expect(
screen.queryByRole( 'button', {
name: 'Media settings',
} )
).not.toBeInTheDocument();
} );
test( 'displays media settings panel if url is set', async () => {
await setup( {
url: 'http://localhost/my-image.jpg',
} );

await selectBlock( 'Block: Cover', screen );
expect(
screen.getByRole( 'button', {
name: 'Media settings',
} )
).toBeInTheDocument();
} );
} );

test( 'sets hasParallax attribute to true if fixed background toggled', async () => {
await setup( {
url: 'http://localhost/my-image.jpg',
} );
expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
'has-parallax'
);
await selectBlock( 'Block: Cover', screen );
await userEvent.click(
screen.getByLabelText( 'Fixed background' )
);
expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
'has-parallax'
);
} );

test( 'sets isRepeated attribute to true if repeated background toggled', async () => {
await setup( {
url: 'http://localhost/my-image.jpg',
} );
expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
'is-repeated'
);
await selectBlock( 'Block: Cover', screen );
await userEvent.click(
screen.getByLabelText( 'Repeated background' )
);
expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
'is-repeated'
);
} );

test( 'sets left focalPoint attribute when focal point values changed', async () => {
await setup( {
url: 'http://localhost/my-image.jpg',
} );

await selectBlock( 'Block: Cover', screen );
await userEvent.clear( screen.getByLabelText( 'Left' ) );
await userEvent.type( screen.getByLabelText( 'Left' ), '100' );

expect(
within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
'img'
)
).toHaveStyle( 'object-position: 100% 50%;' );
} );

test( 'sets alt attribute if text entered in alt text box', async () => {
await setup( {
url: 'http://localhost/my-image.jpg',
} );

await selectBlock( 'Block: Cover', screen );
await userEvent.type(
screen.getByLabelText( 'Alt text (alternative text)' ),
'Me'
);
expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
} );

test( 'clears media when clear media button clicked', async () => {
const { container } = await setup( {
url: 'http://localhost/my-image.jpg',
} );

await selectBlock( 'Block: Cover', screen );
// eslint-disable-next-line testing-library/no-node-access
const img = container.getElementsByClassName(
'wp-block-cover__image-background'
)[ 0 ];
expect( img ).toBeInTheDocument();

await userEvent.click(
screen.getByRole( 'button', {
name: 'Clear Media',
} )
);

expect( img ).not.toBeInTheDocument();
} );

describe( 'Color panel', () => {
test( 'applies selected opacity to block when number control value changed', async () => {
const { container } = await setup();

await createAndselectBlock();

// eslint-disable-next-line testing-library/no-node-access
const overlay = container.getElementsByClassName(
'wp-block-cover__background'
);

expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );

await userEvent.click(
screen.getByRole( 'tab', {
name: 'Styles',
} )
);

fireEvent.change(
screen.getByRole( 'spinbutton', {
name: 'Overlay opacity',
} ),
{
target: { value: '40' },
}
);

expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-40' );
} );

test( 'applies selected opacity to block when slider moved', async () => {
const { container } = await setup();

await createAndselectBlock();

// eslint-disable-next-line testing-library/no-node-access
const overlay = container.getElementsByClassName(
'wp-block-cover__background'
);

expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );

await userEvent.click(
screen.getByRole( 'tab', {
name: 'Styles',
} )
);

fireEvent.change(
screen.getByRole( 'slider', {
name: 'Overlay opacity',
} ),
{ target: { value: 30 } }
);

expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
} );
} );

describe( 'Dimensions panel', () => {
test( 'sets minHeight attribute when number control value changed', async () => {
await setup();
await createAndselectBlock();
await userEvent.click(
screen.getByRole( 'tab', {
name: 'Styles',
} )
);
await userEvent.clear(
screen.getByLabelText( 'Minimum height of cover' )
);
await userEvent.type(
screen.getByLabelText( 'Minimum height of cover' ),
'300'
);

expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
'min-height: 300px;'
);
} );
} );
} );
} );
Loading