Skip to content

test: 123: added test for hero component and about page #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lizzy223 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

test: 123: added test for hero component and about page #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions cypress/e2e/aboutpage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
})


})
9 changes: 9 additions & 0 deletions cypress/e2e/homepage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
});
});
102 changes: 64 additions & 38 deletions src/components/molecules/about-banner/about-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,46 +12,72 @@ import {

export default function AboutBanner() {
return (
<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>
</div>
<div>
<DefaultButton
as={"a"}
href={"/contact"}
w={"100%"}
py={3}
color={"white"}
borderRadius={"8px"}
background={"transparent"}
border={"2px"}
borderColor={"white"}
_hover={{
background: "transparent"
}}
>
<div className="relative bottom-32 mx-auto flex px-10 sm:w-[80%] lg:bottom-14 lg:w-full lg:justify-center lg:px-40">
<div className="flex w-full flex-1 flex-col gap-9 rounded-l-lg bg-[#0B2F4F] p-8 lg:flex-auto lg:flex-row ">
<div>
<HeaderText
data-test="about-banner-header-text"
level={"h4"}
color={"white"}
fontSize={"20px"}
>
Have a question?
</HeaderText>
<DefaultText
data-test="about-banner-text"
className={"text-[16px] text-altWhite"}
>
If you have any questions, please contact us
</DefaultText>
</div>
<div>
<DefaultButton
as={"a"}
href={"/contact"}
w={"100%"}
py={3}
color={"white"}
borderRadius={"8px"}
background={"transparent"}
border={"2px"}
borderColor={"white"}
_hover={{
background: "transparent"
}}
data-test="about-banner-button"
>
Contact Us
</DefaultButton>

</div>
</DefaultButton>
</div>
<div className="w-1/2 hidden lg:flex rounded-r-lg px-10 bg-white justify-center items-center shadow-md flex-col gap-3">
<DefaultText className={"text-dark text-[16px]"}>Follow us on Social Media:</DefaultText>
<div className="flex gap-12 w-full items-center justify-center">
<Link href="https://www.twitter.com/TechIsHiring/">
<Icon Icon={SiTwitter} iconAlt="Twitter for Tech Is Hiring" />
</Link>
<Link href="https://www.linkedin.com/company/TechIsHiring/">
<Icon Icon={SiLinkedin} iconAlt="LinkedIn for Tech Is Hiring" />
</Link>
<Link href="https://www.youtube.com/@TechIsHiring">
<Icon Icon={SiYoutube} iconAlt="YouTube for Tech Is Hiring"/>
</Link>
</div>
</div>
<div className="hidden w-1/2 flex-col items-center justify-center gap-3 rounded-r-lg bg-white px-10 shadow-md lg:flex">
<DefaultText className={"text-[16px] text-dark"}>
Follow us on Social Media:
</DefaultText>
<div className="flex w-full items-center justify-center gap-12">
<Link href="https://www.twitter.com/TechIsHiring/">
<Icon
Icon={SiTwitter}
data-test="about-details-icon-twitter"
iconAlt="Twitter for Tech Is Hiring"
/>
</Link>
<Link href="https://www.linkedin.com/company/TechIsHiring/">
<Icon
data-test="about-details-icon-linkedIn"
Icon={SiLinkedin}
iconAlt="LinkedIn for Tech Is Hiring"
/>
</Link>
<Link href="https://www.youtube.com/@TechIsHiring">
<Icon
data-test="about-details-icon-youtube"
Icon={SiYoutube}
iconAlt="YouTube for Tech Is Hiring"
/>
</Link>
</div>
</div>
)
</div>
);
}
116 changes: 74 additions & 42 deletions src/components/molecules/about-details/about-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,50 +10,82 @@ import {

export default function AboutDetails() {
return (
<article className={"flex justify-center text-center lg:text-left text-lg lg:text-xl leading-[41px] py-0 lg:py-20 items-center flex-col gap-8 font-700 text-altDark "}>
<DefaultText as={"p"} w={{base:"80%", lg:"70%"}}>
<b>TechIsHiring</b> 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.
<article
className={
"font-700 flex flex-col items-center justify-center gap-8 py-0 text-center text-lg leading-[41px] text-altDark lg:py-20 lg:text-left lg:text-xl "
}
>
<DefaultText
data-test="about-details-one"
as={"p"}
w={{ base: "80%", lg: "70%" }}
>
<b>TechIsHiring</b> 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.
</DefaultText>
<DefaultText
data-test="about-details-two"
as={"p"}
w={{ base: "80%", lg: "70%" }}
>
During the pandemic,
<Link
href="https://www.linkedin.com/in/ChadRStewart/"
className="text-primary"
>
<b> Chad R. Stewart</b>
</Link>
, the <b>Founder of TechIsHiring</b>, noticed that many people were
tweeting about job openings they had discovered and advertising
possibilities that they had come across, which is how{" "}
<b>TechIsHiring</b> came to be. Since there was no one place where these
tweets could be collected, the hashtag
<Link href={"https://twitter.com/TechIsHiring/"}>
<b className="font-800 cursor-pointer text-primary"> #TechIsHiring</b>
</Link>{" "}
and the TechIsHiring account were created.
</DefaultText>
<DefaultText
data-test="about-details-three"
as={"p"}
w={{ base: "80%", lg: "70%" }}
>
Looking to work with the Founder directly?
<Link href="/hire-chad">
<b className="cursor-pointer text-primary"> Hire Chad R. Stewart</b>
</Link>
.
</DefaultText>
<div className="flex w-4/5 flex-col border-t-2 border-t-[#838383] outline-none lg:hidden">
<DefaultText
className={"pt-14 pb-8 text-[23px] font-bold capitalize text-black "}
>
Follow us
</DefaultText>
<DefaultText as={"p"} w={{base:"80%", lg:"70%"}}>
During the pandemic,
<Link href="https://www.linkedin.com/in/ChadRStewart/" className="text-primary">
<b> Chad R. Stewart</b>
<div className="flex w-full items-center justify-center gap-12">
<Link href="https://www.twitter.com/TechIsHiring">
<Icon
Icon={SiTwitter}
iconAlt="Twitter for Tech Is Hiring"
/>
</Link>
, the <b>Founder of TechIsHiring</b>, noticed that many
people were tweeting about job openings they had discovered and advertising possibilities
that they had come across, which is how <b>TechIsHiring</b> came to be. Since there was no one place
where these tweets could be collected, the hashtag
<Link
href={"https://twitter.com/TechIsHiring/"}>
<b className="text-primary font-800 cursor-pointer"> #TechIsHiring</b>
</Link> and the TechIsHiring account were created.
</DefaultText>
<DefaultText as={"p"} w={{base:"80%", lg:"70%"}}>
Looking to work with the Founder directly?
<Link href="/hire-chad">
<b className="text-primary cursor-pointer"> Hire Chad R. Stewart</b>
<Link href="https://www.linkedin.com/company/TechIsHiring">
<Icon Icon={SiLinkedin} iconAlt="LinkedIn for Tech Is Hiring" />
</Link>
<Link href="https://www.youtube.com/@TechIsHiring">
<Icon Icon={SiYoutube} iconAlt="YouTube for Tech Is Hiring" />
</Link>
.
</DefaultText>
<div className="flex lg:hidden w-4/5 flex-col border-t-2 border-t-[#838383] outline-none">
<DefaultText className={"text-black text-[23px] capitalize pt-14 pb-8 font-bold "}>Follow us</DefaultText>
<div className="flex gap-12 w-full items-center justify-center">
<Link href="https://www.twitter.com/TechIsHiring/">
<Icon Icon={SiTwitter} iconAlt="Twitter for Tech Is Hiring" />
</Link>
<Link href="https://www.linkedin.com/company/TechIsHiring/">
<Icon Icon={SiLinkedin} iconAlt="LinkedIn for Tech Is Hiring" />
</Link>
<Link href="https://www.youtube.com/@TechIsHiring">
<Icon Icon={SiYoutube} iconAlt="YouTube for Tech Is Hiring"/>
</Link>
</div>
</div>

<aside className="text-primary py-8 px-10 lg:px-0">‘Where great Jobs and great Engineers come to find one another!’</aside>

</article>
)
</div>

<aside
data-test="about-details-four"
className="py-8 px-10 text-primary lg:px-0"
>
‘Where great Jobs and great Engineers come to find one another!’
</aside>
</article>
);
}
35 changes: 21 additions & 14 deletions src/components/molecules/about-header/about-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,29 @@ export default function AboutHeader() {

return (
<div
className="flex w-full bg-center h-screen lg:h-[80vh] bg-cover bg-no-repeat"
style={{ backgroundImage: `url(${aboutImage.src})` }}
className="flex h-screen w-full bg-cover bg-center bg-no-repeat lg:h-[80vh]"
style={{ backgroundImage: `url(${aboutImage.src})` }}
data-test="about-hero-image"
>
<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"}}>
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.
</p>
</div>
<div className="flex w-full flex-col items-center justify-center gap-4 bg-gradient-to-r from-black/60 to-transparent px-[18px] lg:px-0">
<HeaderText
data-test="about-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="flex w-full items-start justify-start text-left text-white lg:w-[40%] lg:px-5 lg:text-center">
<p data-test="about-hero-text" className="">
So many jobs available, all you have to do is keep up with our
posts. Check below for recent job openings.
</p>
</div>
</div>
</div>
)
);
}
Loading