Apply suggestions from code review of branch webapp_unit_testing Co-authored-by: @beth_probert

.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

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");
                     }
                   },

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"],