From 0735198ff891160f1be7006f954cbdc1168dae9a Mon Sep 17 00:00:00 2001
From: Demian Godon <demiangodon@Demians-MacBook-Air.local>
Date: Wed, 27 Sep 2023 15:07:42 -0700
Subject: [PATCH 1/2] refactor header tests

---
 cypress/e2e/homepage.cy.ts                 | 23 +++++++++++---
 cypress/util/validateHeader.ts             | 36 ++++++++++++++++++++++
 src/components/organisms/header/header.tsx |  2 +-
 3 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 cypress/util/validateHeader.ts

diff --git a/cypress/e2e/homepage.cy.ts b/cypress/e2e/homepage.cy.ts
index 345b696..dc70747 100644
--- a/cypress/e2e/homepage.cy.ts
+++ b/cypress/e2e/homepage.cy.ts
@@ -1,16 +1,31 @@
+import { validateHeaderLinks, validateHeaderLogo, validateModalMenuLinks } from "../util/validateHeader";
 import validateFooter from "../util/validateFooter";
 
 describe("Homepage", () => {
   beforeEach(() => {
     cy.visit("/",  { timeout: 30000 });
+    cy.wait(100);
   });
 
   it("should display the homepage", () => {
     cy.title().should("include", "TechIsHiring");
-    cy.get("header").should("be.visible");
-    cy.get('.sticky > :nth-child(1) > a > .chakra-heading').contains('TechIsHiring');
-    cy.get('header > div > nav > ul').should('be.visible');
+    
+    validateHeaderLogo();
+    validateHeaderLinks();
 
-    validateFooter('desktop')
+    validateFooter('desktop');
   });
+
+  it("should display the homepage on mobile", () => {
+    cy.viewport('iphone-5');
+
+    cy.title().should("include", "TechIsHiring");
+    validateHeaderLogo();
+    cy.get('[data-cy=header]').within(() => {
+      cy.get('nav').click();
+    });
+    validateModalMenuLinks();
+
+    validateFooter('mobile');
+  })
 });
diff --git a/cypress/util/validateHeader.ts b/cypress/util/validateHeader.ts
new file mode 100644
index 0000000..58d8ea0
--- /dev/null
+++ b/cypress/util/validateHeader.ts
@@ -0,0 +1,36 @@
+export const validateHeaderLogo = () => {
+
+    cy.log('-----START HEADER LOGO-----')
+    // since both mobile and desktop versions are in the DOM as the same time, we scope with [data-cy]
+    cy.get('[data-cy=header]').within(() => {
+        cy.validateLink('TechIsHiring', '/')
+    })
+    // test the main navigation links for the site
+    cy.log('-----END HEADER LOGO-----')
+}
+
+const validateLinks = () => {
+    cy.validateLink('Home', '/')
+    cy.validateLink('Newsletter', 'https://newsletter.techishiring.com/', 'new tab')
+    cy.validateLink('About', '/about')
+    cy.validateLink('Contact Us', '/contact')
+}
+
+export const validateHeaderLinks = () => {
+    cy.log('-----START HEADER LINKS-----')
+    cy.get('[data-cy=header]').within(() => {
+        validateLinks()
+    })
+    // test the main navigation links for the site
+    cy.log('-----END HEADER LINKS-----')
+}
+
+export const validateModalMenuLinks = () => {
+    cy.log('-----START MODAL MENU LINKS-----')
+    // since both mobile and desktop versions are in the DOM as the same time, we scope with [data-cy]
+    cy.get('[role=dialog]').within(() => {
+        validateLinks()
+    })
+    // test the main navigation links for the site
+    cy.log('-----END MODAL MENU LINKS-----')
+}
diff --git a/src/components/organisms/header/header.tsx b/src/components/organisms/header/header.tsx
index 16d9860..c012504 100644
--- a/src/components/organisms/header/header.tsx
+++ b/src/components/organisms/header/header.tsx
@@ -6,7 +6,7 @@ const Header = () => {
   const navList = useMainNav();
 
   return (
-    <header className="flex justify-center sticky top-0 z-10 w-full border-b bg-white py-2">
+    <header data-cy="header" className="flex justify-center sticky top-0 z-10 w-full border-b bg-white py-2">
       <div className="flex items-center w-full 3xl:w-max-screen-size justify-between px-4 h-24">
         <Logo />
         <MainNav navList={navList} />

From 05c7ac95fd2b208d8c34740ddf65d16af617b6be Mon Sep 17 00:00:00 2001
From: Demian Godon <demiangodon@Demians-MacBook-Air.local>
Date: Wed, 27 Sep 2023 15:11:46 -0700
Subject: [PATCH 2/2] remove workaround wait

---
 cypress/e2e/homepage.cy.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/e2e/homepage.cy.ts b/cypress/e2e/homepage.cy.ts
index dc70747..0333845 100644
--- a/cypress/e2e/homepage.cy.ts
+++ b/cypress/e2e/homepage.cy.ts
@@ -4,7 +4,6 @@ import validateFooter from "../util/validateFooter";
 describe("Homepage", () => {
   beforeEach(() => {
     cy.visit("/",  { timeout: 30000 });
-    cy.wait(100);
   });
 
   it("should display the homepage", () => {