Skip to content

Commit

Permalink
Fix broken tests with WP 6.1 RC1 (#2435)
Browse files Browse the repository at this point in the history 
* Fix broken tests in Accordion block in WP 6.1 RC1

* Other fixes

* Fix condition

* Permalink is not at the same place in WP 6.1

* Type caption in Gallery Collage

* Fix Pricing Table Item test

* Fix padding-controls test

* Fix Food & Drink block tests

* Do not execute Form tests that need a CI setup when in local

* Fix Form block test

* Fix Food Item block tests

* Fix Icon block test

* Fix Gallery Masonry block test

* Code review fixes
  • Loading branch information
@olafleur-godaddy
olafleur-godaddy authored Oct 24, 2022
1 parent dc34108 commit e1d98fe
Show file tree
Hide file tree
Showing 10 changed files with 178 additions and 62 deletions.
86 changes: 61 additions & 25 deletions .dev/tests/cypress/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function addFormChild( name ) {
cy.get( '.edit-post-header-toolbar' ).find( '.edit-post-header-toolbar__inserter-toggle' ).click( { force: true } );
cy.get( '.block-editor-inserter__search' ).click().type( name );

cy.get( '.block-editor-inserter__content .editor-block-list-item-coblocks-field-' + name ).first().click( { force: true } );
cy.get( '.editor-block-list-item-coblocks-field-' + name ).first().click( { force: true } );
cy.get( `[data-type="coblocks/field-${ name }"]` ).should( 'exist' ).click( { force: true } );
}

Expand Down Expand Up @@ -137,6 +137,25 @@ export function addBlockToPost( blockName, clearEditor = false ) {
} );
}

export function addNewGroupToPost() {
clearBlocks();

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' );

// The different structure of classes is here
cy.get( '.block-editor-block-types-list__item' ).first().click();

// Make sure the block was added to our page
cy.get( `[class*="-visual-editor"] [data-type='core/group']` ).should( 'exist' ).then( () => {
// Then close the block inserter if still open.
const inserterButton = Cypress.$( 'button[class*="__inserter-toggle"].is-pressed' );
if ( !! inserterButton.length ) {
cy.get( 'button[class*="__inserter-toggle"].is-pressed' ).click();
}
} );
}

/**
* From inside the WordPress editor open the CoBlocks Gutenberg editor panel
*/
Expand Down Expand Up @@ -178,12 +197,22 @@ export function viewPage() {

cy.get( 'button[data-label="Post"]' );

openSettingsPanel( /permalink/i );
// WP 6.1
if ( isWP61AtLeast() ) {
cy.get( '.edit-post-post-url__dropdown button' ).click();

cy.get( '.edit-post-post-link__link' ).then( ( pageLink ) => {
const linkAddress = Cypress.$( pageLink ).attr( 'href' );
cy.visit( linkAddress );
} );
cy.get( '.editor-post-url__link' ).then( ( pageLink ) => {
const linkAddress = Cypress.$( pageLink ).attr( 'href' );
cy.visit( linkAddress );
} );
} else { // <= WP 6.0
openSettingsPanel( /permalink/i );

cy.get( '.edit-post-post-link__link' ).then( ( pageLink ) => {
const linkAddress = Cypress.$( pageLink ).attr( 'href' );
cy.visit( linkAddress );
} );
}
}

