From 7d18824c3296332039f012c8a2f6aca447d163cd Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Mon, 2 Mar 2026 08:49:12 +0100
Subject: [PATCH] feat(frontend): Add formSnapshotComparison test, add test
 setup

---
 .../app/components/VersionComparisonModal.vue |   4 +-
 ...{formDiff.ts => formSnapshotComparison.ts} |   2 +-
 legalconsenthub/package.json                  |   3 +
 legalconsenthub/pnpm-lock.yaml                |  16 ++
 legalconsenthub/test/tsconfig.json            |   4 +
 .../formSnapshotComparison.spec.ts}           | 150 +++++++++---------
 ...{formDiff.ts => formSnapshotComparison.ts} |   0
 legalconsenthub/vitest.config.ts              |  34 ++--
 8 files changed, 125 insertions(+), 88 deletions(-)
 rename legalconsenthub/app/utils/{formDiff.ts => formSnapshotComparison.ts} (99%)
 create mode 100644 legalconsenthub/test/tsconfig.json
 rename legalconsenthub/test/unit/{formDiff.spec.ts => utils/formSnapshotComparison.spec.ts} (86%)
 rename legalconsenthub/types/{formDiff.ts => formSnapshotComparison.ts} (100%)

diff --git a/legalconsenthub/app/components/VersionComparisonModal.vue b/legalconsenthub/app/components/VersionComparisonModal.vue
index 9e14454..1f2454d 100644
--- a/legalconsenthub/app/components/VersionComparisonModal.vue
+++ b/legalconsenthub/app/components/VersionComparisonModal.vue
@@ -183,8 +183,8 @@
 <script setup lang="ts">
 import type { AccordionItem } from '@nuxt/ui'
 import type { ApplicationFormDto, ApplicationFormVersionDto } from '~~/.api-client'
-import type { FormValueDiff, ValueChange, SectionChanges, TableRowDiff } from '~~/types/formDiff'
-import { compareApplicationFormValues, groupChangesBySection } from '~/utils/formDiff'
+import type { FormValueDiff, ValueChange, SectionChanges, TableRowDiff } from '~~/types/formSnapshotComparison'
+import { compareApplicationFormValues, groupChangesBySection } from '~/utils/formSnapshotComparison'
 
 const props = defineProps<{
   open: boolean
diff --git a/legalconsenthub/app/utils/formDiff.ts b/legalconsenthub/app/utils/formSnapshotComparison.ts
similarity index 99%
rename from legalconsenthub/app/utils/formDiff.ts
rename to legalconsenthub/app/utils/formSnapshotComparison.ts
index 16a3473..c9fe311 100644
--- a/legalconsenthub/app/utils/formDiff.ts
+++ b/legalconsenthub/app/utils/formSnapshotComparison.ts
@@ -6,7 +6,7 @@ import type {
   FormOptionDto,
   FormElementType
 } from '~~/.api-client'
-import type { FormValueDiff, ValueChange, SectionChanges, TableDiff, TableRowDiff } from '~~/types/formDiff'
+import type { FormValueDiff, ValueChange, SectionChanges, TableDiff, TableRowDiff } from '~~/types/formSnapshotComparison'
 
 // Element types that use true/false selection model
 const SELECTION_TYPES: FormElementType[] = ['SELECT', 'RADIOBUTTON', 'CHECKBOX', 'SWITCH']
diff --git a/legalconsenthub/package.json b/legalconsenthub/package.json
index 079c2e1..0badd44 100644
--- a/legalconsenthub/package.json
+++ b/legalconsenthub/package.json
@@ -13,6 +13,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
+    "test:unit": "vitest run --project unit",
+    "test:integration": "vitest run --project integration",
     "check": "pnpm run lint && pnpm run type-check && pnpm run format && pnpm run test",
     "api:generate": "openapi-generator-cli generate -i ../api/legalconsenthub.yml -g typescript-fetch -o .api-client"
   },
@@ -41,6 +43,7 @@
     "happy-dom": "^20.0.11",
     "prettier": "3.5.1",
     "typescript": "5.7.3",
+    "@pinia/testing": "^0.1.7",
     "vitest": "^4.0.16",
     "vue-tsc": "2.2.2"
   },
diff --git a/legalconsenthub/pnpm-lock.yaml b/legalconsenthub/pnpm-lock.yaml
index 22008ec..b3a234e 100644
--- a/legalconsenthub/pnpm-lock.yaml
+++ b/legalconsenthub/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
       '@openapitools/openapi-generator-cli':
         specifier: 2.16.3
         version: 2.16.3
