feat: Add e2e tests for react-nextjs -> nextjs-host-remote sample (#2759)

Author: edchai

cypress/common/base.ts

@@ -20,6 +20,7 @@ import {CssAttr} from "../types/cssAttr";
 import {StubTypes} from "../types/stubTypes";
 import {RequestsTypes} from "../types/requestsTypes";
 import { readFile, writeTofile } from "../helpers/file-actions-helper";
+import {CommonTestData} from "../fixtures/commonTestData";
 
 export class BaseMethods {
 
@@ -897,6 +898,99 @@ export class BaseMethods {
         this.checkUrlText(link, isInclude, true)
     }
 
+    public changeRootFile({
+         changedContentFilePath,
+         rootFilePath,
+         originalContentFilePath,
+     }: {
+        changedContentFilePath: string,
+        rootFilePath: string,
+        originalContentFilePath: string
+    }): void {
+        cy.wait(2000)
+        this.checkElementWithTextPresence({
+            selector: baseSelectors.tags.paragraph,
+            text: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.start,
+            visibilityState: 'be.visible'
+        })
+        this.writeContentToFile({
+            contentFilePath: changedContentFilePath,
+            filePath: rootFilePath,
+            wait: 1000
+        })
+        this.reloadWindow()
+        this.checkElementWithTextPresence({
+            selector: baseSelectors.tags.paragraph,
+            text: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.start,
+            isVisible: false
+        })
+        this.checkElementWithTextPresence({
+            selector: baseSelectors.tags.paragraph,
+            text: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.start.replace('started', 'TESTED'),
+            visibilityState: 'be.visible'
+        })
+        this.writeContentToFile({
+            contentFilePath: originalContentFilePath,
+            filePath: rootFilePath,
+            wait: 1000
+        })
+        this.reloadWindow()
+        this.checkElementWithTextPresence({
+            selector: baseSelectors.tags.paragraph,
+            text: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.start,
+            visibilityState: 'be.visible'
+        })
+    }
+
+    public checkLinkedCardsFunctionality(host: number): void {
+        this.checkOutsideResourceUrl({
+            parentSelector: baseSelectors.tags.headers.h1,
+            selector: baseSelectors.tags.coreElements.link,
+            text: CommonTestData.nextJsAppsHeaderLinkName,
+            link: Constants.commonConstantsData.commonLinks.nextJs,
+        })
+        Constants.commonConstantsData.nextJsAppsCommonPhrases.linksCardsText.forEach((text: string, index: number) => {
+            this.openLocalhost(host)
+            this.checkOutsideResourceUrl({
+                selector: commonSelectors.nextJsAppsLinkCard,
+                text,
+                link: Constants.commonConstantsData.commonLinks.nextJsAppsCardsLinks[index],
+            })
+        })
+        // TODO: Failed for now due to dynamic animations loading on new page. Extra investigate required
+        // this.openLocalhost(host)
+        // this.checkOutsideResourceUrl({
+        //         parentSelector: baseSelectors.tags.footer,
+        //         selector: baseSelectors.tags.coreElements.link,
+        //         text: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.engine,
+        //         link: Constants.commonConstantsData.commonLinks.vercel,
+        // })
+    }
+
+    public checkLinkedCardsHoverAnimation(): void {
+        Constants.commonConstantsData.nextJsAppsCommonPhrases.linksCardsText.forEach((text: string) => {
+            this.reloadWindow()
+            this.checkElementHaveProperty({
+                selector: commonSelectors.nextJsAppsLinkCard,
+                prop: CssAttr.color,
+                value: Constants.color.skyBlue,
+                text,
+                isInclude: false,
+            })
+            this.hoverElement({
+                selector: commonSelectors.nextJsAppsLinkCard,
+                text,
+                wait: 2000
+            })
+            this.checkElementHaveProperty({
+                selector: commonSelectors.nextJsAppsLinkCard,
+                prop: CssAttr.color,
+                value: Constants.color.skyBlue,
+                text,
+            })
+        })
+    }
+
 
     /*
 *---------------------------------------------------

cypress/common/selectors.ts

@@ -72,6 +72,7 @@ export const commonSelectors = {
     commonWidget: '[data-e2e="APP_{appQuantity}__WIDGET"]',
     formField: '[data-e2e="FORM_FIELD__{fieldName}"]',
     commonMicroFrontendsAppsCard: '[data-e2e="APP__CARD"]',
+    nextJsAppsLinkCard: '[data-e2e="TEXTED_LINK_CARD"]'
 }
 
 export const selectors = {
@@ -177,9 +178,6 @@ export const selectors = {
     completeReactCaseApp: {
         toolTip: '.tool-tip',
     },
-    nextJsHostReactRemoteApp: {
-        linkCard: '[data-e2e="TEXTED_LINK_CARD"]'
-    }
 }
 
 export const updatedSelectors = {

cypress/fixtures/commonTestData.ts

@@ -51,7 +51,31 @@ export class CommonTestData {
             appName: Constants.commonConstantsData.commonCountAppNames.app2
         }
     ];
-    public static readonly nextJsHostReactRemoteAppLinkName = Constants.commonPhrases.nextJsHostReactRemoteApp.messages.welcome.split('to')[1].trim()
+    public static readonly commonNextJsAppsData = [
+        {
+            messageType: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.welcome.split(' ')[0].trim(),
+            selector: baseSelectors.tags.headers.h1,
+            message: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.welcome,
+            linkText: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.welcome.split('to')[1].trim(),
+        },
+        {
+            messageType: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.start.split('by')[0].trim(),
+            selector: baseSelectors.tags.paragraph,
+            message: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.start,
+        },
+        {
+            messageType: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.engine,
+            selector: baseSelectors.tags.footer,
+            message: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.engine,
+            linkText: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.engine,
+        },
+        {
+            messageType: baseSelectors.tags.footer.charAt(0).toUpperCase() + baseSelectors.tags.footer.slice(1),
+            selector: baseSelectors.tags.coreElements.body,
+            message: Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.footer,
+        }
+    ]
+    public static readonly nextJsAppsHeaderLinkName = Constants.commonConstantsData.nextJsAppsCommonPhrases.messages.welcome.split('to')[1].trim()
 }
 
 export function returnCommonDynamicAppsData(paragraphText: string[]) {