Start with automated e2e testing with Cypress

.eslintignore

@@ -1,5 +1,6 @@
 .github/*
 .vscode/*
+cypress
 **/node_modules/**
 **/vendor/**
 **/vendors/**

.gitattributes

@@ -7,6 +7,8 @@
 .wordpress-org export-ignore
 composer.lock export-ignore
 composer.json export-ignore
+cypress export-ignore
+cypress.config.js export-ignore
 Gruntfile.js export-ignore
 /assets/css/less/ export-ignore
 node_modules export-ignore

cypress.config.js

@@ -0,0 +1,14 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  env: {
+		wpUser: 'admin',
+		wpPassword: 'admin',
+	},
+  e2e: {
+    baseUrl: 'http://bd.local',
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/admin-pages.cy.js

@@ -0,0 +1,46 @@
+describe( 'Check admin menu', function() {
+
+	it( 'user roles include BD nav', () => {
+		cy.loginAdmin()
+		cy.visit( '/wp-admin/admin.php?page=wpbdp_settings' )
+		cy.get('#toplevel_page_wpbdp_admin').should('have.length', 1)
+		cy.get('#toplevel_page_wpbdp_admin li').should('have.length', 7)
+
+		cy.loginEditor()
+		cy.visit( '/wp-admin/' )
+		cy.get('#toplevel_page_wpbdp_admin li').should('have.length', 2)
+
+		cy.loginAuthor()
+		cy.visit( '/wp-admin/' )
+		cy.get('#toplevel_page_wpbdp_admin li').should('have.length', 2)
+
+		cy.loginSubscriber()
+		cy.visit( '/wp-admin/' )
+		cy.get('#toplevel_page_wpbdp_admin').should('have.length', 0)
+	})
+
+	it( 'admin can submit a listing', () => {
+		var $listingUrl = '/wp-admin/edit.php?post_type=wpbdp_listing';
+		cy.loginAdmin()
+		cy.visit( $listingUrl )
+		cy.get( '.wpbdp-content-area-header-actions a' ).click()
+		cy.url().should('contain', 'post-new.php?post_type=wpbdp_listing')
+
+		// Set the title.
+		cy.get( '.wp-block-post-title' ).type( 'Test Listing' )
+
+		// Set the plan.
+		cy.get( '#wpbdp-listing-plan-select' ).next( 'p' ).children( 'a.update-value' ).click()
+
+		// Add a paragraph block.
+		cy.get( '.block-editor-default-block-appender__content' ).click()
+		cy.get( '.wp-block-paragraph' ).type( 'Test paragraph' )
+
+		// Save the post.
+		cy.get( '.editor-post-publish-button__button' ).click()
+		cy.get( '.editor-post-publish-button' ).click() // Click again to confirm.
+
+		cy.visit( $listingUrl )
+		cy.get( '.page-title:first .row-title' ).should( 'have.text', 'Test Listing' )
+	})
+})

cypress/e2e/themes.cy.js

@@ -0,0 +1,7 @@
+describe( 'Check BD themes', function() {
+
+	it( 'admin can activate a theme', () => {
+		cy.activateTheme( 'no_theme' );
+		cy.activateTheme( 'default' );
+	})
+})

cypress/support/commands.js

@@ -0,0 +1,67 @@
+// ***********************************************
+// 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 will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('login', (username, password) => {
+	cy.session([username, password], () => {
+		cy.visit( '/wp-login.php' )
+		cy.wait( 1000 )
+		cy.get( '#user_login' ).type( username )
+		cy.get( '#user_pass' ).type( password )
+		cy.get( '#wp-submit' ).click();
+		cy.url().should('contain', '/wp-admin')
+	})
+})
+
+Cypress.Commands.add('loginAdmin', () => {
+	cy.login( Cypress.env( 'wpUser' ), Cypress.env( 'wpPassword' ) )
+})
+
+Cypress.Commands.add('loginEditor', () => {
+	cy.login( 'editor', 'editor' )
+})
+
+Cypress.Commands.add('loginAuthor', () => {
+	cy.login( 'author', 'author' )
+})
+
+Cypress.Commands.add('loginSubscriber', () => {
+	cy.login( 'subscriber', 'subscriber' )
+})
+
+Cypress.Commands.add('activateTheme', (theme) => {
+	cy.login( Cypress.env( 'wpUser' ), Cypress.env( 'wpPassword' ) )
+	cy.visit( '/wp-admin/admin.php?page=wpbdp-themes' )
+	cy.get( '.wpbdp-theme.' + theme ).then( ( $btn ) => {
+		if ( $btn.hasClass( 'wpbdp-addon-active' ) ) {
+			// If the theme is already active, leave it be.
+		} else {
+			cy.get( '.wpbdp-theme.' + theme + ' input[type="submit"]' ).click()
+		}
+		cy.get( '.wpbdp-theme.wpbdp-addon-active' )
+			.should('have.length', 1)
+			.should('have.class', theme )
+	})
+})

cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'