From a55212c0279fbbffe6f4da492b314334a0e98638 Mon Sep 17 00:00:00 2001
From: Demian Godon <demiangodon@Demians-MacBook-Air.local>
Date: Fri, 15 Sep 2023 10:55:30 -0700
Subject: [PATCH 1/2] Add About Page E2E tests

---
 cypress/e2e/aboutpage.cy.ts                   | 37 +++++++++++++++++++
 .../molecules/about-banner/about-banner.tsx   |  5 ++-
 .../molecules/about-header/about-header.tsx   |  4 +-
 3 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 cypress/e2e/aboutpage.cy.ts

diff --git a/cypress/e2e/aboutpage.cy.ts b/cypress/e2e/aboutpage.cy.ts
new file mode 100644
index 0000000..a78e903
--- /dev/null
+++ b/cypress/e2e/aboutpage.cy.ts
@@ -0,0 +1,37 @@
+describe("About page tests", () => {
+  beforeEach(() => {
+    cy.visit("/about",  { timeout: 30000 });
+  });
+
+  it("About header renders", () => {
+    cy.get('[data-cy="about-header-header"]')
+      .should("be.visible")
+      .and("contain", "Transnational Job Listing Channel");
+    cy.get('[data-cy="about-header-body"]')
+      .should("be.visible")
+      .and("contain", "So many jobs available, all you have to do is keep up with  our posts. Check below for recent job openings.");
+  });
+
+  it("About banner renders", () => {
+    cy.get('[data-cy="about-banner-header"]')
+      .should("be.visible")
+      .and("contain", "Have a question?");
+    cy.get('[data-cy="about-banner-body"]')
+      .should("be.visible")
+      .and("contain", "If you have any questions, please contact us");
+    cy.get('[data-cy="about-banner-button"]')
+      .within(() => {
+        cy.validateLink('Contact Us', '/contact');
+      });
+  });
+
+  it("About details renders", () => {
+    cy.get(':nth-child(3) > article').should("be.visible")
+      .within(() => {
+        cy.validateLink('Chad R. Stewart', 'https://www.linkedin.com/in/ChadRStewart/');
+        cy.validateLink('#TechIsHiring', 'https://twitter.com/TechIsHiring/');
+        cy.validateLink('Hire Chad R. Stewart', '/hire-chad');
+      });
+  });
+});
+
diff --git a/src/components/molecules/about-banner/about-banner.tsx b/src/components/molecules/about-banner/about-banner.tsx
index a7c2e44..d144c35 100644
--- a/src/components/molecules/about-banner/about-banner.tsx
+++ b/src/components/molecules/about-banner/about-banner.tsx
@@ -15,12 +15,13 @@ export default function AboutBanner() {
       <div className="relative bottom-32 lg:bottom-14 px-10 lg:px-40 flex lg:justify-center mx-auto sm:w-[80%] lg:w-full">
         <div className="bg-[#0B2F4F] flex flex-1 lg:flex-auto flex-col lg:flex-row w-full p-8 gap-9 rounded-l-lg " >
           <div>
-            <HeaderText level={"h4"} color={"white"} fontSize={"20px"}>Have a question?</HeaderText>
-            <DefaultText className={"text-altWhite text-[16px]"}>If you have any questions, please contact us</DefaultText>
+            <HeaderText data-cy={"about-banner-header"} level={"h4"} color={"white"} fontSize={"20px"}>Have a question?</HeaderText>
+            <DefaultText data-cy={"about-banner-body"} className={"text-altWhite text-[16px]"}>If you have any questions, please contact us</DefaultText>
           </div>
           <div>
             <DefaultButton
               as={"a"}
+              data-cy={"about-banner-button"}
               href={"/contact"}
               w={"100%"}
               py={3}
diff --git a/src/components/molecules/about-header/about-header.tsx b/src/components/molecules/about-header/about-header.tsx
index d9d191a..380e0c8 100644
--- a/src/components/molecules/about-header/about-header.tsx
+++ b/src/components/molecules/about-header/about-header.tsx
@@ -11,12 +11,12 @@ export default function AboutHeader() {
     >
         <div className="w-full flex flex-col items-center justify-center px-[18px] lg:px-0 bg-gradient-to-r from-black/60  to-transparent gap-4">
             
-            <HeaderText level={"h1"} className={"text-white"} fontWeight={"extrabold"} fontSize={{base: "39px", md:"56px"}}>
+            <HeaderText data-cy={"about-header-header"} level={"h1"} className={"text-white"} fontWeight={"extrabold"} fontSize={{base: "39px", md:"56px"}}>
                 Transnational <span className="text-[#7AB8F1]">Job Listing</span> Channel
             </HeaderText>
 
             <div className="text-white flex justify-start items-start lg:px-5 w-full lg:w-[40%] text-left lg:text-center">
-              <p className="">
+              <p data-cy={"about-header-body"} className="">
                 So many jobs available, all you have to do is keep up with  our posts. Check below for recent job openings. 
               </p>
             </div>

From 76d083831d0f481cfcc2b4ce57bad15d0422a8b5 Mon Sep 17 00:00:00 2001
From: Demian Godon <demiangodon@Demians-MacBook-Air.local>
Date: Wed, 4 Oct 2023 10:46:54 -0700
Subject: [PATCH 2/2] address review feedback

---
 cypress.config.ts                             |  1 +
 cypress/e2e/aboutpage.cy.ts                   | 64 +++++++++++++++----
 .../molecules/about-banner/about-banner.tsx   |  2 +-
 .../molecules/about-header/about-header.tsx   |  4 +-
 4 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index 4ca13ab..41dc326 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -4,6 +4,7 @@ export default defineConfig({
   projectId: "1nng13",
   e2e: {
     baseUrl: 'http://localhost:3000',
+    viewportWidth: 1400,
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
diff --git a/cypress/e2e/aboutpage.cy.ts b/cypress/e2e/aboutpage.cy.ts
index a78e903..9b665dc 100644
--- a/cypress/e2e/aboutpage.cy.ts
+++ b/cypress/e2e/aboutpage.cy.ts
@@ -1,37 +1,73 @@
-describe("About page tests", () => {
+describe('About page tests', () => {
   beforeEach(() => {
-    cy.visit("/about",  { timeout: 30000 });
+    cy.visit('/about',  { timeout: 30000 });
   });
 
-  it("About header renders", () => {
+  it('About header renders', () => {
     cy.get('[data-cy="about-header-header"]')
-      .should("be.visible")
-      .and("contain", "Transnational Job Listing Channel");
-    cy.get('[data-cy="about-header-body"]')
-      .should("be.visible")
-      .and("contain", "So many jobs available, all you have to do is keep up with  our posts. Check below for recent job openings.");
+      .should('be.visible')
+      .and('contain', 'Transnational Job Listing Channel');
+    cy.contains('p', 'So many jobs available, all you have to do is keep up with our posts. Check below for recent job openings.')
+      .should('be.visible');
   });
 
   it("About banner renders", () => {
     cy.get('[data-cy="about-banner-header"]')
-      .should("be.visible")
+      .should('be.visible')
+      .and('contain', 'Have a question?');
+    cy.contains('p', 'If you have any questions, please contact us')
+      .should('be.visible');
+    cy.get('[data-cy="about-banner-button"]')
+      .within(() => {
+        cy.validateLink('Contact Us', '/contact');
+      });
+    cy.contains('p', 'Follow us on Social Media:')
+      .should('be.visible');
+    cy.get('main > div > section').eq(1)
+      .within(() => {
+        cy.validateLink('Twitter for Tech Is Hiring', 'https://www.twitter.com/TechIsHiring/')
+        cy.validateLink('LinkedIn for Tech Is Hiring', 'https://www.linkedin.com/company/TechIsHiring/')
+        cy.validateLink('YouTube for Tech Is Hiring', 'https://www.youtube.com/@TechIsHiring')
+      })
+  });
+
+  it("About banner renders on mobile", () => {
+    cy.viewport('iphone-5')
+    cy.get('[data-cy="about-banner-header"]')
+      .should('be.visible')
       .and("contain", "Have a question?");
-    cy.get('[data-cy="about-banner-body"]')
-      .should("be.visible")
-      .and("contain", "If you have any questions, please contact us");
+    cy.contains('p', 'If you have any questions, please contact us')
+      .should('be.visible');
     cy.get('[data-cy="about-banner-button"]')
       .within(() => {
         cy.validateLink('Contact Us', '/contact');
       });
+    cy.contains('p', 'Follow us on Social Media:')
+      .should('not.be.visible');
   });
 
-  it("About details renders", () => {
-    cy.get(':nth-child(3) > article').should("be.visible")
+  it('About details renders', () => {
+    cy.get('article').should('be.visible')
       .within(() => {
         cy.validateLink('Chad R. Stewart', 'https://www.linkedin.com/in/ChadRStewart/');
         cy.validateLink('#TechIsHiring', 'https://twitter.com/TechIsHiring/');
         cy.validateLink('Hire Chad R. Stewart', '/hire-chad');
       });
   });
+
+  it('About details renders on mobile', () => {
+    cy.viewport('iphone-5');
+    cy.get('article').should('be.visible')
+      .within(() => {
+        cy.validateLink('Chad R. Stewart', 'https://www.linkedin.com/in/ChadRStewart/');
+        cy.validateLink('#TechIsHiring', 'https://twitter.com/TechIsHiring/');
+        cy.validateLink('Hire Chad R. Stewart', '/hire-chad');
+
+        cy.contains('p', 'Follow us');
+        cy.validateLink('Twitter for Tech Is Hiring', 'https://www.twitter.com/TechIsHiring/');
+        cy.validateLink('LinkedIn for Tech Is Hiring', 'https://www.linkedin.com/company/TechIsHiring/');
+        cy.validateLink('YouTube for Tech Is Hiring', 'https://www.youtube.com/@TechIsHiring');
+      });
+  });
 });
 
diff --git a/src/components/molecules/about-banner/about-banner.tsx b/src/components/molecules/about-banner/about-banner.tsx
index d144c35..58b0817 100644
--- a/src/components/molecules/about-banner/about-banner.tsx
+++ b/src/components/molecules/about-banner/about-banner.tsx
@@ -16,7 +16,7 @@ export default function AboutBanner() {
         <div className="bg-[#0B2F4F] flex flex-1 lg:flex-auto flex-col lg:flex-row w-full p-8 gap-9 rounded-l-lg " >
           <div>
             <HeaderText data-cy={"about-banner-header"} level={"h4"} color={"white"} fontSize={"20px"}>Have a question?</HeaderText>
-            <DefaultText data-cy={"about-banner-body"} className={"text-altWhite text-[16px]"}>If you have any questions, please contact us</DefaultText>
+            <DefaultText className={"text-altWhite text-[16px]"}>If you have any questions, please contact us</DefaultText>
           </div>
           <div>
             <DefaultButton
diff --git a/src/components/molecules/about-header/about-header.tsx b/src/components/molecules/about-header/about-header.tsx
index 380e0c8..6e93c0a 100644
--- a/src/components/molecules/about-header/about-header.tsx
+++ b/src/components/molecules/about-header/about-header.tsx
@@ -16,8 +16,8 @@ export default function AboutHeader() {
             </HeaderText>
 
             <div className="text-white flex justify-start items-start lg:px-5 w-full lg:w-[40%] text-left lg:text-center">
-              <p data-cy={"about-header-body"} className="">
-                So many jobs available, all you have to do is keep up with  our posts. Check below for recent job openings. 
+              <p className="">
+                So many jobs available, all you have to do is keep up with our posts. Check below for recent job openings. 
               </p>
             </div>