fix: ensure that unit is stored and correctly displayed for numerical…

… questions (#4123)
uzh-bf · May 11, 2024 · 907e257 · 907e257
1 parent 8871e4a
commit 907e257
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 2 deletions.
diff --git a/apps/frontend-manage/src/components/questions/QuestionEditModal.tsx b/apps/frontend-manage/src/components/questions/QuestionEditModal.tsx
@@ -486,6 +486,7 @@ function QuestionEditModal({
                 options: {
                   hasSampleSolution: values.options?.hasSampleSolution,
                   accuracy: parseInt(values.options?.accuracy),
+                  unit: values.options?.unit,
                   restrictions: {
                     min:
                       !values.options?.restrictions ||
@@ -1436,6 +1437,11 @@ function QuestionEditModal({
                           errors.options.accuracy
                         }`}</li>
                       )}
+                      {errors.options && errors.options.unit && (
+                        <li>{`${t('shared.generic.unit')}: ${
+                          errors.options.unit
+                        }`}</li>
+                      )}
                       {errors.options &&
                         errors.options.solutionRanges &&
                         typeof errors.options.solutionRanges === 'string' && (

diff --git a/cypress/cypress/e2e/D-questions-workflow.cy.ts b/cypress/cypress/e2e/D-questions-workflow.cy.ts
@@ -225,13 +225,17 @@ describe('Create questions', () => {
     cy.get('[data-cy="insert-question-text"]').click().type(question)
     cy.get('[data-cy="set-numerical-minimum"]').click().type('0')
     cy.get('[data-cy="set-numerical-maximum"]').click().type('100')
+    cy.get('[data-cy="set-numerical-unit"]').click().type('%')
+    cy.get('[data-cy="set-numerical-accuracy"]').click().type('0')
     cy.get('[data-cy="save-new-question"]').click({ force: true })
 
     cy.get(`[data-cy="question-item-${questionTitle}"]`).contains(question)
     cy.get(`[data-cy="question-item-${questionTitle}"]`).contains(questionTitle)
     cy.get(`[data-cy="edit-question-${questionTitle}"]`).click()
     cy.get('[data-cy="input-numerical-minimum"]').contains('Min: 0')
     cy.get('[data-cy="input-numerical-maximum"]').contains('Max: 100')
+    cy.get('[data-cy="input-numerical-accuracy"]').contains('Precision: 0')
+    cy.get('[data-cy="input-numerical-unit"]').contains('%')
   })
 
   it('creates a Free Text question', () => {

diff --git a/packages/graphql/src/services/questions.ts b/packages/graphql/src/services/questions.ts
@@ -33,6 +33,7 @@ function processElementOptions(elementType: DB.ElementType, options: any) {
     case DB.ElementType.NUMERICAL: {
       return {
         hasSampleSolution: options?.hasSampleSolution ?? false,
+        unit: options?.unit ?? undefined,
         accuracy: options?.accuracy ?? undefined,
         placeholder: options?.placeholder ?? undefined,
         restrictions: {

diff --git a/packages/prisma/src/data/data/TEST.ts b/packages/prisma/src/data/data/TEST.ts
@@ -73,6 +73,8 @@ export const QUESTIONS = [
     options: {
       hasSampleSolution: true,
       hasAnswerFeedbacks: false,
+      accuracy: 2,
+      unit: '%',
       restrictions: {
         min: -10,
         max: 100,

diff --git a/packages/shared-components/src/NumericalQuestion.tsx b/packages/shared-components/src/NumericalQuestion.tsx
@@ -67,7 +67,7 @@ function NumericalQuestion({
             setResponse(newValue, valid)
           }}
           valid={existingResponse ? !!existingResponse : valid}
-          accuracy={options.accuracy ? options.accuracy : undefined}
+          accuracy={options.accuracy ?? undefined}
           placeholder={options.placeholder ?? undefined}
           unit={options.unit ?? undefined}
           min={options.restrictions?.min ?? undefined}

diff --git a/packages/shared-components/src/questions/NUMERICALAnswerOptions.tsx b/packages/shared-components/src/questions/NUMERICALAnswerOptions.tsx
@@ -71,7 +71,10 @@ export function NUMERICALAnswerOptions({
           data={{ cy: `input-numerical-${elementIx + 1}` }}
         />
         {unit && (
-          <div className="flex flex-col items-center justify-center px-4 text-white rounded-r bg-slate-600 min-w-max">
+          <div
+            className="flex flex-col items-center justify-center px-4 text-white rounded-r bg-slate-600 min-w-max"
+            data-cy="input-numerical-unit"
+          >
             {unit}
           </div>
         )}