feat: Added test infrastructure and initial component tests

.github/workflows/main.yml

@@ -39,11 +39,88 @@ jobs:
       - name: Prettier Check
         run: pnpm run prettier-check
 
+  Test:
+    name: Run Tests and Coverage
+    runs-on: ubuntu-latest
+    needs: [Prettier-check]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        id: cache-primes
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Setup PNPM environment
+        if: steps.cache-primes.outputs.cache-hit != 'true'
+        run: |
+          npm install -g pnpm@latest
+          pnpm config set store-dir ~/.pnpm-store
+
+      - name: Cache PNPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-v3-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-v3-
+
+      - name: Install dependencies
+        if: steps.cache-primes.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Tests with Coverage
+        run: pnpm run test:coverage
+
+      - name: Check Coverage Thresholds
+        run: |
+          COVERAGE_OUTPUT=$(cat coverage/coverage-summary.json)
+
+          STATEMENTS_PCT=$(echo $COVERAGE_OUTPUT | jq -r '.total.statements.pct')
+          BRANCHES_PCT=$(echo $COVERAGE_OUTPUT | jq -r '.total.branches.pct')
+          FUNCTIONS_PCT=$(echo $COVERAGE_OUTPUT | jq -r '.total.functions.pct')
+          LINES_PCT=$(echo $COVERAGE_OUTPUT | jq -r '.total.lines.pct')
+
+          THRESHOLD=1
+
+          if (( $(echo "$STATEMENTS_PCT < $THRESHOLD" | bc -l) )); then
+            echo "❌ Statement coverage ($STATEMENTS_PCT%) is below threshold ($THRESHOLD%)"
+            exit 1
+          fi
+
+          if (( $(echo "$BRANCHES_PCT < $THRESHOLD" | bc -l) )); then
+            echo "❌ Branch coverage ($BRANCHES_PCT%) is below threshold ($THRESHOLD%)"
+            exit 1
+          fi
+
+          if (( $(echo "$FUNCTIONS_PCT < $THRESHOLD" | bc -l) )); then
+            echo "❌ Function coverage ($FUNCTIONS_PCT%) is below threshold ($THRESHOLD%)"
+            exit 1
+          fi
+
+          if (( $(echo "$LINES_PCT < $THRESHOLD" | bc -l) )); then
+            echo "❌ Line coverage ($LINES_PCT%) is below threshold ($THRESHOLD%)"
+            exit 1
+          fi
+
+          echo "✅ All coverage thresholds met!"
+          echo "Statements: $STATEMENTS_PCT%"
+          echo "Branches: $BRANCHES_PCT%"
+          echo "Functions: $FUNCTIONS_PCT%"
+          echo "Lines: $LINES_PCT%"
+
+      - name: Archive code coverage results
+        uses: actions/upload-artifact@v4
+        with:
+          name: code-coverage-report
+          path: coverage/
+          retention-days: 30
 
   Build:
     name: Build project
     runs-on: ubuntu-latest
-    needs: [ Prettier-check ]
+    needs: [Prettier-check, Test]
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
@@ -73,3 +150,19 @@ jobs:
 
       - name: Build
         run: pnpm run build
+
+  Status-Check:
+    name: Status Check
+    runs-on: ubuntu-latest
+    needs: [Prettier-check, Test, Build]
+    if: always()
+    steps:
+      - name: Check status
+        run: |
+          if [ "${{ needs.Prettier-check.result }}" != "success" ] || \
+             [ "${{ needs.Test.result }}" != "success" ] || \
+             [ "${{ needs.Build.result }}" != "success" ]; then
+            echo "One or more jobs failed"
+            exit 1
+          fi
+          echo "All jobs passed successfully"

.gitignore

@@ -6,6 +6,7 @@ dist
 .idea
 .vscode
 
+
 # storybook
 storybook-static
 
@@ -16,4 +17,7 @@ storybook-static
 
 # public folder temp files
 public
-/stories/Uploader.stories.js
+/stories/Uploader.stories.js
+
+# Tests
+coverage

jest.config.cjs

@@ -0,0 +1,46 @@
+/** @type {import('jest').Config} */
+module.exports = {
+    roots: ['<rootDir>/src'],
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    moduleNameMapper: {
+        '^frontend/(.*)$': '<rootDir>/src/frontend/$1',
+        '^backend/(.*)$': '<rootDir>/src/backend/$1',
+        '^lib/(.*)$': '<rootDir>/src/lib/$1',
+        '\\.css$': 'identity-obj-proxy',
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+    transform: {
+        '^.+\\.(t|j)sx?$': [
+            'ts-jest',
+            {
+                tsconfig: 'tsconfig.json',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!(@mui|framer-motion)/)'],
+    testMatch: [
+        '<rootDir>/src/**/__tests__/**/*.{ts,tsx}',
+        '<rootDir>/src/**/*.{spec,test}.{ts,tsx}',
+    ],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    collectCoverageFrom: [
+        'src/**/*.{ts,tsx}',
+        '!src/**/*.d.ts',
+        '!src/version.ts',
+    ],
+    coverageReporters: [
+        'json-summary', // Creates coverage-summary.json used by CI
+        'text', // Console output
+        'lcov', // Detailed HTML report
+        'clover', // Additional machine-readable format
+    ],
+    coverageThreshold: {
+        global: {
+            branches: 1,
+            functions: 1,
+            lines: 1,
+            statements: 1,
+        },
+    },
+}

package.json

@@ -57,7 +57,10 @@
         "build:browser": "tsdx build --entry ./src/index.browser.ts --tsconfig ./tsconfig.browser.json --format esm,cjs --name browser",
         "build:node": "tsdx build --entry ./src/index.node.ts --tsconfig ./tsconfig.node.json --format cjs --name node",
         "build": "node scripts/build.js",
-        "test": "tsdx test --passWithNoTests",
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "test:ci": "jest --coverage --ci --maxWorkers=2",
         "lint": "tsdx lint",
         "prepare": "tsdx build",
         "size": "size-limit",
@@ -99,6 +102,10 @@
         "@storybook/react": "^7.6.20",
         "@storybook/react-webpack5": "^7.6.20",
         "@storybook/testing-library": "^0.2.2",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "29.5.11",
         "@types/node": "^20.10.0",
         "@types/pako": "^2.0.3",
         "@types/react": "^18.2.39",
@@ -110,6 +117,10 @@
         "babel-loader": "^9.1.3",
         "highlight.js": "10.7.3",
         "husky": "^8.0.3",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "29.7.0",
+        "jest-canvas-mock": "^2.5.2",
+        "jest-environment-jsdom": "29.7.0",
         "lowlight": "1.20.0",
         "postcss": "^8.4.31",
         "prettier": "3.0.3",
@@ -124,6 +135,7 @@
         "size-limit": "^10.0.3",
         "storybook": "^7.5.3",
         "tailwindcss": "^3.3.5",
+        "ts-jest": "29.1.1",
         "tsdx": "^0.14.1",
         "tslib": "^2.6.2",
         "typescript": "^5.3.2",