Skip to content

Commit b7c20e9

Browse files
author
Gerardo
committed
Mobile - Cover block - Update tests: Adds test cases for setting the overlay solid and gradient color, as well as resetting the overlay color.
1 parent 17fe0d1 commit b7c20e9

File tree

3 files changed

+222
-17
lines changed

3 files changed

+222
-17
lines changed

‎packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
4+
"<!-- wp:cover -->
5+
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
6+
<p class=\\"has-text-align-center\\"></p>
7+
<!-- /wp:paragraph --></div></div>
8+
<!-- /wp:cover -->"
9+
`;
10+
11+
exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
12+
"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
13+
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-vivid-red-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
14+
<p class=\\"has-text-align-center\\"></p>
15+
<!-- /wp:paragraph --></div></div>
16+
<!-- /wp:cover -->"
17+
`;
18+
19+
exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
20+
"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
21+
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
22+
<p class=\\"has-text-align-center\\"></p>
23+
<!-- /wp:paragraph --></div></div>
24+
<!-- /wp:cover -->"
25+
`;

‎packages/block-library/src/cover/test/edit.native.js‎

Lines changed: 195 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
/**
22
* External dependencies
33
*/
4-
import { Image } from 'react-native';
5-
import { render, fireEvent, waitFor } from 'test/helpers';
4+
import { AccessibilityInfo, Image } from 'react-native';
5+
import {
6+
getEditorHtml,
7+
initializeEditor,
8+
render,
9+
fireEvent,
10+
waitFor,
11+
within,
12+
} from 'test/helpers';
613

714
/**
815
* WordPress dependencies
916
*/
1017
import { BottomSheetSettings, BlockEdit } from '@wordpress/block-editor';
1118
import { SlotFillProvider } from '@wordpress/components';
12-
import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
19+
import { setDefaultBlockName, unregisterBlockType } from '@wordpress/blocks';
1320
import {
1421
requestMediaPicker,
1522
requestMediaEditor,
@@ -19,7 +26,9 @@ import {
1926
* Internal dependencies
2027
*/
2128
import { IMAGE_BACKGROUND_TYPE } from '../shared';
22-
import { metadata, settings, name } from '../index';
29+
import * as paragraph from '../../paragraph';
30+
import * as cover from '..';
31+
import { registerBlock } from '../..';
2332

2433
// Avoid errors due to mocked stylesheet files missing required selectors
2534
jest.mock( '@wordpress/compose', () => ( {
@@ -33,10 +42,25 @@ jest.mock( '@wordpress/compose', () => ( {
3342
) ),
3443
} ) );
3544

45+
const COVER_BLOCK_PLACEHOLDER_HTML = `<!-- wp:cover -->
46+
<div class="wp-block-cover"><span aria-hidden="true" class="has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
47+
<!-- /wp:cover -->`;
48+
const COVER_BLOCK_SOLID_COLOR_HTML = `<!-- wp:cover {"overlayColor":"cyan-bluish-gray"} -->
49+
<div class="wp-block-cover"><span aria-hidden="true" class="has-cyan-bluish-gray-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
50+
<p class="has-text-align-center"></p>
51+
<!-- /wp:paragraph --></div></div>
52+
<!-- /wp:cover -->`;
53+
54+
const COLOR_PINK = '#f78da7';
55+
const COLOR_RED = '#cf2e2e';
56+
const COLOR_GRAY = '#abb8c3';
57+
const GRADIENT_GREEN =
58+
'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
59+
3660
// Simplified tree to render Cover edit within slot
3761
const CoverEdit = ( props ) => (
3862
<SlotFillProvider>
39-
<BlockEdit isSelected name={ name } clientId={ 0 } { ...props } />
63+
<BlockEdit isSelected name={ cover.name } clientId={ 0 } { ...props } />
4064
<BottomSheetSettings isVisible />
4165
</SlotFillProvider>
4266
);
@@ -55,26 +79,24 @@ beforeAll( () => {
5579
const getSizeSpy = jest.spyOn( Image, 'getSize' );
5680
getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
5781

82+
AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
83+
Promise.resolve( true )
84+
);
85+
5886
// Register required blocks
59-
registerBlockType( name, {
60-
...metadata,
61-
...settings,
62-
} );
63-
registerBlockType( 'core/paragraph', {
64-
category: 'text',
65-
title: 'Paragraph',
66-
edit: () => {},
67-
save: () => {},
68-
} );
87+
registerBlock( paragraph );
88+
registerBlock( cover );
89+
setDefaultBlockName( paragraph.name );
6990
} );
7091

7192
afterAll( () => {
7293
// Restore mocks
7394
Image.getSize.mockRestore();
95+
AccessibilityInfo.isScreenReaderEnabled.mockReset();
7496

7597
// Clean up registered blocks
76-
unregisterBlockType( name );
77-
unregisterBlockType( 'core/paragraph' );
98+
unregisterBlockType( paragraph.name );
99+
unregisterBlockType( cover.name );
78100
} );
79101

80102
describe( 'when no media is attached', () => {
@@ -270,3 +292,159 @@ describe( 'when an image is attached', () => {
270292
);
271293
} );
272294
} );
295+
296+
describe( 'color settings', () => {
297+
it( 'sets a color for the overlay background when the placeholder is visible', async () => {
298+
const { getByTestId, getByA11yLabel } = await initializeEditor( {
299+
initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
300+
} );
301+
302+
const block = await waitFor( () =>
303+
getByA11yLabel( 'Cover block. Empty' )
304+
);
305+
expect( block ).toBeDefined();
306+
307+
// Select a color from the placeholder palette
308+
const colorPalette = await waitFor( () =>
309+
getByTestId( 'color-palette' )
310+
);
311+
const colorButton = within( colorPalette ).getByTestId( COLOR_PINK );
312+
313+
expect( colorButton ).toBeDefined();
314+
fireEvent.press( colorButton );
315+
316+
// Wait for the block to be created
317+
const coverBlockWithOverlay = await waitFor( () =>
318+
getByA11yLabel( /Cover Block\. Row 1/ )
319+
);
320+
fireEvent.press( coverBlockWithOverlay );
321+
322+
// Open Block Settings
323+
const settingsButton = await waitFor( () =>
324+
getByA11yLabel( 'Open Settings' )
325+
);
326+
fireEvent.press( settingsButton );
327+
328+
// Wait for Block Settings to be visible
329+
const blockSettingsModal = getByTestId( 'block-settings-modal' );
330+
await waitFor( () => blockSettingsModal.props.isVisible );
331+
332+
// Open the overlay color settings
333+
const colorOverlay = await waitFor( () =>
334+
getByA11yLabel( 'Color. Empty' )
335+
);
336+
expect( colorOverlay ).toBeDefined();
337+
fireEvent.press( colorOverlay );
338+
339+
// Find the selected color
340+
const colorPaletteButton = await waitFor( () =>
341+
getByTestId( COLOR_PINK )
342+
);
343+
expect( colorPaletteButton ).toBeDefined();
344+
345+
// Select another color
346+
const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
347+
fireEvent.press( newColorButton );
348+
349+
expect( getEditorHtml() ).toMatchSnapshot();
350+
} );
351+
352+
it( 'sets a gradient overlay background when a solid background was already selected', async () => {
353+
const { getByTestId, getByA11yLabel } = await initializeEditor( {
354+
initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
355+
} );
356+
357+
// Wait for the block to be created
358+
const coverBlock = await waitFor( () =>
359+
getByA11yLabel( /Cover Block\. Row 1/ )
360+
);
361+
expect( coverBlock ).toBeDefined();
362+
fireEvent.press( coverBlock );
363+
364+
// Open Block Settings
365+
const settingsButton = await waitFor( () =>
366+
getByA11yLabel( 'Open Settings' )
367+
);
368+
fireEvent.press( settingsButton );
369+
370+
// Wait for Block Settings to be visible
371+
const blockSettingsModal = getByTestId( 'block-settings-modal' );
372+
await waitFor( () => blockSettingsModal.props.isVisible );
373+
374+
// Open the overlay color settings
375+
const colorOverlay = await waitFor( () =>
376+
getByA11yLabel( 'Color. Empty' )
377+
);
378+
expect( colorOverlay ).toBeDefined();
379+
fireEvent.press( colorOverlay );
380+
381+
// Find the selected color
382+
const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
383+
expect( colorButton ).toBeDefined();
384+
385+
// Open the gradients
386+
const gradientsButton = await waitFor( () =>
387+
getByA11yLabel( 'Gradient' )
388+
);
389+
expect( gradientsButton ).toBeDefined();
390+
391+
fireEvent( gradientsButton, 'layout', {
392+
nativeEvent: { layout: { width: 80, height: 26 } },
393+
} );
394+
fireEvent.press( gradientsButton );
395+
396+
// Find the gradient color
397+
const newGradientButton = await waitFor( () =>
398+
getByTestId( GRADIENT_GREEN )
399+
);
400+
expect( newGradientButton ).toBeDefined();
401+
fireEvent.press( newGradientButton );
402+
403+
expect( getEditorHtml() ).toMatchSnapshot();
404+
} );
405+
406+
it( 'clears the selected overlay color and mantains the inner blocks', async () => {
407+
const {
408+
getByTestId,
409+
getByA11yLabel,
410+
getByText,
411+
} = await initializeEditor( {
412+
initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
413+
} );
414+
415+
// Wait for the block to be created
416+
const coverBlock = await waitFor( () =>
417+
getByA11yLabel( /Cover Block\. Row 1/ )
418+
);
419+
expect( coverBlock ).toBeDefined();
420+
fireEvent.press( coverBlock );
421+
422+
// Open Block Settings
423+
const settingsButton = await waitFor( () =>
424+
getByA11yLabel( 'Open Settings' )
425+
);
426+
fireEvent.press( settingsButton );
427+
428+
// Wait for Block Settings to be visible
429+
const blockSettingsModal = getByTestId( 'block-settings-modal' );
430+
await waitFor( () => blockSettingsModal.props.isVisible );
431+
432+
// Open the overlay color settings
433+
const colorOverlay = await waitFor( () =>
434+
getByA11yLabel( 'Color. Empty' )
435+
);
436+
expect( colorOverlay ).toBeDefined();
437+
fireEvent.press( colorOverlay );
438+
439+
// Find the selected color
440+
const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
441+
expect( colorButton ).toBeDefined();
442+
443+
// Reset the selected color
444+
const resetButton = await waitFor( () => getByText( 'Reset' ) );
445+
expect( resetButton ).toBeDefined();
446+
fireEvent.press( resetButton );
447+
448+
expect( getEditorHtml() ).toMatchSnapshot();
449+
} );
450+
} );

‎packages/components/src/color-palette/index.native.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@ function ColorPalette( {
219219
onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }
220220
onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
221221
ref={ scrollViewRef }
222+
testID="color-palette"
222223
>
223224
{ shouldShowCustomIndicator && (
224225
<View
@@ -266,6 +267,7 @@ function ColorPalette( {
266267
selected: isSelected( color ),
267268
} }
268269
accessibilityHint={ color }
270+
testID={ color }
269271
>
270272
<Animated.View
271273
style={ {

0 commit comments

Comments
 (0)