Merge branch 'develop' into events-page

Author: AJ-Kulundu

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: End-to-end Tests
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 5

.gitignore

@@ -35,4 +35,7 @@ yarn-error.log*
 yarn.lock
 
 #eslint
-.eslintrc.json
+.eslintrc.json
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -6,7 +6,7 @@
 This is the repo for the showcase website of the React Developer Community in Kenya
 
 
-Check out the live version [HERE](https://reactdevske.netlify.app/)
+Check out the live version [HERE](https://reactdevske.vercel.app/)
 
 ## Contributing to the project
 

components/Navbar.js

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import React from "react";
+
+const Navbar = () => {
+  return (
+    <>
+      <header className="px-[181px] w-full shadow-md bg-white">
+        <nav className="nav py-4 flex justify-between items-center">
+          <div>
+            <Link href={"/"}>
+              <div className="bg-gray-400 w-[137px] h-[61px]"></div>
+            </Link>
+          </div>
+          <div className="">
+            <ul className="flex items-center space-x-[37px]">
+              <Link href={"/#about"}>
+                <a>
+                  <li>About us</li>
+                </a>
+              </Link>
+              <Link href={"/#members"}>
+                <a>
+                  <li>Members</li>
+                </a>
+              </Link>
+              <Link href={"/#events"}>
+                <a>
+                  <li>Events</li>
+                </a>
+              </Link>
+              <Link href={"/#news"}>
+                <a>
+                  <li>News</li>
+                </a>
+              </Link>
+              <Link href={"/#forum"}>
+                <a>
+                  <li>Forum</li>
+                </a>
+              </Link>
+              <Link href={"/#contact"}>
+                <a>
+                  <li>Contact</li>
+                </a>
+              </Link>
+            </ul>
+          </div>
+          <div>
+            <button className="flex mx-auto bg-gray-300 border-0 py-[10px] px-[33px] focus:outline-none hover:bg-gray-600 hover:text-white rounded text-lg">
+              Join Community
+            </button>
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+};
+
+export default Navbar;

e2e-tests/default.spec.js

@@ -0,0 +1,13 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3000');
+  });
+
+test.describe('Basic test', () => {
+    test('should show the title', async ({ page }) => {
+        const title = page.locator('title');
+        await expect(title).toHaveText('React Devs Kenya');
+      });
+});

package-lock.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "playwright test"
   },
   "dependencies": {
     "next": "12.1.6",
@@ -15,10 +16,11 @@
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.0",
-    "autoprefixer": "^10.4.7",
+    "@playwright/test": "1.22.2",
+    "autoprefixer": "10.4.7",
     "eslint": "8.17.0",
     "eslint-config-next": "12.1.6",
-    "postcss": "^8.4.14",
-    "tailwindcss": "^3.1.2"
+    "postcss": "8.4.14",
+    "tailwindcss": "3.1.2"
   }
 }

package.json

@@ -1,7 +1,13 @@
-import '../styles/globals.css'
+import Navbar from "../components/Navbar";
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Navbar/>
+      <Component {...pageProps} />
+    </>
+  );
 }
 
-export default MyApp
+export default MyApp;