Skip to content

Instantly share code, notes, and snippets.

@adamf321

adamf321/.happo.js

Last active Sep 11, 2020
Embed
What would you like to do?
const { RemoteBrowserTarget } = require('happo.io');
module.exports = {
apiKey: process.env.HAPPO_API_KEY,
apiSecret: process.env.HAPPO_API_SECRET,
project: '[Your Happo Project Name]',
targets: {
'safari-mobile': new RemoteBrowserTarget('ios-safari', {
viewport: '375x667',
}),
'chrome-mobile': new RemoteBrowserTarget('chrome', {
viewport: '480x800',
}),
'chrome-desktop': new RemoteBrowserTarget('chrome', {
viewport: '1440x900',
}),
'ie11-desktop': new RemoteBrowserTarget('internet explorer', {
viewport: '1200x675',
scrollStitch: true,
}),
'edge-desktop': new RemoteBrowserTarget('edge', {
viewport: '1200x675',
}),
'firefox-desktop': new RemoteBrowserTarget('firefox', {
viewport: '1920x1080',
}),
'safari-desktop': new RemoteBrowserTarget('safari', {
viewport: '1200x750',
scrollStitch: true,
}),
},
}
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.Commands.add('adminLogin', ( user, password ) => {
cy.visit('/wp-login.php')
cy.get( '#user_login' ).type( user )
cy.get( '#user_pass' ).type( password )
cy.get('#wp-submit').click()
})
Cypress.Commands.add('publishPost', ( assertUrl ) => {
cy.get( '.edit-post-header__settings button.editor-post-publish-panel__toggle' ).click()
cy.get( 'button.editor-post-publish-button' ).click()
cy.wait(2000)
cy.get( '#inspector-text-control-0' ).should( 'have.value', assertUrl )
cy.get( '.editor-post-publish-panel__header button[aria-label="Close panel"]' ).click()
cy.get( '.editor-post-publish-button' ).click();
})
Cypress.Commands.add('updatePost', () => {
cy.get( '.edit-post-header__settings button.editor-post-publish-button' ).click()
cy.wait(2000)
})
Cypress.Commands.add('createPost', ( type, title ) => {
cy.visit( `/wp/wp-admin/post-new.php?post_type=${type}` )
cy.get( '#post-title-0' ).type( title )
})
Cypress.Commands.add('deletePost', ( url ) => {
cy.visit( url ).then(( contentWindow ) => {
if( contentWindow ) {
cy.get( '#wp-admin-bar-edit a' ).click()
cy.get( 'button.editor-post-trash' ).click()
cy.url().should('include', '/wp/wp-admin/edit.php')
}
})
})
Cypress.Commands.add('addBlock', ( name, slug ) => {
cy.get( '.edit-post-header__toolbar .block-editor-inserter__toggle' ).click()
cy.get( '#block-editor-inserter__search-0' ).type( name )
cy.get( `.editor-block-list-item-${slug}` ).click()
cy.get( '.editor-block-list__block.is-selected' )
})
Cypress.Commands.add('previewCurrentPage', () => {
cy.get( '.edit-post-sidebar [data-label=Document]' ).click()
cy.get( '.edit-post-sidebar .components-panel .components-panel__body:nth-child(2) button' ).click()
cy.get( 'a.edit-post-post-link__link' ).invoke('removeAttr', 'target').click()
})
Cypress.Commands.add('hide', { prevSubject: 'element' }, (subject) => {
subject.css('visibility', 'hidden');
})
Cypress.Commands.add('selectImageFromMediaLibrary', () => {
cy.get( '.media-modal-content #menu-item-browse' ).click()
cy.get( '.media-modal-content ul.attachments [aria-label=test-image]:first' ).click()
cy.get( '.media-modal-content button.media-button-select' ).click()
})
Cypress.Commands.add('expandAllACFBlocks', () => {
cy.get( '.acf-postbox > button' ).then( ( expandButton ) => {
if( 'false' == expandButton.attr( 'aria-expanded' ) ) {
cy.get( expandButton ).click()
}
})
})
Cypress.Commands.add('fillACFField', (scope, name, type, value) => {
switch ( type ) {
case 'radio':
cy.get( `${scope} [data-name="${name}"] input[value="${value}"]` ).click( {force: true} )
cy.get( `${scope} [data-name="${name}"] .selected input[value="${value}"]` )
break
case 'link':
cy.get( `${scope} [data-name="${name}"] a.button` ).click()
cy.get( '#wp-link-url' ).type( value.url )
cy.get( '#wp-link-text' ).type( value.text )
cy.get( '#wp-link-submit' ).click()
cy.get( `${scope} [data-name="${name}"] .link-url` )
.should( 'contain.text', value.url )
.and( 'have.attr', 'href', value.url )
cy.get( `${scope} [data-name="${name}"] .link-title` )
.should( 'contain.text', value.text )
break
case 'select':
cy.get( `${scope} [data-name="${name}"] .select2-selection__arrow` ).click()
cy.get( '.select2-container--open input' ).type( `${value}{enter}` , {delay: 500} )
cy.get( `${scope} [data-name="${name}"] .select2-selection__rendered` )
.should( 'contain.text', value )
break
case 'image':
cy.get( `${scope} [data-name="${name}"] a.button` ).click()
cy.get( '#menu-item-browse' ).click()
cy.get( '#media-search-input' ).type( value )
cy.wait( 1000 )
cy.get( `li.attachment[aria-label="${value}"`).click()
.should( 'have.class', 'selected' )
cy.get( '.media-button-select' ).click()
cy.get( '.js-acf-image-aspect-ratio-crop-crop' ).click()
cy.wait( 15000 )
cy.get( `${scope} [data-name="${name}"] img` ).should('be.visible')
break
default:
cy.get( `${scope} [data-name="${name}"] ${type}` )
.type( value )
.should( 'have.value', value )
}
})
Cypress.Commands.add('switchToEdit', ( scope ) => {
cy.get( `${scope} button[aria-label="Switch to Edit"]` ).click()
.should( 'have.attr', 'aria-label', 'Switch to Preview' )
})
describe('Main Menu', function () {
it('works with no children', function () {
cy.visit('/');
cy.get('#main-menu').happoScreenshot(); // UI test of menu in initial state
cy.get('#main-menu li:not(.menu-item-has-children):first-child').click();
cy.location('pathname').should('not.eq', '/')
});
it('works with 1 level of children', function () {
cy.visit('/');
cy.get('#main-menu li.has-submenu-lvl-1:first-child').hover();
cy.get('#main-menu').happoScreenshot(); // UI test of menu in expanded state
cy.get('#main-menu li.has-submenu-lvl-1:first-child ul.submenu li:first'.click()
cy.location('pathname').should('not.eq', '/')
});
});
describe( 'Home page - Backend Functional testing', function() {
before(function () {
cy.adminLogin( Cypress.env('WP_USERNAME'), Cypress.env('WP_PASSWORD') )
})
it( 'Delete Test Page', function() {
cy.deletePost( `/home-test-${Cypress.env( 'hash' )}` )
})
it( 'Create Page', function() {
cy.createPost( 'page', `Home Test ${Cypress.env( 'hash' )}` )
cy.publishPost( Cypress.config().baseUrl + `/home-test-${Cypress.env( 'hash' )}` )
})
it( 'Adds content', function() {
const last = '.editor-block-list__layout .wp-block:nth-last-child(2)'
// CTA block
cy.addBlock( 'Call To Action', 'acf-call-to-action' )
cy.switchToEdit( last )
cy.fillACFField( last, 'columns', 'radio', 'three-col' )
cy.fillACFField( `${last} [data-name="link"]`, 'title', 'input', 'Plant Mill Certificates' )
cy.fillACFField( `${last} [data-name="link"]`, 'link', 'link', { url: 'https://nolte.io', text: 'Find the Mill Certificates' } )
cy.fillACFField( `${last} [data-name="button"]`, 'title', 'input', 'Need more information?' )
cy.fillACFField( `${last} [data-name="button"]`, 'link', 'link', { url: 'https://nolte.io', text: 'Contact an advisor' } )
cy.fillACFField( last, 'contact', 'select', 'US HQ' )
})
it( 'Update Page', function() {
cy.updatePost()
})
})
describe( 'Home page - Frontend Functional testing', function() {
beforeEach( function() {
cy.visit( `/home-test-${Cypress.env( 'hash' )}` )
})
it('check CTA block works', function() {
cy.get('.block-call-to-action button').contains('Need more information?')
cy.get('.block-call-to-action button').click()
cy.url().should('eq', 'https://nolte.io')
})
})
describe('Buttons', function () {
it('look good', function () {
cy.visit('/styleguide?component=atoms/buttons/button');
cy.get('body').happoScreenshot();
});
});
describe('Press Logos', function () {
it('look good', function () {
cy.visit('/styleguide?component=molecules/press/logos');
cy.get('body').happoScreenshot();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.