/**
Expand Down Expand Up @@ -239,8 +268,7 @@ export function setBlockStyle( style ) {
export function selectBlock( name, isChildBlock = false ) {
cy.get( '.edit-post-header__toolbar' ).find( '.block-editor-block-navigation,.edit-post-header-toolbar__list-view-toggle' ).click();

// >= WP 6.0
if ( isChildBlock && Cypress.$( '.branch-5-9' ).length === 0 ) {
if ( isChildBlock ) {
cy.get( '.block-editor-list-view__expander svg' ).first().click();
}

Expand Down Expand Up @@ -356,31 +384,39 @@ export const upload = {
* @param {string} hexColor
*/
export function setColorSettingsFoldableSetting( settingName, hexColor ) {
openSettingsPanel( /color settings|color/i );
// Not needed in WP 6.1 anymore
if ( ! isWP61AtLeast() ) {
openSettingsPanel( /color settings|color/i );
}

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();

cy.get( '[aria-label="Show detailed inputs"]' ).click();
// Not needed in WP 6.1 anymore
if ( ! isWP61AtLeast() ) {
cy.get( '[aria-label="Show detailed inputs"]' ).click();
}

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

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

export function setColorPanelSetting( settingName, hexColor ) {
// If WP 5.9, we may need to open the panel. Since WP 6.0, it is always open
if ( Cypress.$( '.branch-5-9' ).length > 0 ) {
openSettingsPanel( /color settings|color/i );
}

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();

cy.get( '[aria-label="Show detailed inputs"]' ).click();
// Not needed in WP 6.1 anymore
if ( ! isWP61AtLeast() ) {
cy.get( '[aria-label="Show detailed inputs"]' ).click();
}

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

cy.get( '.block-editor-panel-color-gradient-settings__dropdown' ).contains( settingName, { matchCase: false } ).click();
Expand Down Expand Up @@ -424,7 +460,7 @@ export function openHeadingToolbarAndSelect( headingLevel ) {
export function toggleSettingCheckbox( checkboxLabelText ) {
cy.get( '.components-toggle-control__label' )
.contains( checkboxLabelText )
.parent( '.components-base-control__field' )
.closest( '.components-base-control__field' )
.find( '.components-form-toggle__input' )
.click();
}
Expand Down Expand Up @@ -510,13 +546,13 @@ export function hexToRGB( hex ) {
return 'rgb(' + +r + ', ' + +g + ', ' + +b + ')';
}

function getIframeDocument( containerClass ) {
return cy.get( containerClass + ' iframe' ).its( '0.contentDocument' ).should( 'exist' );
export function isNotWPLocalEnv() {
return Cypress.env( 'testURL' ) !== 'http://localhost:8889';
}

export function getIframeBody( containerClass ) {
return getIframeDocument( containerClass ).its( 'body' ).should( 'not.be.undefined' )
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
.then( cy.wrap );
// A condition to determine if we are testing on WordPress 6.1+
export function isWP61AtLeast() {
// WP 6.0 uses the branch-6 class, and version 6.1+ uses branch-6-x (ex : branch-6-1 for WP 6.1)
// So we are looking for a class that starts with branch-6-
return Cypress.$( "[class^='branch-6-']" ).length > 0;
}
2 changes: 1 addition & 1 deletion src/blocks/dynamic-separator/test/dynamic-separator.cypress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import * as helpers from '../../../../.dev/tests/cypress/helpers';

describe( 'Test CoBlocks Dynamic Seperator Block', function() {
describe( 'Test CoBlocks Dynamic Separator Block', function() {
/**
* Test that we can add a dynamic separator block to the page
*/
Expand Down
32 changes: 24 additions & 8 deletions src/blocks/food-and-drinks/food-item/test/food-item.cypress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,33 @@ describe( 'Block: Food Item', () => {
} );

it( 'removes .is-empty when the \'title\', \'description\', \'price\' attributes have content', () => {
let headingClass = '.wp-block-coblocks-food-item__heading';
let priceEditableSelector = '.wp-block-coblocks-food-item__price .block-editor-rich-text__editable';
let descriptionEditableSelector = '.wp-block-coblocks-food-item__description .block-editor-rich-text__editable';

if ( helpers.isWP61AtLeast() ) {
headingClass += '-wrapper';
priceEditableSelector = '[aria-label="$0.00"]';
descriptionEditableSelector = '[aria-label="Add description…"]';
}

cy.get( '[data-type="coblocks/food-item"]' ).first().within( () => {
// Set heading.
cy.get( '.wp-block-coblocks-food-item__heading .block-editor-rich-text__editable' ).focus().type( 'item heading', { force: true } );
cy.get( headingClass + ' .block-editor-rich-text__editable' ).focus().type( 'item heading', { force: true } );
cy.get( '.wp-block-coblocks-food-item' ).should( 'not.have.class', 'is-empty' );
cy.get( '.wp-block-coblocks-food-item__heading .block-editor-rich-text__editable' ).focus().type( '{selectall}{del}', { force: true } );
cy.get( headingClass + ' .block-editor-rich-text__editable' ).focus().type( '{selectall}{del}', { force: true } );
cy.get( '.wp-block-coblocks-food-item' ).should( 'have.class', 'is-empty' );

// Set price.
cy.get( '.wp-block-coblocks-food-item__price .block-editor-rich-text__editable' ).focus().type( 'item price', { force: true } );
cy.get( priceEditableSelector ).focus().type( 'item price', { force: true } );
cy.get( '.wp-block-coblocks-food-item' ).should( 'not.have.class', 'is-empty' );
cy.get( '.wp-block-coblocks-food-item__price .block-editor-rich-text__editable' ).focus().type( '{selectall}{del}', { force: true } );
cy.get( priceEditableSelector ).focus().type( '{selectall}{del}', { force: true } );
cy.get( '.wp-block-coblocks-food-item' ).should( 'have.class', 'is-empty' );

// Set description.
cy.get( '.wp-block-coblocks-food-item__description .block-editor-rich-text__editable' ).focus().type( 'item description', { force: true } );
cy.get( descriptionEditableSelector ).focus().type( 'item description', { force: true } );
cy.get( '.wp-block-coblocks-food-item' ).should( 'not.have.class', 'is-empty' );
cy.get( '.wp-block-coblocks-food-item__description .block-editor-rich-text__editable' ).focus().type( '{selectall}{del}', { force: true } );
cy.get( descriptionEditableSelector ).focus().type( '{selectall}{del}', { force: true } );
cy.get( '.wp-block-coblocks-food-item' ).should( 'have.class', 'is-empty' );
} );
} );
Expand All @@ -51,13 +61,19 @@ describe( 'Block: Food Item', () => {
} );

it( 'can toggle price', () => {
let priceSelector = '.wp-block-coblocks-food-item__price';

if ( helpers.isWP61AtLeast() ) {
priceSelector = '[aria-label="$0.00"]';
}

cy.get( '[data-type="coblocks/food-item"]' ).first().click();
cy.get( '[data-type="coblocks/food-item"]' ).first().find( '.wp-block-coblocks-food-item__price' ).should( 'exist' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( priceSelector ).should( 'exist' );

helpers.openSettingsPanel( /item settings/i );

cy.get( '.components-toggle-control' ).find( '.components-base-control__field' ).contains( /price/i ).click();
cy.get( '[data-type="coblocks/food-item"]' ).first().find( '.wp-block-coblocks-food-item__price' ).should( 'not.exist' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( priceSelector ).should( 'not.exist' );

helpers.checkForBlockErrors( 'coblocks/food-item' );
} );
Expand Down
48 changes: 40 additions & 8 deletions src/blocks/food-and-drinks/test/food-and-drinks.cypress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@
import * as helpers from '../../../../.dev/tests/cypress/helpers';

describe( 'Block: Food and Drinks', function() {
beforeEach( () => {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );
} );

/**
* Test that we can add a food-and-drinks block to the content, not alter
* any settings, and are able to successfully save the block without errors.
*/
it( 'can be inserted without errors', function() {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

cy.get( '.wp-block-coblocks-food-and-drinks' ).should( 'exist' );
helpers.checkForBlockErrors( 'coblocks/food-and-drinks' );
} );
Expand All @@ -22,13 +20,19 @@ describe( 'Block: Food and Drinks', function() {
* Test the food-and-drinks block saves with custom classes
*/
it( 'can set custom classes', () => {
helpers.addBlockToPost( 'coblocks/food-and-drinks', false ); // Was failing when true here
helpers.selectBlock( 'food & drink' );

helpers.addCustomBlockClass( 'my-custom-class', 'food-and-drinks' );
cy.get( '.wp-block-coblocks-food-and-drinks' ).should( 'have.class', 'my-custom-class' );

helpers.checkForBlockErrors( 'coblocks/food-and-drinks' );
} );

it( 'can set the number of columns between 2 and 4', () => {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

helpers.setBlockStyle( 'grid' );

helpers.openSettingsPanel( /food & drinks settings/i );
Expand All @@ -44,6 +48,9 @@ describe( 'Block: Food and Drinks', function() {
} );

it( 'can set the gutter to small, medium, large, and huge', () => {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

helpers.setBlockStyle( 'grid' );

helpers.openSettingsPanel( /food & drinks settings/i );
Expand All @@ -57,6 +64,9 @@ describe( 'Block: Food and Drinks', function() {
} );

it( 'can toggle images for inner food-item blocks', () => {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

cy.get( '[data-type="coblocks/food-and-drinks"]' ).first().within( () => {
cy.get( '[data-type="coblocks/food-item"]' ).first().click( 'left' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( '.block-editor-media-placeholder' ).should( 'not.exist' );
Expand All @@ -76,9 +86,18 @@ describe( 'Block: Food and Drinks', function() {
} );

it( 'can toggle prices for inner food-item blocks', () => {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

let priceSelector = '.wp-block-coblocks-food-item__price';

if ( helpers.isWP61AtLeast() ) {
priceSelector = '[aria-label="$0.00"]';
}

cy.get( '[data-type="coblocks/food-and-drinks"]' ).first().within( () => {
cy.get( '[data-type="coblocks/food-item"]' ).first().click( 'left' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( '.wp-block-coblocks-food-item__price' ).should( 'exist' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( priceSelector ).should( 'exist' );
} );

helpers.selectBlock( 'Food & Drink' );
Expand All @@ -88,7 +107,7 @@ describe( 'Block: Food and Drinks', function() {

cy.get( '[data-type="coblocks/food-and-drinks"]' ).first().within( () => {
cy.get( '[data-type="coblocks/food-item"]' ).first().click( 'left' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( '.wp-block-coblocks-food-item__price' ).should( 'not.exist' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( priceSelector ).should( 'not.exist' );
} );

helpers.checkForBlockErrors( 'coblocks/food-and-drinks' );
Expand All @@ -98,6 +117,9 @@ describe( 'Block: Food and Drinks', function() {
* Test the food-and-drinks block saves with custom classes
*/
it( 'Test the food-and-drinks block custom classes.', function() {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

helpers.addBlockToPost( 'coblocks/food-and-drinks', true );

helpers.selectBlock( 'food & drink' );
Expand All @@ -114,6 +136,15 @@ describe( 'Block: Food and Drinks', function() {
} );

it( 'can insert menu section with the same attributes', () => {
let priceSelector = '.wp-block-coblocks-food-item__price';

if ( helpers.isWP61AtLeast() ) {
priceSelector = '[aria-label="$0.00"]';
}

helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

helpers.openSettingsPanel( /food & drinks settings/i );

// Set a couple attributes.
Expand All @@ -128,7 +159,7 @@ describe( 'Block: Food and Drinks', function() {
cy.get( '[data-type="coblocks/food-and-drinks"]' ).last().within( () => {
cy.get( '[data-type="coblocks/food-item"]' ).first().click( 'left' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( '.block-editor-media-placeholder' ).should( 'exist' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( '.wp-block-coblocks-food-item__price' ).should( 'exist' );
cy.get( '[data-type="coblocks/food-item"]' ).first().find( priceSelector ).should( 'exist' );

cy.get( '.wp-block-coblocks-food-and-drinks' ).should( 'have.class', 'my-custom-class' );
} );
Expand All @@ -141,6 +172,7 @@ describe( 'Block: Food and Drinks', function() {
*/
it( 'Updates the inner blocks when the "Heading Level" control is changed.', function() {
helpers.addBlockToPost( 'coblocks/food-and-drinks', true );
helpers.selectBlock( 'food & drink' );

// Assert headings levels are set to default (h4)
cy.get( '[data-type="coblocks/food-and-drinks"] [data-type="coblocks/food-item"] h4' ).should( 'have.length', 2 );
Expand Down
Loading

0 comments on commit e1d98fe

Please sign in to comment.