Merge pull request #104 from nyandika/develop

Author: antosan

e2e/default.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:3000');
+});
+
+test.describe('Home page tests', () => {
+  test('should show the title', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: 'React Developer Community Kenya' })
+    ).toBeVisible();
+  });
+
+  test("should show 'Join Community' button", async ({ page }) => {
+    await expect(
+      page.getByRole('link', { name: 'Join Community' })
+    ).toBeVisible();
+  });
+
+  test('should show About Us section', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'About Us' })).toBeVisible();
+  });
+
+  test('should show Mission Pillars section', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: 'Our Mission Pillars' })
+    ).toBeVisible();
+  });
+
+  test('should show Events section', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Events' })).toBeVisible();
+  });
+
+  test('should show Contact Us section', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: 'Contact Us' })
+    ).toBeVisible();
+  });
+});

e2e/home.spec.ts

@@ -1,14 +1,12 @@
-import React from 'react';
-
 export default function AboutUs() {
   return (
     <section
       id="about-us"
       className="flex flex-col max-w-2xl justify-center items-center self-center space-y-4 px-4"
     >
-      <p className="text-3xl md:text-6xl tracking-wide md:font-light ">
-        ABOUT US
-      </p>
+      <h2 className="text-3xl md:text-6xl tracking-wide md:font-light uppercase">
+        About Us
+      </h2>
       <p className="hidden md:inline-block text-4xl font-bold ">
         Empowering great talent
       </p>

src/components/about-us/about-us.tsx src/components/AboutUs/AboutUs.tsxsrc/components/about-us/about-us.tsx renamed to src/components/AboutUs/AboutUs.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import React from 'react';
 import type { EventData } from '../../types/index';
 import DisplayRC from './DisplayRC';
 
@@ -61,9 +60,9 @@ export default function Events() {
       id="events"
       className="relative flex flex-col items-center justify-center w-full py-16 bg-white md:py-20 gap-y-2 md:gap-y-5"
     >
-      <p className="flex items-center justify-center font-light tracking-wide">
+      <h2 className="flex items-center justify-center font-light tracking-wide">
         Events
-      </p>
+      </h2>
       <h2 className="pb-2 text-2xl font-bold md:pb-10">Community Events</h2>
       <div className="grid grid-cols-1 gap-y-4 md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8 md:grid-cols-2 bg-[#09AFC6] px-4 md:px-10 lg:px-16 py-8 md:py-14 xl:py-16">
         {events.map((event) => (

src/components/Events/Events.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import Pillar from '../Pillar/Pillar';
 import Image from 'next/image';
+import Pillar from '../Pillar/Pillar';
 
 export default function MissionPillars() {
   return (
     <section className="flex flex-col w-full md:justify-center items-center bg-white md:bg-[#CEEDF4] py-12 space-y-10">
-      <p className="md:uppercase font-bold md:font-light text-2xl md:text-5xl">
+      <h2 className="md:uppercase font-bold md:font-light text-2xl md:text-5xl">
         Our Mission Pillars
-      </p>
+      </h2>
       <div className="flex flex-col md:flex-row md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6">
         <div className="flex">
           <Pillar count="01" label="Mentorship" />

src/components/MissionPillars/MissionPillars.tsx

@@ -1,9 +1,9 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import logo from '../../public/reactdevske.svg';
-import Events from '../components/Events/Events';
-import AboutUs from '../components/about-us/about-us';
+import AboutUs from '../components/AboutUs/AboutUs';
 import ContactUs from '../components/ContactUs';
+import Events from '../components/Events/Events';
 import MissionPillars from '../components/MissionPillars/MissionPillars';
 
 export default function Home() {