Web: add unit tests using Jest (#782)

Author: postrowinski

.github/workflows/build.yml

@@ -135,6 +135,32 @@ jobs:
         with:
           name: mwdb-web-tests-image
           path: mwdb-web-tests-image
+  build_frontend_unit_test:
+    name: Build frontend unit test image
+    runs-on: ubuntu-latest
+    env:
+      DOCKER_BUILDKIT: 1
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Build and push mwdb-web-unit-tests image
+        uses: docker/build-push-action@v4
+        with:
+          file: ./deploy/docker/Dockerfile-web-unit-test
+          tags: |
+            certpl/mwdb-web-unit-tests:${{ github.sha }}
+          cache-from: |
+            type=registry,ref=certpl/mwdb-web-unit-tests:buildcache
+          outputs: type=docker,dest=./mwdb-web-unit-tests-image
+      - name: Upload unit test image
+        uses: actions/upload-artifact@v3
+        with:
+          name: mwdb-web-unit-tests-image
+          path: mwdb-web-unit-tests-image
   test_backend_e2e:
     needs: [build_core, build_frontend, build_backend_e2e]
     name: Perform backend e2e tests
@@ -211,8 +237,31 @@ jobs:
         with:
           name: mwdb-e2e-web-videos
           path: artifacts
+  test_frontend_unit:
+    needs: [ build_frontend_unit_test ]
+    name: Perform frontend unit tests
+    runs-on: ubuntu-latest
+    env:
+      DOCKER_BUILDKIT: 1
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+      - name: Download all artifacts
+        uses: actions/download-artifact@v3
+      - name: Import images
+        run: |
+          docker load --input ./mwdb-web-unit-tests-image/mwdb-web-unit-tests-image
+          docker tag certpl/mwdb-web-unit-tests:$GITHUB_SHA certpl/mwdb-web-unit-tests:latest
+      - name: Setup configuration
+        run: |
+          chmod +x gen_vars.sh
+          ./gen_vars.sh test
+      - name: Perform tests
+        run: |
+          docker-compose -f docker-compose-unit-test.yml up -d
+          docker-compose -f docker-compose-unit-test.yml logs -f -t
   push_images:
-    needs: [test_backend_e2e, test_frontend_e2e]
+    needs: [test_backend_e2e, test_frontend_e2e, test_frontend_unit]
     name: Push images on Docker Hub
     runs-on: ubuntu-latest
     if: ${{ github.event_name == 'push' }}
@@ -266,7 +315,7 @@ jobs:
             type=registry,ref=certpl/mwdb-web:buildcache,mode=max
           push: true
   push_test_images:
-    needs: [test_backend_e2e, test_frontend_e2e]
+    needs: [test_backend_e2e, test_frontend_e2e, test_frontend_unit]
     name: Push test images on Docker Hub
     runs-on: ubuntu-latest
     if: ${{ github.event_name == 'push' }}
@@ -310,3 +359,16 @@ jobs:
           cache-to: |
             type=registry,ref=certpl/mwdb-web-tests:buildcache,mode=max
           push: true
+      - name: Build and push mwdb-web-unit-tests image
+        uses: docker/build-push-action@v4
+        with:
+          file: ./deploy/docker/Dockerfile-web-unit-test
+          context: mwdb/web
+          tags: |
+            certpl/mwdb-web-unit-tests:${{ github.sha }}
+            certpl/mwdb-web-unit-tests:master
+          cache-from: |
+            type=registry,ref=certpl/mwdb-web-unit-tests:buildcache
+          cache-to: |
+            type=registry,ref=certpl/mwdb-web-unit-tests:buildcache,mode=max
+          push: true

deploy/docker/Dockerfile-web-unit-test

@@ -0,0 +1,8 @@
+FROM node:16-alpine AS build
+
+LABEL maintainer="[email protected]"
+
+COPY ./mwdb/web/ ./
+RUN npm install
+
+CMD ["npm", "test"]

docker-compose-unit-test.yml

@@ -0,0 +1,10 @@
+# Docker Compose file for mwdb-core unit test
+
+version: "3.3"
+services:
+  web-unit-tests:
+    build:
+      context: .
+      dockerfile: deploy/docker/Dockerfile-web-unit-test
+    container_name: mwdb_core_unit_web_tests
+    image: certpl/mwdb-web-unit-tests

mwdb/web/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        "@babel/preset-env",
+        ["@babel/preset-react", { runtime: "automatic" }],
+    ],
+};

mwdb/web/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    testEnvironment: "jsdom",
+};