Merge pull request #237 from Maakaf/236-add-first-e2e-test-newbies-page

236 add first e2e test newbies page
Maakaf · Mar 29, 2024 · 515c713 · 515c713
2 parents 2af95fd + 9773f4f
commit 515c713
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 4 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,13 @@
+export default function RootLayout({
+  children,
+  params: { locale },
+}: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  return (
+    <html lang={locale} dir="rtl">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/components/Common/Faqs.tsx b/components/Common/Faqs.tsx
@@ -29,7 +29,7 @@ const Faqs = ({ faqs }: FaqsProps) => {
         {t('secondParagraph')}
       </p>
 
-      <div className="min-h-[60px] px-4 md:mx-20 ">
+      <div className="min-h-[60px] px-4 md:mx-20" data-testid="faq-section">
         <Accordion
           type="single"
           className="font-medium"
@@ -45,7 +45,10 @@ const Faqs = ({ faqs }: FaqsProps) => {
               <AccordionTrigger className="text-lg text-right">
                 {faq.question}
               </AccordionTrigger>
-              <AccordionContent className="text-base font-inter pl-6">
+              <AccordionContent
+                className="text-base font-inter pl-6"
+                data-testid={`faq-content-${index + 1}`}
+              >
                 {faq.answer}
               </AccordionContent>
             </AccordionItem>

diff --git a/components/Common/inputs/SearchInput.tsx → components/Common/Inputs/SearchInput.tsx b/components/Common/inputs/SearchInput.tsx → components/Common/Inputs/SearchInput.tsx
diff --git a/components/Newbies/LinksSection.tsx b/components/Newbies/LinksSection.tsx
@@ -33,6 +33,7 @@ const LinksSection = () => {
       <div className="flex flex-col items-center mt-8 gap-4 sm:flex-row sm:items-center sm:justify-center sm:flex-wrap">
         {linksData.map((linkData, index) => (
           <a
+            data-testid={`NewbiesExternalLink-${linkData.icon}`}
             key={index}
             href={linkData.link}
             target="_blank"

diff --git a/components/Projects/FiltersBar/FiltersBar.tsx b/components/Projects/FiltersBar/FiltersBar.tsx
@@ -8,9 +8,9 @@ import FilterTagBtn from './FilterTagBtn';
 import useFocusTrap from '@/components/hooks/useFocusTrap';
 import { ProjectFilter } from '@/types';
 import Link from 'next/link';
-import { SearchInput } from '@/components/Common/inputs/SearchInput';
 import { ProjectPaginationFilter } from '@/types/project';
 import { useTranslations } from 'next-intl';
+import { SearchInput } from '@/components/Common/Inputs/SearchInput';
 
 interface FiltersBarProps {
   filters: ProjectFilter[];

diff --git a/components/utils/Dropdown.tsx b/components/utils/Dropdown.tsx
@@ -119,6 +119,7 @@ export const Dropdown = <T extends OptionValue>({
           {options.map(item =>
             item.linkPath ? (
               <Link
+                data-testId={item.title}
                 href={item.linkPath}
                 onClick={toggleDropdown}
                 onKeyUp={e => (e.key === 'Escape' ? toggleDropdown() : null)}

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "check-lint": "eslint . --ext ts --ext tsx --ext js",
     "format": "npx prettier --write . --config ./.prettierrc",
     "prepare": "husky install",
-    "test": "npx playwright test",
+    "test": "npx playwright test --ui",
     "test-result": "npx playwright show-report"
   },
   "lint-staged": {

diff --git a/tests/newbiesPage.spec.ts b/tests/newbiesPage.spec.ts
@@ -0,0 +1,77 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = 'http://localhost:3000/he';
+
+test.describe('Test Newbies page', () => {
+  test('should navigate to the Newbies page', async ({ page }) => {
+    await page.goto(BASE_URL);
+    await page.click('text="קהילה"');
+    await page.click('[data-testid="Newbies"]');
+
+    await page.waitForNavigation();
+
+    const pageTitle = await page.title();
+    expect(pageTitle).toContain('Newbies');
+  });
+
+  test('should render NEWBIES', async ({ page }) => {
+    await page.goto(`${BASE_URL}/newbies`);
+    expect(await page.textContent('h1')).toContain('NEWBIES');
+  });
+
+  test('External links contain correct URLs', async ({ page }) => {
+    await page.goto(`${BASE_URL}/newbies`);
+
+    const linksData = [
+      {
+        name: 'Maakaf_Logo',
+        link: 'https://github.com/UrielOfir/os-practice',
+      },
+      {
+        name: 'Discord_Logo',
+        link: 'https://discord.com/invite/a2VyCjRk2M',
+      },
+      {
+        name: 'WhatsApp_Logo',
+        link: 'https://chat.whatsapp.com/E5a59DtSaHNBwnczxVW1FY',
+      },
+    ];
+
+    for (const linkData of linksData) {
+      const linkSelector = `[data-testid="NewbiesExternalLink-${linkData.name}"]`;
+      const linkExists = await page.waitForSelector(linkSelector);
+      expect(linkExists).toBeTruthy();
+
+      const linkElement = await page.$(linkSelector);
+      const linkURL = await linkElement?.getAttribute('href');
+      expect(linkURL).toBe(linkData.link);
+    }
+  });
+
+  test('FAQ items are clickable and expandable', async ({ page }) => {
+    await page.goto(`${BASE_URL}/newbies`);
+    await page.waitForSelector('[data-testid="faq-section"]');
+
+    const faqItems = await page.$$('[data-testid^="faq-item-"]');
+
+    for (let i = 0; i < faqItems.length; i++) {
+      const faqItem = faqItems[i];
+
+      const trigger = await faqItem.$('[data-testid^="faq-trigger-"]');
+      await trigger?.click();
+
+      await page.waitForSelector(
+        '[data-testid^="faq-content-"][aria-expanded="true"]'
+      );
+
+      const content = await faqItem.$('[data-testid^="faq-content-"]');
+      expect(content).not.toBeNull();
+
+      await trigger?.click();
+
+      await page.waitForSelector(
+        '[data-testid^="faq-content-"][aria-expanded="false"]'
+      );
+    }
+  });
+});