feat: changing question type create new question (#110)

ReidyT · spaenleh · commit 1e7ca750e16f · 2024-01-17T09:10:19.000+01:00
diff --git a/cypress/e2e/Admin/create/createView.cy.ts b/cypress/e2e/Admin/create/createView.cy.ts
@@ -1,22 +1,32 @@
 import { Context, PermissionLevel } from '@graasp/sdk';
 
-import { DEFAULT_QUESTION_TYPE } from '../../../../src/config/constants';
+import {
+  DEFAULT_QUESTION_TYPE,
+  QuestionType,
+} from '../../../../src/config/constants';
 import {
   ADD_NEW_QUESTION_TITLE_CY,
   CREATE_QUESTION_SELECT_TYPE_CY,
   CREATE_QUESTION_TITLE_CY,
   CREATE_VIEW_DELETE_BUTTON_CY,
+  CREATE_VIEW_SAVE_BUTTON_CY,
+  NUMBER_OF_ATTEMPTS_INPUT_CY,
   QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME,
   QUESTION_BAR_CY,
   QUESTION_BAR_NEXT_CY,
   QUESTION_BAR_PREV_CY,
   QUESTION_STEP_CLASSNAME,
+  TEXT_INPUT_FIELD_CY,
   buildQuestionStepCy,
+  buildQuestionTypeOption,
   dataCyWrapper,
 } from '../../../../src/config/selectors';
-import { APP_SETTINGS, QUESTION_APP_SETTINGS } from '../../../fixtures/appSettings';
-import { fillMultipleChoiceQuestion } from './multipleChoices.cy';
+import {
+  APP_SETTINGS,
+  QUESTION_APP_SETTINGS,
+} from '../../../fixtures/appSettings';
 import { WAITING_DELAY_MS } from '../../../utils/time';
+import { fillMultipleChoiceQuestion } from './multipleChoices.cy';
 
 const newMultipleChoiceData = {
   question: 'new question text',
@@ -34,57 +44,61 @@ const newMultipleChoiceData = {
 };
 
 describe('Create View', () => {
-  beforeEach(() => {
-    cy.setUpApi({
-      database: {
-        appSettings: [],
-      },
-      appContext: {
-        permission: PermissionLevel.Admin,
-        context: Context.Builder,
-      },
+  describe('Empty Quizz', () => {
+    beforeEach(() => {
+      cy.setUpApi({
+        database: {
+          appSettings: [],
+        },
+        appContext: {
+          permission: PermissionLevel.Admin,
+          context: Context.Builder,
+        },
+      });
+      cy.visit('/');
     });
-    cy.visit('/');
-  });
 
-  it('Empty data', () => {
-    cy.get(dataCyWrapper(ADD_NEW_QUESTION_TITLE_CY)).should('be.visible');
-    cy.get(dataCyWrapper(CREATE_QUESTION_TITLE_CY))
-      .should('be.visible')
-      .should('have.value', '');
-    cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
-      'have.value',
-      DEFAULT_QUESTION_TYPE
-    );
-    cy.get(dataCyWrapper(QUESTION_BAR_CY)).should('be.visible');
-    cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).should('be.disabled');
-    cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).should('be.disabled');
-  });
+    it('Empty data', () => {
+      cy.get(dataCyWrapper(ADD_NEW_QUESTION_TITLE_CY)).should('be.visible');
+      cy.get(dataCyWrapper(CREATE_QUESTION_TITLE_CY))
+        .should('be.visible')
+        .should('have.value', '');
+      cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
+        'have.value',
+        DEFAULT_QUESTION_TYPE
+      );
+      cy.get(dataCyWrapper(QUESTION_BAR_CY)).should('be.visible');
+      cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).should('be.disabled');
+      cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).should('be.disabled');
+    });
 
-  it('Add questions from empty quiz', () => {
-    // Add three questions and make sure they are added to the QuestionTopBar
-    cy.get(dataCyWrapper(ADD_NEW_QUESTION_TITLE_CY)).should('be.visible');
-    fillMultipleChoiceQuestion(newMultipleChoiceData);
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(WAITING_DELAY_MS); // Wait for the new question to appear
-    cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
-    cy.get(dataCyWrapper(CREATE_QUESTION_TITLE_CY))
-      .should('be.visible')
-      .should('have.value', '');
-    fillMultipleChoiceQuestion(newMultipleChoiceData);
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(WAITING_DELAY_MS);
-    cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
-    cy.get(dataCyWrapper(CREATE_QUESTION_TITLE_CY))
-      .should('be.visible')
-      .should('have.value', '');
-    fillMultipleChoiceQuestion(newMultipleChoiceData);
-    // Verify the questions are added to the order list by checking the number of
-    // question nodes in the QuestionTopBar, as we cannot check the app settings directly
-    cy.get('html').find(`.${QUESTION_STEP_CLASSNAME}`).should('have.length', 3);
+    it('Add questions from empty quiz', () => {
+      // Add three questions and make sure they are added to the QuestionTopBar
+      cy.get(dataCyWrapper(ADD_NEW_QUESTION_TITLE_CY)).should('be.visible');
+      fillMultipleChoiceQuestion(newMultipleChoiceData);
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(WAITING_DELAY_MS); // Wait for the new question to appear
+      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+      cy.get(dataCyWrapper(CREATE_QUESTION_TITLE_CY))
+        .should('be.visible')
+        .should('have.value', '');
+      fillMultipleChoiceQuestion(newMultipleChoiceData);
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(WAITING_DELAY_MS);
+      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+      cy.get(dataCyWrapper(CREATE_QUESTION_TITLE_CY))
+        .should('be.visible')
+        .should('have.value', '');
+      fillMultipleChoiceQuestion(newMultipleChoiceData);
+      // Verify the questions are added to the order list by checking the number of
+      // question nodes in the QuestionTopBar, as we cannot check the app settings directly
+      cy.get('html')
+        .find(`.${QUESTION_STEP_CLASSNAME}`)
+        .should('have.length', 3);
+    });
   });
 
-  describe('Create View', () => {
+  describe('Existing Quizz', () => {
     beforeEach(() => {
       cy.setUpApi({
         database: {
@@ -174,5 +188,67 @@ describe('Create View', () => {
         .find(`.${QUESTION_STEP_CLASSNAME}`)
         .should('have.length', 5);
     });
+
+    it('Update Question type should not create a new question', () => {
+      const numberOfQuestions = 4;
+      const numberOfAttempts = 3;
+
+      // update the number of attempts to ensure that changing question type
+      // keep the good the number of attempts.
+      cy.get(`${dataCyWrapper(NUMBER_OF_ATTEMPTS_INPUT_CY)} input`).clear();
+      cy.get(`${dataCyWrapper(NUMBER_OF_ATTEMPTS_INPUT_CY)} input`).type(
+        `${numberOfAttempts}`
+      );
+      cy.get(`${dataCyWrapper(CREATE_VIEW_SAVE_BUTTON_CY)}`).click();
+
+      // Check the current number of questions
+      cy.get('html')
+        .find(`.${QUESTION_STEP_CLASSNAME}`)
+        .should('have.length', numberOfQuestions);
+
+      // update the question type and save
+      const updatedQuestion = {
+        question: 'My new text input question',
+        questionType: QuestionType.TEXT_INPUT,
+        answer: 'new answer',
+      };
+      cy.get(`${dataCyWrapper(CREATE_QUESTION_TITLE_CY)} input`).clear();
+      cy.get(`${dataCyWrapper(CREATE_QUESTION_TITLE_CY)} input`).type(
+        updatedQuestion.question
+      );
+      cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)}`).click();
+      cy.get(
+        `${dataCyWrapper(
+          buildQuestionTypeOption(updatedQuestion.questionType)
+        )}`
+      ).click();
+      cy.get(`${dataCyWrapper(TEXT_INPUT_FIELD_CY)}`).type(
+        updatedQuestion.answer
+      );
+      cy.get(`${dataCyWrapper(CREATE_VIEW_SAVE_BUTTON_CY)}`).click();
+
+      // Check that the current number of questions is still unchanged
+      cy.get('html')
+        .find(`.${QUESTION_STEP_CLASSNAME}`)
+        .should('have.length', numberOfQuestions);
+
+      // Check the question title, question type, the answer and attempts.
+      cy.get(`${dataCyWrapper(CREATE_QUESTION_TITLE_CY)} input`).should(
+        'have.value',
+        updatedQuestion.question
+      );
+      cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
+        'have.value',
+        updatedQuestion.questionType
+      );
+      cy.get(`${dataCyWrapper(TEXT_INPUT_FIELD_CY)} input`).should(
+        'have.value',
+        updatedQuestion.answer
+      );
+      cy.get(`${dataCyWrapper(NUMBER_OF_ATTEMPTS_INPUT_CY)} input`).should(
+        'have.value',
+        numberOfAttempts
+      );
+    });
   });
 });
diff --git a/src/components/context/utilities.ts b/src/components/context/utilities.ts
@@ -259,3 +259,27 @@ export const validateQuestionData = (data: QuestionData) => {
       return true;
   }
 };
+
+/**
+ * Return the first valid value in three possible name of values or empty if all nullish
+ * @param response The response to get the value.
+ * @returns The first valid value of the data.
+ */
+export const getResponseValue = (response: Data | undefined) => {
+  const text = (response as TextAppDataData)?.text;
+  if (text) {
+    return text;
+  }
+
+  const value = (response as SliderAppDataData)?.value;
+  if (value) {
+    return value;
+  }
+
+  const choices = (response as MultipleChoiceAppDataData)?.choices;
+  if (choices) {
+    return choices.join(', ');
+  }
+
+  return '';
+};
diff --git a/src/components/create/CreateView.tsx b/src/components/create/CreateView.tsx
@@ -106,8 +106,10 @@ const CreateView = () => {
             onChange={(changes: QuestionData) => {
               setNewData({
                 ...changes,
+                questionId: newData.questionId,
                 question: newData.question,
                 explanation: newData.explanation,
+                numberOfAttempts: newData.numberOfAttempts,
               });
             }}
           />
diff --git a/src/components/play/PlaySlider.tsx b/src/components/play/PlaySlider.tsx
@@ -27,6 +27,7 @@ const PlaySlider = ({
 }: Props) => {
   const min = values?.min;
   const max = values?.max;
+  const defaultValue = Math.round((max - min) / 2 + min);
   const [marks, setMarks] = useState<{ value: number; label: number }[]>([]);
 
   const sliderSx = {
@@ -40,6 +41,13 @@ const PlaySlider = ({
   };
 
   useEffect(() => {
+    // Notify with the default value if response's value is null.
+    // Without it, if the user click on submit without changing the slider's value,
+    // the response's value will be undefined instead of defaultValue displayed on the screen.
+    if (!isReadonly && !response.value) {
+      setResponse(defaultValue);
+    }
+
     let newMarks = [
       { value: min, label: min },
       {
@@ -72,7 +80,7 @@ const PlaySlider = ({
         <Slider
           data-cy={PLAY_VIEW_SLIDER_CY}
           aria-label="Custom marks"
-          value={response?.value ?? (max - min) / 2 + min}
+          value={response?.value ?? defaultValue}
           valueLabelDisplay="on"
           onChange={(_e, val) => {
             if (!isReadonly) {
diff --git a/src/components/play/PlayView.tsx b/src/components/play/PlayView.tsx
@@ -94,7 +94,7 @@ const PlayView = () => {
     object: Partial<T>,
     key: K,
     value: V,
-    prevValue: V | undefined
+    prevValue: V | undefined,
   ) => {
     // reset correctness on value changed if not the same
     // this allow to show prev error and avoid to show success
@@ -173,7 +173,9 @@ const PlayView = () => {
                   choices={currentQuestion.data.choices}
                   response={newResponse as MultipleChoiceAppDataData}
                   setResponse={(choices) => {
-                    setNewResponse(setInData(newResponse, 'choices', choices));
+                    setNewResponse(
+                      setInData(newResponse, 'choices', choices)
+                    );
                     setShowCorrectness(false);
                   }}
                   showCorrection={showCorrection}
@@ -208,7 +210,9 @@ const PlayView = () => {
                   values={currentQuestion.data}
                   response={newResponse as FillTheBlanksAppDataData}
                   setResponse={(text: string) => {
-                    setNewResponse(setInData(newResponse, 'text', text));
+                    setNewResponse(
+                      setInData(newResponse, 'text', text)
+                    );
                     setShowCorrectness(false);
                   }}
                   showCorrection={showCorrection}
diff --git a/src/components/results/TableByQuestion.tsx b/src/components/results/TableByQuestion.tsx
@@ -21,7 +21,6 @@ import { visuallyHidden } from '@mui/utils';
 
 import { AppData, Member } from '@graasp/sdk';
 
-import { QuestionType } from '../../config/constants';
 import {
   TABLE_BY_QUESTION_ANSWER_DATA_CY,
   TABLE_BY_QUESTION_CONTAINER_CY,
@@ -41,13 +40,10 @@ import {
   comparatorArrayByElemName,
   getComparator,
 } from '../../utils/tableUtils';
-import { computeCorrectness, sortAppDataByDate } from '../context/utilities';
+import { computeCorrectness, getResponseValue, sortAppDataByDate } from '../context/utilities';
 import {
-  MultipleChoiceAppDataData,
   QuestionAppDataData,
   QuestionDataAppSetting,
-  SliderAppDataData,
-  TextAppDataData,
 } from '../types/types';
 
 type Props = {
@@ -94,21 +90,8 @@ const TableByQuestion = ({
    * @returns {string} Response for given user.
    */
   const getResponseDataForUserId = (userId: string) => {
-    const response = getResponseForUserId(userId)?.data;
-
-    switch (question.data.type) {
-      case QuestionType.TEXT_INPUT:
-      case QuestionType.FILL_BLANKS:
-        return (response as TextAppDataData)?.text ?? '';
-      case QuestionType.SLIDER:
-        return (response as SliderAppDataData)?.value ?? '';
-      case QuestionType.MULTIPLE_CHOICES:
-        return (
-          (response as MultipleChoiceAppDataData)?.choices?.join(', ') ?? ''
-        );
-      default:
-        return '';
-    }
+    // using this instead of switch allow to display answer after question type changed
+    return getResponseValue(getResponseForUserId(userId)?.data);
   };
 
   /**
diff --git a/src/components/results/TableByUser.tsx b/src/components/results/TableByUser.tsx
