fix: fix save question in order (#78)

Author: Fouad-sys

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ['@commitlint/config-conventional']}

cypress/e2e/Admin/create/createView.cy.js

@@ -6,16 +6,34 @@ import {
   CREATE_QUESTION_SELECT_TYPE_CY,
   CREATE_QUESTION_TITLE_CY,
   CREATE_VIEW_DELETE_BUTTON_CY,
+  QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME,
+  QUESTION_STEP_CLASSNAME,
   QUESTION_BAR_CY,
   QUESTION_BAR_NEXT_CY,
   QUESTION_BAR_PREV_CY,
   buildQuestionStepCy,
   dataCyWrapper,
 } from '../../../../src/config/selectors';
 import { APP_SETTINGS } from '../../../fixtures/appSettings';
+import { fillMultipleChoiceQuestion } from './multipleChoices.cy';
+
+const newMultipleChoiceData = {
+  question: 'new question text',
+  choices: [
+    {
+      value: 'new choice 1',
+      isCorrect: true,
+    },
+    {
+      value: 'new choice 2',
+      isCorrect: true,
+    },
+  ],
+  explanation: 'my new explanation',
+};
 
 describe('Create View', () => {
-  it('Empty data', () => {
+  beforeEach(() => {
     cy.setUpApi({
       database: {
         appSettings: [],
@@ -26,6 +44,9 @@ describe('Create View', () => {
       },
     });
     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')
@@ -39,6 +60,28 @@ describe('Create View', () => {
     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);
+    cy.wait(2000); // 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);
+    cy.wait(2000);
+    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', () => {
     beforeEach(() => {
       cy.setUpApi({
@@ -107,5 +150,25 @@ describe('Create View', () => {
       cy.get(dataCyWrapper(CREATE_VIEW_DELETE_BUTTON_CY)).should('be.disabled');
       cy.get(dataCyWrapper(ADD_NEW_QUESTION_TITLE_CY)).should('be.visible');
     });
+
+    it('Add question from existing quiz', () => {
+      const currentQuestion = APP_SETTINGS[1];
+      cy.get(dataCyWrapper(buildQuestionStepCy(currentQuestion.id))).click();
+      // click new question and come back
+      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+
+      // New question title should be visible
+      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');
+      fillMultipleChoiceQuestion(newMultipleChoiceData);
+      cy.get('html').find(`.${QUESTION_STEP_CLASSNAME}`).should('have.length', 5);
+    });
   });
 });

cypress/e2e/Admin/create/multipleChoices.cy.js

@@ -53,7 +53,7 @@ const newMultipleChoiceData = {
   explanation: 'my new explanation',
 };
 
-const fillMultipleChoiceQuestion = (
+export const fillMultipleChoiceQuestion = (
   { choices, question, explanation },
   { shouldSave = true } = {}
 ) => {

package.json

@@ -26,6 +26,7 @@
     "react-plotly.js": "2.6.0",
     "react-scripts": "5.0.1",
     "react-toastify": "9.1.3",
+    "uuid": "^9.0.0",
     "web-vitals": "^3.3.2"
   },
   "scripts": {
@@ -74,8 +75,9 @@
     "@types/node": "18.16.19",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "@typescript-eslint/eslint-plugin": "5.59.11",
-    "@typescript-eslint/parser": "5.59.11",
+    "@types/uuid": "^9.0.2",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "cypress": "12.14.0",
     "env-cmd": "10.1.0",
     "eslint": "^8.3.0",

src/components/context/QuizContext.tsx

@@ -41,7 +41,7 @@ export const QuizProvider = ({ children }: Props) => {
   const { mutate: deleteAppSetting } = mutations.useDeleteAppSetting();
   const { mutateAsync: postAppSettingAsync, mutate: postAppSetting } =
     mutations.usePostAppSetting();
-  const { mutate: patchAppSetting } = mutations.usePatchAppSetting();
+  const { mutateAsync: patchAppSetting } = mutations.usePatchAppSetting();
   // current question idx
   // -1 if we are adding a new question
   const [currentIdx, setCurrentIdx] = useState(0);
@@ -51,6 +51,7 @@ export const QuizProvider = ({ children }: Props) => {
   const [currentQuestion, setCurrentQuestion] =
     useState<QuestionDataAppSettingRecord>(DEFAULT_QUESTION);
 
+
   const setCurrentIdxBounded = (newIdx: number) => {
     const computedIdx = Math.min(Math.max(0, newIdx), order.size - 1);
     setCurrentIdx(computedIdx);
@@ -82,6 +83,7 @@ export const QuizProvider = ({ children }: Props) => {
     setCurrentIdx(-1);
   };
 
+  // Saves Data of current question in db and adds its id to order list (at the end)
   const saveQuestion = async (newData: QuestionDataRecord) => {
     // add new question
     if (!currentQuestion?.id) {
@@ -99,7 +101,7 @@ export const QuizProvider = ({ children }: Props) => {
       } else {
         patchAppSetting({
           id: orderSetting.id,
-          data: { list: order.push(newQuestion.id) },
+          data: { list: order.push(newQuestion.id).toJS() },
         });
       }
       setCurrentIdx(order.size);
@@ -166,7 +168,6 @@ export const QuizProvider = ({ children }: Props) => {
             APP_SETTING_NAMES.QUESTION
           ) as List<QuestionDataAppSettingRecord>)
         : List<QuestionDataAppSettingRecord>();
-
       return {
         order,
         questions,

src/components/navigation/QuestionTopBar.tsx

@@ -23,6 +23,7 @@ import {
   QUESTION_BAR_CY,
   QUESTION_BAR_NEXT_CY,
   QUESTION_BAR_PREV_CY,
+  QUESTION_STEP_CLASSNAME,
   buildQuestionStepCy,
 } from '../../config/selectors';
 import { QuizContext } from '../context/QuizContext';
@@ -128,7 +129,9 @@ const QuestionTopBar = ({ additionalSteps }: Props) => {
           sx={{ pb: 3 }}
         >
           {order?.map((qId: string, index: number) => (
-            <Step key={qId} data-cy={buildQuestionStepCy(qId)}>
+            <Step key={qId} data-cy={buildQuestionStepCy(qId)} className={
+              QUESTION_STEP_CLASSNAME
+            }>
               {renderLabel(qId, index)}
             </Step>
           ))}

src/config/selectors.js

@@ -10,6 +10,8 @@ export const buildMultipleChoiceAnswerCy = (idx) =>
   `multipleChoiceAnswer-${idx}`;
 export const MULTIPLE_CHOICES_ANSWER_CORRECTNESS_CLASSNAME =
   'multipleChoicesAnswerCorrectness';
+export const QUESTION_STEP_CLASSNAME =
+  'questionStep';
 export const buildMultipleChoiceDeleteAnswerButtonCy = (idx) =>
   `multipleChoiceDeleteAnswerButton-${idx}`;
 export const CREATE_VIEW_SAVE_BUTTON_CY = 'createViewSaveButton';