Add unit and e2e tests (#193)

* Add unit and e2e tests

* Use npm install instead

* Configure test source

* Update vite config

* Update fake url for test

---------

Co-authored-by: Felix Nyalenda Olali <[email protected]>

.eslintrc.cjs

@@ -8,10 +8,9 @@ module.exports = {
     "airbnb",
     "airbnb/hooks",
     "eslint:recommended",
-    // "plugin:prettier/recommended",
+    "prettier",
     "plugin:react/recommended",
   ],
-  plugins: ["react", "prettier"],
   overrides: [
     {
       env: {
@@ -49,11 +48,5 @@ module.exports = {
         alphabetize: { order: "asc", caseInsensitive: true },
       },
     ],
-    "prettier/prettier": [
-      "error",
-      {
-        endOfLine: "auto",
-      },
-    ],
   },
 };

.github/workflows/labels.yaml

@@ -2,19 +2,19 @@ name: Import open source standard labels
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   labels:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/setup-node@v2
-      with:
-        node-version: '14'
-    - uses: SpaceyaTech/gh-action-open-source-labels@main
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-        owner-name: ${{ github.repository_owner }}
-        repository-name: ${{ github.event.repository.name }}
-        force: false
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+      - uses: SpaceyaTech/gh-action-open-source-labels@main
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          owner-name: ${{ github.repository_owner }}
+          repository-name: ${{ github.event.repository.name }}
+          force: false

.github/workflows/tests.yml

@@ -0,0 +1,38 @@
+name: Unit and E2E tests
+on:
+  push:
+    branches: [main, Dev]
+  pull_request:
+    branches: [main, Dev]
+jobs:
+  tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Prepare .env file
+        run: |
+          rm -f .env && touch .env
+          echo "REACT_APP_API_BASE_URL=https://example.com" >> .env
+          echo "VITE_SERVICE_ID=123fAkE" >> .env
+          echo "VITE_TEMPLATE_ID=123fAkE" >> .env
+          echo "VITE_PUBLIC_ID=123fAkE" >> .env
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - name: Install dependencies
+        run: npm install
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Build the app
+        run: npm run build
+      - name: Run Unit tests
+        run: npm run test
+      - name: Run Playwright tests
+        run: npm run test:e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 5

.github/workflows/validate.yml

@@ -0,0 +1,18 @@
+name: Lint, Format and Build
+on:
+  push:
+    branches: [main, Dev]
+  pull_request:
+    branches: [main, Dev]
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - name: Install dependencies
+        run: npm install
+      - name: Run code validation (includes linting, prettier and building)
+        run: npm run validate

.gitignore

@@ -34,4 +34,8 @@ coverage
 
 # Ignore all HTML files:
 *.html
-.env
+.env
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierignore

@@ -0,0 +1,4 @@
+.yarn
+.next
+dist
+node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": false
+}

package.json

@@ -6,13 +6,15 @@
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
-    "lint": "eslint --fix eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prepare": "husky install",
-    "start": "react-scripts start",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "pretty": "prettier --write .",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "prettier:format": "prettier --write --ignore-path .gitignore .",
+    "prettier:check": "prettier --check --ignore-path .gitignore .",
+    "validate": "concurrently --kill-others-on-fail -g -p \"[{name}]\" -n \"prettier,lint,build\" \"npm:prettier:check\" \"npm:lint\" \"npm:build\"",
+    "validate:bun": "concurrently --kill-others-on-fail -g -p \"[{name}]\" -n \"prettier,lint,build\" \"bun:prettier:check\" \"bun:lint\" \"bun:build\"",
     "knip": "knip"
   },
   "dependencies": {
@@ -42,25 +44,29 @@
     "yet-another-react-lightbox": "^3.15.6"
   },
   "devDependencies": {
+    "@playwright/test": "^1.44.1",
     "@types/node": "^20.14.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.14",
+    "concurrently": "^8.2.2",
     "eslint": "^8.43.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.0",
     "knip": "^4.6.0",
     "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.2",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.4.5",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vitest": "^1.6.0"
   },
   "lint-staged": {
     "**/*.{js,jsx}": [

playwright.config.cjs

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? [["github"], ["list"], ["html"]] : "list",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:5173",
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/APP/pages/landingPage/sections/HeroSection.jsx

@@ -52,6 +52,7 @@ function HeroSection() {
         </p>
 
         <button
+          id="hero-join-button"
           type="button"
           aria-label="Join"
           onClick={openModal}

src/utilities/formatNumber.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from "vitest";
+import formatNumber from "./formatNumber";
+
+test("format number", () => {
+  expect(formatNumber(10)).toBe(10);
+  expect(formatNumber(999)).toBe(999);
+  expect(formatNumber(1000)).toBe("1.0K+");
+  expect(formatNumber(10000)).toBe("10.0K+");
+  expect(formatNumber(1000000)).toBe("1.0M+");
+  expect(formatNumber(1000000000)).toBe("1.0B+");
+  expect(formatNumber(1000000000000)).toBe("1.0T+");
+});

src/utilities/sample.test.js

@@ -0,0 +1,5 @@
+import { expect, test } from "vitest";
+
+test("sample test", () => {
+  expect(1 + 1).toBe(2);
+});

tests/pages/landing-page.spec.js

@@ -0,0 +1,24 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("http://localhost:5173");
+});
+
+test.describe("Landing page tests", () => {
+  test("should show the title", async ({ page }) => {
+    await expect(page).toHaveTitle(/Accelerating growth/);
+  });
+
+  test("should open modal on 'Join SpaceYaTech' button click", async ({
+    page,
+  }) => {
+    await page.locator("id=hero-join-button").click();
+
+    // Expect the modal to be visible
+    await expect(
+      page.getByRole("heading", {
+        name: "Join Africa’s fastest growing tech community",
+      })
+    ).toBeVisible();
+  });
+});

tests/sample.spec.js

@@ -0,0 +1,20 @@
+import { expect, test } from "@playwright/test";
+
+test("has title", async ({ page }) => {
+  await page.goto("https://playwright.dev/");
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test("get started link", async ({ page }) => {
+  await page.goto("https://playwright.dev/");
+
+  // Click the get started link.
+  await page.getByRole("link", { name: "Get started" }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(
+    page.getByRole("heading", { name: "Installation" })
+  ).toBeVisible();
+});

vite.config.js

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 import path from "path";
@@ -18,6 +19,9 @@ export default defineConfig(({ mode }) => {
       ),
     },
     plugins: [million.vite({ auto: true }), react()],
+    test: {
+      include: ['src/**/*.test.js'], 
+    },
     server: {
       watch: {
         usePolling: true,