[Test] Login Frontend

.github/workflows/build-and-test.yml

@@ -32,8 +32,14 @@ jobs:
                   node-version: '18'
             - name: Install yarn
               run: npm install --global yarn
-            - name: Install packages
-              run: yarn
+            - name: Install jest
+              run: npm i --save-dev @types/jest
+            - name: Clean and Install packages
+              run: |
+                  rm -rf node_modules package-lock.json
+                  yarn
+            - name: Install Hardhat locally
+              run: yarn add --dev hardhat  --ignore-workspace-root-check
             - name: Build
               run: yarn build
             - name: Downcase target

README.md

@@ -8,6 +8,8 @@ This is a demo app of a [unirep](https://github.com/Unirep/Unirep) attester. In
 
 ```shell
 npx create-unirep-app
+yarn install
+npm install -g circom
 ```
 
 Then `cd` into the directory that was created.

package.json

@@ -22,7 +22,10 @@
         "lint:check": "yarn lint --check"
     },
     "devDependencies": {
+        "@types/jest": "^29.5.4",
+        "@types/testing-library__jest-dom": "^6.0.0",
         "hardhat": "^2.17.1",
+        "jest": "^29.6.4",
         "lerna": "^6.0.1",
         "node-fetch": "^3.3.0"
     },

packages/circuits/tsconfig.json

@@ -3,7 +3,8 @@
     "compilerOptions": {
         "outDir": "./dist",
         "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true
+        "allowSyntheticDefaultImports": true,
+        "types": ["jest", "node"]
     },
     "exclude": ["node_modules/**"],
     "include": ["./src", "./config", "./provers"]

packages/frontend/.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+    push:
+        branches: [main, master]
+    pull_request:
+        branches: [main, master]
+jobs:
+    test:
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+            - name: Install dependencies
+              run: yarn
+            - name: Install Playwright Browsers
+              run: yarn playwright install --with-deps
+            - name: Run Playwright tests
+              run: yarn playwright test
+            - uses: actions/upload-artifact@v3
+              if: always()
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 30

packages/frontend/.gitignore