+      '@pinia/testing':
+        specifier: ^0.1.7
+        version: 0.1.7(pinia@3.0.3(typescript@5.7.3)(vue@3.5.26(typescript@5.7.3)))(vue@3.5.26(typescript@5.7.3))
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
@@ -1541,6 +1544,11 @@ packages:
     peerDependencies:
       pinia: ^3.0.3
 
+  '@pinia/testing@0.1.7':
+    resolution: {integrity: sha512-xcDq6Ry/kNhZ5bsUMl7DeoFXwdume1NYzDggCiDUDKoPQ6Mo0eH9VU7bJvBtlurqe6byAntWoX5IhVFqWzRz/Q==}
+    peerDependencies:
+      pinia: '>=2.2.6'
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -7928,6 +7936,14 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@pinia/testing@0.1.7(pinia@3.0.3(typescript@5.7.3)(vue@3.5.26(typescript@5.7.3)))(vue@3.5.26(typescript@5.7.3))':
+    dependencies:
+      pinia: 3.0.3(typescript@5.7.3)(vue@3.5.26(typescript@5.7.3))
+      vue-demi: 0.14.10(vue@3.5.26(typescript@5.7.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
diff --git a/legalconsenthub/test/tsconfig.json b/legalconsenthub/test/tsconfig.json
new file mode 100644
index 0000000..12250f0
--- /dev/null
+++ b/legalconsenthub/test/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../.nuxt/tsconfig.json",
+  "include": ["**/*"]
+}
diff --git a/legalconsenthub/test/unit/formDiff.spec.ts b/legalconsenthub/test/unit/utils/formSnapshotComparison.spec.ts
similarity index 86%
rename from legalconsenthub/test/unit/formDiff.spec.ts
rename to legalconsenthub/test/unit/utils/formSnapshotComparison.spec.ts
index 343ebd0..a04c0be 100644
--- a/legalconsenthub/test/unit/formDiff.spec.ts
+++ b/legalconsenthub/test/unit/utils/formSnapshotComparison.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { compareApplicationFormValues, groupChangesBySection } from '../../app/utils/formDiff'
+import { compareApplicationFormValues, groupChangesBySection } from '../../../app/utils/formSnapshotComparison'
 import type {
   ApplicationFormDto,
   ApplicationFormSnapshotDto,
@@ -11,7 +11,7 @@ import type {
   FormElementSectionSnapshotDto,
   FormElementSubSectionSnapshotDto,
   FormElementType
-} from '../../.api-client'
+} from '../../../.api-client'
 
 // Helper to create a minimal FormOptionDto
 function createOption(value: string, label: string): FormOptionDto {
@@ -96,7 +96,7 @@ function createSnapshot(elements: FormElementSnapshotDto[], sectionTitle = 'Test
   }
 }
 
-describe('formDiff', () => {
+describe('formSnapshotComparison', () => {
   describe('compareApplicationFormValues', () => {
     describe('TEXTFIELD element', () => {
       it('should detect new answer (empty → filled)', () => {
@@ -110,9 +110,9 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].elementTitle).toBe('Name')
-        expect(diff.newAnswers[0].currentLabel).toBe('John Doe')
-        expect(diff.newAnswers[0].previousLabel).toBeNull()
+        expect(diff.newAnswers[0]?.elementTitle).toBe('Name')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('John Doe')
+        expect(diff.newAnswers[0]?.previousLabel).toBeNull()
         expect(diff.changedAnswers).toHaveLength(0)
         expect(diff.clearedAnswers).toHaveLength(0)
       })
@@ -128,8 +128,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].previousLabel).toBe('John Doe')
-        expect(diff.changedAnswers[0].currentLabel).toBe('Jane Doe')
+        expect(diff.changedAnswers[0]?.previousLabel).toBe('John Doe')
+        expect(diff.changedAnswers[0]?.currentLabel).toBe('Jane Doe')
         expect(diff.newAnswers).toHaveLength(0)
         expect(diff.clearedAnswers).toHaveLength(0)
       })
@@ -143,8 +143,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].previousLabel).toBe('John Doe')
-        expect(diff.clearedAnswers[0].currentLabel).toBeNull()
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('John Doe')
+        expect(diff.clearedAnswers[0]?.currentLabel).toBeNull()
         expect(diff.newAnswers).toHaveLength(0)
         expect(diff.changedAnswers).toHaveLength(0)
       })
