Merge pull request #179 from 10up/fix/e2e-specs

Fix failing e2e tests

.github/workflows/e2e-tests.yml

@@ -13,12 +13,12 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Install Dependencies
         run: |
-          npm install
+          npm ci
           cd example/
-          npm install
+          npm ci
       - name: Build Plugin Assets
         run: |
           npm run build
@@ -30,13 +30,13 @@ jobs:
           npm run wp-env start
           npm run import-media
       - name: Run Cypress E2E Tests
-        uses: cypress-io/github-action@v3.0.2
+        uses: cypress-io/github-action@v5
         with:
+          browser: chrome
           # Sends test results to Cypress Dashboard
           record: true
           # Whether or not to load balance tests using multiple containers
           parallel: false
-          env: video=false
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

components/link/index.js

@@ -153,7 +153,16 @@ const Link = ({
 
 			{!isValidLink && (
 				<Tooltip text={__('URL or Text has not been set', '10up-block-components')}>
-					<Icon icon="warning" />
+					{/*
+					 * This additional span is needed to prevent an issue with how the Tooltip tries
+					 * to pass a ref to the Icon component. The Icon component is a functional
+					 * component and does not accept a ref.
+					 *
+					 * @see https://github.com/WordPress/gutenberg/issues/43129
+					 */}
+					<span>
+						<Icon icon="warning" />
+					</span>
 				</Tooltip>
 			)}
 

cypress.config.js

@@ -0,0 +1,19 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  projectId: 'dnr1ke',
+  videoCompression: 15,
+  env: {
+    username: 'admin',
+    password: 'password',
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:8889',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

cypress/integration/Image.spec.js → cypress/e2e/Image.spec.js

@@ -16,7 +16,7 @@ context('Image', () => {
         cy.get('#attachment-details-alt-text').type('Test Alt Text');
         cy.get('.media-button-select').contains('Select').click();
 
-        cy.get('.wp-block-example-image-example img').should('be.visible');
+        cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible');
 
         cy.get('.wp-block-example-image-example img')
             .should('have.attr', 'alt');
@@ -32,7 +32,9 @@ context('Image', () => {
         // return to the editor
         cy.get('a').contains('Edit Page').click();
 
-        cy.get('.wp-block-example-image-example img').should('be.visible');
+		cy.wait(500);
+
+        cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible');
 
 	})
 

cypress/integration/Link.spec.js → cypress/e2e/Link.spec.js

@@ -7,6 +7,23 @@ context('Link', () => {
 	});
 
 	it('allows the editor to pick a link directly inline', () => {
+
+		Cypress.on('uncaught:exception', (err, runnable) => {
+
+			/*
+			 * the ResizeObserver loop limit exceeded error is thrown because of the underlying
+			 * implementation of the Popover component which uses the floating-ui library
+			 *
+			 * @see https://github.com/floating-ui/floating-ui/issues/1740
+			 */
+			if (err.message.includes('ResizeObserver loop limit exceeded')) {
+				// returning false here prevents Cypress from failing the test
+				return false;
+			}
+
+			return runnable;
+		});
+
 		cy.createPost({title: 'Link Component'});
 		cy.insertBlock('Link Example');
 

cypress/integration/Repeater.spec.js → cypress/e2e/Repeater.spec.js

@@ -24,9 +24,7 @@ context('Repeater', () => {
 		cy.insertBlock('Repeater component Example');
 
 		cy.savePost();
-	})
-
-	it('Adding repeater fields', () => {
+
 		function addItem( pageName = '', visibility = false ) {
 			cy.get( '.repeater-item' ).then( $repeaterItem => {
 				if ( $repeaterItem.length === 1 && $repeaterItem.find( '.repeater-item-page-name input[type="text"]' ).val().length === 0 ) {
@@ -83,15 +81,13 @@ context('Repeater', () => {
 		cy.updatePost();
 
 		cy.get('.repeater-item').should('have.length', 3);
-	});
-
-	it('Verify repeater items', () => {
-		const items = [
+
+		const newItems = [
 			{ title: 'Home', status: true },
 			{ title: 'About Us', status: false },
 			{ title: 'Blog', status: false },
 		];
 
-		verifyRepeaterItems(items);
+		verifyRepeaterItems(newItems);
 	});
 })

example/plugin.php

@@ -46,11 +46,11 @@ function register_block() {
 			'render_callback' => function( $attributes, $content, $block ) {
 				$title = $attributes['title'];
 
-				$link_one_url   = $attributes['url'];
-				$link_one_label = $attributes['text'];
+				$link_one_url   = isset( $attributes['url'] ) ? $attributes['url'] : '';
+				$link_one_label = isset( $attributes['text'] ) ? $attributes['text'] : '';
 
-				$link_two_url   = $attributes['urlTwo'];
-				$link_two_label = $attributes['textTwo'];
+				$link_two_url   = isset( $attributes['urlTwo'] ) ? $attributes['urlTwo'] : '';
+				$link_two_label = isset( $attributes['textTwo'] ) ? $attributes['textTwo'] : '';
 
 				$wrapper_attributes = get_block_wrapper_attributes();
 

package.json

@@ -48,7 +48,7 @@
     "@floating-ui/react-dom": "^1.0.0",
     "@wordpress/icons": "^9.7.0",
     "array-move": "^3.0.1",
-    "cypress": "^9.5.0",
+    "cypress": "^12.1.0",
     "prop-types": "^15.7.2",
     "uuid": "^8.3.2"
   },