Update/cypress test isolation

src/app/components/app-nav/index.js

@@ -194,6 +194,7 @@ export const MobileNav = () => {
 					<Logo />
 				</div>
 				<button
+					id="nfd-app-mobile-nav"
 					className="nfd-h-16 nfd-px-4 nfd-text-body nfd-flex nfd-items-center focus:nfd-outline-none focus:nfd-ring-2 focus:nfd-ring-inset focus:nfd-ring-primary"
 					onClick={ () => {
 						setIsOpen( true );

tests/cypress/integration/help.cy.js

@@ -2,8 +2,9 @@
 const pluginNotificationsFixture = require( '../fixtures/plugin-notifications.json' );
 const pluginProductsFixture = require( '../fixtures/plugin-products.json' );
 
-describe( 'Help Page', function () {
-	before( () => {
+describe( 'Help Page', { testIsolation: true }, function () {
+	beforeEach( () => {
+		cy.wpLogin();
 		cy.intercept(
 			{
 				method: 'GET',
@@ -22,7 +23,6 @@ describe( 'Help Page', function () {
 			'/wp-admin/admin.php?page=' + Cypress.env( 'pluginId' ) + '#/help',
 			{ timeout: 30000 }
 		);
-		cy.injectAxe();
 	} );
 
 	it( 'Is Accessible', () => {
@@ -31,56 +31,42 @@ describe( 'Help Page', function () {
 		cy.checkA11y( '.wppbh-app-body' );
 	} );
 
-	it( 'Phone Card Exists', () => {
+	it( 'Cards Each Exist', () => {
 		cy.get( '.card-help-phone' )
 			.contains( 'h3', 'Phone' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Chat Card Exists', () => {
 		cy.get( '.card-help-chat' )
 			.contains( 'h3', 'Chat' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Tweet Card Exists', () => {
 		cy.get( '.card-help-twitter' )
 			.contains( 'h3', 'Tweet' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Youtube Card Exists', () => {
 		cy.get( '.card-help-youtube' )
 			.contains( 'h3', 'YouTube' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Online Support Card Exists', () => {
 		cy.get( '.card-help-kb' )
 			.contains( 'h3', 'Knowledge Base' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Resources Card Exists', () => {
 		cy.get( '.card-help-resources' )
 			.contains( 'h3', 'Resources' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Events Card Exists', () => {
 		cy.get( '.card-help-events' )
 			.contains( 'h3', 'Events and Webinars' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Website Card Exists', () => {
 		cy.get( '.card-help-website' )
 			.contains( 'h3', 'Bluehost Website' )
 			.scrollIntoView()

tests/cypress/integration/home.cy.js

@@ -1,9 +1,13 @@
 // <reference types="Cypress" />
+const webinarsFixture = require( '../fixtures/webinars.json' );
+const webinarsPastFixture = require( '../fixtures/webinars-past.json' );
+const webinarsInactiveFixture = require( '../fixtures/webinars-inactive.json' );
 
-describe( 'Home Page', function () {
+describe( 'Home Page', { testIsolation: true }, function () {
 	let NewfoldRuntime;
 
-	before( () => {
+	beforeEach( () => {
+		cy.wpLogin();
 		cy.visit(
 			'/wp-admin/admin.php?page=' + Cypress.env( 'pluginId' ) + '#/home'
 		);
@@ -12,7 +16,6 @@ describe( 'Home Page', function () {
 			.then( ( data ) => {
 				NewfoldRuntime = data;
 			} );
-		cy.injectAxe();
 	} );
 
 	it( 'Site Info Exists', () => {
@@ -23,6 +26,7 @@ describe( 'Home Page', function () {
 	} );
 
 	it( 'Is Accessible', () => {
+		cy.injectAxe();
 		cy.wait( 500 );
 		cy.checkA11y( '.wppbh-app-body' );
 	} );
@@ -55,19 +59,21 @@ describe( 'Home Page', function () {
 			.should( 'be.visible' );
 	} );
 
-	it( 'Webinars Section Exists', () => {
+	it( 'Webinars Section Exists and Renders Properly', () => {
 		cy.intercept(
-			'https://cdn.hiive.space/resources/bluehost-webinars.json',
-			{ fixture: 'webinars.json' }
-		);
+			{
+				method: 'GET',
+				url: 'https://cdn.hiive.space/resources/bluehost-webinars.json',
+			},
+			webinarsFixture
+		).as( 'webinarsFixture' );
 		cy.reload();
+		cy.wait( '@webinarsFixture' );
 		cy.get( '.wppbh-webinars-banner-section' )
 			.contains( 'h2', 'Build your brand with WordPress' )
 			.scrollIntoView()
 			.should( 'be.visible' );
-	} );
 
-	it( 'Webinars Section Renders Correctly', () => {
 		// Title
 		cy.get( '.wppbh-webinars-banner-section' )
 			.contains( 'h2', 'Build your brand with WordPress' )
@@ -114,19 +120,27 @@ describe( 'Home Page', function () {
 
 	it( "Webinars Section Doesn't Render When Active Propety is False", () => {
 		cy.intercept(
-			'https://cdn.hiive.space/resources/bluehost-webinars.json',
-			{ fixture: 'webinars-inactive.json' }
-		);
+			{
+				method: 'GET',
+				url: 'https://cdn.hiive.space/resources/bluehost-webinars.json',
+			},
+			webinarsInactiveFixture
+		).as( 'webinarsInactiveFixture' );
 		cy.reload();
+		cy.wait( '@webinarsInactiveFixture' );
 		cy.get( '.wppbh-webinars-banner-section' ).should( 'not.exist' );
 	} );
 
 	it( "Webinars Section Doesn't Render Items Are in the Past", () => {
 		cy.intercept(
-			'https://cdn.hiive.space/resources/bluehost-webinars.json',
-			{ fixture: 'webinars-past.json' }
-		);
+			{
+				method: 'GET',
+				url: 'https://cdn.hiive.space/resources/bluehost-webinars.json',
+			},
+			webinarsPastFixture
+		).as( 'webinarsPastFixture' );
 		cy.reload();
+		cy.wait( '@webinarsPastFixture' );
 		cy.get( '.wppbh-webinars-banner-section' ).should( 'not.exist' );
 	} );
 } );

tests/cypress/integration/navigation.cy.js

@@ -1,7 +1,8 @@
 // <reference types="Cypress" />
 
-describe( 'Navigation', function () {
-	before( () => {
+describe( 'Navigation', { testIsolation: true }, function () {
+	beforeEach( () => {
+		cy.wpLogin();
 		cy.visit( '/wp-admin/admin.php?page=' + Cypress.env( 'pluginId' ) );
 	} );
 
@@ -118,49 +119,19 @@ describe( 'Navigation', function () {
 		).should( 'exist' );
 	} );
 
-	// utility nav is no more, leaving this in place un case we bring it back anytime soon.
-	it.skip( 'Utility nav links properly navigates', () => {
-		cy.get( '.utility-link-Performance' ).should(
-			'not.have.class',
-			'active'
-		);
-		cy.get( '.utility-link-Performance' ).click();
-		cy.wait( 500 );
-		cy.hash().should( 'eq', '#/performance' );
-		cy.get( '.utility-link-Performance' ).should( 'have.class', 'active' );
-
-		cy.get( '.utility-link-Settings' ).click();
-		cy.wait( 500 );
-		cy.hash().should( 'eq', '#/settings' );
-		cy.get( '.utility-link-Settings' ).should( 'have.class', 'active' );
-		cy.get( '.utility-link-Performance' ).should(
-			'not.have.class',
-			'active'
-		);
-
-		cy.get( '.utility-link-Help' ).click();
-		cy.wait( 500 );
-		cy.hash().should( 'eq', '#/help' );
-		cy.get( '.utility-link-Help' ).should( 'have.class', 'active' );
-		cy.get( '.utility-link-Settings' ).should( 'not.have.class', 'active' );
-	} );
-
-	// no mobile nav, but should probably add
-	it.skip( 'Mobile nav links dispaly for mobile', () => {
-		cy.get( '.mobile-toggle' ).should( 'not.exist' );
+	it( 'Mobile nav links dispaly and link properly on mobile', () => {
+		cy.get( '#nfd-app-mobile-nav' ).should( 'not.exist' );
 
 		cy.viewport( 'iphone-x' );
-		cy.get( '.mobile-toggle' ).should( 'be.visible' );
-	} );
+		cy.get( '#nfd-app-mobile-nav' ).should( 'be.visible' );
 
-	it.skip( 'Mobile nav links properly navigates', () => {
-		cy.get( '.mobile-link-Home' ).should( 'not.exist' );
-		cy.viewport( 'iphone-x' );
-		cy.get( '.mobile-toggle' ).click();
+		cy.get( '.wppbh-app-navitem-Home' ).should( 'not.exist' );
+
+		cy.get( '#nfd-app-mobile-nav' ).click();
 		cy.wait( 500 );
-		cy.get( '.mobile-link-Home' ).should( 'be.visible' );
-		cy.get( 'button[aria-label="Close"]' ).should( 'be.visible' );
-		cy.get( 'button[aria-label="Close"]' ).click();
-		cy.get( '.mobile-link-Home' ).should( 'not.exist' );
+		cy.get( '.wppbh-app-navitem-Home' ).should( 'be.visible' );
+		cy.get( 'button.nfd-modal__close-button' ).should( 'be.visible' );
+		cy.get( 'button.nfd-modal__close-button' ).click();
+		cy.get( '.wppbh-app-navitem-Home' ).should( 'not.exist' );
 	} );
 } );