feat: add unit tests for model classes (HeuristicQuestionAnswer, StudyAnswer, UserStudyEvaluatorAnswer)

package.json

@@ -43,6 +43,7 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "crypto-browserify": "^3.12.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.2",
     "firebase": "^9.23.0",
     "firebase-admin": "^13.6.1",
     "firebase-functions": "^6.6.0",

src/ux/UserTest/components/steps/ConsentStep.vue

@@ -2,7 +2,7 @@
   <ShowInfo :title="testTitle + ' - ' + 'Consent'">
     <template #content>
       <div class="test-content pa-md-4 rounded-xl">
-        <div class="rich-text mb-6 pa-md-4" v-html="consentText" />
+        <div class="rich-text mb-6 pa-md-4" v-html="sanitizedConsentText" />
         <v-row justify="center">
           <v-col cols="12" md="6">
             <v-text-field
@@ -63,8 +63,9 @@ color="primary" variant="flat" block :disabled="localConsentCompleted === null |
   </v-dialog>
 </template>
 <script setup>
+import DOMPurify from 'dompurify'
 import ShowInfo from '@/shared/components/ShowInfo.vue';
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 const props = defineProps({
   testTitle: String,
   consentText: String,
@@ -76,6 +77,7 @@ const emit = defineEmits(['update:fullNameModel', 'update:consentCompletedModel'
 const localFullName = ref(props.fullNameModel);
 const localConsentCompleted = ref(null); // Always start with no selection
 const showDeclineModal = ref(false);
+const sanitizedConsentText = computed(() => DOMPurify.sanitize(props.consentText || ''));
 
 watch(() => props.fullNameModel, val => { localFullName.value = val; });
 // Removed watcher for consentCompletedModel to prevent pre-selection

src/ux/UserTest/components/steps/FinishStep.vue

@@ -12,7 +12,7 @@
           {{ finalMessage }}!
         </h3>
 
-        <div class="text-body-1 mt-2 text-grey-darken-1" v-html="congratulations"></div>
+        <div class="text-body-1 mt-2 text-grey-darken-1" v-html="sanitizedCongratulations"></div>
 
         <p class="text-body-1 mt-6 text-grey-darken-1">
           {{ submitMessage }}
@@ -34,6 +34,8 @@
   </ShowInfo>
 </template>
 <script setup>
+import DOMPurify from 'dompurify'
+import { computed } from 'vue'
 import ShowInfo from '@/shared/components/ShowInfo.vue';
 const props = defineProps({
     finalMessage: String,
@@ -42,4 +44,5 @@ const props = defineProps({
     submitBtn: String
 });
 const emit = defineEmits(['submit']);
+const sanitizedCongratulations = computed(() => DOMPurify.sanitize(props.congratulations || ''));
 </script>

src/ux/UserTest/components/steps/TaskStep.vue

@@ -6,7 +6,7 @@
         <template v-if="stage === 1">
           <div
             class="rich-text mb-4 task-description"
-            v-html="task?.taskDescription || taskDescription"
+            v-html="sanitizedTaskDescription"
           />
 
           <!-- Task Preview Information -->
@@ -177,7 +177,7 @@
                   </div>
                   <div
                     class="rich-text text-body-1 task-description"
-                    v-html="task?.taskDescription || taskDescription"
+                    v-html="sanitizedTaskDescription"
                   />
                 </v-col>
 
@@ -469,6 +469,7 @@
 
 <script setup>
 import { ref, watch, nextTick, computed, onBeforeUnmount } from 'vue'
+import DOMPurify from 'dompurify'
 import ShowInfo from '@/shared/components/ShowInfo.vue'
 import TipButton from '@/ux/UserTest/components/TipButton.vue'
 import AudioRecorder from '@/ux/UserTest/components/AudioRecorder.vue'
@@ -506,6 +507,9 @@ const props = defineProps({
   remoteStream: MediaStream, // props that receive the remote video stream in case of moderated test
   shouldRecordModerator: Boolean, // props that indicate whether to record the moderator's video
 })
+
+const sanitizedTaskDescription = computed(() => DOMPurify.sanitize(props.task?.taskDescription || props.taskDescription || ''))
+
 const emit = defineEmits([
   'done',
   'couldNotFinish',

src/ux/UserTest/components/steps/WelcomeStep.vue

@@ -8,7 +8,7 @@
         <div
           v-if="welcomeMessage"
           class="text-body-1 mb-4 text-grey-darken-3"
-          v-html="welcomeMessage"
+          v-html="sanitizedWelcomeMessage"
         ></div>
         <p v-else class="text-body-1 mb-4 text-grey-darken-3">
           {{ $t('UserTestView.WelcomeStep.description') }}
@@ -92,6 +92,8 @@
 </template>
 
 <script setup>
+import DOMPurify from 'dompurify'
+import { computed } from 'vue'
 import ShowInfo from '@/shared/components/ShowInfo.vue'
 import { VStepperVertical } from 'vuetify/labs/VStepperVertical'
 import { useDisplay } from 'vuetify'
@@ -102,6 +104,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['start'])
 const { smAndDown } = useDisplay()
+const sanitizedWelcomeMessage = computed(() => DOMPurify.sanitize(props.welcomeMessage || ''))
 </script>
 
 <style scoped>

src/ux/UserTest/components/task-steps/TaskPreview.vue

@@ -24,10 +24,7 @@
                 </div>
                 <div
                   class="description-content"
-                  v-html="
-                    (task && task.taskDescription) ||
-                    $t('CreateTask.preview.noDescription')
-                  "
+                  v-html="sanitizedTaskDescription"
                 ></div>
               </div>
 
@@ -164,6 +161,7 @@
 </template>
 
 <script setup>
+import DOMPurify from 'dompurify'
 import { computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -179,6 +177,11 @@ const props = defineProps({
 
 const emit = defineEmits(['validate'])
 
+const sanitizedTaskDescription = computed(() => {
+  const raw = (props.task && props.task.taskDescription) || t('CreateTask.preview.noDescription')
+  return DOMPurify.sanitize(raw)
+})
+
 const recordingFeatures = computed(() => {
   if (!props.task) return []
 

src/ux/UserTest/components/transcription/ExportPanel.vue

@@ -223,7 +223,7 @@
               </div>
 
               <!-- eslint-disable-next-line vue/no-v-html -->
-              <div class="mt-4" v-html="pdfSummaryHtml"></div>
+              <div class="mt-4" v-html="sanitizedPdfSummaryHtml"></div>
 
               <div v-for="(run, i) in previewRuns" :key="run.id" class="mt-6">
                 <h3 class="text-subtitle-2 m-0">
@@ -259,6 +259,7 @@
 
 <script setup>
 import { ref, watch, computed } from 'vue'
+import DOMPurify from 'dompurify'
 import jsPDF from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { QuillEditor } from '@vueup/vue-quill'
@@ -291,6 +292,7 @@ const pdfMeta = ref({
 const pdfSummaryHtml = ref('<p>Add an executive summary here…</p>')
 
 const controller = new TranscriptionController()
+const sanitizedPdfSummaryHtml = computed(() => DOMPurify.sanitize(pdfSummaryHtml.value || ''))
 
 const formatIcon = computed(
   () =>

tests/unit/HeuristicQuestionAnswer.spec.js

@@ -0,0 +1,143 @@
+import HeuristicQuestionAnswer from '@/ux/Heuristic/models/HeuristicQuestionAnswer'
+
+describe('HeuristicQuestionAnswer', () => {
+  describe('constructor', () => {
+    it('sets all fields from provided data', () => {
+      const data = {
+        heuristicId: 1,
+        heuristicAnswer: { text: 'Good', value: 4 },
+        heuristicComment: 'Looks fine',
+        answerImageUrl: 'https://example.com/img.png',
+      }
+
+      const answer = new HeuristicQuestionAnswer(data)
+
+      expect(answer.heuristicId).toBe(1)
+      expect(answer.heuristicAnswer).toEqual({ text: 'Good', value: 4 })
+      expect(answer.heuristicComment).toBe('Looks fine')
+      expect(answer.answerImageUrl).toBe('https://example.com/img.png')
+    })
+
+    it('defaults heuristicAnswer to empty object when undefined', () => {
+      const answer = new HeuristicQuestionAnswer({})
+
+      expect(answer.heuristicAnswer).toEqual({})
+    })
+
+    it('handles no arguments (empty constructor)', () => {
+      const answer = new HeuristicQuestionAnswer()
+
+      expect(answer.heuristicId).toBeUndefined()
+      expect(answer.heuristicAnswer).toEqual({})
+      expect(answer.heuristicComment).toBeUndefined()
+      expect(answer.answerImageUrl).toBeUndefined()
+    })
+  })
+
+  describe('toFirestore', () => {
+    it('returns correct Firestore shape', () => {
+      const answer = new HeuristicQuestionAnswer({
+        heuristicId: 5,
+        heuristicAnswer: { text: 'Bad', value: 1 },
+        heuristicComment: 'Poor contrast',
+        answerImageUrl: 'https://example.com/screenshot.png',
+      })
+
+      expect(answer.toFirestore()).toEqual({
+        heuristicId: 5,
+        heuristicAnswer: { text: 'Bad', value: 1 },
+        heuristicComment: 'Poor contrast',
+        answerImageUrl: 'https://example.com/screenshot.png',
+      })
+    })
+
+    it('defaults answerImageUrl to empty string when falsy', () => {
+      const answer = new HeuristicQuestionAnswer({ heuristicId: 1 })
+      const result = answer.toFirestore()
+
+      expect(result.answerImageUrl).toBe('')
+    })
+
+    it('preserves answerImageUrl when provided', () => {
+      const answer = new HeuristicQuestionAnswer({
+        answerImageUrl: 'https://img.example.com/a.png',
+      })
+
+      expect(answer.toFirestore().answerImageUrl).toBe('https://img.example.com/a.png')
+    })
+  })
+
+  describe('toHeuristicQuestionAnswer (static factory)', () => {
+    const testOptions = [
+      { text: 'Very Bad', value: 0 },
+      { text: 'Bad', value: 1 },
+      { text: 'Neutral', value: 2 },
+      { text: 'Good', value: 3 },
+      { text: 'Very Good', value: 4 },
+    ]
+
+    it('keeps heuristicAnswer as-is when it already has a text property', () => {
+      const data = {
+        heuristicId: 10,
+        heuristicAnswer: { text: 'Custom', value: 99 },
+        heuristicComment: 'Already formatted',
+      }
+
+      const result = HeuristicQuestionAnswer.toHeuristicQuestionAnswer(data, testOptions)
+
+      expect(result).toBeInstanceOf(HeuristicQuestionAnswer)
+      expect(result.heuristicAnswer).toEqual({ text: 'Custom', value: 99 })
+    })
+
+    it('converts a numeric heuristicAnswer to object using testOptions', () => {
+      const data = {
+        heuristicId: 10,
+        heuristicAnswer: 3,
+        heuristicComment: 'Nice',
+      }
+
+      const result = HeuristicQuestionAnswer.toHeuristicQuestionAnswer(data, testOptions)
+
+      expect(result).toBeInstanceOf(HeuristicQuestionAnswer)
+      expect(result.heuristicAnswer).toEqual({ text: 'Good', value: 3 })
+    })
+
+    it('sets text to empty string when numeric value is not found in testOptions', () => {
+      const data = {
+        heuristicId: 10,
+        heuristicAnswer: 999,
+      }
+
+      const result = HeuristicQuestionAnswer.toHeuristicQuestionAnswer(data, testOptions)
+
+      expect(result.heuristicAnswer).toEqual({ text: '', value: 999 })
+    })
+
+    it('spreads remaining data fields onto the instance', () => {
+      const data = {
+        heuristicId: 7,
+        heuristicAnswer: 0,
+        heuristicComment: 'Terrible',
+        answerImageUrl: 'https://img.test/x.png',
+      }
+
+      const result = HeuristicQuestionAnswer.toHeuristicQuestionAnswer(data, testOptions)
+
+      expect(result.heuristicId).toBe(7)
+      expect(result.heuristicComment).toBe('Terrible')
+      expect(result.answerImageUrl).toBe('https://img.test/x.png')
+      expect(result.heuristicAnswer).toEqual({ text: 'Very Bad', value: 0 })
+    })
+
+    it('handles null heuristicAnswer gracefully', () => {
+      const data = {
+        heuristicId: 1,
+        heuristicAnswer: null,
+      }
+
+      const result = HeuristicQuestionAnswer.toHeuristicQuestionAnswer(data, testOptions)
+
+      expect(result.heuristicAnswer).toEqual({ text: '', value: null })
+    })
+  })
+})

tests/unit/StudyAnswer.spec.js

@@ -0,0 +1,37 @@
+import StudyAnswer from '@/shared/models/StudyAnswer'
+
+describe('StudyAnswer', () => {
+  describe('constructor', () => {
+    it('sets type from provided data', () => {
+      const answer = new StudyAnswer({ type: 'HEURISTIC' })
+      expect(answer.type).toBe('HEURISTIC')
+    })
+
+    it('handles missing type', () => {
+      const answer = new StudyAnswer({})
+      expect(answer.type).toBeUndefined()
+    })
+
+    it('handles no arguments', () => {
+      const answer = new StudyAnswer()
+      expect(answer.type).toBeUndefined()
+    })
+  })
+
+  describe('toFirestore', () => {
+    it('returns correct shape with type', () => {
+      const answer = new StudyAnswer({ type: 'USER' })
+      expect(answer.toFirestore()).toEqual({ type: 'USER' })
+    })
+
+    it('defaults type to empty string when null', () => {
+      const answer = new StudyAnswer({ type: null })
+      expect(answer.toFirestore()).toEqual({ type: '' })
+    })
+
+    it('defaults type to empty string when undefined', () => {
+      const answer = new StudyAnswer({})
+      expect(answer.toFirestore()).toEqual({ type: '' })
+    })
+  })
+})