@@ -179,7 +179,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('This is a long description text.')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('This is a long description text.')
       })
 
       it('should detect changed answer', () => {
@@ -193,8 +193,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].previousLabel).toBe('Original text')
-        expect(diff.changedAnswers[0].currentLabel).toBe('Updated text')
+        expect(diff.changedAnswers[0]?.previousLabel).toBe('Original text')
+        expect(diff.changedAnswers[0]?.currentLabel).toBe('Updated text')
       })
 
       it('should detect cleared answer', () => {
@@ -206,7 +206,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].previousLabel).toBe('Some text')
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('Some text')
       })
     })
 
@@ -224,7 +224,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('<p>Rich <strong>text</strong> content</p>')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('<p>Rich <strong>text</strong> content</p>')
       })
 
       it('should detect changed answer', () => {
@@ -238,8 +238,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].previousLabel).toBe('<p>Original</p>')
-        expect(diff.changedAnswers[0].currentLabel).toBe('<p>Updated</p>')
+        expect(diff.changedAnswers[0]?.previousLabel).toBe('<p>Original</p>')
+        expect(diff.changedAnswers[0]?.currentLabel).toBe('<p>Updated</p>')
       })
 
       it('should detect cleared answer', () => {
@@ -264,7 +264,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('2024-01-15')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('2024-01-15')
       })
 
       it('should detect changed answer', () => {
@@ -278,8 +278,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].previousLabel).toBe('2024-01-15')
-        expect(diff.changedAnswers[0].currentLabel).toBe('2024-02-20')
+        expect(diff.changedAnswers[0]?.previousLabel).toBe('2024-01-15')
+        expect(diff.changedAnswers[0]?.currentLabel).toBe('2024-02-20')
       })
 
       it('should detect cleared answer', () => {
@@ -314,8 +314,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('Medium')
-        expect(diff.newAnswers[0].previousLabel).toBeNull()
+        expect(diff.newAnswers[0]?.currentLabel).toBe('Medium')
+        expect(diff.newAnswers[0]?.previousLabel).toBeNull()
       })
 
       it('should detect changed answer (different option selected)', () => {
@@ -337,8 +337,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].previousLabel).toBe('Low')
-        expect(diff.changedAnswers[0].currentLabel).toBe('High')
+        expect(diff.changedAnswers[0]?.previousLabel).toBe('Low')
+        expect(diff.changedAnswers[0]?.currentLabel).toBe('High')
       })
 
       it('should detect cleared answer (option selected → nothing selected)', () => {
@@ -360,8 +360,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].previousLabel).toBe('Medium')
-        expect(diff.clearedAnswers[0].currentLabel).toBeNull()
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('Medium')
+        expect(diff.clearedAnswers[0]?.currentLabel).toBeNull()
       })
     })
 
@@ -385,7 +385,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('Male')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('Male')
       })
 
       it('should detect changed answer', () => {
@@ -407,8 +407,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].previousLabel).toBe('Male')
-        expect(diff.changedAnswers[0].currentLabel).toBe('Female')
+        expect(diff.changedAnswers[0]?.previousLabel).toBe('Male')
+        expect(diff.changedAnswers[0]?.currentLabel).toBe('Female')
       })
 
       it('should detect cleared answer', () => {
@@ -430,7 +430,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].previousLabel).toBe('Other')
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('Other')
       })
     })
 
@@ -454,7 +454,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('Feature A')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('Feature A')
       })
 
       it('should detect new answer (multiple checkboxes selected)', () => {
@@ -476,7 +476,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('Feature A, Feature B')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('Feature A, Feature B')
       })
 
       it('should detect changed answer (different checkboxes selected)', () => {
@@ -498,8 +498,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].previousLabel).toBe('Feature A')
-        expect(diff.changedAnswers[0].currentLabel).toBe('Feature B, Feature C')
+        expect(diff.changedAnswers[0]?.previousLabel).toBe('Feature A')
+        expect(diff.changedAnswers[0]?.currentLabel).toBe('Feature B, Feature C')
       })
 
       it('should detect cleared answer (all checkboxes deselected)', () => {
@@ -521,7 +521,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].previousLabel).toBe('Feature A, Feature B')
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('Feature A, Feature B')
       })
     })
 
@@ -537,7 +537,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('Enabled')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('Enabled')
       })
 
       it('should detect cleared answer (switch turned off)', () => {
@@ -551,7 +551,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].previousLabel).toBe('Enabled')
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('Enabled')
       })
     })
 
