From 700ec0dafef2bb4df2718d96bb8ffcda9dbf5c0e Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Mon, 20 Nov 2023 17:58:18 +0530 Subject: [PATCH 1/9] Basic Info Events API Automation test --- .../basic-info.cy.js | 176 ++++++++++-------- .../wp-module-support/EventsApi.cy.js | 150 +++++++++------ .../wp-module-support/drawer.cy.js | 65 +++---- 3 files changed, 222 insertions(+), 169 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index c47626edf..31ac3056b 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -11,111 +11,115 @@ import { CheckIntroPanel, } from '../wp-module-support/sidebar.cy'; import { SocialMediaTextValidations } from '../wp-module-support/socialMedia.cy'; +import { APIList, BasicInfoAPI } from '../wp-module-support/EventsApi.cy'; -describe( 'Basic Info Page', function () { - before( () => { +describe('Basic Info Page', function () { + + const desc = 'Welcome to WordPress'; + const title = 'Hello WordPress'; + + before(() => { cy.visit( 'wp-admin/?page=nfd-onboarding#/wp-setup/step/basic-info' ); - } ); + }); - it.skip( 'Check Drawer Activity', () => { + it('Check Drawer Activity', () => { DrawerActivityForMenu( 'Exit to WordPress', ':nth-child(3)', 'Basic Info' ); - } ); + }); - it.skip( 'Check if Header and Subheader shows up', () => { + it('Check if Header and Subheader shows up', () => { cy.wait(3000); DrawerClose(); CheckHeadingSubheading(); - } ); + }); - it.skip( 'Check to make sure sidebar opens, content is in place and close sidebar', () => { - CheckIntroPanel( '__basic-info', 'Basic Info' ); + it('Check to make sure sidebar opens, content is in place and close sidebar', () => { + CheckIntroPanel('__basic-info', 'Basic Info'); CheckIllustrationPanel(); CheckInfoPanel(); CheckHelpPanelLinks(); - } ); + }); - it.skip( 'Check if Header has text `website` in it', () => { - cy.get( '.nfd-main-heading__title' ) + 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', () => { - it.skip( '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' ) ) { + 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 ); + cy.wait(1000); + titleBox.type(title); // Check if Mini Preview Tab has the Title - cy.get( '.browser-row-title_bar_main-text' ).contains( 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 ); + cy.get('.browser-content_top-row-name').contains(title); } - } ); + }); - it.skip( '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' ) ) { + it('Enter a Desc and then Check if it reflects elsewhere', () => { + 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 ); + cy.wait(1000); + descBox.type(desc); // Check if Mini Preview Webpage Search result has the Desc - cy.get( '.browser-content_desc' ).contains( desc ); + cy.get('.browser-content_desc').contains(desc); } - } ); + }); - it.skip( 'Check if Social Media Accordion Toggles', () => { + 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' ); + .should('exist') + .should('not.be.visible'); // Open Social Media Accordion - cy.get( '.social-form__top-row_icon' ).click(); + cy.get('.social-form__top-row_icon').click(); cy.get( ':nth-child(7) > .social-form__label > .social-form__label_name' ) - .should( 'exist' ) + .should('exist') .scrollIntoView() .should('have.css', 'opacity', '1'); - } ); + }); - it.skip( 'Check for the short URL tooltip & Modal exists when we use URL shortner' , () => { + it('Check for the short URL tooltip & Modal exists when we use URL shortner', () => { const shortURL = 'https://bit.ly'; const Tooltiptext1 = 'Short URLs are a great way to track clicks'; const ModalText1 = `It looks like you're using a URL shortener!`; - SocialMediaTextValidations(shortURL, Tooltiptext1, ModalText1 ); + SocialMediaTextValidations(shortURL, Tooltiptext1, ModalText1); }); - it.skip( 'Check if the URL automatically updates http to https' , () => { + it('Check if the URL automatically updates http to https', () => { const sampleURL = 'http://www.facebook.com'; const socialTest = '#facebook'; - cy.get( '.social-form__top-row_icon' ).click(); - if ( cy.get(socialTest).should( 'exist' ) ) { + cy.get('.social-form__top-row_icon').click(); + if (cy.get(socialTest).should('exist')) { cy.get(socialTest).clear(); cy.get(socialTest).type(sampleURL); cy.get('#twitter').focus(); cy.get(socialTest).invoke('val').should('contain', 'https://'); } - } ); + }); - it.skip( 'Check for twitter or instagram id starting with `@` to convert it to URL' , () => { + it('Check for twitter or instagram id starting with `@` to convert it to URL', () => { const sampleID = '@infinity'; const socialTest3 = '#instagram'; - if ( cy.get(socialTest3).should( 'exist' ) ) { + if (cy.get(socialTest3).should('exist')) { cy.get(socialTest3).clear(); cy.get(socialTest3).type(sampleID); cy.get('#facebook').focus(); @@ -124,85 +128,99 @@ describe( 'Basic Info Page', function () { } }); - it.skip( 'Check if Social Media URL checks are done', () => { + it('Check if Social Media URL checks are done', () => { const invalidURL = 'htt'; const validURL = 'https://www.facebook.com'; const Tooltiptext2 = 'we need the full URLs to your social profiles.'; const ModalText2 = `One of those URLs doesn't look like a social media URL.`; // Facebook Social Media Component - const socialTest2 = cy.get( '#twitter' ); - const socialTest = cy.get( '#facebook' ); + const socialTest2 = cy.get('#twitter'); + const socialTest = cy.get('#facebook'); - if ( socialTest.should( 'exist' ) ) { + if (socialTest.should('exist')) { socialTest.clear(); cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' - ).should( 'have.css', 'opacity', '0.5' ); + ).should('have.css', 'opacity', '0.5'); socialTest2.focus(); - socialTest.type( invalidURL ); + 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( '.Tooltip-Tip' , { timeout: 3000 }) - .should('be.visible') - .should('contain', Tooltiptext2); + cy.get('.Tooltip-Wrapper', { timeout: 3000 }).should('exist'); + cy.get('.Tooltip-Tip', { timeout: 3000 }) + .should('be.visible') + .should('contain', Tooltiptext2); cy.get('.navigation-buttons_next').click(); - cy.get( '.components-modal__content' ).should('be.visible'); - cy.get( '.components-modal__header-heading' ).should('have.text', ModalText2); + cy.get('.components-modal__content').should('be.visible'); + cy.get('.components-modal__header-heading').should('have.text', ModalText2); cy.get('.components-modal__content').type('{esc}'); cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' - ).should( 'have.css', 'opacity', '0.75' ); + ).should('have.css', 'opacity', '0.75'); socialTest.focus(); socialTest.clear(); - socialTest.type( validURL ); + socialTest.type(validURL); socialTest2.focus(); - cy.get( '.Tooltip-Wrapper', { timeout: 3000 } ).should( + 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' ); + ).should('have.css', 'opacity', '1'); // Close Social Media Accordion - cy.get( '.social-form__top-row_icon' ).scrollIntoView().click(); + cy.get('.social-form__top-row_icon').scrollIntoView().click(); } - } ); + }); - it.skip( 'Check if Image gets Uploaded', () => { + 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' ) + .get('.image-uploader_window-reset-btn') + .should('exist') + .contains('UPLOAD') ) { - cy.get( '.image-uploader_window-logo-icon-selected' ).should( + 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 } ) + cy.get('.image-uploader_window-select-btn', { timeout: 10000 }) .scrollIntoView() - .should( 'exist' ) - .selectFile( sampleLogo, { force: true } ) - .then( () => { - cy.wait( 1000 ); + .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' ) + ).should('exist'); + cy.get('.image-uploader_window-reset-btn') + .should('exist') .scrollIntoView() - .contains( 'RESET' ); - } ); + .contains('RESET'); + }); } - } ); -} ); + }); + + it('Basic Info Events API', () => { + let label_keys = ['', 'title', 'tagline', 'logo_added', 'platform', 'platform'] + let actual_values = ['', title, desc, '', 'facebook', 'instagram'] + + cy.wait(2000) + + cy.intercept(APIList.basic_info_batch).as('events') + + cy.get('.navigation-buttons_next').click() + + BasicInfoAPI('basic_info_batch', label_keys, actual_values) + + }) +}); diff --git a/tests/cypress/integration/wp-module-support/EventsApi.cy.js b/tests/cypress/integration/wp-module-support/EventsApi.cy.js index 04cccbeb0..875a1dc32 100644 --- a/tests/cypress/integration/wp-module-support/EventsApi.cy.js +++ b/tests/cypress/integration/wp-module-support/EventsApi.cy.js @@ -1,76 +1,110 @@ +import { forEach } from "lodash"; + export const APIList = { - 'get_started_experience' : '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'get_started_experience_ecomm' : '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', - 'top_priority' : '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'site_primary' : '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'site_primary_ecomm' : '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', - 'site_secondary' : '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'site_secondary_ecomm' : '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user' + 'get_started_experience': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + 'get_started_experience_ecomm': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', + 'top_priority': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + 'site_primary': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + 'site_primary_ecomm': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', + 'site_secondary': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + 'site_secondary_ecomm': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', + 'basic_info_batch': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', } -export const EventsAPI = ( events_name, card_val, api_name ) => { - cy.intercept( api_name ).as( 'events' ); - cy.wait( '@events' ).then( ( requestObject ) => { - const responseBody = requestObject.request.body; - const responseData1 = responseBody[ 0 ].data; - if(events_name == 'experience_level'){ - if ( events_name in responseData1 ) { - expect( responseData1.experience_level ).equal( - card_val - ); - } else { - const responseData2 = responseBody[ 1 ].data; - if ( events_name in responseData2 ) { - expect( responseData2.experience_level ).equal( +export const EventsAPI = (events_name, card_val, api_name) => { + cy.intercept(api_name).as('events'); + cy.wait('@events').then((requestObject) => { + const responseBody = requestObject.request.body; + const responseData1 = responseBody[0].data; + if (events_name == 'experience_level') { + if (events_name in responseData1) { + expect(responseData1.experience_level).equal( card_val ); + } else { + const responseData2 = responseBody[1].data; + if (events_name in responseData2) { + expect(responseData2.experience_level).equal( + card_val + ); + } } - } - }; - if(events_name == 'top_priority'){ - if ( events_name in responseData1 ) { - expect( responseData1.top_priority ).equal( - card_val - ); - } else { - const responseData2 = responseBody[ 1 ].data; - if ( events_name in responseData2 ) { - expect( responseData2.top_priority ).equal( + }; + if (events_name == 'top_priority') { + if (events_name in responseData1) { + expect(responseData1.top_priority).equal( card_val ); + } else { + const responseData2 = responseBody[1].data; + if (events_name in responseData2) { + expect(responseData2.top_priority).equal( + card_val + ); + } } - } - }; + }; - if(events_name == 'primary_type'){ - if ( events_name in responseData1 ) { - expect( responseData1.primary_type ).equal( - card_val - ); - } else { - const responseData2 = responseBody[ 1 ].data; - if ( events_name in responseData2 ) { - expect( responseData2.primary_type ).equal( + if (events_name == 'primary_type') { + if (events_name in responseData1) { + expect(responseData1.primary_type).equal( card_val ); + } else { + const responseData2 = responseBody[1].data; + if (events_name in responseData2) { + expect(responseData2.primary_type).equal( + card_val + ); + } } - } - }; - + }; + - if(events_name == 'secondary_type'){ - if ( events_name in responseData1 ) { - expect( responseData1.secondary_type ).equal( - card_val - ); - } else { - const responseData2 = responseBody[ 1 ].data; - if ( events_name in responseData2 ) { - expect( responseData2.secondary_type ).equal( + if (events_name == 'secondary_type') { + if (events_name in responseData1) { + expect(responseData1.secondary_type).equal( card_val ); + } else { + const responseData2 = responseBody[1].data; + if (events_name in responseData2) { + expect(responseData2.secondary_type).equal( + card_val + ); + } } - } - }; -}); + }; + }); + }; + +export const BasicInfoAPI = (events_name, label_key = [], actual_values = []) => { + + cy.wait('@events') + .then((requestObject) => { + cy.log(JSON.stringify(requestObject)) + + const requestBody = requestObject.request.body; + + cy.log(JSON.stringify(requestBody)) + + label_key.forEach((labels, index) => { + cy.log(index) + if (labels == 'logo_added') { + expect(requestBody[index].action).to.eq('logo_added') + } else { + const requestBodyData = requestBody[index].data; + if (index == 0) { + expect(requestBodyData.label_key).to.oneOf(['chapter', 'top_priority']) + } else { + expect(requestBodyData.label_key).to.eq(labels) + expect(requestBodyData[labels]).to.eq(actual_values[index]) + } + } + + }) + + }) + +} \ No newline at end of file diff --git a/tests/cypress/integration/wp-module-support/drawer.cy.js b/tests/cypress/integration/wp-module-support/drawer.cy.js index 4467c0443..0485b23bd 100644 --- a/tests/cypress/integration/wp-module-support/drawer.cy.js +++ b/tests/cypress/integration/wp-module-support/drawer.cy.js @@ -1,26 +1,27 @@ // +const customCommandTimeout = 30000 export const CheckDrawerDisabled = () => { - cy.get( '.nfd-onboarding-drawer__toggle-button' ) + cy.get('.nfd-onboarding-drawer__toggle-button', { timeout: customCommandTimeout }) .click() - .should( 'have.class', 'is-suppressed' ); - cy.get( '.nfd-onboarding-drawer__panel-scroll-container' ) + .should('have.class', 'is-suppressed'); + cy.get('.nfd-onboarding-drawer__panel-scroll-container') .scrollIntoView() - .should( 'not.be.visible' ); + .should('not.be.visible'); }; export const DrawerOpen = () => { - cy.get( '.nfd-onboarding-drawer__toggle-button' ).click(); - cy.get( '.nfd-onboarding-drawer__panel-scroll-container' ) + cy.get('.nfd-onboarding-drawer__toggle-button').click(); + cy.get('.nfd-onboarding-drawer__panel-scroll-container') .scrollIntoView() - .should( 'be.visible' ); + .should('be.visible'); }; export const DrawerClose = () => { - cy.get( '.nfd-onboarding-drawer__toggle-button' ).click(); - cy.get( '.nfd-onboarding-drawer__panel-scroll-container' ) + cy.get('.nfd-onboarding-drawer__toggle-button').click(); + cy.get('.nfd-onboarding-drawer__panel-scroll-container') .scrollIntoView() - .should( 'not.be.visible' ); + .should('not.be.visible'); }; export const DrawerActivityForMenu = ( @@ -30,25 +31,25 @@ export const DrawerActivityForMenu = ( isOpen = true ) => { let href; - if ( ! isOpen ) { + if (!isOpen) { DrawerOpen(); } - cy.get( '.nfd-onboarding-drawer__panel-inner' ) + cy.get('.nfd-onboarding-drawer__panel-inner') .scrollIntoView() - .should( 'be.visible' ); - cy.get( '.nfd-onboarding-drawer__panel-back' ) - .should( 'be.visible' ) - .should( 'have.text', text ); + .should('be.visible'); + cy.get('.nfd-onboarding-drawer__panel-back') + .should('be.visible') + .should('have.text', text); cy.get( - itemPosition.concat( ' > .nfd-onboarding-drawer__panel-menu-link' ) + itemPosition.concat(' > .nfd-onboarding-drawer__panel-menu-link') ) - .should( 'have.class', 'active' ) - .should( 'have.text', itemName ) - .and( 'have.attr', 'href' ) - .then( ( value ) => ( href = value ) ); - cy.url().then( ( url ) => { - expect( url ).to.include( href ); - } ); + .should('have.class', 'active') + .should('have.text', itemName) + .and('have.attr', 'href') + .then((value) => (href = value)); + cy.url().then((url) => { + expect(url).to.include(href); + }); DrawerClose(); }; @@ -59,15 +60,15 @@ export const DrawerActivityForSubMenu = ( itemCount, isOpen = true ) => { - if ( ! isOpen ) { + if (!isOpen) { DrawerOpen(); } - cy.get( '.nfd-onboarding-drawer__panel-inner' ) + cy.get('.nfd-onboarding-drawer__panel-inner') .scrollIntoView() - .should( 'be.visible' ); - cy.get( '.nfd-onboarding-drawer__panel-back' ) - .should( 'be.visible' ) - .should( 'have.text', text ); - cy.get( subMenuDrawer ).should( 'be.visible' ); - cy.get( itemClassName ).should( 'have.length', itemCount ); + .should('be.visible'); + cy.get('.nfd-onboarding-drawer__panel-back', { timeout: customCommandTimeout }) + .should('be.visible') + .should('have.text', text); + cy.get(subMenuDrawer).should('be.visible'); + cy.get(itemClassName).should('have.length', itemCount); }; From 7c128f93169f93813bb6afdee95f9eab86fffa0a Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Tue, 21 Nov 2023 10:03:09 +0530 Subject: [PATCH 2/9] Removed cy logs --- tests/cypress/integration/wp-module-support/EventsApi.cy.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/tests/cypress/integration/wp-module-support/EventsApi.cy.js b/tests/cypress/integration/wp-module-support/EventsApi.cy.js index 875a1dc32..9516d96c7 100644 --- a/tests/cypress/integration/wp-module-support/EventsApi.cy.js +++ b/tests/cypress/integration/wp-module-support/EventsApi.cy.js @@ -83,14 +83,10 @@ export const BasicInfoAPI = (events_name, label_key = [], actual_values = []) => cy.wait('@events') .then((requestObject) => { - cy.log(JSON.stringify(requestObject)) - const requestBody = requestObject.request.body; - cy.log(JSON.stringify(requestBody)) - label_key.forEach((labels, index) => { - cy.log(index) + if (labels == 'logo_added') { expect(requestBody[index].action).to.eq('logo_added') } else { From db14ebf52c595f69e4e987e170b57eda94cc3536 Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Tue, 21 Nov 2023 15:43:30 +0530 Subject: [PATCH 3/9] Fixed linting issues --- .../basic-info.cy.js | 226 +++++++++--------- .../wp-module-support/EventsApi.cy.js | 189 +++++++-------- .../wp-module-support/drawer.cy.js | 70 +++--- 3 files changed, 245 insertions(+), 240 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index 31ac3056b..1b93c350b 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -1,7 +1,7 @@ // import { DrawerActivityForMenu, - DrawerClose + DrawerClose, } from '../wp-module-support/drawer.cy'; import { CheckHeadingSubheading } from '../wp-module-support/header.cy'; import { @@ -13,214 +13,222 @@ import { import { SocialMediaTextValidations } from '../wp-module-support/socialMedia.cy'; import { APIList, BasicInfoAPI } from '../wp-module-support/EventsApi.cy'; -describe('Basic Info Page', function () { - +describe( 'Basic Info Page', function () { const desc = 'Welcome to WordPress'; const title = 'Hello WordPress'; - before(() => { - cy.visit( - 'wp-admin/?page=nfd-onboarding#/wp-setup/step/basic-info' - ); - }); + before( () => { + cy.visit( 'wp-admin/?page=nfd-onboarding#/wp-setup/step/basic-info' ); + } ); - it('Check Drawer Activity', () => { + it( 'Check Drawer Activity', () => { DrawerActivityForMenu( 'Exit to WordPress', ':nth-child(3)', 'Basic Info' ); - }); + } ); - it('Check if Header and Subheader shows up', () => { - cy.wait(3000); + 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'); + 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', () => { + it( 'Check if Header has text `website` in it', () => { + cy.get( '.nfd-main-heading__title' ) + .should( 'be.visible' ) + .contains( 'website' ); + } ); - const titleBox = cy.get(':nth-child(1) > label > .nfd-input__field'); - if (titleBox.should('exist')) { + it( 'Enter a Title and then Check if it reflects elsewhere', () => { + 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); + cy.wait( 1000 ); + titleBox.type( title ); // Check if Mini Preview Tab has the Title - cy.get('.browser-row-title_bar_main-text').contains(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); + cy.get( '.browser-content_top-row-name' ).contains( title ); } - }); + } ); - it('Enter a Desc and then Check if it reflects elsewhere', () => { - const descBox = cy.get(':nth-child(2) > label > .nfd-input__field'); - if (descBox.should('exist')) { + it( 'Enter a Desc and then Check if it reflects elsewhere', () => { + 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); + cy.wait( 1000 ); + descBox.type( desc ); // Check if Mini Preview Webpage Search result has the Desc - cy.get('.browser-content_desc').contains(desc); + cy.get( '.browser-content_desc' ).contains( desc ); } - }); + } ); - it('Check if Social Media Accordion Toggles', () => { + 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'); + .should( 'exist' ) + .should( 'not.be.visible' ); // Open Social Media Accordion - cy.get('.social-form__top-row_icon').click(); + cy.get( '.social-form__top-row_icon' ).click(); cy.get( ':nth-child(7) > .social-form__label > .social-form__label_name' ) - .should('exist') + .should( 'exist' ) .scrollIntoView() - .should('have.css', 'opacity', '1'); - }); + .should( 'have.css', 'opacity', '1' ); + } ); - it('Check for the short URL tooltip & Modal exists when we use URL shortner', () => { + it( 'Check for the short URL tooltip & Modal exists when we use URL shortner', () => { const shortURL = 'https://bit.ly'; const Tooltiptext1 = 'Short URLs are a great way to track clicks'; const ModalText1 = `It looks like you're using a URL shortener!`; - SocialMediaTextValidations(shortURL, Tooltiptext1, ModalText1); - }); + SocialMediaTextValidations( shortURL, Tooltiptext1, ModalText1 ); + } ); - it('Check if the URL automatically updates http to https', () => { + it( 'Check if the URL automatically updates http to https', () => { const sampleURL = 'http://www.facebook.com'; const socialTest = '#facebook'; - cy.get('.social-form__top-row_icon').click(); - if (cy.get(socialTest).should('exist')) { - cy.get(socialTest).clear(); - cy.get(socialTest).type(sampleURL); - cy.get('#twitter').focus(); - cy.get(socialTest).invoke('val').should('contain', 'https://'); + cy.get( '.social-form__top-row_icon' ).click(); + if ( cy.get( socialTest ).should( 'exist' ) ) { + cy.get( socialTest ).clear(); + cy.get( socialTest ).type( sampleURL ); + cy.get( '#twitter' ).focus(); + cy.get( socialTest ) + .invoke( 'val' ) + .should( 'contain', 'https://' ); } - }); + } ); - it('Check for twitter or instagram id starting with `@` to convert it to URL', () => { + it( 'Check for twitter or instagram id starting with `@` to convert it to URL', () => { const sampleID = '@infinity'; const socialTest3 = '#instagram'; - if (cy.get(socialTest3).should('exist')) { - cy.get(socialTest3).clear(); - cy.get(socialTest3).type(sampleID); - cy.get('#facebook').focus(); - cy.get(socialTest3).invoke('val').should('contain', 'https://'); - + if ( cy.get( socialTest3 ).should( 'exist' ) ) { + cy.get( socialTest3 ).clear(); + cy.get( socialTest3 ).type( sampleID ); + cy.get( '#facebook' ).focus(); + cy.get( socialTest3 ) + .invoke( 'val' ) + .should( 'contain', 'https://' ); } - }); + } ); - it('Check if Social Media URL checks are done', () => { + it( 'Check if Social Media URL checks are done', () => { const invalidURL = 'htt'; const validURL = 'https://www.facebook.com'; const Tooltiptext2 = 'we need the full URLs to your social profiles.'; const ModalText2 = `One of those URLs doesn't look like a social media URL.`; // Facebook Social Media Component - const socialTest2 = cy.get('#twitter'); - const socialTest = cy.get('#facebook'); + const socialTest2 = cy.get( '#twitter' ); + const socialTest = cy.get( '#facebook' ); - if (socialTest.should('exist')) { + if ( socialTest.should( 'exist' ) ) { socialTest.clear(); cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' - ).should('have.css', 'opacity', '0.5'); + ).should( 'have.css', 'opacity', '0.5' ); socialTest2.focus(); - socialTest.type(invalidURL); + 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('.Tooltip-Tip', { timeout: 3000 }) - .should('be.visible') - .should('contain', Tooltiptext2); - cy.get('.navigation-buttons_next').click(); - cy.get('.components-modal__content').should('be.visible'); - cy.get('.components-modal__header-heading').should('have.text', ModalText2); - cy.get('.components-modal__content').type('{esc}'); + cy.get( '.Tooltip-Wrapper', { timeout: 3000 } ).should( 'exist' ); + cy.get( '.Tooltip-Tip', { timeout: 3000 } ) + .should( 'be.visible' ) + .should( 'contain', Tooltiptext2 ); + cy.get( '.navigation-buttons_next' ).click(); + cy.get( '.components-modal__content' ).should( 'be.visible' ); + cy.get( '.components-modal__header-heading' ).should( + 'have.text', + ModalText2 + ); + cy.get( '.components-modal__content' ).type( '{esc}' ); cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' - ).should('have.css', 'opacity', '0.75'); + ).should( 'have.css', 'opacity', '0.75' ); socialTest.focus(); socialTest.clear(); - socialTest.type(validURL); + socialTest.type( validURL ); socialTest2.focus(); - cy.get('.Tooltip-Wrapper', { timeout: 3000 }).should( + 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'); + ).should( 'have.css', 'opacity', '1' ); // Close Social Media Accordion - cy.get('.social-form__top-row_icon').scrollIntoView().click(); + cy.get( '.social-form__top-row_icon' ).scrollIntoView().click(); } - }); + } ); - it('Check if Image gets Uploaded', () => { + 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') + .get( '.image-uploader_window-reset-btn' ) + .should( 'exist' ) + .contains( 'UPLOAD' ) ) { - cy.get('.image-uploader_window-logo-icon-selected').should( + 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 }) + cy.get( '.image-uploader_window-select-btn', { timeout: 10000 } ) .scrollIntoView() - .should('exist') - .selectFile(sampleLogo, { force: true }) - .then(() => { - cy.wait(1000); + .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') + ).should( 'exist' ); + cy.get( '.image-uploader_window-reset-btn' ) + .should( 'exist' ) .scrollIntoView() - .contains('RESET'); - }); + .contains( 'RESET' ); + } ); } - }); - - it('Basic Info Events API', () => { - let label_keys = ['', 'title', 'tagline', 'logo_added', 'platform', 'platform'] - let actual_values = ['', title, desc, '', 'facebook', 'instagram'] + } ); - cy.wait(2000) + it( 'Basic Info Events API', () => { + const label_keys = [ + '', + 'title', + 'tagline', + 'logo_added', + 'platform', + 'platform', + ]; + const actual_values = [ '', title, desc, '', 'facebook', 'instagram' ]; - cy.intercept(APIList.basic_info_batch).as('events') + cy.wait( 2000 ); - cy.get('.navigation-buttons_next').click() + cy.intercept( APIList.basic_info_batch ).as( 'events' ); - BasicInfoAPI('basic_info_batch', label_keys, actual_values) + cy.get( '.navigation-buttons_next' ).click(); - }) -}); + BasicInfoAPI( 'basic_info_batch', label_keys, actual_values ); + } ); +} ); diff --git a/tests/cypress/integration/wp-module-support/EventsApi.cy.js b/tests/cypress/integration/wp-module-support/EventsApi.cy.js index 9516d96c7..ef5a494e7 100644 --- a/tests/cypress/integration/wp-module-support/EventsApi.cy.js +++ b/tests/cypress/integration/wp-module-support/EventsApi.cy.js @@ -1,106 +1,99 @@ -import { forEach } from "lodash"; +import { forEach } from 'lodash'; export const APIList = { - 'get_started_experience': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'get_started_experience_ecomm': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', - 'top_priority': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'site_primary': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'site_primary_ecomm': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', - 'site_secondary': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', - 'site_secondary_ecomm': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', - 'basic_info_batch': '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', -} - -export const EventsAPI = (events_name, card_val, api_name) => { - cy.intercept(api_name).as('events'); - cy.wait('@events').then((requestObject) => { - const responseBody = requestObject.request.body; - const responseData1 = responseBody[0].data; - if (events_name == 'experience_level') { - if (events_name in responseData1) { - expect(responseData1.experience_level).equal( - card_val - ); - } else { - const responseData2 = responseBody[1].data; - if (events_name in responseData2) { - expect(responseData2.experience_level).equal( - card_val - ); - } - } - }; - if (events_name == 'top_priority') { - if (events_name in responseData1) { - expect(responseData1.top_priority).equal( - card_val - ); - } else { - const responseData2 = responseBody[1].data; - if (events_name in responseData2) { - expect(responseData2.top_priority).equal( - card_val - ); - } - } - }; - - if (events_name == 'primary_type') { - if (events_name in responseData1) { - expect(responseData1.primary_type).equal( - card_val - ); - } else { - const responseData2 = responseBody[1].data; - if (events_name in responseData2) { - expect(responseData2.primary_type).equal( - card_val - ); - } - } - }; - - - if (events_name == 'secondary_type') { - if (events_name in responseData1) { - expect(responseData1.secondary_type).equal( - card_val - ); - } else { - const responseData2 = responseBody[1].data; - if (events_name in responseData2) { - expect(responseData2.secondary_type).equal( - card_val - ); - } - } - }; - }); - + get_started_experience: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + get_started_experience_ecomm: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', + top_priority: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + site_primary: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + site_primary_ecomm: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', + site_secondary: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + site_secondary_ecomm: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', + basic_info_batch: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', }; -export const BasicInfoAPI = (events_name, label_key = [], actual_values = []) => { +export const EventsAPI = ( events_name, card_val, api_name ) => { + cy.intercept( api_name ).as( 'events' ); + cy.wait( '@events' ).then( ( requestObject ) => { + const responseBody = requestObject.request.body; + const responseData1 = responseBody[ 0 ].data; + if ( events_name == 'experience_level' ) { + if ( events_name in responseData1 ) { + expect( responseData1.experience_level ).equal( card_val ); + } else { + const responseData2 = responseBody[ 1 ].data; + if ( events_name in responseData2 ) { + expect( responseData2.experience_level ).equal( card_val ); + } + } + } + if ( events_name == 'top_priority' ) { + if ( events_name in responseData1 ) { + expect( responseData1.top_priority ).equal( card_val ); + } else { + const responseData2 = responseBody[ 1 ].data; + if ( events_name in responseData2 ) { + expect( responseData2.top_priority ).equal( card_val ); + } + } + } - cy.wait('@events') - .then((requestObject) => { - const requestBody = requestObject.request.body; + if ( events_name == 'primary_type' ) { + if ( events_name in responseData1 ) { + expect( responseData1.primary_type ).equal( card_val ); + } else { + const responseData2 = responseBody[ 1 ].data; + if ( events_name in responseData2 ) { + expect( responseData2.primary_type ).equal( card_val ); + } + } + } - label_key.forEach((labels, index) => { - - if (labels == 'logo_added') { - expect(requestBody[index].action).to.eq('logo_added') - } else { - const requestBodyData = requestBody[index].data; - if (index == 0) { - expect(requestBodyData.label_key).to.oneOf(['chapter', 'top_priority']) - } else { - expect(requestBodyData.label_key).to.eq(labels) - expect(requestBodyData[labels]).to.eq(actual_values[index]) - } - } - - }) + if ( events_name == 'secondary_type' ) { + if ( events_name in responseData1 ) { + expect( responseData1.secondary_type ).equal( card_val ); + } else { + const responseData2 = responseBody[ 1 ].data; + if ( events_name in responseData2 ) { + expect( responseData2.secondary_type ).equal( card_val ); + } + } + } + } ); +}; - }) +export const BasicInfoAPI = ( + events_name, + label_key = [], + actual_values = [] +) => { + cy.wait( '@events' ).then( ( requestObject ) => { + const requestBody = requestObject.request.body; -} \ No newline at end of file + label_key.forEach( ( labels, index ) => { + if ( labels == 'logo_added' ) { + expect( requestBody[ index ].action ).to.eq( 'logo_added' ); + } else { + const requestBodyData = requestBody[ index ].data; + if ( index == 0 ) { + expect( requestBodyData.label_key ).to.oneOf( [ + 'chapter', + 'top_priority', + ] ); + } else { + expect( requestBodyData.label_key ).to.eq( labels ); + expect( requestBodyData[ labels ] ).to.eq( + actual_values[ index ] + ); + } + } + } ); + } ); +}; diff --git a/tests/cypress/integration/wp-module-support/drawer.cy.js b/tests/cypress/integration/wp-module-support/drawer.cy.js index 0485b23bd..2b7c3d31a 100644 --- a/tests/cypress/integration/wp-module-support/drawer.cy.js +++ b/tests/cypress/integration/wp-module-support/drawer.cy.js @@ -1,27 +1,29 @@ // -const customCommandTimeout = 30000 +const customCommandTimeout = 30000; export const CheckDrawerDisabled = () => { - cy.get('.nfd-onboarding-drawer__toggle-button', { timeout: customCommandTimeout }) + cy.get( '.nfd-onboarding-drawer__toggle-button', { + timeout: customCommandTimeout, + } ) .click() - .should('have.class', 'is-suppressed'); - cy.get('.nfd-onboarding-drawer__panel-scroll-container') + .should( 'have.class', 'is-suppressed' ); + cy.get( '.nfd-onboarding-drawer__panel-scroll-container' ) .scrollIntoView() - .should('not.be.visible'); + .should( 'not.be.visible' ); }; export const DrawerOpen = () => { - cy.get('.nfd-onboarding-drawer__toggle-button').click(); - cy.get('.nfd-onboarding-drawer__panel-scroll-container') + cy.get( '.nfd-onboarding-drawer__toggle-button' ).click(); + cy.get( '.nfd-onboarding-drawer__panel-scroll-container' ) .scrollIntoView() - .should('be.visible'); + .should( 'be.visible' ); }; export const DrawerClose = () => { - cy.get('.nfd-onboarding-drawer__toggle-button').click(); - cy.get('.nfd-onboarding-drawer__panel-scroll-container') + cy.get( '.nfd-onboarding-drawer__toggle-button' ).click(); + cy.get( '.nfd-onboarding-drawer__panel-scroll-container' ) .scrollIntoView() - .should('not.be.visible'); + .should( 'not.be.visible' ); }; export const DrawerActivityForMenu = ( @@ -31,25 +33,25 @@ export const DrawerActivityForMenu = ( isOpen = true ) => { let href; - if (!isOpen) { + if ( ! isOpen ) { DrawerOpen(); } - cy.get('.nfd-onboarding-drawer__panel-inner') + cy.get( '.nfd-onboarding-drawer__panel-inner' ) .scrollIntoView() - .should('be.visible'); - cy.get('.nfd-onboarding-drawer__panel-back') - .should('be.visible') - .should('have.text', text); + .should( 'be.visible' ); + cy.get( '.nfd-onboarding-drawer__panel-back' ) + .should( 'be.visible' ) + .should( 'have.text', text ); cy.get( - itemPosition.concat(' > .nfd-onboarding-drawer__panel-menu-link') + itemPosition.concat( ' > .nfd-onboarding-drawer__panel-menu-link' ) ) - .should('have.class', 'active') - .should('have.text', itemName) - .and('have.attr', 'href') - .then((value) => (href = value)); - cy.url().then((url) => { - expect(url).to.include(href); - }); + .should( 'have.class', 'active' ) + .should( 'have.text', itemName ) + .and( 'have.attr', 'href' ) + .then( ( value ) => ( href = value ) ); + cy.url().then( ( url ) => { + expect( url ).to.include( href ); + } ); DrawerClose(); }; @@ -60,15 +62,17 @@ export const DrawerActivityForSubMenu = ( itemCount, isOpen = true ) => { - if (!isOpen) { + if ( ! isOpen ) { DrawerOpen(); } - cy.get('.nfd-onboarding-drawer__panel-inner') + cy.get( '.nfd-onboarding-drawer__panel-inner' ) .scrollIntoView() - .should('be.visible'); - cy.get('.nfd-onboarding-drawer__panel-back', { timeout: customCommandTimeout }) - .should('be.visible') - .should('have.text', text); - cy.get(subMenuDrawer).should('be.visible'); - cy.get(itemClassName).should('have.length', itemCount); + .should( 'be.visible' ); + cy.get( '.nfd-onboarding-drawer__panel-back', { + timeout: customCommandTimeout, + } ) + .should( 'be.visible' ) + .should( 'have.text', text ); + cy.get( subMenuDrawer ).should( 'be.visible' ); + cy.get( itemClassName ).should( 'have.length', itemCount ); }; From 2b2729e17569699d3b03dcfa2d3ff1343f6e77d9 Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Tue, 21 Nov 2023 18:54:08 +0530 Subject: [PATCH 4/9] Addressed review comments --- .../basic-info.cy.js | 64 +++++++++++++++++-- .../wp-module-support/EventsApi.cy.js | 2 +- 2 files changed, 58 insertions(+), 8 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index 1b93c350b..643af51ed 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -1,14 +1,14 @@ // import { DrawerActivityForMenu, - DrawerClose, + DrawerClose } from '../wp-module-support/drawer.cy'; import { CheckHeadingSubheading } from '../wp-module-support/header.cy'; import { CheckHelpPanelLinks, CheckIllustrationPanel, CheckInfoPanel, - CheckIntroPanel, + CheckIntroPanel } from '../wp-module-support/sidebar.cy'; import { SocialMediaTextValidations } from '../wp-module-support/socialMedia.cy'; import { APIList, BasicInfoAPI } from '../wp-module-support/EventsApi.cy'; @@ -213,6 +213,11 @@ describe( 'Basic Info Page', function () { } ); it( 'Basic Info Events API', () => { + const socialTest2 = '#twitter'; + const socialTest4 = '#youtube'; + const socialTest5 = '#linkedin'; + const socialTest6 = '#yelp'; + const socialTest7 = '#tiktok'; const label_keys = [ '', 'title', @@ -220,15 +225,60 @@ describe( 'Basic Info Page', function () { 'logo_added', 'platform', 'platform', + 'platform', + 'platform', + 'platform', + 'platform', + 'platform', + ]; + const actual_values = [ + '', + title, + desc, + '', + 'facebook', + 'twitter', + 'instagram', + 'youtube', + 'linkedin', + 'yelp', + 'tiktok', ]; - const actual_values = [ '', title, desc, '', 'facebook', 'instagram' ]; - cy.wait( 2000 ); + cy.get( '.social-form__top-row_icon' ) + .as( 'socialFormToggle' ) + .invoke( 'attr', 'class' ) + .then( ( class_name ) => { + if ( + ! class_name.includes( 'social-form__top-row_icon_opened' ) + ) { + cy.get( '@socialFormToggle' ).click(); + } + } ); - cy.intercept( APIList.basic_info_batch ).as( 'events' ); + cy.get( socialTest2 ).should( 'exist' ); + cy.get( socialTest2 ).clear(); + cy.get( socialTest2 ).type( '@infinity' ); - cy.get( '.navigation-buttons_next' ).click(); + cy.get( socialTest4 ).should( 'exist' ); + cy.get( socialTest4 ).clear(); + cy.get( socialTest4 ).type( '@infinity' ); + + cy.get( socialTest5 ).should( 'exist' ); + cy.get( socialTest5 ).clear(); + cy.get( socialTest5 ).type( 'https://linkedin.com/in/infinity' ); + + cy.get( socialTest6 ).should( 'exist' ); + cy.get( socialTest6 ).clear(); + cy.get( socialTest6 ).type( 'https://www.yelp.com/infinity' ); - BasicInfoAPI( 'basic_info_batch', label_keys, actual_values ); + cy.get( socialTest7 ).should( 'exist' ); + cy.get( socialTest7 ).clear(); + cy.get( socialTest7 ).type( 'https://www.tiktok.com/infinity' ); + + cy.wait( 2000 ); + cy.intercept( APIList.basic_info ).as( 'events' ); + cy.get( '.navigation-buttons_next' ).click(); + BasicInfoAPI( 'basic_info', label_keys, actual_values ); } ); } ); diff --git a/tests/cypress/integration/wp-module-support/EventsApi.cy.js b/tests/cypress/integration/wp-module-support/EventsApi.cy.js index ef5a494e7..b3ad4e1a6 100644 --- a/tests/cypress/integration/wp-module-support/EventsApi.cy.js +++ b/tests/cypress/integration/wp-module-support/EventsApi.cy.js @@ -15,7 +15,7 @@ export const APIList = { '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', site_secondary_ecomm: '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', - basic_info_batch: + basic_info: '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', }; From f5b3b958b02cf9618ee59dcc0786ac38467711c1 Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Wed, 22 Nov 2023 10:02:38 +0530 Subject: [PATCH 5/9] Addressed review comments and fixed linting issues --- .../basic-info.cy.js | 40 ++++--------------- 1 file changed, 8 insertions(+), 32 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index 643af51ed..da87dfde5 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -212,38 +212,14 @@ describe( 'Basic Info Page', function () { } } ); - it( 'Basic Info Events API', () => { + it( 'Test Basic Info Events API gets triggered', () => { const socialTest2 = '#twitter'; const socialTest4 = '#youtube'; const socialTest5 = '#linkedin'; const socialTest6 = '#yelp'; const socialTest7 = '#tiktok'; - const label_keys = [ - '', - 'title', - 'tagline', - 'logo_added', - 'platform', - 'platform', - 'platform', - 'platform', - 'platform', - 'platform', - 'platform', - ]; - const actual_values = [ - '', - title, - desc, - '', - 'facebook', - 'twitter', - 'instagram', - 'youtube', - 'linkedin', - 'yelp', - 'tiktok', - ]; + const label_keys = ['', 'title', 'tagline', 'logo_added', 'platform', 'platform', 'platform', 'platform', 'platform', 'platform', 'platform']; + const actual_values = ['', title, desc, '', 'facebook', 'twitter', 'instagram', 'youtube', 'linkedin', 'yelp', 'tiktok']; cy.get( '.social-form__top-row_icon' ) .as( 'socialFormToggle' ) @@ -258,23 +234,23 @@ describe( 'Basic Info Page', function () { cy.get( socialTest2 ).should( 'exist' ); cy.get( socialTest2 ).clear(); - cy.get( socialTest2 ).type( '@infinity' ); + cy.get( socialTest2 ).type( '@testTweet' ); cy.get( socialTest4 ).should( 'exist' ); cy.get( socialTest4 ).clear(); - cy.get( socialTest4 ).type( '@infinity' ); + cy.get( socialTest4 ).type( '@testYouTube' ); cy.get( socialTest5 ).should( 'exist' ); cy.get( socialTest5 ).clear(); - cy.get( socialTest5 ).type( 'https://linkedin.com/in/infinity' ); + cy.get( socialTest5 ).type( 'https://linkedin.com/in/testLinkedIn' ); cy.get( socialTest6 ).should( 'exist' ); cy.get( socialTest6 ).clear(); - cy.get( socialTest6 ).type( 'https://www.yelp.com/infinity' ); + cy.get( socialTest6 ).type( 'https://www.yelp.com/testYelp' ); cy.get( socialTest7 ).should( 'exist' ); cy.get( socialTest7 ).clear(); - cy.get( socialTest7 ).type( 'https://www.tiktok.com/infinity' ); + cy.get( socialTest7 ).type( 'https://www.tiktok.com/testTikTok' ); cy.wait( 2000 ); cy.intercept( APIList.basic_info ).as( 'events' ); From 20b38040b0af520b5bac5ce55f75fdfcc71a62c3 Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Wed, 22 Nov 2023 17:30:06 +0530 Subject: [PATCH 6/9] added checks for ecommerce onboarding --- .../basic-info.cy.js | 39 ++-- .../basic-info.cy.js | 172 ++++++++++++------ .../wp-module-support/EventsApi.cy.js | 12 +- 3 files changed, 155 insertions(+), 68 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index da87dfde5..8f2c94a68 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -1,8 +1,5 @@ // -import { - DrawerActivityForMenu, - DrawerClose -} from '../wp-module-support/drawer.cy'; +import { DrawerClose } from '../wp-module-support/drawer.cy'; import { CheckHeadingSubheading } from '../wp-module-support/header.cy'; import { CheckHelpPanelLinks, @@ -22,11 +19,27 @@ describe( 'Basic Info Page', function () { } ); it( 'Check Drawer Activity', () => { - DrawerActivityForMenu( - 'Exit to WordPress', - ':nth-child(3)', - 'Basic Info' - ); + let href; + cy.get( '.nfd-onboarding-drawer__toggle' ) + .as( 'drawerOpen' ) + .invoke( 'attr', 'class' ) + .then( ( class_name ) => { + if ( ! class_name.includes( 'is-open' ) ) { + cy.get( '@drawerOpen' ).click(); + } + } ); + cy.get( '.nfd-onboarding-drawer__panel-inner' ) + .scrollIntoView() + .should( 'be.visible' ); + + cy.get( ':nth-child(2) > .nfd-onboarding-drawer__panel-menu-link' ) + .should( 'have.class', 'active' ) + .should( 'have.text', 'Basic Info' ) + .and( 'have.attr', 'href' ) + .then( ( value ) => ( href = value ) ); + cy.url().then( ( url ) => { + expect( url ).to.include( href ); + } ); } ); it( 'Check if Header and Subheader shows up', () => { @@ -103,9 +116,9 @@ describe( 'Basic Info Page', function () { it( 'Check if the URL automatically updates http to https', () => { const sampleURL = 'http://www.facebook.com'; const socialTest = '#facebook'; - cy.get( '.social-form__top-row_icon' ).click(); + cy.get( '.social-form__top-row_icon' ).click( { force: true } ); if ( cy.get( socialTest ).should( 'exist' ) ) { - cy.get( socialTest ).clear(); + cy.get( socialTest ).clear({force: true}); cy.get( socialTest ).type( sampleURL ); cy.get( '#twitter' ).focus(); cy.get( socialTest ) @@ -117,8 +130,8 @@ describe( 'Basic Info Page', function () { it( 'Check for twitter or instagram id starting with `@` to convert it to URL', () => { const sampleID = '@infinity'; const socialTest3 = '#instagram'; - if ( cy.get( socialTest3 ).should( 'exist' ) ) { - cy.get( socialTest3 ).clear(); + if ( cy.get( socialTest3 , { timeout: 15000} ).should( 'exist' ) ) { + cy.get( socialTest3 ).clear({ force: true }); cy.get( socialTest3 ).type( sampleID ); cy.get( '#facebook' ).focus(); cy.get( socialTest3 ) diff --git a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js index 44a87ccfa..001366965 100644 --- a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js @@ -1,54 +1,73 @@ // -import { DrawerActivityForMenu, DrawerClose } from '../wp-module-support/drawer.cy'; +import { DrawerClose } from '../wp-module-support/drawer.cy'; import { CheckHeadingSubheading } from '../wp-module-support/header.cy'; import { CheckHelpPanelLinks, CheckIllustrationPanel, CheckInfoPanel, - CheckIntroPanel, + CheckIntroPanel } from '../wp-module-support/sidebar.cy'; import { SocialMediaTextValidations } from '../wp-module-support/socialMedia.cy'; +import { APIList, BasicInfoAPI } from '../wp-module-support/EventsApi.cy'; describe( 'Basic Info Page', function () { + const desc = 'Welcome to WordPress'; + const title = 'Hello WordPress'; + before( () => { cy.visit( 'wp-admin/?page=nfd-onboarding&flow=ecommerce#/wp-setup/step/basic-info' ); } ); - it.skip( 'Check Drawer Activity', () => { - DrawerActivityForMenu( - 'Exit to WordPress', - ':nth-child(3)', - 'Basic Info' - ); + it( 'Check Drawer Activity', () => { + let href; + cy.get( '.nfd-onboarding-drawer__toggle' ) + .as( 'drawerOpen' ) + .invoke( 'attr', 'class' ) + .then( ( class_name ) => { + if ( ! class_name.includes( 'is-open' ) ) { + cy.get( '@drawerOpen' ).click(); + } + } ); + cy.get( '.nfd-onboarding-drawer__panel-inner' ) + .scrollIntoView() + .should( 'be.visible' ); + + cy.get( ':nth-child(2) > .nfd-onboarding-drawer__panel-menu-link' ) + .should( 'have.class', 'active' ) + .should( 'have.text', 'Basic Info' ) + .and( 'have.attr', 'href' ) + .then( ( value ) => ( href = value ) ); + cy.url().then( ( url ) => { + expect( url ).to.include( href ); + } ); } ); - it.skip( 'Check if Header and Subheader shows up', () => { - cy.wait(3000); + it( 'Check if Header and Subheader shows up', () => { + cy.wait( 3000 ); DrawerClose(); CheckHeadingSubheading(); } ); - it.skip( 'Check if `store` appears in heading', () => { - cy.get('.nfd-main-heading__title') - .should('be.visible') - .contains('store'); + it( 'Check if `store` appears in heading', () => { + cy.get( '.nfd-main-heading__title' ) + .should( 'be.visible' ) + .contains( 'store' ); } ); - it.skip( 'Check to make sure sidebar opens, content is in place and close sidebar', () => { + it( 'Check to make sure sidebar opens, content is in place and close sidebar', () => { CheckIntroPanel( '__basic-info', 'Basic Info' ); CheckIllustrationPanel(); CheckInfoPanel(); CheckHelpPanelLinks(); } ); - it.skip( 'Enter a Title and then Check if it reflects elsewhere', () => { - const title = 'Hello WordPress'; + it( 'Enter a Title and then Check if it reflects elsewhere', () => { const titleBox = cy.get( ':nth-child(1) > label > .nfd-input__field' ); if ( titleBox.should( 'exist' ) ) { titleBox.scrollIntoView(); - titleBox.clear({force: true}); + titleBox.clear( { force: true } ); cy.wait( 1000 ); titleBox.type( title ); @@ -59,12 +78,11 @@ describe( 'Basic Info Page', function () { } } ); - it.skip( 'Enter a Desc and then Check if it reflects elsewhere', () => { - const desc = 'Welcome to WordPress'; + it( 'Enter a Desc and then Check if it reflects elsewhere', () => { const descBox = cy.get( ':nth-child(2) > label > .nfd-input__field' ); if ( descBox.should( 'exist' ) ) { descBox.scrollIntoView(); - descBox.clear({force: true}); + descBox.clear( { force: true } ); cy.wait( 1000 ); descBox.type( desc ); @@ -73,7 +91,7 @@ describe( 'Basic Info Page', function () { } } ); - it.skip( 'Check if Social Media Accordion Toggles', () => { + it( 'Check if Social Media Accordion Toggles', () => { cy.get( ':nth-child(7) > .social-form__label > .social-form__label_name' ) @@ -81,47 +99,50 @@ describe( 'Basic Info Page', function () { .should( 'not.be.visible' ); // Open Social Media Accordion - cy.get( '.social-form__top-row_icon' ).invoke('click'); + cy.get( '.social-form__top-row_icon' ).invoke( 'click' ); cy.get( ':nth-child(7) > .social-form__label > .social-form__label_name' ) .should( 'exist' ) .scrollIntoView() - .should('have.css', 'opacity', '1'); + .should( 'have.css', 'opacity', '1' ); } ); - it.skip( 'Check for the short URL tooltip & Modal exists when we use URL shortner' , () => { + it( 'Check for the short URL tooltip & Modal exists when we use URL shortner', () => { const shortURL = 'https://bit.ly'; const Tooltiptext1 = 'Short URLs are a great way to track clicks'; const ModalText1 = `It looks like you're using a URL shortener!`; - SocialMediaTextValidations(shortURL, Tooltiptext1, ModalText1 ); - }); + SocialMediaTextValidations( shortURL, Tooltiptext1, ModalText1 ); + } ); - it.skip( 'Check if the URL automatically updates http to https' , () => { + it( 'Check if the URL automatically updates http to https', () => { const sampleURL = 'http://www.facebook.com'; const socialTest = '#facebook'; - cy.get( '.social-form__top-row_icon' ).click(); - if ( cy.get(socialTest).should( 'exist' ) ) { - cy.get(socialTest).clear(); - cy.get(socialTest).type(sampleURL); - cy.get('#twitter').focus(); - cy.get(socialTest).invoke('val').should('contain', 'https://'); + cy.get( '.social-form__top-row_icon' ).click( { force: true } ); + if ( cy.get( socialTest ).should( 'exist' ) ) { + cy.get( socialTest ).clear( { force: true } ); + cy.get( socialTest ).type( sampleURL ); + cy.get( '#twitter' ).focus(); + cy.get( socialTest ) + .invoke( 'val' ) + .should( 'contain', 'https://' ); } } ); - it.skip( 'Check for twitter or instagram id starting with `@` to convert it to URL' , () => { + it( 'Check for twitter or instagram id starting with `@` to convert it to URL', () => { const sampleID = '@infinity'; const socialTest3 = '#instagram'; - if ( cy.get(socialTest3).should( 'exist' ) ) { - cy.get(socialTest3).clear(); - cy.get(socialTest3).type(sampleID); - cy.get('#facebook').focus(); - cy.get(socialTest3).invoke('val').should('contain', 'https://'); - + if ( cy.get( socialTest3 ).should( 'exist' ) ) { + cy.get( socialTest3 ).clear( { force: true } ); + cy.get( socialTest3 ).type( sampleID ); + cy.get( '#facebook' ).focus(); + cy.get( socialTest3 ) + .invoke( 'val' ) + .should( 'contain', 'https://' ); } - }); + } ); - it.skip( 'Check if Social Media URL checks are done', () => { + it( 'Check if Social Media URL checks are done', () => { const invalidURL = 'htt'; const validURL = 'https://www.facebook.com'; const Tooltiptext2 = 'we need the full URLs to your social profiles.'; @@ -144,13 +165,16 @@ describe( 'Basic Info Page', function () { // 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( '.Tooltip-Tip' , { timeout: 3000 }) - .should('be.visible') - .should('contain', Tooltiptext2); - cy.get('.navigation-buttons_next').click(); - cy.get( '.components-modal__content' ).should('be.visible'); - cy.get( '.components-modal__header-heading' ).should('have.text', ModalText2); - cy.get('.components-modal__content').type('{esc}'); + cy.get( '.Tooltip-Tip', { timeout: 3000 } ) + .should( 'be.visible' ) + .should( 'contain', Tooltiptext2 ); + cy.get( '.navigation-buttons_next' ).click(); + cy.get( '.components-modal__content' ).should( 'be.visible' ); + cy.get( '.components-modal__header-heading' ).should( + 'have.text', + ModalText2 + ); + cy.get( '.components-modal__content' ).type( '{esc}' ); cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' ).should( 'have.css', 'opacity', '0.75' ); @@ -171,7 +195,7 @@ describe( 'Basic Info Page', function () { } } ); - it.skip( 'Check if Image gets Uploaded', () => { + it( 'Check if Image gets Uploaded', () => { const sampleLogo = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`; if ( @@ -202,4 +226,50 @@ describe( 'Basic Info Page', function () { } ); } } ); + + it( 'Test Basic Info Events API gets triggered', () => { + const socialTest2 = '#twitter'; + const socialTest4 = '#youtube'; + const socialTest5 = '#linkedin'; + const socialTest6 = '#yelp'; + const socialTest7 = '#tiktok'; + const label_keys = ['title', 'tagline', 'logo_added', 'platform', 'platform', 'platform', 'platform', 'platform', 'platform', 'platform']; + const actual_values = [title, desc, '', 'facebook', 'twitter', 'instagram', 'youtube', 'linkedin', 'yelp', 'tiktok']; + + cy.get( '.social-form__top-row_icon' ) + .as( 'socialFormToggle' ) + .invoke( 'attr', 'class' ) + .then( ( class_name ) => { + if ( + ! class_name.includes( 'social-form__top-row_icon_opened' ) + ) { + cy.get( '@socialFormToggle' ).click(); + } + } ); + + cy.get( socialTest2 ).should( 'exist' ); + cy.get( socialTest2 ).clear(); + cy.get( socialTest2 ).type( '@testTweet' ); + + cy.get( socialTest4 ).should( 'exist' ); + cy.get( socialTest4 ).clear(); + cy.get( socialTest4 ).type( '@testYouTube' ); + + cy.get( socialTest5 ).should( 'exist' ); + cy.get( socialTest5 ).clear(); + cy.get( socialTest5 ).type( 'https://linkedin.com/in/testLinkedIn' ); + + cy.get( socialTest6 ).should( 'exist' ); + cy.get( socialTest6 ).clear(); + cy.get( socialTest6 ).type( 'https://www.yelp.com/testYelp' ); + + cy.get( socialTest7 ).should( 'exist' ); + cy.get( socialTest7 ).clear(); + cy.get( socialTest7 ).type( 'https://www.tiktok.com/testTikTok' ); + + cy.wait( 2000 ); + cy.intercept( APIList.basic_info_ecomm ).as( 'events' ); + cy.get( '.navigation-buttons_next' ).click(); + BasicInfoAPI( 'basic_info_ecomm', label_keys, actual_values ); + } ); } ); diff --git a/tests/cypress/integration/wp-module-support/EventsApi.cy.js b/tests/cypress/integration/wp-module-support/EventsApi.cy.js index b3ad4e1a6..b83473289 100644 --- a/tests/cypress/integration/wp-module-support/EventsApi.cy.js +++ b/tests/cypress/integration/wp-module-support/EventsApi.cy.js @@ -17,6 +17,8 @@ export const APIList = { '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user', basic_info: '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=wp-setup&_locale=user', + basic_info_ecomm: + '/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents%2Fbatch&flow=ecommerce&_locale=user' }; export const EventsAPI = ( events_name, card_val, api_name ) => { @@ -83,10 +85,12 @@ export const BasicInfoAPI = ( } else { const requestBodyData = requestBody[ index ].data; if ( index == 0 ) { - expect( requestBodyData.label_key ).to.oneOf( [ - 'chapter', - 'top_priority', - ] ); + if ( events_name == 'basic_info' ) { + expect( requestBodyData.label_key ).to.oneOf( [ + 'chapter', + 'top_priority', + ] ); + } } else { expect( requestBodyData.label_key ).to.eq( labels ); expect( requestBodyData[ labels ] ).to.eq( From 3a62500815969eeeb5777f3f34c2af689ad245fa Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Fri, 24 Nov 2023 22:34:55 +0530 Subject: [PATCH 7/9] fixed short url pop-up and social media validations issue --- .../integration/2-general-onboarding-flow/basic-info.cy.js | 6 +++++- .../3-ecommerce-onboarding-flow/basic-info.cy.js | 6 +++++- .../cypress/integration/wp-module-support/socialMedia.cy.js | 4 ++-- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index 8f2c94a68..f9549cfee 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -138,6 +138,7 @@ describe( 'Basic Info Page', function () { .invoke( 'val' ) .should( 'contain', 'https://' ); } + cy.wait( 2000 ) } ); it( 'Check if Social Media URL checks are done', () => { @@ -149,9 +150,11 @@ describe( 'Basic Info Page', function () { // Facebook Social Media Component const socialTest2 = cy.get( '#twitter' ); const socialTest = cy.get( '#facebook' ); + cy.wait(2000) if ( socialTest.should( 'exist' ) ) { - socialTest.clear(); + cy.get( '#facebook' ).clear(); + cy.get( '.browser-content_social_icon.--no-url' ).should( 'exist' ) cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' ).should( 'have.css', 'opacity', '0.5' ); @@ -184,6 +187,7 @@ describe( 'Basic Info Page', function () { cy.get( '.Tooltip-Wrapper', { timeout: 3000 } ).should( 'not.exist' ); + cy.wait( 2000 ) cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' ).should( 'have.css', 'opacity', '1' ); diff --git a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js index 001366965..78dfcd0f9 100644 --- a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js @@ -140,6 +140,7 @@ describe( 'Basic Info Page', function () { .invoke( 'val' ) .should( 'contain', 'https://' ); } + cy.wait( 2000 ) } ); it( 'Check if Social Media URL checks are done', () => { @@ -151,9 +152,11 @@ describe( 'Basic Info Page', function () { // Facebook Social Media Component const socialTest2 = cy.get( '#twitter' ); const socialTest = cy.get( '#facebook' ); + cy.wait(2000) if ( socialTest.should( 'exist' ) ) { - socialTest.clear(); + cy.get( '#facebook' ).clear() + cy.get('.browser-content_social_icon.--no-url').should('exist') cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' ).should( 'have.css', 'opacity', '0.5' ); @@ -186,6 +189,7 @@ describe( 'Basic Info Page', function () { cy.get( '.Tooltip-Wrapper', { timeout: 3000 } ).should( 'not.exist' ); + cy.wait( 2000 ) cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' ).should( 'have.css', 'opacity', '1' ); diff --git a/tests/cypress/integration/wp-module-support/socialMedia.cy.js b/tests/cypress/integration/wp-module-support/socialMedia.cy.js index 0f88cf12f..d31654e3c 100644 --- a/tests/cypress/integration/wp-module-support/socialMedia.cy.js +++ b/tests/cypress/integration/wp-module-support/socialMedia.cy.js @@ -15,11 +15,11 @@ export const SocialMediaTextValidations = ( URL, ToolTipText, ModalHeaderText ) cy.get( '.components-modal__header-heading' ).should('have.text', ModalHeaderText); cy.get(':nth-child(2) > .components-button-group > .is-secondary').click(); cy.get(NextButton).click(); - cy.get('.components-modal__content').type('{esc}'); + cy.get('.components-modal__header button').click() cy.get(NextButton).click(); cy.get(':nth-child(2) > .components-button-group > .is-primary').click(); cy.url().should('not.contain', 'wp-setup/step/basic-info'); cy.go('back'); - cy.get( '.nfd-onboarding-drawer__toggle-button' ).click(); + cy.get( '.nfd-onboarding-drawer__toggle-button', { timeout: 10000} ).click(); } }; From 2d013aced99d0871a11a13f3cf6ada6c0f040f9d Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Sun, 26 Nov 2023 17:56:52 +0530 Subject: [PATCH 8/9] fixed failing social media tests --- .../basic-info.cy.js | 51 ++++++++++++------- .../basic-info.cy.js | 31 +++++++---- .../wp-module-support/socialMedia.cy.js | 4 +- 3 files changed, 55 insertions(+), 31 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index f9549cfee..29332e4fb 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -13,6 +13,7 @@ import { APIList, BasicInfoAPI } from '../wp-module-support/EventsApi.cy'; describe( 'Basic Info Page', function () { const desc = 'Welcome to WordPress'; const title = 'Hello WordPress'; + const customCommandTimeout = 10000; before( () => { cy.visit( 'wp-admin/?page=nfd-onboarding#/wp-setup/step/basic-info' ); @@ -25,10 +26,10 @@ describe( 'Basic Info Page', function () { .invoke( 'attr', 'class' ) .then( ( class_name ) => { if ( ! class_name.includes( 'is-open' ) ) { - cy.get( '@drawerOpen' ).click(); + cy.get( '.nfd-onboarding-drawer__toggle-button' ).click(); } } ); - cy.get( '.nfd-onboarding-drawer__panel-inner' ) + cy.get( '.nfd-onboarding-drawer__panel-inner', {timeout: 10000} ) .scrollIntoView() .should( 'be.visible' ); @@ -130,7 +131,7 @@ describe( 'Basic Info Page', function () { it( 'Check for twitter or instagram id starting with `@` to convert it to URL', () => { const sampleID = '@infinity'; const socialTest3 = '#instagram'; - if ( cy.get( socialTest3 , { timeout: 15000} ).should( 'exist' ) ) { + if ( cy.get( socialTest3 , { timeout: customCommandTimeout} ).should( 'exist' ) ) { cy.get( socialTest3 ).clear({ force: true }); cy.get( socialTest3 ).type( sampleID ); cy.get( '#facebook' ).focus(); @@ -138,7 +139,7 @@ describe( 'Basic Info Page', function () { .invoke( 'val' ) .should( 'contain', 'https://' ); } - cy.wait( 2000 ) + // cy.wait( 2000 ) } ); it( 'Check if Social Media URL checks are done', () => { @@ -150,13 +151,14 @@ describe( 'Basic Info Page', function () { // Facebook Social Media Component const socialTest2 = cy.get( '#twitter' ); const socialTest = cy.get( '#facebook' ); - cy.wait(2000) + cy.wait(3000) - if ( socialTest.should( 'exist' ) ) { + if ( socialTest.should( 'exist', { timeout: customCommandTimeout } ) ) { cy.get( '#facebook' ).clear(); - cy.get( '.browser-content_social_icon.--no-url' ).should( 'exist' ) + cy.get( '.browser-content_social_icon.--no-url', { timeout: customCommandTimeout } ).should( 'exist' ) cy.get( - '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' + '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]', + { timeout : customCommandTimeout } ).should( 'have.css', 'opacity', '0.5' ); socialTest2.focus(); @@ -175,7 +177,8 @@ describe( 'Basic Info Page', function () { 'have.text', ModalText2 ); - cy.get( '.components-modal__content' ).type( '{esc}' ); + // cy.get( '.components-modal__content' ).type( '{esc}' ); + cy.get( '.components-modal__header button' , { timeout: customCommandTimeout } ).click() cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' ).should( 'have.css', 'opacity', '0.75' ); @@ -229,8 +232,10 @@ describe( 'Basic Info Page', function () { } } ); - it( 'Test Basic Info Events API gets triggered', () => { + it('Test Basic Info Events API gets triggered', () => { + const socialTest = '#facebook' const socialTest2 = '#twitter'; + const socialTest3 = '#instagram' const socialTest4 = '#youtube'; const socialTest5 = '#linkedin'; const socialTest6 = '#yelp'; @@ -238,20 +243,28 @@ describe( 'Basic Info Page', function () { const label_keys = ['', 'title', 'tagline', 'logo_added', 'platform', 'platform', 'platform', 'platform', 'platform', 'platform', 'platform']; const actual_values = ['', title, desc, '', 'facebook', 'twitter', 'instagram', 'youtube', 'linkedin', 'yelp', 'tiktok']; - cy.get( '.social-form__top-row_icon' ) - .as( 'socialFormToggle' ) - .invoke( 'attr', 'class' ) - .then( ( class_name ) => { + cy.get('.social-form__top-row_icon') + .as('socialFormToggle') + .invoke('attr', 'class') + .then((class_name) => { if ( - ! class_name.includes( 'social-form__top-row_icon_opened' ) + !class_name.includes('social-form__top-row_icon_opened') ) { - cy.get( '@socialFormToggle' ).click(); + cy.get('@socialFormToggle').click(); } - } ); - + }); + + cy.get( socialTest ).should( 'exist' ); + cy.get( socialTest ).clear(); + cy.get( socialTest ).type( 'https://www.facebook.com/testfaceboob' ); + cy.get( socialTest2 ).should( 'exist' ); cy.get( socialTest2 ).clear(); - cy.get( socialTest2 ).type( '@testTweet' ); + cy.get(socialTest2).type('@testTweet'); + + cy.get( socialTest3 ).should( 'exist' ); + cy.get( socialTest3 ).clear(); + cy.get( socialTest3 ).type( '@testInsta' ); cy.get( socialTest4 ).should( 'exist' ); cy.get( socialTest4 ).clear(); diff --git a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js index 78dfcd0f9..a06074a73 100644 --- a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js @@ -13,6 +13,7 @@ import { APIList, BasicInfoAPI } from '../wp-module-support/EventsApi.cy'; describe( 'Basic Info Page', function () { const desc = 'Welcome to WordPress'; const title = 'Hello WordPress'; + const customCommandTimeout = 10000; before( () => { cy.visit( @@ -27,10 +28,10 @@ describe( 'Basic Info Page', function () { .invoke( 'attr', 'class' ) .then( ( class_name ) => { if ( ! class_name.includes( 'is-open' ) ) { - cy.get( '@drawerOpen' ).click(); + cy.get( '.nfd-onboarding-drawer__toggle-button' ).click(); } } ); - cy.get( '.nfd-onboarding-drawer__panel-inner' ) + cy.get( '.nfd-onboarding-drawer__panel-inner' , {timeout: 10000} ) .scrollIntoView() .should( 'be.visible' ); @@ -132,7 +133,7 @@ describe( 'Basic Info Page', function () { it( 'Check for twitter or instagram id starting with `@` to convert it to URL', () => { const sampleID = '@infinity'; const socialTest3 = '#instagram'; - if ( cy.get( socialTest3 ).should( 'exist' ) ) { + if ( cy.get( socialTest3 , { timeout: customCommandTimeout } ).should( 'exist' ) ) { cy.get( socialTest3 ).clear( { force: true } ); cy.get( socialTest3 ).type( sampleID ); cy.get( '#facebook' ).focus(); @@ -140,7 +141,6 @@ describe( 'Basic Info Page', function () { .invoke( 'val' ) .should( 'contain', 'https://' ); } - cy.wait( 2000 ) } ); it( 'Check if Social Media URL checks are done', () => { @@ -154,11 +154,12 @@ describe( 'Basic Info Page', function () { const socialTest = cy.get( '#facebook' ); cy.wait(2000) - if ( socialTest.should( 'exist' ) ) { + if ( socialTest.should( 'exist' , { timeout: customCommandTimeout }) ) { cy.get( '#facebook' ).clear() - cy.get('.browser-content_social_icon.--no-url').should('exist') + cy.get( '.browser-content_social_icon.--no-url', { timeout: customCommandTimeout } ).should( 'exist' ) cy.get( - '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' + '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]', + { timeout : customCommandTimeout } ).should( 'have.css', 'opacity', '0.5' ); socialTest2.focus(); @@ -177,7 +178,7 @@ describe( 'Basic Info Page', function () { 'have.text', ModalText2 ); - cy.get( '.components-modal__content' ).type( '{esc}' ); + cy.get( '.components-modal__header button' , { timeout: customCommandTimeout } ).click() cy.get( '.browser-content_social_icon[style="background-image: var(--facebook-icon);"]' ).should( 'have.css', 'opacity', '0.75' ); @@ -232,7 +233,9 @@ describe( 'Basic Info Page', function () { } ); it( 'Test Basic Info Events API gets triggered', () => { + const socialTest = '#facebook' const socialTest2 = '#twitter'; + const socialTest3 = '#instagram' const socialTest4 = '#youtube'; const socialTest5 = '#linkedin'; const socialTest6 = '#yelp'; @@ -251,10 +254,18 @@ describe( 'Basic Info Page', function () { } } ); + cy.get( socialTest ).should( 'exist' ); + cy.get( socialTest ).clear(); + cy.get( socialTest ).type( 'https://www.facebook.com/testfaceboob' ); + cy.get( socialTest2 ).should( 'exist' ); cy.get( socialTest2 ).clear(); - cy.get( socialTest2 ).type( '@testTweet' ); - + cy.get(socialTest2).type('@testTweet'); + + cy.get( socialTest3 ).should( 'exist' ); + cy.get( socialTest3 ).clear(); + cy.get(socialTest3).type('@testInsta'); + cy.get( socialTest4 ).should( 'exist' ); cy.get( socialTest4 ).clear(); cy.get( socialTest4 ).type( '@testYouTube' ); diff --git a/tests/cypress/integration/wp-module-support/socialMedia.cy.js b/tests/cypress/integration/wp-module-support/socialMedia.cy.js index d31654e3c..48c75f92d 100644 --- a/tests/cypress/integration/wp-module-support/socialMedia.cy.js +++ b/tests/cypress/integration/wp-module-support/socialMedia.cy.js @@ -15,11 +15,11 @@ export const SocialMediaTextValidations = ( URL, ToolTipText, ModalHeaderText ) cy.get( '.components-modal__header-heading' ).should('have.text', ModalHeaderText); cy.get(':nth-child(2) > .components-button-group > .is-secondary').click(); cy.get(NextButton).click(); - cy.get('.components-modal__header button').click() + cy.get('.components-modal__header button', {timeout: 10000}).click() cy.get(NextButton).click(); cy.get(':nth-child(2) > .components-button-group > .is-primary').click(); cy.url().should('not.contain', 'wp-setup/step/basic-info'); cy.go('back'); - cy.get( '.nfd-onboarding-drawer__toggle-button', { timeout: 10000} ).click(); + cy.get( '.nfd-onboarding-drawer__toggle-button', { timeout: 10000 } ).click(); } }; From a3576b04bbbddc8444158457b2a9232ba2fb8939 Mon Sep 17 00:00:00 2001 From: sangeetha-nayak Date: Wed, 29 Nov 2023 16:45:12 +0530 Subject: [PATCH 9/9] corrected typo --- .../integration/2-general-onboarding-flow/basic-info.cy.js | 2 +- .../integration/3-ecommerce-onboarding-flow/basic-info.cy.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js index 29332e4fb..0b292dde6 100644 --- a/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/2-general-onboarding-flow/basic-info.cy.js @@ -256,7 +256,7 @@ describe( 'Basic Info Page', function () { cy.get( socialTest ).should( 'exist' ); cy.get( socialTest ).clear(); - cy.get( socialTest ).type( 'https://www.facebook.com/testfaceboob' ); + cy.get( socialTest ).type( 'https://www.facebook.com/testfacebook' ); cy.get( socialTest2 ).should( 'exist' ); cy.get( socialTest2 ).clear(); diff --git a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js index a06074a73..eeb4f090a 100644 --- a/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js +++ b/tests/cypress/integration/3-ecommerce-onboarding-flow/basic-info.cy.js @@ -256,7 +256,7 @@ describe( 'Basic Info Page', function () { cy.get( socialTest ).should( 'exist' ); cy.get( socialTest ).clear(); - cy.get( socialTest ).type( 'https://www.facebook.com/testfaceboob' ); + cy.get( socialTest ).type( 'https://www.facebook.com/testfacebook' ); cy.get( socialTest2 ).should( 'exist' ); cy.get( socialTest2 ).clear();