Skip to content

Commit

Permalink
Cover block: Add integration tests (#45409)
Browse files Browse the repository at this point in the history
  • Loading branch information
@glendaviesnz
glendaviesnz authored Mar 28, 2023
1 parent ec068b8 commit 0b12f97
Show file tree
Hide file tree
Showing 6 changed files with 519 additions and 107 deletions.
62 changes: 0 additions & 62 deletions packages/block-library/src/cover/test/block-controls.js
View file

This file was deleted.

324 changes: 324 additions & 0 deletions packages/block-library/src/cover/test/edit.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,324 @@
/**
* 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() {
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(
'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;'
);

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 () =>
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' );
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' );
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' );
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' );
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' );
await userEvent.type(
screen.getByLabelText( 'Alt text (alternative text)' ),
'Me'
);
expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
} );

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

await selectBlock( 'Block: Cover' );
expect(
within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
'img'
)
).toBeInTheDocument();

await userEvent.click(
screen.getByRole( 'button', {
name: 'Clear Media',
} )
);
expect(
within( screen.queryByLabelText( 'Block: Cover' ) ).queryByRole(
'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

1 comment on commit 0b12f97

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 0b12f97.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4548069674
📝 Reported issues:

Please sign in to comment.