From 2f4d6e9558e8408b2c7940b1b45d3039a24f36e2 Mon Sep 17 00:00:00 2001 From: lizziecharisol Date: Sun, 25 Aug 2024 15:00:22 +0100 Subject: [PATCH] test: 123: added test for hero component and about page --- cypress/e2e/aboutpage.cy.ts | 56 +++++++++ cypress/e2e/homepage.cy.ts | 9 ++ .../molecules/about-banner/about-banner.tsx | 102 +++++++++------ .../molecules/about-details/about-details.tsx | 116 +++++++++++------- .../molecules/about-header/about-header.tsx | 35 +++--- .../molecules/hero-section/hero.tsx | 36 ++---- 6 files changed, 233 insertions(+), 121 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..aec8dd8 --- /dev/null +++ b/cypress/e2e/aboutpage.cy.ts @@ -0,0 +1,56 @@ +describe("About page", () => { + beforeEach(() => { + cy.visit("/about", { timeout: 30000 }); + }); + + + it("Tests about hero component", () => { + cy.get('[data-test="about-header"]') + .should('be.visible') + .and('have.text', "Transnational Job Listing Channel"); + cy.get('[data-test="about-hero-text"]') + .should('be.visible') + .and('have.text', "So many jobs available, all you have to do is keep up with our posts. Check below for recent job openings.") + // test backgdound image + cy.wait(3000); + cy.get('[data-test="about-hero-image"]') + .should('have.css', 'background-image') + .and('include', 'http://localhost:3000/_next/static/media/about-image1.e324faa8.png'); + }); + + it("Tests About Page Content", () => { + cy.get('[data-test="about-details-one"]').should('be.visible'); + cy.get('[data-test="about-details-two"]').should('be.visible'); + cy.get('[data-test="about-details-three"]').should('be.visible'); + cy.get('[data-test="about-details-four"]') + .should('be.visible') + .and('contain.text', "Where great Jobs and great Engineers come to find one another!"); + }); + + it("Tests about page banner", () => { + cy.get('[data-test="about-banner-header-text"]').should('be.visible').and('contain.text', "Have a question?"); + cy.get('[data-test="about-banner-text"]').should('be.visible').and('contain.text', "If you have any questions, please contact us"); + cy.get('[data-test="about-banner-button"]').should('be.visible').and('contain.text', "Contact Us"); + // test icons and links + // twitter + cy.get('a[href="https://www.twitter.com/TechIsHiring"]') + .should('have.attr', 'href', 'https://www.twitter.com/TechIsHiring'); + cy.viewport(1000, 660); + cy.get('[data-test="about-details-icon-twitter"]') + .should('not.exist'); + // linkedIn + cy.get('a[href="https://www.linkedin.com/company/TechIsHiring"]') + .should('have.attr', 'href', 'https://www.linkedin.com/company/TechIsHiring'); + cy.viewport(1000, 660); + cy.get('[data-test="about-details-icon-linkedIn"]') + .should('not.exist'); + // youtube + cy.get('a[href="https://www.youtube.com/@TechIsHiring"]') + .should('have.attr', 'href', 'https://www.youtube.com/@TechIsHiring'); + cy.viewport(1000, 660); + cy.get('[data-test="about-details-icon-youtube"]') + .should('not.exist'); + }) + + +}) \ No newline at end of file diff --git a/cypress/e2e/homepage.cy.ts b/cypress/e2e/homepage.cy.ts index 345b696..3851e6a 100644 --- a/cypress/e2e/homepage.cy.ts +++ b/cypress/e2e/homepage.cy.ts @@ -11,6 +11,15 @@ describe("Homepage", () => { cy.get('.sticky > :nth-child(1) > a > .chakra-heading').contains('TechIsHiring'); cy.get('header > div > nav > ul').should('be.visible'); + // hero section + cy.get('[data-test="hero-title"]').should('be.visible'); + + cy.get('[data-test="hero-flavored-text"]').should('be.visible').and('include.text',"So many jobs available, all you have to do is keep up with our posts. Check below for recent job openings.") + // hero image section + cy.get('[data-test="hero-image"]').should('be.visible'); + cy.get('[data-test="hero-image"]').should('have.attr', 'src').and('include', '/_next/static/media/heroImage.d5ad7d49.svg'); + cy.get('[data-test="hero-image"]').should('have.attr', 'alt').and('not.be.empty'); + validateFooter('desktop') }); }); diff --git a/src/components/molecules/about-banner/about-banner.tsx b/src/components/molecules/about-banner/about-banner.tsx index a7c2e44..47562e6 100644 --- a/src/components/molecules/about-banner/about-banner.tsx +++ b/src/components/molecules/about-banner/about-banner.tsx @@ -12,46 +12,72 @@ import { export default function AboutBanner() { return ( -
-
-
- Have a question? - If you have any questions, please contact us -
-
- +
+
+
+ + Have a question? + + + If you have any questions, please contact us + +
+
+ Contact Us - - -
+
-
- Follow us on Social Media: -
- - - - - - - - - -
+
+
+ + Follow us on Social Media: + +
+ + + + + + + + +
- ) +
+ ); } diff --git a/src/components/molecules/about-details/about-details.tsx b/src/components/molecules/about-details/about-details.tsx index 38f24f6..eb2cba2 100644 --- a/src/components/molecules/about-details/about-details.tsx +++ b/src/components/molecules/about-details/about-details.tsx @@ -10,50 +10,82 @@ import { export default function AboutDetails() { return ( -
- - TechIsHiring tries to assist tech professionals in finding employment - by encouraging meaningful interactions between people looking for employment - and those who can assist, rather than focusing primarily on advertising job openings. +
+ + TechIsHiring tries to assist tech professionals in finding + employment by encouraging meaningful interactions between people looking + for employment and those who can assist, rather than focusing primarily + on advertising job openings. + + + During the pandemic, + + Chad R. Stewart + + , the Founder of TechIsHiring, noticed that many people were + tweeting about job openings they had discovered and advertising + possibilities that they had come across, which is how{" "} + TechIsHiring came to be. Since there was no one place where these + tweets could be collected, the hashtag + + #TechIsHiring + {" "} + and the TechIsHiring account were created. + + + Looking to work with the Founder directly? + + Hire Chad R. Stewart + + . + +
+ + Follow us - - During the pandemic, - - Chad R. Stewart +
+ + - , the Founder of TechIsHiring, noticed that many - people were tweeting about job openings they had discovered and advertising possibilities - that they had come across, which is how TechIsHiring came to be. Since there was no one place - where these tweets could be collected, the hashtag - - #TechIsHiring - and the TechIsHiring account were created. - - - Looking to work with the Founder directly? - - Hire Chad R. Stewart + + + + + - . - -
- Follow us -
- - - - - - - - - -
- - - -
- ) +
+ + + + ); } diff --git a/src/components/molecules/about-header/about-header.tsx b/src/components/molecules/about-header/about-header.tsx index d9d191a..55329b2 100644 --- a/src/components/molecules/about-header/about-header.tsx +++ b/src/components/molecules/about-header/about-header.tsx @@ -6,22 +6,29 @@ export default function AboutHeader() { return (
-
- - - Transnational Job Listing Channel - - -
-

- So many jobs available, all you have to do is keep up with our posts. Check below for recent job openings. -

-
+
+ + Transnational Job Listing{" "} + Channel + +
+

+ So many jobs available, all you have to do is keep up with our + posts. Check below for recent job openings. +

+
- ) + ); } diff --git a/src/components/molecules/hero-section/hero.tsx b/src/components/molecules/hero-section/hero.tsx index 3fbb0e5..3891dc6 100644 --- a/src/components/molecules/hero-section/hero.tsx +++ b/src/components/molecules/hero-section/hero.tsx @@ -8,41 +8,23 @@ import { AiOutlineSearch } from "react-icons/ai"; const Hero = () => { return (
-
+
-

+

Where great Jobs and great{" "} Engineers come to find one another!

-

- So many jobs available, all you have to do is keep up with our - posts. Check below for recent job openings. -

- - {/* Commented out based on whether we commit to continuing to use the Twitter API - -
-
- - - -
-
- -
-
*/} - +

So many jobs available, all you have to do is keep up with our posts. Check below for recent job openings.

- Hero Image + Hero Image