Merge pull request #242 from Maakaf/240-add-testing-for-the-main-page

240 add testing for the main page
Maakaf · Mar 31, 2024 · 9af3e20 · 9af3e20
2 parents 515c713 + 2ad8bca
commit 9af3e20
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 7 deletions.
diff --git a/components/BeOurFriends/BeOurFriends.tsx b/components/BeOurFriends/BeOurFriends.tsx
@@ -57,12 +57,19 @@ const BeOurFriends = () => {
       dir={direction}
       className="flex flex-col justify-start py-16 md:py-32"
     >
-      <div className="flex flex-col-reverse self-start md:flex-row md:items-center">
+      <div
+        data-testid={`beOurFirendsTitle`}
+        className="flex flex-col-reverse self-start md:flex-row md:items-center"
+      >
         <SectionTitle title={t('title')} />
       </div>
-      <div className="grid grid-cols-1 gap-4 mx-10 my-8 gap-x-20 md:mx-36 md:grid-cols-2 place-content-around">
+      <div
+        data-testid={`beOurFirendsItemContainer`}
+        className="grid grid-cols-1 gap-4 mx-10 my-8 gap-x-20 md:mx-36 md:grid-cols-2 place-content-around"
+      >
         {cards.map((card, index) => (
           <motion.div
+            data-testid={`beOurFirendsItem${index}`}
             key={index}
             custom={index}
             variants={variants}

diff --git a/components/Common/DiscordLink.tsx b/components/Common/DiscordLink.tsx
@@ -15,6 +15,7 @@ export default function DiscordLink({
 }: DiscordLinkProps) {
   return (
     <Link
+      data-testid="homePage-discordLink"
       href={href}
       className={classNames(
         'discord-btn rounded-full flex items-center justify-center gap-2 dark:hover:bg-purple-200 item-hover-transition',

diff --git a/components/Home/Quote.tsx b/components/Home/Quote.tsx
@@ -6,6 +6,7 @@ const Quote: React.FC = () => {
     <div className="bg-purple-100/50 dark:bg-gray-800/50 h-96">
       <div className="flex flex-col justify-center items-center h-full w-11/12 md:w-2/3 m-auto">
         <h4
+          data-testid="linusTorvaldsQuote"
           className="bg-gray-600 dark:bg-gray-700 
         border-2 border-blue-600 rounded-full text-gray-100 text-center px-6 py-2 md:px-32 md:py-5"
         >

diff --git a/components/Home/TitleSection.tsx b/components/Home/TitleSection.tsx
@@ -6,7 +6,10 @@ export default function TitleSection() {
   return (
     <div className="relative mx-auto max-w-[1600px] px-4 flex justify-between h-[90vh] 2xl:h-[90vh] xl:h-[90vh] md:h-[70vh] md:px-14 pb-10 sm:h-[80vh]">
       <div className="flex flex-col items-center w-full gap-6 mt-[1.2rem] 2xl:gap-12 lg:px-12 lg:mt-0 lg:gap-8 md:-mt-2 md:px-10 md:w-1/2 md:items-start md:gap-4">
-        <h1 className="w-full text-center 2xl:text-5xl xl:text-3xl lg:text-3xl md:text-right md:text-2xl">
+        <h1
+          data-testid="homePage-title"
+          className="w-full text-center 2xl:text-5xl xl:text-3xl lg:text-3xl md:text-right md:text-2xl"
+        >
           {t('title')}&nbsp;-
           <br />
           {t('subTitle')}

diff --git a/components/Home/WhatNow.tsx b/components/Home/WhatNow.tsx
@@ -7,7 +7,7 @@ function WhatNow() {
   return (
     <div className="relative flex flex-col justify-around gap-3 pb-10 mt-36">
       <div className="hidden sm:flex flex-col gap-2 items-center sm:flex-row-reverse sm:justify-end">
-        <h3>{t('title')}</h3>
+        <h3 data-testid={`whatNowTitle`}>{t('title')}</h3>
         <div className="flex flex-row w-1/2 gap-1">
           <div className="w-56 h-3 bg-blue-500 rounded-full sm:h-6 sm:w-96 rounded-s-none"></div>
           <div className="h-3 bg-blue-500 rounded-full sm:h-6 sm:w-6 "></div>
@@ -20,7 +20,10 @@ function WhatNow() {
       </div>
       <div className="flex flex-col gap-7 sm:pr-4 sm:flex-wrap sm:content-end ">
         <h4 className="sm:w-1/2 sm:pl-6 h4-roman">{t('paragraph')}</h4>
-        <button className="bg-purple-400 dark:bg-purple-500 text-white body-bold px-6 py-3.5 sm:w-1/6 sm:rounded-full rounded-md sm:mx-0 mx-5">
+        <button
+          data-testid={`whatNowButton`}
+          className="bg-purple-400 dark:bg-purple-500 text-white body-bold px-6 py-3.5 sm:w-1/6 sm:rounded-full rounded-md sm:mx-0 mx-5"
+        >
           {t('startButton')}
         </button>
       </div>

diff --git a/components/Paths/Paths.tsx b/components/Paths/Paths.tsx
@@ -42,12 +42,19 @@ const variants = {
 export default function Paths() {
   return (
     <section className="flex flex-col justify-start py-32 darkmode-section">
-      <div className="flex flex-col-reverse md:flex-row self-start md:items-center">
+      <div
+        data-testid={`pathsTitle`}
+        className="flex flex-col-reverse md:flex-row self-start md:items-center"
+      >
         <SectionTitle title="המסלולים שלנו" />
       </div>
-      <div className="flex flex-row grow flex-wrap justify-evenly gap-y-20 mt-6 py-4 md:gap-y-4 md:py-20 lg:mt-0 lg:flex-row lg:py-20">
+      <div
+        data-testid={`pathsTitleContainer`}
+        className="flex flex-row grow flex-wrap justify-evenly gap-y-20 mt-6 py-4 md:gap-y-4 md:py-20 lg:mt-0 lg:flex-row lg:py-20"
+      >
         {paths.map((path, index) => (
           <motion.div
+            data-testid={`pathsTitleItem${index}`}
             key={path.title}
             custom={index}
             variants={variants}

diff --git a/tests/mainPage.spec.ts b/tests/mainPage.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect, Page } from '@playwright/test';
+
+const BASE_URL = 'http://localhost:3000/he';
+
+async function checkElementVisibility(page: Page, elementTestId: string) {
+  const element = page.getByTestId(elementTestId);
+  element.scrollIntoViewIfNeeded();
+  const isVisible = await element.isVisible();
+  expect(isVisible).toBeTruthy();
+}
+test('Check main page elements exist', async ({ page }) => {
+  await page.goto(BASE_URL);
+
+  async function checkElementVisibility(elementTestId: string) {
+    const element = page.getByTestId(elementTestId);
+    element.scrollIntoViewIfNeeded();
+    const isVisible = await element.isVisible();
+    expect(isVisible).toBeTruthy();
+  }
+
+  await checkElementVisibility('homePage-title');
+  await checkElementVisibility('homePage-discordLink');
+
+  await checkElementVisibility('linusTorvaldsQuote');
+
+  await checkElementVisibility('beOurFirendsTitle');
+  await checkElementVisibility('beOurFirendsItemContainer');
+  await checkElementVisibility('beOurFirendsItem0');
+  await checkElementVisibility('beOurFirendsItem1');
+  await checkElementVisibility('beOurFirendsItem2');
+  await checkElementVisibility('beOurFirendsItem3');
+  await checkElementVisibility('beOurFirendsItem4');
+  await checkElementVisibility('beOurFirendsItem5');
+
+  await checkElementVisibility('pathsTitle');
+  await checkElementVisibility('pathsTitleContainer');
+
+  await checkElementVisibility('pathsTitleItem0');
+  await checkElementVisibility('pathsTitleItem1');
+  await checkElementVisibility('pathsTitleItem2');
+
+  await checkElementVisibility('whatNowTitle');
+  await checkElementVisibility('whatNowButton');
+});