Merge pull request #4590 from mozilla/mntor-3137

Mntor-3137 - Verify that the navigation of the Premium upsell screen works correctly

src/e2e/pages/automaticRemovePage.ts

@@ -10,10 +10,13 @@ export class AutomaticRemovePage {
   readonly ulElement: Locator;
   readonly liElements: Locator;
 
-  readonly planLabel0: Locator;
-  readonly planLabel1: Locator;
+  readonly planToggle0: Locator;
+  readonly planToggle1: Locator;
   readonly price: Locator;
   readonly plan: Locator;
+  readonly xButton: Locator;
+  readonly forwardArrowButton: Locator;
+  readonly subplatButton: Locator;
 
   readonly bulletPointsExpected: string[];
 
@@ -24,8 +27,8 @@ export class AutomaticRemovePage {
     this.liElements = page.locator("div > strong + ul > li");
 
     //labels that allow toggles
-    this.planLabel0 = page.locator("div > label").nth(0);
-    this.planLabel1 = page.locator("div > label").nth(1);
+    this.planToggle0 = page.locator("div > label").nth(0);
+    this.planToggle1 = page.locator("div > label").nth(1);
 
     //displayed price and plan
     this.price = page.locator("div > strong + span");
@@ -39,6 +42,10 @@ export class AutomaticRemovePage {
       "Continuous monitoring for new exposures",
       "Alerts when your data has been breached",
     ];
+
+    this.xButton = page.getByLabel("Return to dashboard");
+    this.forwardArrowButton = page.getByLabel("Go to next step");
+    this.subplatButton = page.locator("div > strong + span + a");
   }
 
   async open() {

src/e2e/pages/dashBoardPage.ts

@@ -75,7 +75,11 @@ export class DashboardPage {
   readonly privacyNoticeFooter: Locator;
   readonly githubFooter: Locator;
 
+  readonly overviewCardSummary: Locator;
+  readonly overviewCardFindings: Locator;
+
   readonly upsellScreenButton: Locator;
+  readonly urlRegex: RegExp;
 
   constructor(page: Page) {
     this.page = page;
@@ -107,6 +111,7 @@ export class DashboardPage {
       .locator('//div[starts-with(@class, "ProgressCard_progressStat_")]/span')
       .first();
 
+    //footer
     this.mozillaLogoFooter = page.locator(
       '//a[starts-with(@class, "Shell_mozillaLink")]',
     );
@@ -223,6 +228,15 @@ export class DashboardPage {
 
     //upsell button
     this.upsellScreenButton = page.getByText(/Let’s (keep going|fix it)/);
+    this.overviewCardSummary = page.locator(
+      "[aria-label='Dashboard summary'] > div > p",
+    );
+    this.overviewCardFindings = page.locator(
+      "[aria-label='Dashboard summary'] > div > h3",
+    );
+
+    //regex
+    this.urlRegex = /\/dashboard\/(fixed|action-needed)\/?/;
   }
 
   dashboardLinks() {

src/e2e/pages/dataBrokersPage.ts

@@ -7,10 +7,12 @@ import { Locator, Page } from "@playwright/test";
 export class DataBrokersPage {
   readonly page: Page;
   readonly removeThemForMeButton: Locator;
+  readonly xButton: Locator;
 
   constructor(page: Page) {
     this.page = page;
     this.removeThemForMeButton = page.getByText("Remove them for me");
+    this.xButton = page.getByLabel("Return to dashboard");
   }
 
   async open() {

src/e2e/specs/dashboard.spec.ts

@@ -355,6 +355,18 @@ test.describe(`${process.env.E2E_TEST_ENV} - Breaches Dashboard - Breaches Scan,
     const fixedExposures = await dashboardPage.numFixed.textContent();
     expect(fixedExposures as string).toMatch(initialExposuresCount);
   });
+});
+
+test.describe(`${process.env.E2E_TEST_ENV} - Breaches Dashboard - Overview Card`, () => {
+  test.beforeEach(async ({ dashboardPage, page }) => {
+    await dashboardPage.open();
+
+    try {
+      await checkAuthState(page);
+    } catch {
+      console.log("[E2E_LOG] - No fxa auth required, proceeding...");
+    }
+  });
 
   test("Verify that the Premium upsell screen is displayed correctly - overview card", async ({
     dashboardPage,
@@ -385,15 +397,121 @@ test.describe(`${process.env.E2E_TEST_ENV} - Breaches Dashboard - Breaches Scan,
     }
 
     //testing that toggles work
-    await automaticRemovePage.planLabel0.click();
+    await automaticRemovePage.planToggle0.click();
     const price0 = await automaticRemovePage.price.textContent();
     const plan0 = await automaticRemovePage.plan.textContent();
-    await automaticRemovePage.planLabel1.click();
+    await automaticRemovePage.planToggle1.click();
     const price1 = await automaticRemovePage.price.textContent();
     const plan1 = await automaticRemovePage.plan.textContent();
     expect(price0).not.toEqual(price1);
     expect(plan0).not.toEqual(plan1);
   });
+
+  test("Verify that the navigation of the Premium upsell screen works correctly - from overview card", async ({
+    dashboardPage,
+    automaticRemovePage,
+    dataBrokersPage,
+    page,
+  }) => {
+    // link to testrail
+    test.info().annotations.push({
+      type: "testrail",
+      description:
+        "https://testrail.stage.mozaws.net/index.php?/cases/view/2463626",
+    });
+
+    await dashboardPage.open();
+
+    //get the number of exposures count
+    const overviewCardSummary =
+      await dashboardPage.overviewCardSummary.textContent();
+    const overviewCardFindings =
+      await dashboardPage.overviewCardFindings.textContent();
+    expect(overviewCardFindings).not.toContain("No exposures found");
+    expect(overviewCardSummary).not.toBeNull();
+    const exposuresCountMatches = overviewCardSummary!.match(/\d+/);
+    expect(exposuresCountMatches).toBeTruthy();
+    expect(exposuresCountMatches!.length).toBeGreaterThan(0);
+    const exposuresCount = parseInt(exposuresCountMatches![0]);
+
+    //check that premium upsell screen loads
+    await dashboardPage.upsellScreenButton.click();
+    await page.waitForURL(/.*\/fix\/.*\/view-data-brokers\/?/);
+    await dataBrokersPage.removeThemForMeButton.click();
+    await page.waitForURL(/.*\/fix\/.*\/automatic-remove\/?/);
+
+    //check that X returns back to /dashboard
+    await expect(automaticRemovePage.xButton).toBeVisible();
+
+    await automaticRemovePage.xButton.click();
+    await page.waitForURL(dashboardPage.urlRegex);
+
+    //forward arrow checks
+    await automaticRemovePage.open();
+    await expect(automaticRemovePage.forwardArrowButton).toBeVisible();
+
+    const escapeRegExp = (str: string): string => {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    };
+
+    const breachString0 = "high-risk-data-breaches";
+    const breachString1 = "leaked-passwords";
+    const breachString2 = "security-recommendations";
+
+    const breachOrDashboard = (excludeThis: string) => {
+      const escapedExclude = escapeRegExp(excludeThis);
+      const pattern = [
+        dashboardPage.urlRegex.source,
+        breachString0,
+        breachString1,
+        breachString2,
+      ]
+        .map((s) => `.*${s}.*`)
+        .join("|");
+
+      return new RegExp(`^(?!.*${escapedExclude})(${pattern})`);
+    };
+
+    const checkBreachLink = async () => {
+      const currentUrl = page.url();
+      await automaticRemovePage.forwardArrowButton.click();
+      await page.waitForURL(breachOrDashboard(currentUrl));
+      const urlToCheck = page.url();
+      const breachStringRE = new RegExp(
+        `.*(${[breachString0, breachString1, breachString2].join("|")}).*`,
+      );
+      return breachStringRE.test(urlToCheck);
+    };
+
+    let iter = 0;
+    while (await checkBreachLink()) iter++;
+    const visitedBreachPages = iter !== 0;
+    const exposuresExist = exposuresCount !== 0;
+    expect(visitedBreachPages).toBe(exposuresExist);
+
+    //price&plan toggle checks
+    await automaticRemovePage.open();
+    const subplatRegex = /\/products\/prod_/;
+
+    const checkToggleButtonWorks = async (toggleButton: Locator) => {
+      await automaticRemovePage.open();
+      await expect(toggleButton).toBeVisible();
+      await toggleButton.click();
+      const toggleText = await toggleButton.textContent();
+      expect(toggleText).not.toBeNull();
+      await automaticRemovePage.subplatButton.click();
+      await page.waitForURL(subplatRegex);
+      return page.url();
+    };
+
+    const subplat0 = await checkToggleButtonWorks(
+      automaticRemovePage.planToggle0,
+    );
+    const subplat1 = await checkToggleButtonWorks(
+      automaticRemovePage.planToggle1,
+    );
+    expect(subplat0).not.toBe(subplat1);
+  });
 });
 
 test.describe(`${process.env.E2E_TEST_ENV} - Breaches Dashboard - Footer`, () => {