From 70b12e09c6c0842f9cab16020244dda5c076abde Mon Sep 17 00:00:00 2001 From: Paul Von Schrottky Date: Fri, 16 Oct 2020 16:39:13 -0300 Subject: [PATCH 1/3] Add UI tests to unsupported block editor (#23729) * Add UI tests to unsupported block editor Test that tapping on the help button of an unsupported block shows the bottom sheet. Tapping on the edit button in the bottom sheet shows the unsupported block web view editor. * Revert UI device capability change Reverted the description of the device used for iOS UI tests back from iOS 13.5 to iOS 13.4 * Update UBE UI Test with the latest changes from masr * Update snapshot for Missing block test Co-authored-by: eToledo --- .../block-library/src/missing/edit.native.js | 3 + .../test/__snapshots__/edit.native.js.snap | 3 + .../gutenberg-editor-paragraph.test.js | 4 +- .../gutenberg-editor-paste.test.js | 2 +- ...utenberg-editor-unsupported-blocks.test.js | 58 +++++++++++++++++++ .../__device-tests__/helpers/test-data.js | 5 ++ .../__device-tests__/pages/editor-page.js | 45 +++++++++++++- 7 files changed, 114 insertions(+), 6 deletions(-) create mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js index bffe1b0a4132a9..af16f839e1bff1 100644 --- a/packages/block-library/src/missing/edit.native.js +++ b/packages/block-library/src/missing/edit.native.js @@ -69,6 +69,9 @@ export class UnsupportedBlockEdit extends Component { { // Restricting these test to Android because I was not able to update the html on iOS if ( isAndroid() ) { it( 'should be able to merge blocks with unknown html elements', async () => { - await editorPage.setHtmlContentAndroid( ` + await editorPage.setHtmlContent( `

abcD

@@ -205,7 +205,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { // Based on https://github.com/wordpress-mobile/gutenberg-mobile/pull/1507 it( 'should handle multiline paragraphs from web', async () => { - await editorPage.setHtmlContentAndroid( ` + await editorPage.setHtmlContent( `

multiple lines

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js index 75f18abd3c2511..cd3ace63eb9a1d 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js @@ -91,7 +91,7 @@ describe( 'Gutenberg Editor paste tests', () => { it( 'copies styled text from one paragraph block and pastes in another', async () => { // create paragraph block with styled text by editing html - await editorPage.setHtmlContentAndroid( testData.pasteHtmlText ); + await editorPage.setHtmlContent( testData.pasteHtmlText ); const paragraphBlockElement = await editorPage.getBlockAtPosition( paragraphBlockName ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js new file mode 100644 index 00000000000000..3a1dc715cf44a5 --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js @@ -0,0 +1,58 @@ +/** + * Internal dependencies + */ +import EditorPage from './pages/editor-page'; +import { setupDriver, isLocalEnvironment, stopDriver } from './helpers/utils'; +import testData from './helpers/test-data'; + +jest.setTimeout( 1000000 ); + +describe( 'Gutenberg Editor Unsupported Block Editor Tests', () => { + let driver; + let editorPage; + let allPassed = true; + + // Use reporter for setting status for saucelabs Job + if ( ! isLocalEnvironment() ) { + const reporter = { + specDone: async ( result ) => { + allPassed = allPassed && result.status !== 'failed'; + }, + }; + + jasmine.getEnv().addReporter( reporter ); + } + + beforeAll( async () => { + driver = await setupDriver(); + editorPage = new EditorPage( driver ); + } ); + + it( 'should be able to see visual editor', async () => { + await expect( editorPage.getBlockList() ).resolves.toBe( true ); + } ); + + it( 'should be able to open the unsupported block web view editor', async () => { + await editorPage.setHtmlContent( testData.unsupportedBlockHtml ); + + const firstVisibleBlock = await editorPage.getFirstBlockVisible(); + await firstVisibleBlock.click(); + + const helpButton = await editorPage.getUnsupportedBlockHelpButton(); + await helpButton.click(); + + const editButton = await editorPage.getUnsupportedBlockBottomSheetEditButton(); + await editButton.click(); + + await expect( + editorPage.getUnsupportedBlockWebView() + ).resolves.toBeTruthy(); + } ); + + afterAll( async () => { + if ( ! isLocalEnvironment() ) { + driver.sauceJobStatus( allPassed ); + } + await stopDriver( driver ); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js index 3f6086eb074684..ac77087d640138 100644 --- a/packages/react-native-editor/__device-tests__/helpers/test-data.js +++ b/packages/react-native-editor/__device-tests__/helpers/test-data.js @@ -98,3 +98,8 @@ exports.imageShorteHtml = `

rock music approaches at high velocity.

`; + +exports.unsupportedBlockHtml = ` +
+ +`; diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index a5aef6444eb698..4673b0b3f2884e 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -125,7 +125,7 @@ export default class EditorPage { let blockLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ accessibilityId }"]`; if ( ! isAndroid() ) { - blockLocator += '//XCUIElementTypeTextView'; + blockLocator = `//XCUIElementTypeTextView[starts-with(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityId }")]`; } return await this.driver.elementByXPath( blockLocator ); } @@ -143,11 +143,11 @@ export default class EditorPage { } // set html editor content explicitly - async setHtmlContentAndroid( html ) { + async setHtmlContent( html ) { await toggleHtmlMode( this.driver, true ); const htmlContentView = await this.getTextViewForHtmlViewContent(); - await htmlContentView.setText( html ); + await htmlContentView.type( html ); await toggleHtmlMode( this.driver, false ); } @@ -483,4 +483,43 @@ export default class EditorPage { ); return await typeString( this.driver, textViewElement, text, clear ); } + + // ============================= + // Unsupported Block functions + // ============================= + + async getUnsupportedBlockHelpButton() { + const accessibilityId = 'Help button'; + let blockLocator = + '//android.widget.Button[@content-desc="Help button, Tap here to show help"]'; + + if ( ! isAndroid() ) { + blockLocator = `//XCUIElementTypeButton[@name="${ accessibilityId }"]`; + } + return await this.driver.elementByXPath( blockLocator ); + } + + async getUnsupportedBlockBottomSheetEditButton() { + const accessibilityId = 'Edit using web editor'; + let blockLocator = + '//android.widget.Button[@content-desc="Edit using web editor"]'; + + if ( ! isAndroid() ) { + blockLocator = `//XCUIElementTypeButton[@name="${ accessibilityId }"]`; + } + return await this.driver.elementByXPath( blockLocator ); + } + + async getUnsupportedBlockWebView() { + let blockLocator = '//android.webkit.WebView'; + + if ( ! isAndroid() ) { + blockLocator = '//XCUIElementTypeWebView'; + } + + this.driver.setImplicitWaitTimeout( 20000 ); + const element = await this.driver.elementByXPath( blockLocator ); + this.driver.setImplicitWaitTimeout( 5000 ); + return element; + } } From 0736204012ba3c48bc91c391464c775109659a51 Mon Sep 17 00:00:00 2001 From: Sara Marcondes Date: Fri, 16 Oct 2020 13:50:46 -0700 Subject: [PATCH 2/3] TextareaControl: Use CSS-in-JS (#26131) * Add breakpoint mixin * Refine types for mixins * Add input mixins * Use CSS-in-JS for TextareaControl * Export new mixins * Rename misc-variables to config --- packages/components/src/style.scss | 1 - .../components/src/textarea-control/index.js | 3 +- .../src/textarea-control/style.scss | 4 -- .../styles/textarea-control-styles.js | 14 +++++ .../components/src/utils/breakpoint-values.js | 10 +++ packages/components/src/utils/breakpoint.js | 11 ++++ .../components/src/utils/colors-values.js | 2 + .../components/src/utils/config-values.js | 6 ++ packages/components/src/utils/config.js | 10 +++ packages/components/src/utils/font-values.js | 15 ++--- packages/components/src/utils/font.js | 5 ++ packages/components/src/utils/input/base.js | 29 +++++++++ packages/components/src/utils/input/index.js | 1 + .../src/utils/input/input-control.js | 62 +++++++++++++++++++ .../components/src/utils/reduce-motion.js | 2 +- packages/components/src/utils/style-mixins.js | 2 + 16 files changed, 160 insertions(+), 17 deletions(-) delete mode 100644 packages/components/src/textarea-control/style.scss create mode 100644 packages/components/src/textarea-control/styles/textarea-control-styles.js create mode 100644 packages/components/src/utils/breakpoint-values.js create mode 100644 packages/components/src/utils/breakpoint.js create mode 100644 packages/components/src/utils/config-values.js create mode 100644 packages/components/src/utils/config.js create mode 100644 packages/components/src/utils/input/base.js create mode 100644 packages/components/src/utils/input/index.js create mode 100644 packages/components/src/utils/input/input-control.js diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 68c62ca4be1043..8df959bfb4a428 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -40,7 +40,6 @@ @import "./spinner/style.scss"; @import "./tab-panel/style.scss"; @import "./text-control/style.scss"; -@import "./textarea-control/style.scss"; @import "./tip/style.scss"; @import "./toggle-control/style.scss"; @import "./toolbar/style.scss"; diff --git a/packages/components/src/textarea-control/index.js b/packages/components/src/textarea-control/index.js index 0de73cb7a91cbf..a39588bcc96c07 100644 --- a/packages/components/src/textarea-control/index.js +++ b/packages/components/src/textarea-control/index.js @@ -7,6 +7,7 @@ import { useInstanceId } from '@wordpress/compose'; * Internal dependencies */ import BaseControl from '../base-control'; +import { StyledTextarea } from './styles/textarea-control-styles'; export default function TextareaControl( { label, @@ -30,7 +31,7 @@ export default function TextareaControl( { help={ help } className={ className } > -