From 0156790e090ab23a792f9ae8233e91f3ced18c57 Mon Sep 17 00:00:00 2001
From: Jonathan Schaffer <jschaffer@gswell.com>
Date: Wed, 14 Aug 2024 11:22:59 -0400
Subject: [PATCH] Working with PW

Add tests to validate banner

Fix broken test

Update tests

- change reporter to dot, more CI friendly

Resolve comments

Resolve issues

- remove used variable
- updated selector to reduce flakiness
---
 react-app/src/components/Layout/index.tsx    |  6 +-
 react-app/src/components/UsaBanner/index.tsx | 12 ++--
 test/e2e/pages/home.page.ts                  | 26 +++++++
 test/e2e/pages/index.ts                      |  1 +
 test/e2e/pages/loginPage.ts                  |  6 +-
 test/e2e/playwright.config.ts                |  2 +-
 test/e2e/tests/home/faq.spec.ts              | 19 +++++
 test/e2e/tests/home/index.spec.ts            | 54 +++++++-------
 test/e2e/tests/home/noauth.spec.ts           | 75 ++++++++++++++++++++
 test/e2e/utils/auth.setup.ts                 |  6 ++
 10 files changed, 171 insertions(+), 36 deletions(-)
 create mode 100644 test/e2e/pages/home.page.ts
 create mode 100644 test/e2e/tests/home/faq.spec.ts
 create mode 100644 test/e2e/tests/home/noauth.spec.ts

