test(e2e): improve tests for about page (#189)

src/pages/About.tsx

@@ -4,12 +4,9 @@ import SlackIcon from '../resources/slack-icon.svg'
 import { useTranslation } from 'react-i18next'
 
 const About = () => {
-  const { t } = useTranslation()
-
   return (
     <AboutStyle>
       <div className="about-center-container">
-        <h1>{t(TEXT_KEYS.website_name)}</h1>
         <WhatIsWebsite />
         <DiscoveredMistake />
         <Privacy />
@@ -132,10 +129,8 @@ const Funding = () => {
 
 const AboutStyle = styled.div`
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-
+  flex-direction: column;
+  padding: 1rem;
   & .about-center-container {
     width: 100%;
     max-width: 770px;

tests/about.spec.ts

@@ -1,8 +1,19 @@
-import { test } from './utils'
-
-test('about page', async ({ page }) => {
-  await page.goto('/')
-  await page.getByText('אודות').click()
-  await page.getByRole('link', { name: 'תרומות קטנות נוספות' }).click()
-  await page.getByRole('heading', { name: 'הסדנא לידע ציבורי פותחת ומנגישה מידע' }).waitFor()
+import { test, expect } from '@playwright/test'
+test.describe('About Page Tests', () => {
+  test('can access about page by clicking `about` menu', async ({ page }) => {
+    await page.goto('/')
+    await page.getByText('אודות').click()
+    await expect(page).toHaveURL('http://localhost:3000/about')
+    const locator = await page.getByText('אודות')
+    await expect(locator).toHaveClass('menu-item active')
+  })
+  test('page display title `מהו אתר “דאטאבוס”?`', async ({ page }) => {
+    await page.goto('/about')
+    await expect(page.getByRole('heading', { name: 'מהו אתר “דאטאבוס”?' })).toBeVisible()
+  })
+  test('clicking dontaions link should lead to sadna site', async ({ page }) => {
+    await page.goto('/about')
+    await page.getByRole('link', { name: 'תרומות קטנות נוספות' }).click()
+    await page.getByRole('heading', { name: 'הסדנא לידע ציבורי פותחת ומנגישה מידע' }).waitFor()
+  })
 })