address review feedback

TechIsHiring · Oct 4, 2023 · 76d0838 · 76d0838
1 parent a55212c
commit 76d0838
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>