diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml index 99d267a4..08ccdda9 100644 --- a/.github/workflows/e2e-tests.yml +++ b/.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 }} diff --git a/components/link/index.js b/components/link/index.js index b76e4da3..025b69ef 100644 --- a/components/link/index.js +++ b/components/link/index.js @@ -153,7 +153,16 @@ const Link = ({ {!isValidLink && ( - + {/* + * 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 + */} + + + )} diff --git a/cypress.config.js b/cypress.config.js new file mode 100644 index 00000000..a018e1b8 --- /dev/null +++ b/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}', + }, +}) diff --git a/cypress.json b/cypress.json deleted file mode 100644 index f6a5807c..00000000 --- a/cypress.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "projectId": "dnr1ke", - "videoCompression": 15, - "baseUrl": "http://localhost:8889", - "env": { - "username": "admin", - "password": "password" - } -} diff --git a/cypress/integration/IconPicker.spec.js b/cypress/e2e/IconPicker.spec.js similarity index 100% rename from cypress/integration/IconPicker.spec.js rename to cypress/e2e/IconPicker.spec.js diff --git a/cypress/integration/Image.spec.js b/cypress/e2e/Image.spec.js similarity index 83% rename from cypress/integration/Image.spec.js rename to cypress/e2e/Image.spec.js index 38c94e7f..18f8f1b9 100644 --- a/cypress/integration/Image.spec.js +++ b/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'); }) diff --git a/cypress/integration/Link.spec.js b/cypress/e2e/Link.spec.js similarity index 81% rename from cypress/integration/Link.spec.js rename to cypress/e2e/Link.spec.js index 2aeda59a..fb350ff5 100644 --- a/cypress/integration/Link.spec.js +++ b/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'); diff --git a/cypress/integration/Repeater.spec.js b/cypress/e2e/Repeater.spec.js similarity index 95% rename from cypress/integration/Repeater.spec.js rename to cypress/e2e/Repeater.spec.js index 55269cbb..0d915fbf 100644 --- a/cypress/integration/Repeater.spec.js +++ b/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); }); }) diff --git a/cypress/integration/registerBlockExtension.spec.js b/cypress/e2e/registerBlockExtension.spec.js similarity index 100% rename from cypress/integration/registerBlockExtension.spec.js rename to cypress/e2e/registerBlockExtension.spec.js diff --git a/cypress/support/index.js b/cypress/support/e2e.js similarity index 100% rename from cypress/support/index.js rename to cypress/support/e2e.js diff --git a/example/plugin.php b/example/plugin.php index ff3519d9..908eaf76 100644 --- a/example/plugin.php +++ b/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(); diff --git a/package-lock.json b/package-lock.json index b2b18ac3..8a8368a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,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" }, @@ -7163,9 +7163,9 @@ "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" }, "node_modules/cypress": { - "version": "9.7.0", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.7.0.tgz", - "integrity": "sha512-+1EE1nuuuwIt/N1KXRR2iWHU+OiIt7H28jJDyyI4tiUftId/DrXYEwoDa5+kH2pki1zxnA0r6HrUGHV5eLbF5Q==", + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.1.0.tgz", + "integrity": "sha512-7fz8N84uhN1+ePNDsfQvoWEl4P3/VGKKmAg+bJQFY4onhA37Ys+6oBkGbNdwGeC7n2QqibNVPhk8x3YuQLwzfw==", "hasInstallScript": true, "dependencies": { "@cypress/request": "^2.88.10", @@ -7187,7 +7187,7 @@ "dayjs": "^1.10.4", "debug": "^4.3.2", "enquirer": "^2.3.6", - "eventemitter2": "^6.4.3", + "eventemitter2": "6.4.7", "execa": "4.1.0", "executable": "^4.1.1", "extract-zip": "2.0.1", @@ -7215,7 +7215,7 @@ "cypress": "bin/cypress" }, "engines": { - "node": ">=12.0.0" + "node": "^14.0.0 || ^16.0.0 || >=18.0.0" } }, "node_modules/cypress-localstorage-commands": { @@ -8783,9 +8783,9 @@ } }, "node_modules/eventemitter2": { - "version": "6.4.5", - "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz", - "integrity": "sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==" + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz", + "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==" }, "node_modules/eventemitter3": { "version": "4.0.7", @@ -24309,9 +24309,9 @@ "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" }, "cypress": { - "version": "9.7.0", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.7.0.tgz", - "integrity": "sha512-+1EE1nuuuwIt/N1KXRR2iWHU+OiIt7H28jJDyyI4tiUftId/DrXYEwoDa5+kH2pki1zxnA0r6HrUGHV5eLbF5Q==", + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.1.0.tgz", + "integrity": "sha512-7fz8N84uhN1+ePNDsfQvoWEl4P3/VGKKmAg+bJQFY4onhA37Ys+6oBkGbNdwGeC7n2QqibNVPhk8x3YuQLwzfw==", "requires": { "@cypress/request": "^2.88.10", "@cypress/xvfb": "^1.2.4", @@ -24332,7 +24332,7 @@ "dayjs": "^1.10.4", "debug": "^4.3.2", "enquirer": "^2.3.6", - "eventemitter2": "^6.4.3", + "eventemitter2": "6.4.7", "execa": "4.1.0", "executable": "^4.1.1", "extract-zip": "2.0.1", @@ -25517,9 +25517,9 @@ "dev": true }, "eventemitter2": { - "version": "6.4.5", - "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz", - "integrity": "sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==" + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz", + "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==" }, "eventemitter3": { "version": "4.0.7", diff --git a/package.json b/package.json index 33495a15..0cf2ebc9 100644 --- a/package.json +++ b/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" },