@@ -573,11 +573,11 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('2 Zeilen')
-        expect(diff.newAnswers[0].tableDiff).toBeDefined()
-        expect(diff.newAnswers[0].tableDiff!.addedCount).toBe(2)
-        expect(diff.newAnswers[0].tableDiff!.removedCount).toBe(0)
-        expect(diff.newAnswers[0].tableDiff!.modifiedCount).toBe(0)
+        expect(diff.newAnswers[0]?.currentLabel).toBe('2 Zeilen')
+        expect(diff.newAnswers[0]?.tableDiff).toBeDefined()
+        expect(diff.newAnswers[0]?.tableDiff!.addedCount).toBe(2)
+        expect(diff.newAnswers[0]?.tableDiff!.removedCount).toBe(0)
+        expect(diff.newAnswers[0]?.tableDiff!.modifiedCount).toBe(0)
       })
 
       it('should detect rows removed', () => {
@@ -594,10 +594,10 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].previousLabel).toBe('2 Zeilen')
-        expect(diff.clearedAnswers[0].tableDiff).toBeDefined()
-        expect(diff.clearedAnswers[0].tableDiff!.removedCount).toBe(2)
-        expect(diff.clearedAnswers[0].tableDiff!.addedCount).toBe(0)
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('2 Zeilen')
+        expect(diff.clearedAnswers[0]?.tableDiff).toBeDefined()
+        expect(diff.clearedAnswers[0]?.tableDiff!.removedCount).toBe(2)
+        expect(diff.clearedAnswers[0]?.tableDiff!.addedCount).toBe(0)
       })
 
       it('should detect modified rows when row count changes', () => {
@@ -619,12 +619,12 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].tableDiff).toBeDefined()
-        expect(diff.changedAnswers[0].tableDiff!.addedCount).toBe(1)
-        expect(diff.changedAnswers[0].tableDiff!.modifiedCount).toBe(1)
-        expect(diff.changedAnswers[0].tableDiff!.rows[1].changeType).toBe('modified')
-        expect(diff.changedAnswers[0].tableDiff!.rows[1].previousValues['Name']).toBe('Jane')
-        expect(diff.changedAnswers[0].tableDiff!.rows[1].currentValues['Name']).toBe('Janet')
+        expect(diff.changedAnswers[0]?.tableDiff).toBeDefined()
+        expect(diff.changedAnswers[0]?.tableDiff!.addedCount).toBe(1)
+        expect(diff.changedAnswers[0]?.tableDiff!.modifiedCount).toBe(1)
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[1]?.changeType).toBe('modified')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[1]?.previousValues['Name']).toBe('Jane')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[1]?.currentValues['Name']).toBe('Janet')
       })
 
       it('should detect modified rows when row count is the same', () => {
@@ -644,12 +644,12 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].tableDiff).toBeDefined()
-        expect(diff.changedAnswers[0].tableDiff!.addedCount).toBe(0)
-        expect(diff.changedAnswers[0].tableDiff!.modifiedCount).toBe(1)
-        expect(diff.changedAnswers[0].tableDiff!.rows[1].changeType).toBe('modified')
-        expect(diff.changedAnswers[0].tableDiff!.rows[1].previousValues['Name']).toBe('Jane')
-        expect(diff.changedAnswers[0].tableDiff!.rows[1].currentValues['Name']).toBe('Janet')
+        expect(diff.changedAnswers[0]?.tableDiff).toBeDefined()
+        expect(diff.changedAnswers[0]?.tableDiff!.addedCount).toBe(0)
+        expect(diff.changedAnswers[0]?.tableDiff!.modifiedCount).toBe(1)
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[1]?.changeType).toBe('modified')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[1]?.previousValues['Name']).toBe('Jane')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[1]?.currentValues['Name']).toBe('Janet')
       })
 
       it('should detect mixed changes (added, removed, modified)', () => {
@@ -669,12 +669,12 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].tableDiff).toBeDefined()
+        expect(diff.changedAnswers[0]?.tableDiff).toBeDefined()
         // Row 0: modified (John → John Updated, Developer → Senior Dev)
         // Row 1: modified (Jane → New Person, Designer → Manager)
         // Row 2: removed (Bob, Tester)