@@ -1 +1,7 @@
-build
+build
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+coverage/*

packages/frontend/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }],
+        '@babel/preset-typescript',
+    ],
+}

packages/frontend/jest.config.js

@@ -0,0 +1,10 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+        '@testing-library/react':
+            '<rootDir>/node_modules/@testing-library/react',
+        '@types/jest': 'jest',
+    },
+}

packages/frontend/package.json

@@ -11,7 +11,11 @@
     },
     "scripts": {
         "start": "webpack-dev-server",
-        "build": "webpack"
+        "build": "webpack",
+        "test:e2e": "yarn playwright test",
+        "test": "CI=true yarn test:dom",
+        "test:dom": "react-scripts test",
+        "test:domwatch": "react-scripts test --watchAll --coverage"
     },
     "dependencies": {
         "@cloudflare/kv-asset-handler": "^0.2.0",
@@ -35,18 +39,27 @@
         "react-hot-toast": "^2.4.1",
         "react-icons": "^4.10.1",
         "react-lines-ellipsis": "^0.15.3",
+        "react-scripts": "^5.0.1",
         "react-twitter-login": "^1.5.0"
     },
     "devDependencies": {
         "@babel/core": "^7.19.6",
         "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.22.5",
+        "@jest/globals": "^29.6.3",
+        "@playwright/test": "^1.37.1",
         "@semaphore-protocol/identity": "^3.6.0",
         "@svgr/webpack": "^8.0.1",
         "@tailwindcss/typography": "^0.5.9",
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/jest-dom": "^6.0.1",
+        "@testing-library/react": "^14.0.0",
+        "@types/jest": "^29.5.4",
         "@types/react": "^18.0.32",
         "@types/react-dom": "^18.0.11",
         "@types/react-lines-ellipsis": "^0.15.1",
         "@types/react-router-dom": "^5.3.3",
+        "@types/testing-library__jest-dom": "^6.0.0",
         "anondb": "^0.0.16",
         "assert": "^2.0.0",
         "autoprefixer": "^10.4.14",
@@ -57,6 +70,8 @@
         "daisyui": "^3.1.7",
         "events": "^3.3.0",
         "html-webpack-plugin": "^5.5.0",
+        "jest": "^29.6.3",
+        "jest-fetch-mock": "^3.0.3",
         "mini-css-extract-plugin": "^2.6.1",
         "mobx": "^6.6.2",
         "os-browserify": "^0.3.0",
@@ -69,6 +84,7 @@
         "snarkjs": "^0.5.0",
         "stream-browserify": "^3.0.0",
         "tailwindcss": "^3.3.2",
+        "ts-jest": "^29.1.1",
         "ts-loader": "^9.4.2",
         "typescript": "^5.0.3",
         "webpack": "^5.74.0",

packages/frontend/playwright.config.ts

@@ -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.
+ */
+export default 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: 'html',
+    /* 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: 'firefox',
+        //     use: { ...devices['Desktop Firefox'] },
+        // },
+
+        // {
+        //     name: 'webkit',
+        //     use: { ...devices['Desktop Safari'] },
+        // },
+
+        /* 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 start',
+    //   url: 'http://127.0.0.1:3000',
+    //   reuseExistingServer: !process.env.CI,
+    // },
+})

packages/frontend/src/__tests__/components/PostForm.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import PostForm from '../../components/PostForm'
+import '@testing-library/jest-dom'
+import { expect } from '@jest/globals'
+
+jest.mock('@uidotdev/usehooks', () => ({
+    useIsFirstRender: jest.fn().mockReturnValue(false),
+}))
+
+test('<PostForm /> should render and handle interactions', () => {
+    const mockOnCancel = jest.fn()
+    const mockOnSaveDraft = jest.fn()
+    const mockOnFetchDraft = jest.fn()
+    const mockOnSubmit = jest.fn()
+
+    render(
+        <PostForm
+            onCancel={mockOnCancel}
+            onSaveDraft={mockOnSaveDraft}
+            onFetchDraft={mockOnFetchDraft}
+            onSubmit={mockOnSubmit}
+        />
+    )
+
+    // @ts-ignore
+    expect(screen.getByTitle('cancel a post')).toBeInTheDocument()
+    // @ts-ignore
+    expect(screen.getByTitle('save a draft')).toBeInTheDocument()
+    // @ts-ignore
+    expect(screen.getByTitle('view a draft')).toBeInTheDocument()
+    // @ts-ignore
+    expect(screen.getByTitle('submit a post')).toBeInTheDocument()
+
+    // Simulate button clicks
+    fireEvent.click(screen.getByTitle('cancel a post'))
+    expect(mockOnCancel).toHaveBeenCalled()
+
+    fireEvent.click(screen.getByTitle('save a draft'))
+    expect(mockOnSaveDraft).toHaveBeenCalled()
+
+    fireEvent.click(screen.getByTitle('view a draft'))
+    expect(mockOnFetchDraft).toHaveBeenCalled()
+
+    // Simulate form submission
+    // Assuming RichTextEditor sets value in contenteditable div
+    const editableContent = screen.getByRole('textbox', {
+        name: /post editor/i,
+    })
+    editableContent.textContent = 'Test Content'
+    fireEvent.input(editableContent)
+})

packages/frontend/src/__tests__/contexts/LoadingContext.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { render, act } from '@testing-library/react'
+import {
+    LoadingProvider,
+    useLoading,
+    LoadingStatus,
+} from '../../contexts/LoadingContext'
+import '@testing-library/jest-dom'
+
+describe('LoadingProvider', () => {
+    it('provides the loading status value', () => {
+        const TestComponent: React.FC = () => {
+            const { status } = useLoading()
+            return <div>{status}</div>
+        }
+
+        const { getByText } = render(
+            <LoadingProvider>
+                <TestComponent />
+            </LoadingProvider>
+        )
+
+        // @ts-ignore
+        expect(getByText('loading')).toBeInTheDocument()
+    })
+
+    it('allows updating the loading status', () => {
+        const TestComponent: React.FC = () => {
+            const { status, setStatus } = useLoading()
+
+            return (
+                <div>
+                    <div>{status}</div>
+                    <button onClick={() => setStatus('success')}>
+                        Update Status
+                    </button>
+                </div>
+            )
+        }
+
+        const { getByText, getByRole } = render(
+            <LoadingProvider>
+                <TestComponent />
+            </LoadingProvider>
+        )
+
+        // init loading
+        // @ts-ignore
+        expect(getByText('loading')).toBeInTheDocument()
+
+        // update status success
+        act(() => {
+            getByRole('button').click()
+        })
+
+        // @ts-ignore
+        expect(getByText('success')).toBeInTheDocument()
+    })
+})

packages/frontend/src/__tests__/contexts/User.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render, act, waitFor } from '@testing-library/react'
+import { UserProvider, useUser } from '../../contexts/User'
+import '@testing-library/jest-dom'
+import { expect } from '@jest/globals'
+
+it('provides context to children', () => {
+    const TestComponent = () => {
+        const userContext = useUser()
+        expect(userContext).toBeTruthy() // or other specific checks
+        return null
+    }
+
+    render(
+        <UserProvider>
+            <TestComponent />
+        </UserProvider>
+    )
+})
+
+it('throws error when useUser is called outside of UserProvider', () => {
+    const TestComponent = () => {
+        expect(useUser).toThrowError(
+            'useUser must be used within a UserProvider'
+        )
+        return null
+    }
+
+    render(<TestComponent />)
+})

packages/frontend/src/__tests__/layouts/BaseLayout.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import BaseLayout from '../../layouts/BaseLayout'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { expect } from '@jest/globals'
+
+test('BaseLayout should render', () => {
+    render(<BaseLayout />)
+})