Merge pull request #292 from newfold-labs/Press-2-1084-Migrate-Cypres…

…s-Tests-to-Module

Adding Cypress Tests to module

tests/cypress/integration/1-Initial-steps/branding.cy.js

@@ -0,0 +1,44 @@
+// <reference types="Cypress" />
+import { GetPluginId } from '../wp-module-support/pluginID.cy';
+
+describe( 'Branding', function () {
+	before( () => {
+		cy.clearCustomerData();
+		cy.visit( 'wp-admin/index.php?page=nfd-onboarding' );
+	} );
+
+	// since we are setting brand from plugin container, it will not be set to "newfold"
+	// by default even if mm_brand option is deleted from the database
+	it( 'Has ' + GetPluginId() + ' CSS when mm_brand does not exist.', () => {
+		cy.exec( 'npx wp-env run cli wp option delete mm_brand' );
+		cy.reload();
+		cy.get( 'body' ).should( 'have.class', `nfd-brand-${ GetPluginId() }` );
+		cy.get( '.is-bg-primary' )
+			.should( 'have.css', 'background-color', 'rgb(53, 117, 211)' )
+			.should( 'have.css', 'color', 'rgb(255, 255, 255)' );
+		cy.get( '.nfd-step-card-subheading' ).should( 'contain',GetPluginId().charAt(0).toUpperCase() + GetPluginId().slice(1) );
+	} );
+
+	it( 'Has default WordPress styles when mm_brand has an empty value', () => {
+		const emptyString = JSON.stringify( '' );
+		cy.exec(
+			`npx wp-env run cli wp option set mm_brand '${ emptyString }'`
+		);
+		cy.reload();
+		cy.get( 'body' ).should( 'have.class', 'nfd-brand-wordpress' );
+		cy.get( '.is-bg-primary' )
+			.should( 'have.css', 'background-color', 'rgb(0, 124, 186)' )
+			.should( 'have.css', 'color', 'rgb(255, 255, 255)' );
+		cy.get( '.nfd-step-card-subheading' ).should( 'contain', 'web host' );
+	} );
+
+	it( 'Has brand specific CSS for ' + GetPluginId(), () => {
+		cy.exec( `npx wp-env run cli wp option update mm_brand ${ GetPluginId() }` );
+		cy.reload();
+		cy.get( 'body' ).should( 'have.class', `nfd-brand-${ GetPluginId() }` );
+		cy.get( '.is-bg-primary' )
+			.should( 'have.css', 'background-color', 'rgb(53, 117, 211)' )
+			.should( 'have.css', 'color', 'rgb(255, 255, 255)' );
+		cy.get( '.nfd-step-card-subheading' ).should( 'contain', GetPluginId().charAt(0).toUpperCase() + GetPluginId().slice(1) );
+	} );
+} );

tests/cypress/integration/1-Initial-steps/whats-next.cy.js

@@ -0,0 +1,74 @@
+// <reference types="Cypress" />
+import { DrawerActivityForMenu } from '../wp-module-support/drawer.cy';
+import { CheckCardHeadingSubheading } from '../wp-module-support/header.cy';
+import {
+	CheckHelpPanelLinks,
+	CheckIllustrationPanel,
+	CheckInfoPanel,
+	CheckIntroPanel,
+} from '../wp-module-support/sidebar.cy';
+
+describe( 'What Next Page', function () {
+	before( () => {
+		cy.visit(
+			'wp-admin/?page=nfd-onboarding&flow=ecommerce#/wp-setup/step/what-next'
+		);
+		cy.wait( 5000 );
+	} );
+
+	it.skip( 'Check Drawer Activity', () => {
+		DrawerActivityForMenu(
+			'Exit to WordPress',
+			':nth-child(6)',
+			'What Next',
+			false
+		);
+	} );
+
+	it( 'Check to make sure sidebar opens, content is in place and close sidebar', () => {
+		CheckIntroPanel( '__what-next', 'What’s Next' );
+		CheckIllustrationPanel( '__what-next' );
+		CheckInfoPanel( 2 );
+		CheckHelpPanelLinks();
+	} );
+
+	it( 'Check if whatnext card is visible', () => {
+		cy.get( '.whatnext-card' ).should( 'be.visible' );
+	} );
+
+	it( 'Hovering over overview tab panel and asserting the tab data', () => {
+		cy.contains( 'button', 'WHATS NEXT' ).trigger( 'mouseover' );
+		cy.get( '.tab-text' ).should(
+			'contain',
+			'Add content, organize your menu and launch.'
+		);
+		cy.contains( 'button', 'HELP & RESOURCES' ).trigger( 'mouseover' );
+		cy.get( '.tab-text' ).should(
+			'contain',
+			"Next step or next level, we're your partner."
+		);
+		cy.contains( 'button', 'HIRE OUR EXPERTS' ).trigger( 'mouseover' );
+		cy.get( '.tab-text' ).should(
+			'contain',
+			'Make our great people your people.'
+		);
+	} );
+
+	it( 'Check if main heading and sub heading shows up', () => {
+		CheckCardHeadingSubheading();
+	} );
+
+	it( 'Check navigation back is not visible', () => {
+		cy.get( '.navigation-buttons_back' ).should( 'not.exist' );
+	} );
+
+	it( 'Check if complete setup button is visible', () => {
+		cy.contains( 'button', 'Complete Setup' ).should( 'be.visible' );
+	} );
+
+	it( 'Check Finish button is visible and finish the setup', () => {
+		cy.contains( 'button', 'Finish' ).should( 'be.visible' ).click();
+		cy.wait( 1000 );
+		cy.url().should( 'not.contain', '/wp-setup/step/what-next' );
+	} );
+} );

tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js

@@ -0,0 +1,167 @@
+// <reference types="Cypress" />
+import {
+	DrawerActivityForMenu,
+	DrawerClose
+} from '../wp-module-support/drawer.cy';
+import { CheckHeadingSubheading } from '../wp-module-support/header.cy';
+import {
+	CheckHelpPanelLinks,
+	CheckIllustrationPanel,
+	CheckInfoPanel,
+	CheckIntroPanel,
+} from '../wp-module-support/sidebar.cy';
+
+describe( 'Basic Info Page', function () {
+	before( () => {
+		cy.visit(
+			'wp-admin/?page=nfd-onboarding#/wp-setup/step/basic-info'
+		);
+	} );
+
+	it.skip( 'Check Drawer Activity', () => {
+		DrawerActivityForMenu(
+			'Exit to WordPress',
+			':nth-child(3)',
+			'Basic Info'
+		);
+	} );
+
+	it( 'Check if Header and Subheader shows up', () => {
+		cy.wait(3000);
+		DrawerClose();
+		CheckHeadingSubheading();
+	} );
+
+	it( 'Check to make sure sidebar opens, content is in place and close sidebar', () => {
+		CheckIntroPanel( '__basic-info', 'Basic Info' );
+		CheckIllustrationPanel();
+		CheckInfoPanel();
+		CheckHelpPanelLinks();
+	} );
+
+	it( 'Check if Header has text `website` in it', () => {
+		cy.get( '.nfd-main-heading__title' )
+			.should('be.visible')
+			.contains('website');
+	} );
+
+	it( 'Enter a Title and then Check if it reflects elsewhere', () => {
+		const title = 'Hello WordPress';
+		const titleBox = cy.get( ':nth-child(1) > label > .nfd-input__field' );
+		if ( titleBox.should( 'exist' ) ) {
+			titleBox.scrollIntoView();
+			titleBox.clear();
+			cy.wait( 1000 );
+			titleBox.type( title );
+
+			// Check if Mini Preview Tab has the Title
+			cy.get( '.browser-row-title_bar_main-text' ).contains( title );
+			// Check if Mini Preview Webpage Search result has the Title
+			cy.get( '.browser-content_top-row-name' ).contains( title );
+		}
+	} );
+
+	it( 'Enter a Desc and then Check if it reflects elsewhere', () => {
+		const desc = 'Welcome to WordPress';
+		const descBox = cy.get( ':nth-child(2) > label > .nfd-input__field' );
+		if ( descBox.should( 'exist' ) ) {
+			descBox.scrollIntoView();
+			descBox.clear();
+			cy.wait( 1000 );
+			descBox.type( desc );
+
+			// Check if Mini Preview Webpage Search result has the Desc
+			cy.get( '.browser-content_desc' ).contains( desc );
+		}
+	} );
+
+	it( 'Check if Social Media Accordion Toggles', () => {
+		cy.get(
+			':nth-child(7) > .social-form__label > .social-form__label_name'
+		)
+			.should( 'exist' )
+			.should( 'not.be.visible' );
+
+		// Open Social Media Accordion
+		cy.get( '.social-form__top-row_icon' ).click();
+		cy.get(
+			':nth-child(7) > .social-form__label > .social-form__label_name'
+		)
+			.should( 'exist' )
+			.scrollIntoView()
+			.should('have.css', 'opacity', '1');
+	} );
+
+	it( 'Check if Social Media URL checks are done', () => {
+		const invalidURL = 'htt';
+		const validURL = 'https://www.facebook.com';
+
+		// Facebook Social Media Component
+		const socialTest2 = cy.get( '#twitter' );
+		const socialTest = cy.get( '#facebook' );
+
+		if ( socialTest.should( 'exist' ) ) {
+			socialTest.clear();
+			cy.get(
+				'.browser-content_social_icon[style="background-image: var(--facebook-icon);"]'
+			).should( 'have.css', 'opacity', '0.5' );
+
+			socialTest.focus();
+			socialTest.type( invalidURL );
+			socialTest2.focus();
+
+			// The URL Checker runs on a debounce
+			// Shows the message to the User in case of Invalid URL
+			cy.get( '.Tooltip-Wrapper', { timeout: 3000 } ).should( 'exist' );
+			cy.get(
+				'.browser-content_social_icon[style="background-image: var(--facebook-icon);"]'
+			).should( 'have.css', 'opacity', '0.75' );
+
+			socialTest.focus();
+			socialTest.clear();
+			socialTest.type( validURL );
+			socialTest2.focus();
+			cy.get( '.Tooltip-Wrapper', { timeout: 3000 } ).should(
+				'not.exist'
+			);
+			cy.get(
+				'.browser-content_social_icon[style="background-image: var(--facebook-icon);"]'
+			).should( 'have.css', 'opacity', '1' );
+
+			// Close Social Media Accordion
+			cy.get( '.social-form__top-row_icon' ).click();
+		}
+	} );
+
+	it( 'Check if Image gets Uploaded', () => {
+		const sampleLogo = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`;
+
+		if (
+			cy
+				.get( '.image-uploader_window-reset-btn' )
+				.should( 'exist' )
+				.contains( 'UPLOAD' )
+		) {
+			cy.get( '.image-uploader_window-logo-icon-selected' ).should(
+				'not.exist'
+			);
+
+			// Upload the Image into the Upload Section
+			cy.get( '.image-uploader_window-select-btn', { timeout: 10000 } )
+				.scrollIntoView()
+				.should( 'exist' )
+				.selectFile( sampleLogo, { force: true } )
+				.then( () => {
+					cy.wait( 1000 );
+					// Check if the image got uploaded
+					cy.get(
+						'.image-uploader_window-logo-icon-selected'
+					).should( 'exist' );
+					cy.get( '.image-uploader_window-reset-btn' )
+						.should( 'exist' )
+						.scrollIntoView()
+						.contains( 'RESET' );
+				} );
+		}
+	} );
+} );

tests/cypress/integration/2-general-onboarding-flow/exit-to-wordpress.cy.js

@@ -0,0 +1,40 @@
+// <reference types="Cypress" />
+
+describe( 'Exit to WordPress', function () {
+	before( () => {
+		cy.visit( 'wp-admin/?page=nfd-onboarding#/wp-setup/step/basic-info' );
+	} );
+
+	it.skip( 'Go to the Page where the Drawer contains Exit to WordPress Button', () => {
+		cy.get( '.nfd-onboarding-etw__trigger' ).click();
+		cy.get( '.components-modal__content' ).should( 'be.visible' );
+	} );
+
+	it.skip( 'Check if heading and paragraph content exists', () => {
+		cy.get( 'h1.components-modal__header-heading' ).should( 'be.visible' );
+		cy.get( '.components-modal__content > p' ).should( 'be.visible' );
+	} );
+
+	it.skip( "Stay on Onboarding Page when 'X'/Continue is clicked", () => {
+		cy.url().then( ( currUrl ) => {
+			// When 'X' is clicked
+			cy.get( '.components-modal__header > .components-button' ).click();
+			cy.url().should( 'equal', currUrl );
+
+			// When 'Continue' is clicked
+			cy.get( '.nfd-onboarding-etw__trigger' ).click();
+			cy.get( '.nfd-onboarding-etw__buttons > .is-secondary' ).click();
+			cy.url().should( 'equal', currUrl );
+		} );
+	} );
+
+	it.skip( 'Exit to WordPress Page', () => {
+		cy.get( '.nfd-onboarding-etw__trigger' ).click();
+		cy.get( '.nfd-onboarding-etw__buttons > .is-primary' ).click();
+		cy.url( { timeout: 12000 } ).should( 'contain', 'index.php' );
+	} );
+
+	after( () => {
+		cy.clearCustomerData();
+	} );
+} );