[Mobile] - Support Visual Regression testing (#47845)

* Mobile - Support Visual regression testing * Mobile - Jest UI Config - Rename E2E globals to keep consistency * Mobile - Update eslintrc config
WordPress · Feb 23, 2023 · 5e2269a · 5e2269a · github-actions · Feb 23, 2023
1 parent 626362e
commit 5e2269a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/packages/react-native-editor/__device-tests__/.eslintrc.js b/packages/react-native-editor/__device-tests__/.eslintrc.js
@@ -1,7 +1,10 @@
 module.exports = {
 	extends: '../.eslintrc.js',
 	globals: {
-		editorPage: true, // Defined in 'jest_ui_test_environment.js'
+		// Defined in 'jest_ui_test_environment.js'
+		editorPage: true,
+		e2eTestData: true,
+		e2eUtils: true,
 	},
 	rules: {
 		'jest/expect-expect': 'off',

diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js
@@ -183,3 +183,22 @@ exports.lettersInParagraphBlock = `<!-- wp:paragraph -->
 exports.spacerBlock = `<!-- wp:spacer -->
 <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->`;
+
+exports.galleryBlock = `<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Quote.png" alt=""/><figcaption class="wp-element-caption">Quote</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Image.png" alt=""/><figcaption class="wp-element-caption">Image</figcaption></figure>
+<!-- /wp:image -->
+</figure>
+<!-- /wp:gallery -->`;
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -872,6 +872,7 @@ const blockNames = {
 	spacer: 'Spacer',
 	verse: 'Verse',
 	shortcode: 'Shortcode',
+	group: 'Group',
 };
 
 module.exports = { initializeEditorPage, blockNames };
diff --git a/packages/react-native-editor/jest_ui_test_environment.js b/packages/react-native-editor/jest_ui_test_environment.js
@@ -3,7 +3,10 @@
  */
 const {
 	initializeEditorPage,
+	blockNames,
 } = require( './__device-tests__/pages/editor-page' );
+const utils = require( './__device-tests__/helpers/utils' );
+const testData = require( './__device-tests__/helpers/test-data' );
 
 /**
  * External dependencies
@@ -16,6 +19,9 @@ class CustomEnvironment extends JSDOMEnvironment {
 		try {
 			await super.setup();
 			this.global.editorPage = await initializeEditorPage();
+			this.global.editorPage.blockNames = blockNames;
+			this.global.e2eUtils = utils;
+			this.global.e2eTestData = testData;
 		} catch ( error ) {
 			// eslint-disable-next-line no-console
 			console.error( 'E2E setup exception:', error );