From bf6dcebc16157458357d83ca2ba556e7c12afe3c Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Tue, 19 May 2026 09:51:18 -0600
Subject: [PATCH] Apply suggestions from code review of branch
 webapp_unit_testing Co-authored-by: @beth_probert

---
 .gitlab-ci.yml          | 1 +
 webapp/vite.config.mjs  | 7 ++++++-
 webapp/vitest.config.js | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b9383f66..35a9d11c 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -174,6 +174,7 @@ javascript-lint-and-test:
         coverage_format: cobertura
         path: webapp/coverage/cobertura-coverage.xml
 
+
 # Build JS app
 build:
   stage: build
diff --git a/webapp/vite.config.mjs b/webapp/vite.config.mjs
index a8542d50..37a19b7a 100644
--- a/webapp/vite.config.mjs
+++ b/webapp/vite.config.mjs
@@ -30,13 +30,18 @@ export default defineConfig(({ command, mode }) => {
   return {
     plugins: [
       vue({
-        // Block for removing data-test-id tags on npm run build
+        // Strip "data-test-id" attributes (used by Vitest) from the production build.
+        // This enforces separation of concerns and prevents developers from relying on
+        // test IDs for styling or core application logic.
         template: {
           compilerOptions: {
+            // Only apply this AST transformation during production builds
             nodeTransforms: isProduction
               ? [
                   (node) => {
+                    // Check if the current AST node is an HTML element
                     if (node.type === 1 /* NodeTypes.ELEMENT */) {
+                      // Filter out any property named "data-test-id"
                       node.props = node.props.filter((prop) => prop.name !== "data-test-id");
                     }
                   },
diff --git a/webapp/vitest.config.js b/webapp/vitest.config.js
index 41bf6348..a07d6ae7 100644
--- a/webapp/vitest.config.js
+++ b/webapp/vitest.config.js
@@ -39,7 +39,7 @@ export default defineConfig({
       clean: true,
       cleanOnStart: true,
       // text gives output on STOUT and html creates an artifact
-      reporter: ["text", "html"],
+      reporter: ["text", "html", "cobertura"],
       all: true,
       // Files to include or exclude in coverage
       include: ["src/**/*.vue", "src/**/*.js"],