Skip to content

Commit

Permalink
Add unit and e2e tests (#193)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
nyandika and Ase020 authored Jun 18, 2024
1 parent 3dd0484 commit 65890ac
Show file tree
Hide file tree
Showing 15 changed files with 238 additions and 27 deletions.
9 changes: 1 addition & 8 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ module.exports = {
"airbnb",
"airbnb/hooks",
"eslint:recommended",
// "plugin:prettier/recommended",
"prettier",
"plugin:react/recommended",
],
plugins: ["react", "prettier"],
overrides: [
{
env: {
Expand Down Expand Up @@ -49,11 +48,5 @@ module.exports = {
alphabetize: { order: "asc", caseInsensitive: true },
},
],
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
},
};
20 changes: 10 additions & 10 deletions .github/workflows/labels.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
38 changes: 38 additions & 0 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
@@ -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
18 changes: 18 additions & 0 deletions .github/workflows/validate.yml
Original file line number Diff line number Diff line change
@@ -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
6 changes: 5 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,8 @@ coverage

# Ignore all HTML files:
*.html
.env
.env
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.yarn
.next
dist
node_modules
5 changes: 5 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"singleQuote": false
}
22 changes: 14 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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}": [
Expand Down
77 changes: 77 additions & 0 deletions playwright.config.cjs
Original file line number Diff line number Diff line change
@@ -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,
},
});
1 change: 1 addition & 0 deletions src/APP/pages/landingPage/sections/HeroSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ function HeroSection() {
</p>

<button
id="hero-join-button"
type="button"
aria-label="Join"
onClick={openModal}
Expand Down
12 changes: 12 additions & 0 deletions src/utilities/formatNumber.test.js
Original file line number Diff line number Diff line change
@@ -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+");
});
5 changes: 5 additions & 0 deletions src/utilities/sample.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { expect, test } from "vitest";

test("sample test", () => {
expect(1 + 1).toBe(2);
});
24 changes: 24 additions & 0 deletions tests/pages/landing-page.spec.js
Original file line number Diff line number Diff line change
@@ -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();
});
});
20 changes: 20 additions & 0 deletions tests/sample.spec.js
Original file line number Diff line number Diff line change
@@ -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();
});
4 changes: 4 additions & 0 deletions vite.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/// <reference types="vitest" />
import { fileURLToPath } from 'url';
import { dirname } from 'path';
import path from "path";
Expand All @@ -18,6 +19,9 @@ export default defineConfig(({ mode }) => {
),
},
plugins: [million.vite({ auto: true }), react()],
test: {
include: ['src/**/*.test.js'],
},
server: {
watch: {
usePolling: true,
Expand Down

0 comments on commit 65890ac

Please sign in to comment.