[WIP] Screenshot testing

.github/workflows/ci.yml

@@ -1,49 +1,81 @@
 name: CI
 
 on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
 
 jobs:
-  verify_files:
-    name: Verify Files
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-    - name: Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: '18.x'
-        cache: 'npm'
-    - name: Install Packages
-      run: npm ci
-    - name: Lint Files
-      run: npm run lint
-    - name: Typecheck
-      run: npm run typecheck
-    - name: Typecheck (React 18)
-      run: |
-        npm i --no-save @types/react@18 @types/react-dom@18
-        npm run typecheck
-  tests:
-    name: Tests
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-    - name: Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: '18.x'
-        cache: 'npm'
-    - name: Install Packages
-      run: npm ci
-    - name: Unit Tests
-      run: npm run test
+    verify_files:
+        name: Verify Files
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+              with:
+                  fetch-depth: 0
+            - name: Setup Node
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '18.x'
+                  cache: 'npm'
+            - name: Install Packages
+              run: npm ci
+            - name: Lint Files
+              run: npm run lint
+            - name: Typecheck
+              run: npm run typecheck
+            - name: Typecheck (React 18)
+              run: |
+                  npm i --no-save @types/react@18 @types/react-dom@18
+                  npm run typecheck
+
+    tests_units:
+        name: Unit testing
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+              with:
+                  fetch-depth: 0
+            - name: Setup Node
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '18.x'
+                  cache: 'npm'
+            - name: Install Packages
+              run: npm ci
+            - name: Unit Tests
+              run: npm run test:units
+
+    test_screenshots:
+        name: Screenshot testing
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+              with:
+                  fetch-depth: 0
+
+            - name: Setup Node
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '18.x'
+                  cache: 'npm'
+
+            - name: Install Packages
+              run: npm ci
+            - name: Build
+              run: npm run build
+            - name: Run tests
+              run: npm run test:screenshots
+
+            - name: Upload screenshots
+              id: upload-artifacts
+              uses: actions/upload-artifact@v2
+              with:
+                  name: screenshots
+                  path: tests/screenshots/tests/__image_snapshots__
+
+            - name: Log Artifact ID
+              run: echo "Artifact ID= ${{ steps.upload-artifacts.outputs.artifact_id }}"

jest.config.screenshots.ts

@@ -0,0 +1,9 @@
+import type {Config} from '@jest/types';
+
+const cfg: Config.InitialOptions = {
+    preset: 'ts-jest',
+    roots: ['<rootDir>/tests/screenshots'],
+    globalTeardown: '<rootDir>/tests/screenshots/teardown.ts',
+};
+
+export default cfg;

jest.config.ts → jest.config.units.ts

@@ -8,6 +8,7 @@ const cfg: Config.InitialOptions = {
     coverageReporters: ['json', 'html'],
     coverageDirectory: './coverage',
     setupFiles: ['<rootDir>/tests/setup.js'],
+    roots: ['<rootDir>/tests/units'],
 };
 
 export default cfg;