From 2fac7558d72b3cf69392a031b04c2bde5b36e2df Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Thu, 28 Mar 2024 21:58:10 +0200 Subject: [PATCH 01/11] Add page visit text --- components/Header/NavDropdown.tsx | 1 + components/utils/Dropdown.tsx | 1 + package.json | 2 +- tests/newbiesPage.spec.ts | 14 ++++++++++++++ 4 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 tests/newbiesPage.spec.ts diff --git a/components/Header/NavDropdown.tsx b/components/Header/NavDropdown.tsx index 60aad274..c8e1c69d 100644 --- a/components/Header/NavDropdown.tsx +++ b/components/Header/NavDropdown.tsx @@ -42,6 +42,7 @@ export const NavDropdown = ({ headerText }: NavDropdownProps) => { return ( ({ {options.map(item => item.linkPath ? ( (e.key === 'Escape' ? toggleDropdown() : null)} diff --git a/package.json b/package.json index 66a1d8ea..95d4789e 100644 --- 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 new file mode 100644 index 00000000..68b5056f --- /dev/null +++ b/tests/newbiesPage.spec.ts @@ -0,0 +1,14 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Test Newbies page', () => { + test('should navigate to the Newbis page', async ({ page }) => { + await page.goto('http://localhost:3000/he'); + await page.click('text="קהילה"'); + await page.click('[data-testid="Newbies"]'); + + await page.waitForNavigation(); + + const pageTitle = await page.title(); + expect(pageTitle).toContain('Newbies'); + }); +}); From cf15d9b9d0992b1c9d7070b0b3dee81e96f0575b Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Thu, 28 Mar 2024 22:33:57 +0200 Subject: [PATCH 02/11] Add test searching for title --- components/Header/NavDropdown.tsx | 1 - tests/newbiesPage.spec.ts | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/components/Header/NavDropdown.tsx b/components/Header/NavDropdown.tsx index c8e1c69d..60aad274 100644 --- a/components/Header/NavDropdown.tsx +++ b/components/Header/NavDropdown.tsx @@ -42,7 +42,6 @@ export const NavDropdown = ({ headerText }: NavDropdownProps) => { return ( { const pageTitle = await page.title(); expect(pageTitle).toContain('Newbies'); }); + + test('should render NEWBIES', async ({ page }) => { + await page.goto('http://localhost:3000/he/newbies'); + expect(await page.textContent('h1')).toContain('NEWBIES'); + }); }); From 5e9e0debbbae273e8d30ca615dd59efb81b1b012 Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Thu, 28 Mar 2024 23:05:11 +0200 Subject: [PATCH 03/11] Check for links validations --- components/Newbies/LinksSection.tsx | 1 + tests/newbiesPage.spec.ts | 29 +++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/components/Newbies/LinksSection.tsx b/components/Newbies/LinksSection.tsx index d5ecca79..8a2e254b 100644 --- a/components/Newbies/LinksSection.tsx +++ b/components/Newbies/LinksSection.tsx @@ -33,6 +33,7 @@ const LinksSection = () => {
{linksData.map((linkData, index) => ( { await page.goto('http://localhost:3000/he/newbies'); expect(await page.textContent('h1')).toContain('NEWBIES'); }); + + test('External links contains corrent urls', async ({ page }) => { + await page.goto('http://localhost:3000/he/newbies'); + + const linksData = [ + { + icon: 'Maakaf_Logo', + link: 'https://github.com/UrielOfir/os-practice', + }, + { + icon: 'Discord_Logo', + link: 'https://discord.com/invite/a2VyCjRk2M', + }, + { + icon: 'WhatsApp_Logo', + link: 'https://chat.whatsapp.com/E5a59DtSaHNBwnczxVW1FY', + }, + ]; + + for (const linkData of linksData) { + const linkSelector = `[data-testid="NewbiesExternalLink-${linkData.icon}"]`; + const linkExists = await page.waitForSelector(linkSelector); + expect(linkExists).toBeTruthy(); + + const linkElement = await page.$(linkSelector); + const linkURL = await linkElement.getAttribute('href'); + console.log({ linkURL, linkData: linkData.link }); + } + }); }); From 969f6317590fd1a7ca1f3f0787fc3b1665b18e90 Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Thu, 28 Mar 2024 23:06:06 +0200 Subject: [PATCH 04/11] Add null check --- tests/newbiesPage.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/newbiesPage.spec.ts b/tests/newbiesPage.spec.ts index c121867d..d14e7159 100644 --- a/tests/newbiesPage.spec.ts +++ b/tests/newbiesPage.spec.ts @@ -41,7 +41,7 @@ test.describe('Test Newbies page', () => { expect(linkExists).toBeTruthy(); const linkElement = await page.$(linkSelector); - const linkURL = await linkElement.getAttribute('href'); + const linkURL = await linkElement?.getAttribute('href'); console.log({ linkURL, linkData: linkData.link }); } }); From a094173943913b30d0233196abf68edde25abc3a Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Thu, 28 Mar 2024 23:28:28 +0200 Subject: [PATCH 05/11] Test the Faq section --- components/Common/Faqs.tsx | 4 ++-- tests/newbiesPage.spec.ts | 35 +++++++++++++++++++++++++++++++---- 2 files changed, 33 insertions(+), 6 deletions(-) diff --git a/components/Common/Faqs.tsx b/components/Common/Faqs.tsx index 955ed492..c08c3586 100644 --- a/components/Common/Faqs.tsx +++ b/components/Common/Faqs.tsx @@ -29,7 +29,7 @@ const Faqs = ({ faqs }: FaqsProps) => { {t('secondParagraph')}

-
+
{ {faq.question} - + {faq.answer} diff --git a/tests/newbiesPage.spec.ts b/tests/newbiesPage.spec.ts index d14e7159..e91543c5 100644 --- a/tests/newbiesPage.spec.ts +++ b/tests/newbiesPage.spec.ts @@ -22,21 +22,21 @@ test.describe('Test Newbies page', () => { const linksData = [ { - icon: 'Maakaf_Logo', + name: 'Maakaf_Logo', link: 'https://github.com/UrielOfir/os-practice', }, { - icon: 'Discord_Logo', + name: 'Discord_Logo', link: 'https://discord.com/invite/a2VyCjRk2M', }, { - icon: 'WhatsApp_Logo', + name: 'WhatsApp_Logo', link: 'https://chat.whatsapp.com/E5a59DtSaHNBwnczxVW1FY', }, ]; for (const linkData of linksData) { - const linkSelector = `[data-testid="NewbiesExternalLink-${linkData.icon}"]`; + const linkSelector = `[data-testid="NewbiesExternalLink-${linkData.name}"]`; const linkExists = await page.waitForSelector(linkSelector); expect(linkExists).toBeTruthy(); @@ -45,4 +45,31 @@ test.describe('Test Newbies page', () => { console.log({ linkURL, linkData: linkData.link }); } }); + + test('FAQ items are clickable and expandable', async ({ page }) => { + await page.goto('http://localhost:3000/he/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"]' + ); + } + }); }); From 390c4da6631d57a007601beeabb569068cc1c77a Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Thu, 28 Mar 2024 23:36:05 +0200 Subject: [PATCH 06/11] Add base url to the tests --- components/Common/Faqs.tsx | 5 ++++- tests/newbiesPage.spec.ts | 16 +++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/components/Common/Faqs.tsx b/components/Common/Faqs.tsx index c08c3586..fca1542f 100644 --- a/components/Common/Faqs.tsx +++ b/components/Common/Faqs.tsx @@ -45,7 +45,10 @@ const Faqs = ({ faqs }: FaqsProps) => { {faq.question} - + {faq.answer} diff --git a/tests/newbiesPage.spec.ts b/tests/newbiesPage.spec.ts index e91543c5..0c9a791d 100644 --- a/tests/newbiesPage.spec.ts +++ b/tests/newbiesPage.spec.ts @@ -1,8 +1,10 @@ import { test, expect } from '@playwright/test'; +const BASE_URL = 'http://localhost:3000/he'; + test.describe('Test Newbies page', () => { - test('should navigate to the Newbis page', async ({ page }) => { - await page.goto('http://localhost:3000/he'); + test('should navigate to the Newbies page', async ({ page }) => { + await page.goto(BASE_URL); await page.click('text="קהילה"'); await page.click('[data-testid="Newbies"]'); @@ -13,12 +15,12 @@ test.describe('Test Newbies page', () => { }); test('should render NEWBIES', async ({ page }) => { - await page.goto('http://localhost:3000/he/newbies'); + await page.goto(`${BASE_URL}/newbies`); expect(await page.textContent('h1')).toContain('NEWBIES'); }); - test('External links contains corrent urls', async ({ page }) => { - await page.goto('http://localhost:3000/he/newbies'); + test('External links contain correct URLs', async ({ page }) => { + await page.goto(`${BASE_URL}/newbies`); const linksData = [ { @@ -42,12 +44,12 @@ test.describe('Test Newbies page', () => { const linkElement = await page.$(linkSelector); const linkURL = await linkElement?.getAttribute('href'); - console.log({ linkURL, linkData: linkData.link }); + expect(linkURL).toBe(linkData.link); } }); test('FAQ items are clickable and expandable', async ({ page }) => { - await page.goto('http://localhost:3000/he/newbies'); + await page.goto(`${BASE_URL}/newbies`); await page.waitForSelector('[data-testid="faq-section"]'); const faqItems = await page.$$('[data-testid^="faq-item-"]'); From fbdae53601783e547de93df0a41bc1b8cfa2f318 Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Fri, 29 Mar 2024 17:57:13 +0300 Subject: [PATCH 07/11] Fix build errors --- app/layout.tsx | 15 +++++++++++++++ components/Projects/FiltersBar/FiltersBar.tsx | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 app/layout.tsx diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 00000000..accf629f --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,15 @@ +export default function RootLayout({ + children, + params: { locale }, +}: { + children: React.ReactNode; + params: { locale: string }; +}) { + return ( + + + {children} + + + ); +} \ No newline at end of file diff --git a/components/Projects/FiltersBar/FiltersBar.tsx b/components/Projects/FiltersBar/FiltersBar.tsx index ac95be7d..4a067290 100644 --- a/components/Projects/FiltersBar/FiltersBar.tsx +++ b/components/Projects/FiltersBar/FiltersBar.tsx @@ -8,7 +8,7 @@ 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 { SearchInput } from '@/components/Common/Inputs/SearchInput'; import { ProjectPaginationFilter } from '@/types/project'; import { useTranslations } from 'next-intl'; From 6b38c3edf79ac7d3f487761c2540ff36d9a4b4fd Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Fri, 29 Mar 2024 17:57:51 +0300 Subject: [PATCH 08/11] Small change --- app/layout.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index accf629f..bb90f766 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -7,9 +7,7 @@ export default function RootLayout({ }) { return ( - - {children} - + {children} ); -} \ No newline at end of file +} From 7607cd6e346c215799609464678204e3dee5a66d Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Fri, 29 Mar 2024 18:00:12 +0300 Subject: [PATCH 09/11] Change in import --- components/Projects/FiltersBar/FiltersBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Projects/FiltersBar/FiltersBar.tsx b/components/Projects/FiltersBar/FiltersBar.tsx index 4a067290..22aa2549 100644 --- 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[]; From f0eec8b41ac3ac0fcd90b0b0777f600932951c52 Mon Sep 17 00:00:00 2001 From: Tamir <1tamir198@gmail.com> Date: Fri, 29 Mar 2024 19:06:39 +0300 Subject: [PATCH 10/11] Change folder location --- components/Common/Inputs/SearchInput.tsx | 48 ++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 components/Common/Inputs/SearchInput.tsx diff --git a/components/Common/Inputs/SearchInput.tsx b/components/Common/Inputs/SearchInput.tsx new file mode 100644 index 00000000..6336b333 --- /dev/null +++ b/components/Common/Inputs/SearchInput.tsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import Image from 'next/image'; + +type SearchInputProps = { + onChange: (value: string) => void; + placeHolderText: string; + backgroundColor?: string; + darkBackgroundColor?: string; +}; + +export const SearchInput = ({ + placeHolderText = 'חיפוש...', + backgroundColor = 'bg-gray-50', + darkBackgroundColor = 'bg-gray-600', + onChange, +}: SearchInputProps) => { + const timeOutIdRef = React.useRef(); + const [lastSearchTerm, setLastSearchTerm] = useState(''); + + const handleSearchChange = (event: React.ChangeEvent) => { + if (timeOutIdRef.current) clearTimeout(timeOutIdRef.current); + + timeOutIdRef.current = setTimeout(() => { + if (event.target.value === lastSearchTerm) return; + onChange(event.target.value); + setLastSearchTerm(event.target.value); + }, 500) as unknown as number; + }; + + return ( +
+ + + search +
+ ); +}; From 9773f4fc02d0b639ccf2ba5b31acc04d83e10140 Mon Sep 17 00:00:00 2001 From: Tamir Abutbul <1tamir198@gmail.com> Date: Fri, 29 Mar 2024 19:12:12 +0300 Subject: [PATCH 11/11] Remove file from inputs folder --- components/Common/inputs/SearchInput.tsx | 48 ------------------------ 1 file changed, 48 deletions(-) delete mode 100644 components/Common/inputs/SearchInput.tsx diff --git a/components/Common/inputs/SearchInput.tsx b/components/Common/inputs/SearchInput.tsx deleted file mode 100644 index 6336b333..00000000 --- a/components/Common/inputs/SearchInput.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { useState } from 'react'; -import Image from 'next/image'; - -type SearchInputProps = { - onChange: (value: string) => void; - placeHolderText: string; - backgroundColor?: string; - darkBackgroundColor?: string; -}; - -export const SearchInput = ({ - placeHolderText = 'חיפוש...', - backgroundColor = 'bg-gray-50', - darkBackgroundColor = 'bg-gray-600', - onChange, -}: SearchInputProps) => { - const timeOutIdRef = React.useRef(); - const [lastSearchTerm, setLastSearchTerm] = useState(''); - - const handleSearchChange = (event: React.ChangeEvent) => { - if (timeOutIdRef.current) clearTimeout(timeOutIdRef.current); - - timeOutIdRef.current = setTimeout(() => { - if (event.target.value === lastSearchTerm) return; - onChange(event.target.value); - setLastSearchTerm(event.target.value); - }, 500) as unknown as number; - }; - - return ( -
- - - search -
- ); -};