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

Block Editor: Refactor ColorPaletteControl tests to RTL #44869

Merged
merged 1 commit into from
Oct 11, 2022
Merged

Block Editor: Refactor ColorPaletteControl tests to RTL #44869

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
126 changes: 49 additions & 77 deletions packages/block-editor/src/components/colors-gradients/test/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import { render, screen } from '@testing-library/react';
import { create, act } from 'react-test-renderer';

/**
* Internal dependencies
Expand All @@ -11,15 +10,6 @@ import ColorGradientControl from '../control';

const noop = () => {};

const getButtonWithAriaLabelStartPredicate =
( ariaLabelStart ) => ( element ) => {
return (
element.type === 'button' &&
element.props[ 'aria-label' ] &&
element.props[ 'aria-label' ].startsWith( ariaLabelStart )
);
};

describe( 'ColorPaletteControl', () => {
it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
render(
Expand Down Expand Up @@ -64,25 +54,21 @@ describe( 'ColorPaletteControl', () => {
} );

it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
let wrapper;

await act( async () => {
wrapper = create(
<ColorGradientControl
label="Test Color Gradient"
colorValue="#f00"
colors={ [
{ color: '#f00', name: 'red' },
{ color: '#0f0', name: 'green' },
] }
gradients={ [] }
disableCustomColors={ false }
disableCustomGradients={ true }
onColorChange={ noop }
onGradientChange={ noop }
/>
);
} );
render(
<ColorGradientControl
label="Test Color Gradient"
colorValue="#f00"
colors={ [
{ color: '#f00', name: 'red' },
{ color: '#0f0', name: 'green' },
] }
gradients={ [] }
disableCustomColors={ false }
disableCustomGradients={ true }
onColorChange={ noop }
onGradientChange={ noop }
/>
);

// Is not showing the two tab buttons.
expect(
Expand All @@ -93,43 +79,35 @@ describe( 'ColorPaletteControl', () => {
).not.toBeInTheDocument();

// Is showing the two predefined Colors.
expect(
wrapper.root.findAll(
getButtonWithAriaLabelStartPredicate( 'Color:' )
)
).toHaveLength( 2 );
expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
} );

it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
let wrapper;

await act( async () => {
wrapper = create(
<ColorGradientControl
label="Test Color Gradient"
colorValue="#f00"
colors={ [] }
gradients={ [
{
gradient:
'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
name: 'Vivid cyan blue to vivid purple',
slug: 'vivid-cyan-blue-to-vivid-purple',
},
{
gradient:
'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
name: 'Light green cyan to vivid green cyan',
slug: 'light-green-cyan-to-vivid-green-cyan',
},
] }
disableCustomColors={ true }
disableCustomGradients={ false }
onColorChange={ noop }
onGradientChange={ noop }
/>
);
} );
render(
<ColorGradientControl
label="Test Color Gradient"
colorValue="#f00"
colors={ [] }
gradients={ [
{
gradient:
'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
name: 'Vivid cyan blue to vivid purple',
slug: 'vivid-cyan-blue-to-vivid-purple',
},
{
gradient:
'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
name: 'Light green cyan to vivid green cyan',
slug: 'light-green-cyan-to-vivid-green-cyan',
},
] }
disableCustomColors={ true }
disableCustomGradients={ false }
onColorChange={ noop }
onGradientChange={ noop }
/>
);

// Is not showing the two tab buttons.
expect(
Expand All @@ -140,22 +118,16 @@ describe( 'ColorPaletteControl', () => {
).not.toBeInTheDocument();

// Is showing the two predefined Gradients.
expect(
wrapper.root.findAll(
getButtonWithAriaLabelStartPredicate( 'Gradient:' )
)
).toHaveLength( 2 );
expect( screen.getAllByLabelText( /^Gradient:/ ) ).toHaveLength( 2 );

// Is showing the custom gradient picker.
expect(
wrapper.root.findAll(
( element ) =>
element.props &&
element.props.className &&
element.props.className.includes(
'components-custom-gradient-picker'
)
).length
).toBeGreaterThanOrEqual( 1 );
screen.getAllByRole( 'button', {
expanded: false,
name: /^Gradient control point at position/,
} )[ 0 ]
).toHaveClass(
'components-custom-gradient-picker__control-point-button'
);
} );
} );