chore: establish deterministic frontend checks

Author: Sebastian Fellner 💯

.eslintignore

@@ -3,4 +3,6 @@ static/sw.js
 .direnv
 .idea
 .nuxt
+coverage
+dist
 node_modules

.eslintrc.yml

@@ -1,6 +1,7 @@
 env:
   browser: true
   node: true
+root: true
 extends:
   - "eslint:recommended"
   #  - "@nuxtjs/eslint-config-typescript"

.github/workflows/deployment-dev.yml

@@ -12,17 +12,17 @@ jobs:
   deploy-firebase-dev:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - run: pnpm install && pnpm ci-dev-build
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm ci-dev-build
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
       - uses: FirebaseExtended/action-hosting-deploy@v0

.github/workflows/deployment-live.yml

@@ -10,21 +10,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2.3.1
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
+          cache: pnpm
       - name: Install and Build 🔧
         run: |
-          pnpm install
-          pnpm nuxt generate
+          pnpm install --frozen-lockfile
+          pnpm generate
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@4.0.0
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages # The branch the action should deploy to.
           folder: dist # The folder the action should deploy.

.github/workflows/deployment-pr.yml

@@ -12,17 +12,17 @@ jobs:
   deploy-firebase-pr:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - run: pnpm install && pnpm ci-dev-build
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm ci-dev-build
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
       - uses: FirebaseExtended/action-hosting-deploy@v0

.github/workflows/husky.yml

@@ -11,22 +11,23 @@ on:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  lint-and-prettify:
+  checks:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
+          cache: pnpm
       - name: install dependencies
-        run: pnpm install
-      - run: pnpm exec prettier --write .
-      - run: pnpm exec eslint .
+        run: pnpm install --frozen-lockfile
+      - run: pnpm format:check
+      - run: pnpm lint
+      - run: pnpm test
+      - run: pnpm ci-dev-build
+      - run: pnpm test:generated

.prettierignore

@@ -1,4 +1,5 @@
 .nuxt
+dist
 *.md
 node_modules
 coverage

components/ChatVisualization/ChatVisualization.vue

@@ -31,13 +31,13 @@ export default {
       // its possible that the first person did not write any message at all
       ego: this.chat.messagesPerPerson[0]?.name,
       price: 7.99,
-      currency: "EUR"
+      currency: "EUR",
     };
   },
   methods: {
     setEgo(ego) {
       this.ego = ego;
-    }
-  }
+    },
+  },
 };
 </script>

components/ChatVisualization/PdfDownloadPopup.vue

@@ -264,7 +264,7 @@ export default {
     downloadSample() {
       gtagEvent("sample_download", GTAG_PDF, 2);
       const query = (this.$route && this.$route.query) || {};
-      this.download(!('free' in query));
+      this.download(!("free" in query));
     },
     workerResponseHandler: function (event) {
       const data = event.data;

components/DownloadPopup.vue

@@ -79,8 +79,7 @@
         <div v-if="!isSimple" class="text-text-h3 my-4">
           <v-col>
             <div v-if="!isSimple" class="text-body-1 pb-2">
-              {{ $t("lookingFor") }} <b>{{ $t("pdfDownload") }}
-            </b>?
+              {{ $t("lookingFor") }} <b>{{ $t("pdfDownload") }} </b>?
             </div>
 
             <v-btn
@@ -105,24 +104,29 @@
 <script>
 import html2canvas from "html2canvas";
 import { downloadBase64File } from "~/utils/utils";
-import { GTAG_INTERACTION, GTAG_PAYMENT, GTAG_RESULTS, gtagEvent } from "~/utils/gtagValues";
+import {
+  GTAG_INTERACTION,
+  GTAG_PAYMENT,
+  GTAG_RESULTS,
+  gtagEvent,
+} from "~/utils/gtagValues";
 
 export default {
   name: "DownloadPopup",
   props: {
     chat: { type: Object },
-    isSimple: { default: false, type: Boolean }
+    isSimple: { default: false, type: Boolean },
   },
   data() {
     return {
       dialog: false,
       loading: false,
       suffix: this.isSimple ? "-top" : "",
-      GTAG_INTERACTION
+      GTAG_INTERACTION,
     };
   },
   methods: {
-    download: function() {
+    download: function () {
       this.loading = true;
       gtagEvent("download_image", GTAG_RESULTS);
 
@@ -145,13 +149,13 @@ export default {
           scrollX: 0,
           scrollY: -window.scrollY,
           height: normalHeight + additionalHeight + negativeHeight,
-          onclone: function(clonedDoc) {
+          onclone: function (clonedDoc) {
             let nonVisibleStuff = clonedDoc.querySelectorAll(
               ".only-visible-to-html2canvas"
             );
             nonVisibleStuff.forEach((y) => (y.style.display = "block"));
             return clonedDoc;
-          }
+          },
         });
 
         let names = this.chat.messagesPerPerson
@@ -170,7 +174,7 @@ export default {
     paypalButtonPressed() {
       gtagEvent("donation_download_results", GTAG_PAYMENT, 5);
     },
-    gtagEvent
-  }
+    gtagEvent,
+  },
 };
 </script>