diff --git a/react-app/src/components/Layout/index.tsx b/react-app/src/components/Layout/index.tsx
index 47d4f6627..88bc66fd3 100644
--- a/react-app/src/components/Layout/index.tsx
+++ b/react-app/src/components/Layout/index.tsx
@@ -127,7 +127,7 @@ export const Layout = () => {
       <UsaBanner
         isUserMissingRole={user?.user && customUserRoles === undefined}
       />
-      <nav className="bg-primary">
+      <nav data-test="nav-banner-d" className="bg-primary">
         <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
           <div className="h-[70px] flex gap-12 items-center text-white">
             {!isFaqPage ? (
@@ -212,6 +212,7 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
       <>
         {links.map((link) => (
           <NavLink
+            data-testid={`${link.name}-d`}
             to={link.link}
             target={link.link === "/faq" ? "_blank" : "_self"}
             key={link.name}
@@ -229,12 +230,14 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
             // When the user is not signed in
             <>
               <button
+                data-testid="sign-in-button-d"
                 className="text-white hover:text-white/70"
                 onClick={handleLogin}
               >
                 Sign In
               </button>
               <button
+                data-testid="register-button-d"
                 className="text-white hover:text-white/70"
                 onClick={handleRegister}
               >
@@ -256,6 +259,7 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
             {links.map((link) => (
               <li key={link.link}>
                 <Link
+                  data-testid={`${link.name}-m`}
                   className="block py-2 pl-3 pr-4 text-white rounded"
                   to={link.link}
                   target={link.link === "/faq" ? "_blank" : "_self"}
diff --git a/react-app/src/components/UsaBanner/index.tsx b/react-app/src/components/UsaBanner/index.tsx
index c7b52ff20..7e9a684c4 100644
--- a/react-app/src/components/UsaBanner/index.tsx
+++ b/react-app/src/components/UsaBanner/index.tsx
@@ -61,8 +61,8 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
           src={UsFlag}
           alt="A United States Flag icon"
         />
-        <p>An official website of the United States government</p>
-        <button className="flex" onClick={() => setIsOpen((value) => !value)}>
+        <p data-testid="usa-statement-d">An official website of the United States government</p>
+        <button data-testid="usa-expand-btn-d" className="flex" onClick={() => setIsOpen((value) => !value)}>
           <span className="underline text-[#005ea2]">Here's how you know</span>
           {isOpen ? (
             <ChevronUp className="w-4 h-4 text-[#005ea2]" />
@@ -82,9 +82,9 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
           alt="A United States Flag icon"
         />
         <div>
-          <p>An official website of the United States government</p>
+          <p data-testid="usa-statement-m">An official website of the United States government</p>
           <div className="flex">
-            <span className="underline text-[#005ea2] block">
+            <span data-testid="usa-expand-btn-m" className="underline text-[#005ea2] block">
               Here's how you know
             </span>
             {isOpen ? (
@@ -117,7 +117,7 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
         <div className="flex flex-col gap-3 px-3 mt-3 sm:flex-row max-w-screen-lg mx-auto pb-4">
           <div className="flex gap-2">
             <GovernmentBuildingIcon />
-            <p className="text-sm max-w-md">
+            <p data-testid="official-usage" className="text-sm max-w-md">
               <strong className="block">Official websites use .gov</strong>A
               <strong>.gov</strong> website belongs to an official government
               organization in the United States.
@@ -125,7 +125,7 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
           </div>
           <div className="flex gap-2">
             <LockIcon className="min-w-[40px] min-h-[40px] w-10" />
-            <p className="text-sm max-w-md">
+            <p data-testid="secure-usage" className="text-sm max-w-md">
               <strong className="block">Secure .gov websites use HTTPS</strong>
               A lock (<MiniLock />) or <strong>https://</strong> means you've
               safely connected to the .gov website. Share sensitive information
diff --git a/test/e2e/pages/home.page.ts b/test/e2e/pages/home.page.ts
new file mode 100644
index 000000000..6df99930b
--- /dev/null
+++ b/test/e2e/pages/home.page.ts
@@ -0,0 +1,26 @@
+import { type Locator, type Page } from '@playwright/test';
+
+export class HomePage {
+  readonly page: Page;
+  readonly desktop: object;
+  readonly officialUsage: Locator;
+  readonly secureUsage: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+
+    // the desktop object is used to group like selectors
+    this.desktop = {
+      usaBanner: page.getByTestId('usa-statement-d'),
+      usaBannerBtn: page.getByTestId('usa-expand-btn-d'),
+      homeLink: page.getByTestId('Home-d'),
+      faqLink: page.getByTestId('FAQ-d'),
+      signInBtn: page.getByTestId('sign-in-button-d'),
+      registerBtn: page.getByTestId('register-button-d'),
+      newBetterBtn: page.getByTestId('new-better-btn')
+    };
+
+    this.officialUsage = page.getByTestId('official-usage');
+    this.secureUsage = page.getByTestId('secure-usage');
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/pages/index.ts b/test/e2e/pages/index.ts
index b311de19c..5f5e4f039 100644
--- a/test/e2e/pages/index.ts
+++ b/test/e2e/pages/index.ts
@@ -1 +1,2 @@
 export * from "./loginPage";
+export * from "./home.page";
\ No newline at end of file
diff --git a/test/e2e/pages/loginPage.ts b/test/e2e/pages/loginPage.ts
index f62e566a5..6f19fb837 100644
--- a/test/e2e/pages/loginPage.ts
+++ b/test/e2e/pages/loginPage.ts
@@ -1,4 +1,4 @@
-import { Page, expect } from "@playwright/test";
+import { Page } from "@playwright/test";
 
 export class LoginPage {
   constructor(private readonly page: Page) {}
@@ -14,8 +14,6 @@ export class LoginPage {
     await this.page.getByRole("textbox", { name: "Password" }).fill(password);
     await this.page.getByRole("button", { name: "submit" }).click();
     await this.page.getByRole("link", { name: "Dashboard" }).waitFor();
-    expect(
-      await this.page.getByRole("link", { name: "Dashboard" }).isVisible()
-    ).toBeTruthy();
+    await this.page.getByRole("link", { name: "Dashboard" }).isVisible();
   }
 }
diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts
index d0d0eca60..5f71bbf85 100644
--- a/test/e2e/playwright.config.ts
+++ b/test/e2e/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  reporter: "dot",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
diff --git a/test/e2e/tests/home/faq.spec.ts b/test/e2e/tests/home/faq.spec.ts
new file mode 100644
index 000000000..4a6b5a276
--- /dev/null
+++ b/test/e2e/tests/home/faq.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('FAQ page', {tag: ['@e2e', '@smoke']}, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/faq');
+  });
+
+  // this test validates the expansion of a FAQ question, this would be a good case to move to a component test
+  test('should display crosswalk system FAQ', async ({ page }) => {
+    // this is the css selector for an ID attribute
+    await expect(page.locator('#crosswalk-system')).toBeVisible();
+
+    // this is the css selector for a HREF path ending in "state-plan-macpro.pdf"
+    await expect(page.locator('a[href*="state-plan-macpro"]')).not.toBeVisible();
+
+    await page.locator('#crosswalk-system').click();
+    await expect(page.locator('a[href*="state-plan-macpro"]')).toBeVisible();
+  });
+});
\ No newline at end of file
diff --git a/test/e2e/tests/home/index.spec.ts b/test/e2e/tests/home/index.spec.ts
index 7c5d67e7d..88da67ac0 100644
--- a/test/e2e/tests/home/index.spec.ts
+++ b/test/e2e/tests/home/index.spec.ts
@@ -1,29 +1,35 @@
 import { test, expect } from "@playwright/test";
 
-test("has title", async ({ page }) => {
-  await page.goto("/");
-  await expect(page).toHaveTitle(/OneMAC/);
-});
-
-test("see frequently asked questions header when in faq page", async ({
-  page,
-}) => {
-  await page.goto("/");
-  const popup = page.waitForEvent("popup");
-  await page.getByRole("link", { name: "FAQ", exact: true }).click();
-  const foundFaqHeading = await popup;
-  await foundFaqHeading
-    .getByRole("heading", { name: "Frequently Asked Questions" })
-    .isVisible();
-  expect(foundFaqHeading).toBeTruthy();
-});
+test.describe('home page', {tag: '@e2e'}, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
 
-test("see dashboard link when log in", async ({ page }) => {
-  await page.goto("/");
-  await page.getByRole("link", { name: "Dashboard" }).click();
+  test("has title", async ({ page }) => {    
+    await expect(page).toHaveTitle("OneMAC");
+  });
 
-  const dashboardLinkVisible = await page
-    .getByRole("link", { name: "Dashboard" })
-    .isVisible();
-  expect(dashboardLinkVisible).toBeTruthy();
+  test('should display a menu', async({ page }) => {
+    await expect(page.getByTestId('sign-in-button-d')).not.toBeVisible();
+  });
+  
+  test("see frequently asked questions header when in faq page", async ({ page }) => {
+    const popup = page.waitForEvent("popup");
+    await page.getByRole("link", { name: "FAQ", exact: true }).click();
+    const foundFaqHeading = await popup;
+    await foundFaqHeading
+      .getByRole("heading", { name: "Frequently Asked Questions" })
+      .isVisible();
+    expect(foundFaqHeading).toBeTruthy();
+  });
+  
+  test("see dashboard link when log in", async ({ page }) => {
+    await page.getByRole("link", { name: "Dashboard" }).click();
+  
+    const dashboardLinkVisible = await page
+      .getByRole("link", { name: "Dashboard" })
+      .isVisible();
+    expect(dashboardLinkVisible).toBeTruthy();
+  });  
 });
+
diff --git a/test/e2e/tests/home/noauth.spec.ts b/test/e2e/tests/home/noauth.spec.ts
new file mode 100644
index 000000000..f36877494
--- /dev/null
+++ b/test/e2e/tests/home/noauth.spec.ts
@@ -0,0 +1,75 @@
+import { test, expect } from '@playwright/test';
+
+import { HomePage } from 'pages/home.page';
+let homePage;
+
+test.describe('home page - no auth', {tag: ['@e2e', '@smoke']}, () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test.beforeEach(async ({ page }) => {
+    homePage = new HomePage(page);
+    await page.goto('/');
+  });
+
+  test.describe('UI validations', () => {
+    test('should have a USA banner', async () => {
+      await expect(homePage.desktop.usaBanner).toBeVisible();
+      await expect(homePage.desktop.usaBanner).toHaveText('An official website of the United States government');
+
+      await expect(homePage.desktop.usaBannerBtn).toBeVisible();
+      await expect(homePage.desktop.usaBannerBtn).toHaveText("Here's how you know");
+
+      await expect(homePage.officialUsage).not.toBeVisible();
+      await expect(homePage.secureUsage).not.toBeVisible();
+    });
+  
+    test('should have a navigation banner', async () => {
+      await expect(homePage.desktop.homeLink).toBeVisible();
+      await expect(homePage.desktop.homeLink).toHaveText('Home');
+      
+      await expect(homePage.desktop.faqLink).toBeVisible();
+      await expect(homePage.desktop.faqLink).toHaveText('FAQ');
+  
+      await expect(homePage.desktop.signInBtn).toBeVisible();
+      await expect(homePage.desktop.signInBtn).toHaveText('Sign In');
+  
+      await expect(homePage.desktop.registerBtn).toBeVisible();
+      await expect(homePage.desktop.registerBtn).toHaveText('Register');
+    });
+  });
+
+  test.describe('Workflow validations', () => {
+    test.describe('USA Banner Interactions', () => {
+      test.beforeEach(async () => {
+        await homePage.desktop.usaBannerBtn.click();
+      });
+
+      test('should display USA statement', async() => {  
+        await expect(homePage.officialUsage).toBeVisible();
+        await expect(homePage.officialUsage).toHaveText('Official websites use .govA.gov website belongs to an official government organization in the United States.');
+  
+        await expect(homePage.secureUsage).toBeVisible();
+        await expect(homePage.secureUsage).toHaveText("Secure .gov websites use HTTPSA lock (LockA locked padlock) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.");
+      });
+  
+      test('should collapse the USA statement', async() => {
+        await homePage.desktop.usaBannerBtn.click();
+
+        await expect(homePage.officialUsage).not.toBeVisible();
+        await expect(homePage.secureUsage).not.toBeVisible();
+      });
+    });
+
+    test.describe('FAQs', () => {
+      test('navigastes to the FAQ page', async({ page }) => {
+        await homePage.desktop.faqLink.click();
+
+        const pagePromise = page.waitForEvent('popup');
+        const newTab = await pagePromise;
+        await newTab.waitForLoadState();
+
+        await expect(newTab.locator('#crosswalk-system')).toBeVisible();
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/e2e/utils/auth.setup.ts b/test/e2e/utils/auth.setup.ts
index 266e50b4a..ee653f28e 100644
--- a/test/e2e/utils/auth.setup.ts
+++ b/test/e2e/utils/auth.setup.ts
@@ -26,6 +26,9 @@ const password = (
 
 const stateSubmitterAuthFile = "playwright/.auth/state-user.json";
 
+/**
+ * Rewrite without using a test. This throws off the report count
+ */
 setup("authenticate state submitter", async ({ page, context }) => {
   const loginPage = new LoginPage(page);
   await loginPage.goto();
@@ -36,6 +39,9 @@ setup("authenticate state submitter", async ({ page, context }) => {
 
 const reviewerAuthFile = "playwright/.auth/reviewer-user.json";
 
+/**
+ * Rewrite without using a test. This throws off the report count
+ */
 setup("authenticate cms reviewer", async ({ page, context }) => {
   const loginPage = new LoginPage(page);
   await loginPage.goto();