-        expect(diff.changedAnswers[0].tableDiff!.modifiedCount).toBe(2)
-        expect(diff.changedAnswers[0].tableDiff!.removedCount).toBe(1)
+        expect(diff.changedAnswers[0]?.tableDiff!.modifiedCount).toBe(2)
+        expect(diff.changedAnswers[0]?.tableDiff!.removedCount).toBe(1)
       })
 
       it('should handle single row correctly', () => {
@@ -694,7 +694,7 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].currentLabel).toBe('1 Zeile')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('1 Zeile')
       })
 
       it('should handle boolean values in table cells', () => {
@@ -715,8 +715,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].tableDiff!.rows[0].previousValues['Enabled']).toBe('Nein')
-        expect(diff.changedAnswers[0].tableDiff!.rows[0].currentValues['Enabled']).toBe('Ja')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[0]?.previousValues['Enabled']).toBe('Nein')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[0]?.currentValues['Enabled']).toBe('Ja')
       })
 
       it('should handle array values in table cells', () => {
@@ -736,8 +736,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].tableDiff!.rows[0].previousValues['Tags']).toBe('Tag1')
-        expect(diff.changedAnswers[0].tableDiff!.rows[0].currentValues['Tags']).toBe('Tag1, Tag2')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[0]?.previousValues['Tags']).toBe('Tag1')
+        expect(diff.changedAnswers[0]?.tableDiff!.rows[0]?.currentValues['Tags']).toBe('Tag1, Tag2')
       })
     })
 
@@ -751,8 +751,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].elementTitle).toBe('Name')
-        expect(diff.clearedAnswers[0].previousLabel).toBe('John Doe')
+        expect(diff.clearedAnswers[0]?.elementTitle).toBe('Name')
+        expect(diff.clearedAnswers[0]?.previousLabel).toBe('John Doe')
       })
 
       it('should not report removed element if it had no value', () => {
@@ -777,8 +777,8 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].elementTitle).toBe('Name')
-        expect(diff.newAnswers[0].currentLabel).toBe('John Doe')
+        expect(diff.newAnswers[0]?.elementTitle).toBe('Name')
+        expect(diff.newAnswers[0]?.currentLabel).toBe('John Doe')
       })
 
       it('should not report new element if it has no value', () => {
@@ -813,13 +813,13 @@ describe('formDiff', () => {
         const diff = compareApplicationFormValues(current, version)
 
         expect(diff.newAnswers).toHaveLength(1)
-        expect(diff.newAnswers[0].elementTitle).toBe('Name')
+        expect(diff.newAnswers[0]?.elementTitle).toBe('Name')
 
         expect(diff.changedAnswers).toHaveLength(1)
-        expect(diff.changedAnswers[0].elementTitle).toBe('Email')
+        expect(diff.changedAnswers[0]?.elementTitle).toBe('Email')
 
         expect(diff.clearedAnswers).toHaveLength(1)
-        expect(diff.clearedAnswers[0].elementTitle).toBe('Status')
+        expect(diff.clearedAnswers[0]?.elementTitle).toBe('Status')
       })
     })
 
@@ -1088,8 +1088,8 @@ describe('formDiff', () => {
       const grouped = groupChangesBySection(diff)
 
       expect(grouped).toHaveLength(1)
-      expect(grouped[0].sectionTitle).toBe('Section A')
-      expect(grouped[0].changes).toHaveLength(3)
+      expect(grouped[0]?.sectionTitle).toBe('Section A')
+      expect(grouped[0]?.changes).toHaveLength(3)
     })
   })
 })
diff --git a/legalconsenthub/types/formDiff.ts b/legalconsenthub/types/formSnapshotComparison.ts
similarity index 100%
rename from legalconsenthub/types/formDiff.ts
rename to legalconsenthub/types/formSnapshotComparison.ts
diff --git a/legalconsenthub/vitest.config.ts b/legalconsenthub/vitest.config.ts
index d7b7e32..f601efd 100644
--- a/legalconsenthub/vitest.config.ts
+++ b/legalconsenthub/vitest.config.ts
@@ -4,18 +4,32 @@ import { defineVitestProject } from '@nuxt/test-utils/config'
 export default defineConfig({
   test: {
     projects: [
-      {
-        test: {
-          name: 'unit',
-          include: ['test/{e2e,unit}/*.{test,spec}.ts'],
-          environment: 'node'
-        }
-      },
       await defineVitestProject({
         test: {
-          name: 'nuxt',
-          include: ['test/nuxt/*.{test,spec}.ts'],
-          environment: 'nuxt'
+          name: 'unit',
+          include: ['test/unit/**/*.{test,spec}.ts'],
+          environment: 'nuxt',
+          environmentOptions: {
+            nuxt: {
+              domEnvironment: 'happy-dom'
+            }
+          }
+        }
+      }),
+      await defineVitestProject({
+        test: {
+          name: 'integration',
+          include: ['test/integration/**/*.{test,spec}.ts'],
+          environment: 'nuxt',
+          environmentOptions: {
+            nuxt: {
+              domEnvironment: 'happy-dom',
+              mock: {
+                intersectionObserver: true,
+                indexedDb: true
+              }
+            }
+          }
         }
       })
     ]