Add About Page E2E tests

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
     },

cypress/e2e/aboutpage.cy.ts

@@ -0,0 +1,73 @@
+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.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')
+      .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.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('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');
+      });
+  });
+});
+

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>
+            <HeaderText data-cy={"about-banner-header"} 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>
           </div>
           <div>
             <DefaultButton
               as={"a"}
+              data-cy={"about-banner-button"}
               href={"/contact"}
               w={"100%"}
               py={3}

src/components/molecules/about-header/about-header.tsx

@@ -11,13 +11,13 @@ 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="">
-                So many jobs available, all you have to do is keep up with  our posts. Check below for recent job openings. 
+                So many jobs available, all you have to do is keep up with our posts. Check below for recent job openings. 
               </p>
             </div>