diff --git a/__device-tests__/gutenberg-editor-sanity-test-1-visual.test.js b/__device-tests__/gutenberg-editor-sanity-test-1-visual.test.js new file mode 100644 index 0000000000..ef84b4c54d --- /dev/null +++ b/__device-tests__/gutenberg-editor-sanity-test-1-visual.test.js @@ -0,0 +1,307 @@ +/** + * Internal dependencies + */ +const { blockNames } = editorPage; +import { takeScreenshot } from './utils'; +const { + toggleOrientation, + isAndroid, + swipeFromTo, + toggleDarkMode, + isEditorVisible, +} = e2eUtils; + +describe( 'Gutenberg Editor - Test Suite 1', () => { + describe( 'Columns block', () => { + it( 'displays placeholders when unselected', async () => { + await editorPage.addNewBlock( blockNames.columns ); + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + // Dismiss columns layout picker + await editorPage.dismissBottomSheet(); + // Wait for the modal to close + await editorPage.driver.sleep( 3000 ); + // Select title to unfocus the block + const titleElement = await editorPage.getTitleElement(); + await titleElement.click(); + await editorPage.dismissKeyboard(); + + // Visual test check for portrait orientation + let screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + await toggleOrientation( editorPage.driver ); + // Wait for the device to finish rotating + await editorPage.driver.sleep( 3000 ); + + // Visual test check for landscape orientation + screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + await toggleOrientation( editorPage.driver ); + // Wait for the device to finish rotating + await editorPage.driver.sleep( 3000 ); + const columnsBlock = await editorPage.getBlockAtPosition( + blockNames.columns + ); + await columnsBlock.click(); + await editorPage.removeBlock(); + } ); + + it( 'displays correctly in portrait and landscape orientations', async () => { + await editorPage.addNewBlock( blockNames.columns ); + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + // Dismiss columns layout picker + await editorPage.dismissBottomSheet(); + // Wait for the modal to close + await editorPage.driver.sleep( 3000 ); + + // Click the block appender within the first column + if ( isAndroid() ) { + await editorPage.driver + .elementByAccessibilityId( 'Column Block. Row 1' ) + .click(); + const appenderButton = await editorPage.waitForElementToBeDisplayedByXPath( + '(//android.view.ViewGroup[@content-desc="block-list"])[2]/android.widget.Button' + ); + await appenderButton.click(); + } else { + await editorPage.driver + .elementByAccessibilityId( 'Column Block. Row 1' ) + .click() + .click(); + } + + await editorPage.addNewBlock( blockNames.columns, { + skipInserterOpen: true, + } ); + + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + // Dismiss columns layout picker + await editorPage.dismissBottomSheet(); + // Wait for the modal to close + await editorPage.driver.sleep( 3000 ); + // Navigate upwards in block hierarchy + await editorPage.driver + .elementByAccessibilityId( 'Navigate Up' ) + .click() + .click(); + await editorPage.driver.sleep( 1000 ); + + // Visual test check for portrait orientation + let screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + await toggleOrientation( editorPage.driver ); + // Wait for the device to finish rotating + await editorPage.driver.sleep( 3000 ); + + // Visual test check for landscape orientation + screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + await toggleOrientation( editorPage.driver ); + // Wait for the device to finish rotating + await editorPage.driver.sleep( 3000 ); + await editorPage.removeBlock(); + } ); + + it( 'mover buttons display in the correct positions', async () => { + await editorPage.addNewBlock( blockNames.columns ); + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + // Dismiss columns layout picker + await editorPage.dismissBottomSheet(); + // Wait for the modal to close + await editorPage.driver.sleep( 3000 ); + + // Click the block appender within the first column + if ( isAndroid() ) { + await editorPage.driver + .elementByAccessibilityId( 'Column Block. Row 1' ) + .click(); + const appenderButton = await editorPage.waitForElementToBeDisplayedByXPath( + '(//android.view.ViewGroup[@content-desc="block-list"])[2]/android.widget.Button' + ); + await appenderButton.click(); + } else { + await editorPage.driver + .elementByAccessibilityId( 'Column Block. Row 1' ) + .click() + .click(); + } + + await editorPage.addNewBlock( blockNames.columns, { + skipInserterOpen: true, + } ); + + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + // Dismiss columns layout picker + await editorPage.dismissBottomSheet(); + await toggleOrientation( editorPage.driver ); + // Wait for the device to finish rotating + await editorPage.driver.sleep( 3000 ); + + // Visual test check for landscape orientation + let screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + // Navigate upwards in block hierarchy + await editorPage.driver + .elementByAccessibilityId( 'Navigate Up' ) + .click(); + await editorPage.driver.sleep( 1000 ); + + // Visual test check for landscape orientation + screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + await toggleOrientation( editorPage.driver ); + // Wait for the device to finish rotating + await editorPage.driver.sleep( 3000 ); + // Navigate upwards in block hierarchy + await editorPage.driver + .elementByAccessibilityId( 'Navigate Up' ) + .click(); + await editorPage.driver.sleep( 1000 ); + await editorPage.removeBlock(); + } ); + + it( 'displays with correct colors with dark mode enabled', async () => { + await toggleDarkMode( editorPage.driver, true ); + + // The Android editor requires a restart to apply dark mode + if ( isAndroid() ) { + await editorPage.driver.resetApp(); + await isEditorVisible( editorPage.driver ); + } + + await editorPage.addNewBlock( blockNames.columns ); + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + // Dismiss columns layout picker + await editorPage.dismissBottomSheet(); + // Wait for the modal to close + await editorPage.driver.sleep( 3000 ); + + // Visual test check for placeholders + let screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + // Click the block appender within the first column + if ( isAndroid() ) { + await editorPage.driver + .elementByAccessibilityId( 'Column Block. Row 1' ) + .click(); + const appenderButton = await editorPage.waitForElementToBeDisplayedByXPath( + '(//android.view.ViewGroup[@content-desc="block-list"])[2]/android.widget.Button' + ); + await appenderButton.click(); + } else { + await editorPage.driver + .elementByAccessibilityId( 'Column Block. Row 1' ) + .click() + .click(); + } + + // Append a Preformatted block + const blockButton = await editorPage.findBlockButton( + blockNames.preformatted + ); + if ( isAndroid() ) { + await blockButton.click(); + } else { + await editorPage.driver.execute( 'mobile: tap', { + element: blockButton, + x: 10, + y: 10, + } ); + } + + // TODO: determine a way to type a text block nested within a Columns block + + // Wait for the modal to close + await editorPage.driver.sleep( 3000 ); + // Navigate upwards in block hierarchy + await editorPage.driver + .elementByAccessibilityId( 'Navigate Up' ) + .click() + .click(); + await editorPage.waitForKeyboardToBeHidden(); + + // Visual test check for nested content + screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot(); + + await editorPage.removeBlock(); + await toggleDarkMode( editorPage.driver, false ); + + // The Android editor requires a restart to apply dark mode + if ( isAndroid() ) { + await editorPage.driver.resetApp(); + await isEditorVisible( editorPage.driver ); + } + } ); + } ); + + it( 'sliders display proportionate fill level previews', async () => { + await editorPage.addNewBlock( blockNames.columns ); + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + await editorPage.dismissBottomSheet(); + await editorPage.openBlockSettings(); + // Wait for the modal to open + await editorPage.driver.sleep( 3000 ); + + const cellId = isAndroid() + ? 'Column 1. Width is 50 Percent (%)., double-tap to change unit' + : 'Column 1. Width is 50 Percent (%).'; + const cell = await editorPage.driver.elementByAccessibilityId( cellId ); + const cellSize = await cell.getSize(); + const cellLocation = await cell.getLocation(); + const scrollOffset = isAndroid() ? 350 : 100; + + // Reveal default column width cells + await swipeFromTo( + editorPage.driver, + { + x: cellLocation.x + cellSize.width / 2, + y: cellLocation.y + cellSize.height / 2, + }, + { + x: cellLocation.x + cellSize.width / 2, + y: cellLocation.y + cellSize.height / 2 - scrollOffset, + }, + 1000 + ); + // Shrink the first column + await swipeFromTo( + editorPage.driver, + { + x: cellLocation.x + cellSize.width * 0.42, + y: cellLocation.y - scrollOffset + cellSize.height * 0.69, + }, + { + x: + cellLocation.x + + cellSize.width * 0.42 - + cellSize.width * 0.15, + y: cellLocation.y - scrollOffset + cellSize.height * 0.69, + }, + 1000 + ); + + // Visual test check for adjusted columns + const screenshot = await takeScreenshot(); + expect( screenshot ).toMatchImageSnapshot( { + // Detect minute differences in column preview sizes + failureThreshold: 0, // 0% + } ); + + await editorPage.dismissBottomSheet(); + await editorPage.removeBlock(); + } ); +} ); diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-1-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-1-android.png new file mode 100644 index 0000000000..418c8012ba Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-1-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-1-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-1-ios.png new file mode 100644 index 0000000000..5261022962 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-1-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-2-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-2-android.png new file mode 100644 index 0000000000..7136e9c8ff Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-2-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-2-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-2-ios.png new file mode 100644 index 0000000000..0646116ddb Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-correctly-in-portrait-and-landscape-orientations-2-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-1-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-1-android.png new file mode 100644 index 0000000000..ad40c22246 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-1-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-1-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-1-ios.png new file mode 100644 index 0000000000..a0910575da Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-1-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-2-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-2-android.png new file mode 100644 index 0000000000..adea7a1451 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-2-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-2-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-2-ios.png new file mode 100644 index 0000000000..cc8c304b65 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-placeholders-when-unselected-2-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-android.png new file mode 100644 index 0000000000..0fa98a2d34 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-ios.png new file mode 100644 index 0000000000..876bc6967a Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-android.png new file mode 100644 index 0000000000..dd890f168f Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-ios.png new file mode 100644 index 0000000000..1723bd0bcc Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-1-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-1-android.png new file mode 100644 index 0000000000..523e4a2cb8 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-1-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-1-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-1-ios.png new file mode 100644 index 0000000000..1c7733761a Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-1-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-2-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-2-android.png new file mode 100644 index 0000000000..37e7292eaf Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-2-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-2-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-2-ios.png new file mode 100644 index 0000000000..86b9621110 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-columns-block-mover-buttons-display-in-the-correct-positions-2-ios.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-sliders-display-proportionate-fill-level-previews-1-android.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-sliders-display-proportionate-fill-level-previews-1-android.png new file mode 100644 index 0000000000..46ddf2cc74 Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-sliders-display-proportionate-fill-level-previews-1-android.png differ diff --git a/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-sliders-display-proportionate-fill-level-previews-1-ios.png b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-sliders-display-proportionate-fill-level-previews-1-ios.png new file mode 100644 index 0000000000..d2c6e1700e Binary files /dev/null and b/__device-tests__/image-snapshots/gutenberg-editor-sanity-test-1-visual-test-js-gutenberg-editor-test-suite-4-sliders-display-proportionate-fill-level-previews-1-ios.png differ diff --git a/gutenberg b/gutenberg index c286242edd..8039d57822 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit c286242edd8ac0f7113c82028551e75109a4848b +Subproject commit 8039d57822457b2a639142375beb6dac9e6bf468