Skip to content

Commit

Permalink
Modifications for WP 6.3 RC2 compatibility (#2538)
Browse files Browse the repository at this point in the history
* Remove WP 6.2 scaffolding

* Fix Accordion block test

* Fix highlight block

* remove unneeded code

* Revert highlight changes

* Fix Masonry block test

* Fix media filter control test

* try testing against 63rc1 in e2e

* update the workflow name for proper run

* try using a different workflow

* Fix highlight block

* Fix Galleries tests

* RC2

* Fix Image lightbox controls

---------

Co-authored-by: AnthonyLedesma <anthonymledesma@gmail.com>
Co-authored-by: Anthony Ledesma <30462574+AnthonyLedesma@users.noreply.github.com>
  • Loading branch information
3 people committed Aug 2, 2023
1 parent ee35c4c commit 39d0541
Show file tree
Hide file tree
Showing 11 changed files with 241 additions and 121 deletions.
93 changes: 23 additions & 70 deletions .dev/tests/cypress/helpers.js
@@ -1,25 +1,8 @@
/**
* Close layout selector.
*/
export function closeLayoutSelector() {
cy.get( '.coblocks-layout-selector-modal' ).its( 'length' ).then( ( layoutSelectorModal ) => {
if ( layoutSelectorModal > 0 ) {
cy.get( '.coblocks-layout-selector-modal' )
.find( '.components-button[aria-label*="Close"]' ).first()
.click();
}
} );

cy.get( '.coblocks-layout-selector-modal' ).should( 'not.exist' );
}

/**
* Returns true if styles tab exists false otherwise.
*/
export function selectStylesTabIfExists() {
if ( isWP62AtLeast() ) {
cy.get( '.edit-post-sidebar' ).find( 'button[aria-label="Styles"]' ).click();
}
cy.get( '.edit-post-sidebar' ).find( 'button[aria-label="Styles"]' ).click();
}

/**
Expand Down Expand Up @@ -157,13 +140,9 @@ export function addNewGroupToPost() {
cy.get( '.edit-post-header [aria-label="Add block"], .edit-site-header [aria-label="Add block"], .edit-post-header-toolbar__inserter-toggle' ).click();
cy.get( '.block-editor-inserter__search-input,input.block-editor-inserter__search, .components-search-control__input' ).click().type( 'group' );

if ( isWP62AtLeast() ) {
cy.wait( 1000 );
cy.wait( 1000 );

cy.get( '.block-editor-block-types-list__list-item' ).contains( 'Group' ).click();
} else {
cy.get( '.block-editor-block-types-list__item' ).first().click();
}
cy.get( '.block-editor-block-types-list__list-item' ).contains( 'Group' ).click();

// Make sure the block was added to our page
cy.get( `[class*="-visual-editor"] [data-type='core/group']` ).should( 'exist' ).then( () => {
Expand Down Expand Up @@ -256,28 +235,6 @@ export function getBlockSlug() {
return ( specFile.split( '/' ).pop().replace( '.cypress.js', '' ) );
}

/**
* Open the block navigator.
*/
export function openBlockNavigator( ) {
cy.get( '.block-editor-block-navigation,.edit-post-header-toolbar__list-view-toggle,.edit-post-header-toolbar__document-overview-toggle' ).then( ( element ) => {
if ( ! element.hasClass( 'is-pressed' ) ) {
element.click();
}
} );
}

/**
* Close the block navigator.
*/
export function closeBlockNavigator() {
const inserterButton = Cypress.$( '.edit-post-header__toolbar button.edit-post-header-toolbar__list-view-toggle.is-pressed' );
if ( inserterButton.length > 0 ) {
cy.get( '.edit-post-header__toolbar button.edit-post-header-toolbar__list-view-toggle.is-pressed' )
.click();
}
}

/**
* Click on a style button within the style panel
*
Expand Down Expand Up @@ -321,7 +278,7 @@ export function selectBlock( name ) {
cy.wait( 1000 );

// `data-type` includes lower case name and `data-title` includes upper case name.
// Allows for case insensitive search.
// Allows for case-insensitive search.
cy.get( `[data-type*="${ name }"], [data-title*="${ name }"]` )
.invoke( 'attr', 'data-block' )
.then( ( clientId ) => {
Expand Down Expand Up @@ -364,7 +321,7 @@ export const upload = {
/**
* Upload image to input element and trigger replace image flow.
*
* @param {string} blockName The name of the block that is replace target
* @param {string} blockName The name of the block that is replacing target
* imageReplaceFlow works with CoBlocks Galleries: Carousel, Collage, Masonry, Offset, Stacked.
*/
imageReplaceFlow: ( blockName ) => {
Expand Down Expand Up @@ -442,7 +399,12 @@ export function setColorSettingsFoldableSetting( settingName, hexColor ) {
const formattedHex = hexColor.split( '#' )[ 1 ];

cy.get( '.block-editor-panel-color-gradient-settings__dropdown' ).contains( settingName, { matchCase: false } ).click();
cy.get( '.components-color-palette__custom-color' ).click();

if ( isWP63AtLeast() ) {
cy.get( '.components-color-palette__custom-color-button' ).click();
} else {
cy.get( '.components-color-palette__custom-color' ).click();
}

cy.get( '.components-color-picker' ).find( '.components-input-control__input' ).click().clear().type( formattedHex );

Expand All @@ -455,7 +417,12 @@ export function setColorPanelSetting( settingName, hexColor ) {
const formattedHex = hexColor.split( '#' )[ 1 ];

cy.get( '.block-editor-panel-color-gradient-settings__dropdown' ).contains( settingName, { matchCase: false } ).click();
cy.get( '.components-color-palette__custom-color' ).click();

if ( isWP63AtLeast() ) {
cy.get( '.components-color-palette__custom-color-button' ).click();
} else {
cy.get( '.components-color-palette__custom-color' ).click();
}

cy.get( '.components-color-picker' ).find( '.components-input-control__input' ).click().clear().type( formattedHex );

Expand Down Expand Up @@ -506,7 +473,7 @@ export function openHeadingToolbarAndSelect( headingLevel ) {
}

/**
* Toggle an checkbox in the settings panel of the block editor
* Toggle a checkbox in the settings panel of the block editor
*
* @param {string} checkboxLabelText The checkbox label text. eg: Drop Cap
*/
Expand All @@ -521,7 +488,7 @@ export function toggleSettingCheckbox( checkboxLabelText ) {
/**
* Add custom classes to a block
*
* @param {string} classes Custom classe(s) to add to the block
* @param {string} classes Custom class(es) to add to the block
* @param {string} blockID The name of the block e.g. (accordion, alert, map)
*/
export function addCustomBlockClass( classes, blockID = '' ) {
Expand Down Expand Up @@ -553,20 +520,6 @@ export function addCustomBlockClass( classes, blockID = '' ) {
} );
}

/**
* Open the Editor Settings panel.
*/
export function openEditorSettingsModal() {
// Open "more" menu.
cy.get( '.edit-post-more-menu button' ).click();
cy.get( '.components-menu-group' ).contains( 'Editor settings' ).click();

cy.get( '.components-modal__frame' ).contains( 'Editor settings' ).should( 'exist' );

// Ensure settings have loaded.
cy.get( '.coblocks-settings-modal input[type="checkbox"]' ).should( 'have.length', 6 );
}

/**
* Open the CoBlocks Labs modal.
*/
Expand Down Expand Up @@ -608,10 +561,10 @@ export function isNotWPLocalEnv() {
return Cypress.env( 'testURL' ) !== 'http://localhost:8889';
}

// A condition to determine if we are testing on WordPress 6.2+
// This function should be removed in the process of the work for WP 6.3 compatibility
export function isWP62AtLeast() {
return Cypress.$( "[class*='branch-6-2']" ).length > 0 || Cypress.$( "[class*='branch-6-3']" ).length > 0;
// A condition to determine if we are testing on WordPress 6.3+
// This function should be removed in the process of the work for WP 6.4 compatibility
export function isWP63AtLeast() {
return Cypress.$( "[class*='branch-6-3']" ).length > 0 || Cypress.$( "[class*='branch-6-4']" ).length > 0;
}

function getIframeDocument( containerClass ) {
Expand Down
173 changes: 173 additions & 0 deletions .github/workflows/test-e2e-cypress-6.3rc2.yml
@@ -0,0 +1,173 @@
name: Test / E2E Cypress Job RC2

on:
workflow_call:
inputs:
browser:
required: false
type: string
default: chrome
theme:
required: false
type: string
wpVersion:
required: false
type: string
default: ""
phpVersion:
required: false
type: string
default: "8.2"
secrets:
record-key:
description: 'Record key for Cypress Dashboard'
required: false

jobs:
test_cypress_e2e:
name: E2E Test
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
spec:
- accordion.cypress.js
- alert.cypress.js
- author.cypress.js
- click-to-tweet.cypress.js
- counter.cypress.js
- dynamic-separator.cypress.js
- event-item.cypress.js
- events.cypress.js
- faq.cypress.js
- feature.cypress.js
- features.cypress.js
- food-item.cypress.js
- food-and-drinks.cypress.js
- form.cypress.js
- gallery-carousel.cypress.js
- gallery-collage.cypress.js
- gallery-masonry.cypress.js
- gallery-offset.cypress.js
- gallery-stacked.cypress.js
- gif.cypress.js
- gist.cypress.js
- hero.cypress.js
- highlight.cypress.js
- icon.cypress.js
- logos.cypress.js
- map.cypress.js
- media-card.cypress.js
- opentable.cypress.js
- post-carousel.cypress.js
- posts.cypress.js
- pricing-table-item.cypress.js
- pricing-table.cypress.js
- column.cypress.js
- row.cypress.js
- service.cypress.js
- services.cypress.js
- shape-divider.cypress.js
- social-profiles.cypress.js
- modal.cypress.js
- media-filter-control.cypress.js
- coblocks-labs.cypress.js
- layout-selector.cypress.js
- lightbox-controls-gallery.cypress.js
- lightbox-controls-image.cypress.js
- media-text-styles.cypress.js
- padding-controls.cypress.js
- settings-modal-control.cypress.js


steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup wp-env
uses: godaddy-wordpress/setup-wp-env@v1
with:
core: ${{ inputs.wpVersion }}
phpVersion: ${{ inputs.phpVersion }}
plugins: '["."]'
themes: '["https://downloads.wordpress.org/theme/go.zip"]'

- name: Setup Node
uses: actions/setup-node@v3
with:
node-version-file: '.nvmrc'
cache: 'yarn'

- name: Install dependencies
run: |
composer install --prefer-dist --optimize-autoloader &
yarn install --immutable
- name: Build plugin
run: |
npx grunt build
# moving the built directory to this location means no dev files in tests-container.
mv ./build/coblocks $(wp-env install-path)/tests-wordpress-6.3-RC2/wp-content/plugins/
- name: Prepare Theme
run: |
if [ "${{ inputs.theme }}" = "https://downloads.wordpress.org/theme/go.zip" ]; then
cd $(wp-env install-path)/go
else
cd $(wp-env install-path)/tests-wordpress-6.3-RC2/wp-content/themes/twentytwentythree
fi
mkdir -p coblocks/icons
echo '<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><circle class="inner-circle" cx="20" cy="20" r="8" stroke-width="8" stroke-dasharray="50.2655 50.2655" stroke-dashoffset="0"></circle></svg>' >> coblocks/icons/custom.svg
- name: Prepare tests
run: |
WP_CORE_VERSION=$(wp-env run cli wp core version)
echo "WP_CORE_VERSION=${WP_CORE_VERSION}" >> $GITHUB_ENV
wp-env run tests-cli wp post generate --count=5
wp-env run cli wp post generate --count=5
wp-env run cli wp option update permalink_structure '/%postname%'
if [ "${{ inputs.theme }}" = "https://downloads.wordpress.org/theme/go.zip" ]; then
wp-env run tests-cli wp theme activate go
fi
# Only create a new post if running the migrated specs
- name: Create post and get ID
if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js'
run: |
# Generate application-password to use with WP REST API.
app_password=$(wp-env run tests-cli wp user application-password create admin gha-password --porcelain)
# Retrieve post content from fixture.
post_content=$(cat .dev/tests/cypress/fixtures/${{matrix.spec}}.html)
echo $post_content
# Create a post using the REST API and parse the postId from the response.
postId=$(curl -s -X POST 'http://localhost:8889/?rest_route=/wp/v2/posts' --data-urlencode "title=${{matrix.spec}}" --data-raw "content=$post_content" --data-urlencode "status=publish" --user "admin:$app_password"| jq '.id')
# Save the postId to the output.
echo "postId=$postId" >> $GITHUB_OUTPUT
id: create-post

# Only retrieve the post ID if running the first spec
- name: Save post ID to file
if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js'
run: |
path="$GITHUB_WORKSPACE/.dev/tests/cypress/fixtures/${{matrix.spec}}.json"
touch "$path"
echo "{\"${{matrix.spec}}\": \"$(echo "${{ steps.create-post.outputs.postId }}")\"}" > "$path"
- name: Run tests
run: |
CYPRESS_SPEC=$(find ./src/* -name ${{ matrix.spec }} -type f)
echo '{"wpUsername":"admin","wpPassword":"password","testURL":"http://localhost:8889"}' | jq . > cypress.env.json
./node_modules/.bin/cypress verify
./node_modules/.bin/cypress run --browser ${{ inputs.browser }} --spec $CYPRESS_SPEC
- name: Upload failure video
if: ${{ failure() }}
uses: actions/upload-artifact@v3
with:
name: ${{ matrix.spec }}-fail.mp4
path: ./.dev/tests/cypress/videos/${{ matrix.spec }}.mp4
retention-days: 1

9 changes: 9 additions & 0 deletions .github/workflows/test-e2e.yml
Expand Up @@ -34,3 +34,12 @@ jobs:
concurrency:
group: chrome-php74
cancel-in-progress: true

chrome_e2e_wp_63_rc2:
name: Chrome on WordPress 6.3 RC2
uses: ./.github/workflows/test-e2e-cypress-6.3rc2.yml
with:
wpVersion: "https://wordpress.org/wordpress-6.3-RC2.zip"
concurrency:
group: chrome-wp_63_rc2
cancel-in-progress: true
2 changes: 1 addition & 1 deletion src/blocks/gallery-carousel/gallery-carousel-item.js
Expand Up @@ -52,7 +52,7 @@ const GalleryCarouselItem = ( {
onChange={ ( val ) => handleCaptionChange( val ) }
placeholder={ __( 'Write gallery caption…', 'coblocks' ) }
tagName="figcaption"
unstableOnFocus={ () => {
onFocus={ () => {
setCaptionFocused( ! captionFocused );
} }
value={ images[ selectedImage ]?.caption }
Expand Down

0 comments on commit 39d0541

Please sign in to comment.