Merge pull request #410 from newfold-labs/add-site-logo-step-tests

PRESS2-1489 Add Cypress Tests for site-logo step

tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js

@@ -0,0 +1,70 @@
+// <reference types="Cypress" />
+
+import { AdminBarCheck, BackButtonCheck, DarkBGCheck, DisabledNextButton, LightBGChcek, ProgressBarCheck, SkipButtonCheck } from "../wp-module-support/siteGen.cy";
+
+describe( 'SiteGen Site Logo Step', function () {
+	before( () => {
+		cy.visit(
+			'wp-admin/?page=nfd-onboarding#/sitgen/step/site-logo'
+		);
+	} );
+
+    it( 'Check for the header admin bar', () => {
+        AdminBarCheck();
+    } );
+
+    it( 'Check for the existing dark background', () => {
+		DarkBGCheck();
+	} );
+
+    it( 'Check for the light background', () => {
+        LightBGChcek();
+    } );
+
+    it( 'Check the Progress Bar Value', () => {
+        ProgressBarCheck('33.3333%');
+    });
+
+    it( 'Check for back button and go back', () => {
+        BackButtonCheck('sitgen/step/site-logo');
+    } );
+
+    it( 'Check if the heading is visible', () => {
+        cy.get('.ai-heading').should('be.visible');
+    } );
+
+    it( 'Check for the skip button and click', () => {
+        SkipButtonCheck('sitgen/step/site-logo');
+    } );
+
+    it( 'Check if the Next Button is disabled when there is no logo', () => {
+        DisabledNextButton();
+    } );
+
+    it( 'Check if Image gets uploaded and Next button is enabled', () => {
+        const sampleLogoPath = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`;
+        const LogoPreviewClass = '.nfd-onboarding-image-uploader--with-text__site_logo__preview';
+        if(
+            cy.get('.nfd-onboarding-button--site-gen-next--disabled')
+                .should('be.visible')
+                ){
+                    cy.get(LogoPreviewClass)
+                        .should('not.exist');
+        };
+        cy.get('input[type=file]', { timeout: 10000 })
+            .should('exist')
+            .selectFile( sampleLogoPath ,  {force: true} )
+				.then( () => {
+					cy.wait( 1000 );
+					cy.get(LogoPreviewClass, { timeout: 10000 } ).should( 'be.visible' );
+					cy.get( '.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button' )
+                        .scrollIntoView()
+						.should( 'be.visible' );
+				} );
+        cy.get('.nfd-onboarding-button--site-gen-next')
+            .should('not.be.disabled')
+            .click();
+        cy.url().should('not.contain', 'sitgen/step/site-logo');
+    });
+
+});

tests/cypress/integration/5-AI-SiteGen-onboarding-flow/welcome.cy.js

@@ -0,0 +1,59 @@
+// <reference types="Cypress" />
+
+import { AdminBarCheck, BackButtonCheck, DarkBGCheck, LightBGChcek, ProgressBarCheck} from "../wp-module-support/siteGen.cy";
+
+describe( 'SiteGen Welcome Step', function () {
+	before( () => {
+		cy.visit(
+			'wp-admin/?page=nfd-onboarding#/sitegen/step/welcome'
+		);
+	} );
+
+    it( 'Check for the header admin bar', () => {
+        AdminBarCheck();
+    } );
+
+    it( 'Check for the existing dark background', () => {
+		DarkBGCheck();
+	} );
+
+    it( 'Check for the light background', () => {
+        LightBGChcek();
+    } );
+
+    it( 'Check the Progress Bar Value', () => {
+        ProgressBarCheck('11.1111%');
+    });
+
+    it( 'Check for back button and go back', () => {
+        BackButtonCheck('sitegen/step/welcome');
+    } );
+
+    it( 'Check for the animation', () => {
+        cy.get( '.nfd-onboarding-step--site-gen__welcome__container__animation' )
+            .should('be.visible');
+    } );
+
+    it( 'Check for the heading title', () => {
+        cy.get( '.nfd-onboarding-step--site-gen__welcome__container__heading__text' )
+            .should('be.visible')
+            .contains('WordPress');
+    } );
+
+    it( 'Check for the subheading title', () => {
+        cy.get('.nfd-onboarding-step--site-gen__welcome__container__sub-heading')
+            .should('exist');
+        cy.get( '.nfd-onboarding-step--site-gen__welcome__container__sub-heading__text' )
+            .should('be.visible')
+            .contains('AI');
+    } );
+
+    it( 'Check the Get Started button', () => {
+        cy.get( '.nfd-onboarding-button--site-gen-next' )
+            .should('be.visible')
+            .should('have.text','Get Started')
+            .click();
+        cy.wait(2000);
+        cy.url().should('not.contain', 'sitegen/step/welcome');
+    } );
+});

tests/cypress/integration/wp-module-support/siteGen.cy.js

@@ -34,3 +34,36 @@ export  const OptionsDetails = (className,textValue,optionsValue) => {
             .click();
     };
 };
+
+export const ProgressBarCheck = ( WidthPercent ) => {
+    cy.get('.nfd-onboarding-header__progress-bar').should('be.visible');
+    cy.get('.nfd-onboarding-header__progress-bar__progress')
+      .invoke('attr', 'style')
+      .then((styleAttribute) => {
+        const value = styleAttribute.match(/width:\s*([\d.]+%)/)[1];
+        expect(value).equal(WidthPercent);
+      });
+};
+
+export const BackButtonCheck = (currURL) => {
+    cy.get('.nfd-onboarding-button--dark')
+        .should('be.visible')
+        .click();
+    cy.url().should('not.contain', currURL);
+    cy.go('back');
+};
+
+export const SkipButtonCheck = (currURL) => {
+    cy.get('.skip-button')
+        .should('be.visible')
+        .contains('Skip for now')
+        .click();
+    cy.url().should('not.contain', currURL);
+    cy.go('back');
+};
+
+export const DisabledNextButton = () => {
+    cy.get('.nfd-onboarding-button--site-gen-next--disabled')
+        .should('be.visible')
+        .contains( 'Next' );
+};