Merge pull request #3626 from mozilla/MNTOR-2290-redesign-header-options

test confirming redesign header redirects

playwright.config.js

@@ -72,11 +72,23 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] }
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: {
+          width: 1920,
+          height: 1080
+        }
+      }
     },
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] }
+      use: {
+        ...devices['Desktop Firefox'],
+        viewport: {
+          width: 1920,
+          height: 1080
+        }
+      }
     },
 
     /* Test against mobile viewports. */

src/e2e/pages/dashBoardPage.ts

@@ -10,14 +10,22 @@ export class DashboardPage {
   readonly siteFoundImage: Locator;
   readonly breachStats: Locator;
 
+  readonly dashboardNavButton: Locator;
+  readonly fAQsNavButton: Locator;
+
   constructor(page: Page) {
     this.page = page;
     this.dataBreachEmailDropdown = page.locator("custom-select");
     this.siteFoundImage = page.locator("figure img");
     this.breachStats = page.locator("breach-stats");
+    //sidebar nav
+    this.dashboardNavButton = page.getByRole("link", { name: "Dashboard" });
+    this.fAQsNavButton = page
+      .getByLabel("Navigation")
+      .getByRole("link", { name: "FAQs" });
   }
 
   async open() {
-    await this.page.goto("/user/dashboard");
+    await this.page.goto("/redesign/user/dashboard");
   }
 }

src/e2e/specs/dashboard.spec.ts

@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { test, expect } from "../fixtures/basePage.js";
+import { checkAuthState } from "../utils/helpers.js";
+
+// bypass login
+test.use({ storageState: "./e2e/storageState.json" });
+test.describe("Breaches Dashboard - Headers", () => {
+  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 site header is displayed correctly for signed in users", async ({
+    dashboardPage,
+  }) => {
+    // link to testrail
+    test.info().annotations.push({
+      type: "testrail",
+      description:
+        "https://testrail.stage.mozaws.net/index.php?/cases/view/2301512",
+    });
+
+    expect(await dashboardPage.dashboardNavButton.getAttribute("href")).toEqual(
+      "/redesign/user/dashboard",
+    );
+    expect(await dashboardPage.fAQsNavButton.getAttribute("href")).toEqual(
+      "https://support.mozilla.org/kb/firefox-monitor-faq",
+    );
+  });
+});

src/e2e/utils/helpers.ts

@@ -34,11 +34,11 @@ export const ENV_URLS = {
 };
 
 export const setEnvVariables = (email: string) => {
-  process.env["E2E_TEST_ENV"] = (process.env.E2E_TEST_ENV as string) ?? "local";
+  process.env["E2E_TEST_ENV"] =
+    (process.env.E2E_TEST_ENV as string) ?? ENV.stage;
   process.env["E2E_TEST_ACCOUNT_EMAIL"] = email;
   process.env["E2E_TEST_BASE_URL"] =
-    ENV_URLS[process.env.E2E_TEST_ENV as ENV] ??
-    "https://stage.firefoxmonitor.nonprod.cloudops.mozgcp.net";
+    ENV_URLS[process.env.E2E_TEST_ENV as ENV] ?? ENV_URLS.stage;
 };
 
 export const getBaseUrl = () => {
@@ -93,29 +93,32 @@ const enterYourPassword = async (page: Page) => {
 
 export const checkAuthState = async (page: Page) => {
   const authStateTitleString = await page
-    .locator("h1")
-    .textContent({ timeout: 4000 });
-  const checkIfTitleContains = (potentialTitle: string) => {
-    return authStateTitleString?.includes(potentialTitle);
-  };
+    .locator(".card-header")
+    .textContent({ timeout: 1000 });
 
-  switch (true) {
-    case checkIfTitleContains("Enter your email"):
-      await enterYourEmail(page);
-      break;
-    case checkIfTitleContains("Enter your password"):
-      await enterYourPassword(page);
-      break;
-    // case checkIfTitleContains('Set your password'):
-    //   await setYourPassword(page)
-    //   break
-    // case checkIfTitleContains('Enter confirmation code'):
-    //   await enterConfirmationCode(page)
-    //   break
-    // case checkIfTitleContains('Sign in'):
-    //   await signIn(page)
-    //   break
-    default:
-      break;
+  if (authStateTitleString) {
+    const checkIfTitleContains = (potentialTitle: string) => {
+      return authStateTitleString?.includes(potentialTitle);
+    };
+
+    switch (true) {
+      case checkIfTitleContains("Enter your email"):
+        await enterYourEmail(page);
+        break;
+      case checkIfTitleContains("Enter your password"):
+        await enterYourPassword(page);
+        break;
+      // case checkIfTitleContains('Set your password'):
+      //   await setYourPassword(page)
+      //   break
+      // case checkIfTitleContains('Enter confirmation code'):
+      //   await enterConfirmationCode(page)
+      //   break
+      // case checkIfTitleContains('Sign in'):
+      //   await signIn(page)
+      //   break
+      default:
+        break;
+    }
   }
 };