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

[Components] Update FontSize control #35395

Merged
merged 13 commits into from
Oct 14, 2021
Prev Previous commit
Next Next commit
update e2e tests part 1
ntsekouras committed Oct 14, 2021
commit fe2e84452647fa6d0b72e16968fe383b6a9cfe25

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { first } from 'lodash';

/**
* WordPress dependencies
*/
@@ -15,7 +10,6 @@ import {
saveDraft,
openDocumentSettingsSidebar,
isCurrentURL,
pressKeyTimes,
} from '@wordpress/e2e-test-utils';

describe( 'Change detection', () => {
@@ -371,8 +365,6 @@ describe( 'Change detection', () => {
} );

it( 'consecutive edits to the same attribute should mark the post as dirty after a save', async () => {
const FONT_SIZE_LABEL_SELECTOR =
"//label[contains(text(), 'Font size')]";
// Open the sidebar block settings.
await openDocumentSettingsSidebar();
await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
@@ -387,11 +379,12 @@ describe( 'Change detection', () => {
pressKeyWithModifier( 'primary', 'S' ),
] );

// Increase the paragraph's font size.
// Change the paragraph's `drop cap`.
await page.click( '[data-type="core/paragraph"]' );
await first( await page.$x( FONT_SIZE_LABEL_SELECTOR ) ).click();
await pressKeyTimes( 'ArrowDown', 2 );
await page.keyboard.press( 'Enter' );
const [ dropCapToggle ] = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
await dropCapToggle.click();
await page.click( '[data-type="core/paragraph"]' );

// Check that the post is dirty.
@@ -403,12 +396,9 @@ describe( 'Change detection', () => {
pressKeyWithModifier( 'primary', 'S' ),
] );

// Increase the paragraph's font size again.
await page.click( '[data-type="core/paragraph"]' );
await first( await page.$x( FONT_SIZE_LABEL_SELECTOR ) ).click();
await pressKeyTimes( 'ArrowDown', 3 );
await page.keyboard.press( 'Enter' );
// Change the paragraph's `drop cap` again.
await page.click( '[data-type="core/paragraph"]' );
await dropCapToggle.click();

// Check that the post is dirty.
await page.waitForSelector( '.editor-post-save-draft' );
33 changes: 16 additions & 17 deletions packages/e2e-tests/specs/editor/various/editor-modes.test.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { first } from 'lodash';

/**
* WordPress dependencies
*/
@@ -57,12 +52,13 @@ describe( 'Editing modes (visual/HTML)', () => {
await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Edit as HTML' );

// The font size picker for the paragraph block should appear, even in
// The `drop cap` toggle for the paragraph block should appear, even in
// HTML editing mode.
const fontSizePicker = await page.$x(
"//label[contains(text(), 'Font size')]"
const dropCapToggle = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
expect( fontSizePicker ).toHaveLength( 1 );

expect( dropCapToggle ).toHaveLength( 1 );
} );

it( 'should update HTML in HTML mode when sidebar is used', async () => {
@@ -77,20 +73,19 @@ describe( 'Editing modes (visual/HTML)', () => {
);
expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );

// Change the font size using the sidebar.
await first(
await page.$x( "//label[contains(text(), 'Font size')]" )
).click();
await pressKeyTimes( 'ArrowDown', 4 );
await page.keyboard.press( 'Enter' );
// Change the `drop cap` using the sidebar.
const [ dropCapToggle ] = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
await dropCapToggle.click();

// Make sure the HTML content updated.
htmlBlockContent = await page.$eval(
'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
( node ) => node.textContent
);
expect( htmlBlockContent ).toEqual(
'<p class="has-large-font-size">Hello world!</p>'
'<p class="has-drop-cap">Hello world!</p>'
);
} );

@@ -152,6 +147,10 @@ describe( 'Editing modes (visual/HTML)', () => {

await switchEditorModeTo( 'Visual' );

expect( await getCurrentPostContent() ).toMatchSnapshot();
expect( await getCurrentPostContent() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>Hi world!</p>
<!-- /wp:paragraph -->"
` );
} );
} );
12 changes: 5 additions & 7 deletions packages/e2e-tests/specs/widgets/customizing-widgets.test.js
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@ import {
*/
// eslint-disable-next-line no-restricted-imports
import { find, findAll } from 'puppeteer-testing-library';
import { first } from 'lodash';

const twentyTwentyError = `Stylesheet twentytwenty-block-editor-styles-css was not properly added.
For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
@@ -831,12 +830,11 @@ describe( 'Widgets Customizer', () => {
} );
await showMoreSettingsButton.click();

// Change font size (Any change made in this section is sufficient; not required to be font size)
const CUSTOM_FONT_SIZE_LABEL_SELECTOR =
"//fieldset[legend[contains(text(),'Font size')]]//label[contains(text(), 'Custom')]";
await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click();
await page.keyboard.type( '23' );
await page.keyboard.press( 'Enter' );
// Change `drop cap` (Any change made in this section is sufficient; not required to be `drop cap`).
const [ dropCapToggle ] = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
await dropCapToggle.click();

// Now that we've made a change:
// (1) Publish button should be active