feat: improve the navigation in the builder view (#124)

graasp · Jan 29, 2024 · a62b7ba · a62b7ba
1 parent c6a6b50
commit a62b7ba
Show file tree

Hide file tree

Showing 23 changed files with 863 additions and 466 deletions.
diff --git a/cypress/e2e/Admin/create/createView.cy.ts b/cypress/e2e/Admin/create/createView.cy.ts
@@ -10,21 +10,23 @@ import {
   CREATE_QUESTION_TITLE_CY,
   CREATE_VIEW_DELETE_BUTTON_CY,
   CREATE_VIEW_SAVE_BUTTON_CY,
+  CREATE_VIEW_SELECT_POSITION_QUESTION_CY,
+  NAVIGATION_ADD_QUESTION_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,
+  buildQuestionPositionOption,
   buildQuestionStepDefaultCy,
+  buildQuestionStepTitle,
   buildQuestionTypeOption,
   dataCyWrapper,
 } from '../../../../src/config/selectors';
 import {
   APP_SETTINGS,
   QUESTION_APP_SETTINGS,
 } from '../../../fixtures/appSettings';
+import { QuizNavigator } from '../../../utils/navigation';
 import { WAITING_DELAY_MS } from '../../../utils/time';
 import { fillMultipleChoiceQuestion } from './multipleChoices.cy';
 
@@ -69,8 +71,6 @@ describe('Create View', () => {
         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', () => {
@@ -79,14 +79,14 @@ describe('Create View', () => {
       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(NAVIGATION_ADD_QUESTION_BUTTON_CY)).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(NAVIGATION_ADD_QUESTION_BUTTON_CY)).click();
       cy.get(dataCyWrapper(CREATE_QUESTION_TITLE_CY))
         .should('be.visible')
         .should('have.value', '');
@@ -100,6 +100,8 @@ describe('Create View', () => {
   });
 
   describe('Existing Quizz', () => {
+    let quizNavigator: QuizNavigator;
+
     beforeEach(() => {
       cy.setUpApi({
         database: {
@@ -110,38 +112,43 @@ describe('Create View', () => {
           context: Context.Builder,
         },
       });
+
+      quizNavigator = new QuizNavigator({
+        questionSettings: QUESTION_APP_SETTINGS,
+        context: Context.Builder,
+      });
+
       cy.visit('/');
     });
 
     it('Navigation', () => {
       cy.get(dataCyWrapper(QUESTION_BAR_CY)).should('be.visible');
-      cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).should('be.disabled');
 
       cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
         'have.value',
         QUESTION_APP_SETTINGS[0].data.type
       );
 
       // go to next
-      cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).click();
+      quizNavigator.goToNext();
       cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
         'have.value',
         QUESTION_APP_SETTINGS[1].data.type
       );
       // go to prev
-      cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).click();
+      quizNavigator.goToPrev();
       cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
         'have.value',
         QUESTION_APP_SETTINGS[0].data.type
       );
       // go to next
-      cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).click();
+      quizNavigator.goToNext();
       cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
         'have.value',
         QUESTION_APP_SETTINGS[1].data.type
       );
       // go to next
-      cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).click();
+      quizNavigator.goToNext();
       cy.get(`${dataCyWrapper(CREATE_QUESTION_SELECT_TYPE_CY)} input`).should(
         'have.value',
         QUESTION_APP_SETTINGS[2].data.type
@@ -172,7 +179,7 @@ describe('Create View', () => {
       const id = currentQuestion.data.questionId;
       cy.get(dataCyWrapper(buildQuestionStepDefaultCy(id))).click();
       // click new question and come back
-      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+      cy.get(dataCyWrapper(NAVIGATION_ADD_QUESTION_BUTTON_CY)).click();
 
       // New question title should be visible
       cy.get(dataCyWrapper(ADD_NEW_QUESTION_TITLE_CY)).should('be.visible');
@@ -251,5 +258,36 @@ describe('Create View', () => {
         numberOfAttempts
       );
     });
+
+    it('Move question to another position', () => {
+      // Position idx start with 0, so index 0 is the first question.
+      const FIRST_POSITION_IDX = 0;
+      const THIRD_POSITION_IDX = 2;
+      const firstQuestionTitle = QUESTION_APP_SETTINGS[0].data.question;
+
+      // Check that the first question has the position 0.
+      cy.get(
+        `${dataCyWrapper(CREATE_VIEW_SELECT_POSITION_QUESTION_CY)} input`
+      ).should('have.value', FIRST_POSITION_IDX);
+
+      // Check that the question at position 0 is the right question by checking the question's title.
+      cy.get(
+        `${dataCyWrapper(buildQuestionStepTitle(FIRST_POSITION_IDX))}`
+      ).should('have.text', firstQuestionTitle);
+
+      // Move the question to the third position (index 2).
+      cy.get(dataCyWrapper(CREATE_VIEW_SELECT_POSITION_QUESTION_CY)).click();
+      cy.get(
+        `${dataCyWrapper(buildQuestionPositionOption(THIRD_POSITION_IDX))}`
+      ).click();
+
+      cy.get(
+        `${dataCyWrapper(CREATE_VIEW_SELECT_POSITION_QUESTION_CY)} input`
+      ).should('have.value', THIRD_POSITION_IDX);
+
+      cy.get(
+        `${dataCyWrapper(buildQuestionStepTitle(THIRD_POSITION_IDX))}`
+      ).should('have.text', firstQuestionTitle);
+    });
   });
 });
diff --git a/cypress/e2e/Admin/create/fillBlanks.cy.ts b/cypress/e2e/Admin/create/fillBlanks.cy.ts
@@ -11,7 +11,7 @@ import {
   CREATE_QUESTION_TITLE_CY,
   CREATE_VIEW_SAVE_BUTTON_CY,
   FILL_BLANKS_TEXT_FIELD_CY,
-  QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME,
+  NAVIGATION_ADD_QUESTION_BUTTON_CY,
   buildQuestionStepDefaultCy,
   dataCyWrapper,
 } from '../../../../src/config/selectors';
@@ -144,7 +144,7 @@ describe('Fill in the Blanks', () => {
       fillBlanksQuestion(newFillBlanksData);
 
       // click new question and come back
-      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+      cy.get(dataCyWrapper(NAVIGATION_ADD_QUESTION_BUTTON_CY)).click();
       cy.get(dataCyWrapper(buildQuestionStepDefaultCy(id))).click();
 
       // question bar should be updated

diff --git a/cypress/e2e/Admin/create/multipleChoices.cy.ts b/cypress/e2e/Admin/create/multipleChoices.cy.ts
@@ -13,8 +13,7 @@ import {
   CREATE_VIEW_SAVE_BUTTON_CY,
   MULTIPLE_CHOICES_ADD_ANSWER_BUTTON_CY,
   MULTIPLE_CHOICES_ANSWER_CORRECTNESS_CLASSNAME,
-  QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME,
-  QUESTION_BAR_PREV_CY,
+  NAVIGATION_ADD_QUESTION_BUTTON_CY,
   buildMultipleChoiceAddAnswerExplanationButtonCy,
   buildMultipleChoiceAnswerCy,
   buildMultipleChoiceAnswerExplanationCy,
@@ -289,7 +288,6 @@ describe('Multiple Choices', () => {
           )} .${MULTIPLE_CHOICES_ANSWER_CORRECTNESS_CLASSNAME} input`
         ).should(isCorrect ? 'be.checked' : 'not.be.checked');
       });
-      cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).should('be.disabled');
 
       cy.checkHintsField(data.hints);
       cy.checkExplanationField(data.explanation);
@@ -299,7 +297,7 @@ describe('Multiple Choices', () => {
       fillMultipleChoiceQuestion(newMultipleChoiceData);
 
       // click new question and come back
-      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+      cy.get(dataCyWrapper(NAVIGATION_ADD_QUESTION_BUTTON_CY)).click();
       cy.get(dataCyWrapper(buildQuestionStepDefaultCy(id))).click();
 
       // question bar should be updated

diff --git a/cypress/e2e/Admin/create/slider.cy.ts b/cypress/e2e/Admin/create/slider.cy.ts
@@ -12,7 +12,7 @@ import {
   CREATE_QUESTION_TITLE_CY,
   CREATE_VIEW_ERROR_ALERT_CY,
   CREATE_VIEW_SAVE_BUTTON_CY,
-  QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME,
+  NAVIGATION_ADD_QUESTION_BUTTON_CY,
   SLIDER_CY,
   SLIDER_MAX_FIELD_CY,
   SLIDER_MIN_FIELD_CY,
@@ -180,7 +180,7 @@ describe('Slider', () => {
       fillSliderQuestion(newSliderData, dataValue);
 
       // click new question and come back
-      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+      cy.get(dataCyWrapper(NAVIGATION_ADD_QUESTION_BUTTON_CY)).click();
       cy.get(dataCyWrapper(buildQuestionStepDefaultCy(id))).click();
 
       // question bar should be updated

diff --git a/cypress/e2e/Admin/create/textInput.cy.ts b/cypress/e2e/Admin/create/textInput.cy.ts
@@ -10,7 +10,7 @@ import {
   CREATE_QUESTION_SELECT_TYPE_CY,
   CREATE_QUESTION_TITLE_CY,
   CREATE_VIEW_SAVE_BUTTON_CY,
-  QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME,
+  NAVIGATION_ADD_QUESTION_BUTTON_CY,
   TEXT_INPUT_FIELD_CY,
   buildQuestionStepDefaultCy,
   dataCyWrapper,
@@ -154,7 +154,7 @@ describe('Text Input', () => {
       fillTextInputQuestion(newTextInputData);
 
       // click new question and come back
-      cy.get(`.${QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME}`).click();
+      cy.get(dataCyWrapper(NAVIGATION_ADD_QUESTION_BUTTON_CY)).click();
       cy.get(dataCyWrapper(buildQuestionStepDefaultCy(id))).click();
 
       // question bar should be updated

diff --git a/cypress/e2e/play/playView.cy.ts b/cypress/e2e/play/playView.cy.ts
@@ -4,23 +4,27 @@ import {
   PLAY_VIEW_EMPTY_QUIZ_CY,
   PLAY_VIEW_QUESTION_TITLE_CY,
   QUESTION_BAR_CY,
-  QUESTION_BAR_NEXT_CY,
-  QUESTION_BAR_PREV_CY,
   buildQuestionStepDefaultCy,
   dataCyWrapper,
 } from '../../../src/config/selectors';
-import { APP_SETTINGS, QUESTION_APP_SETTINGS } from '../../fixtures/appSettings';
 import { appDataChloe } from '../../../src/data/appDataChloe';
+import {
+  APP_SETTINGS,
+  QUESTION_APP_SETTINGS,
+} from '../../fixtures/appSettings';
+import { QuizNavigator } from '../../utils/navigation';
 
 describe('Play View', () => {
+  let quizNavigator: QuizNavigator;
+
   it('Empty data', () => {
     cy.setUpApi({
       database: {
         appSettings: [],
       },
       appContext: {
         context: Context.Player,
-      }
+      },
     });
     cy.visit('/');
 
@@ -35,7 +39,7 @@ describe('Play View', () => {
       },
       appContext: {
         context: Context.Player,
-      }
+      },
     });
     cy.visit('/');
 
@@ -66,38 +70,42 @@ describe('Play View', () => {
           permission: PermissionLevel.Admin,
         },
       });
+      quizNavigator = new QuizNavigator({
+        questionSettings: QUESTION_APP_SETTINGS,
+        context: Context.Player,
+      });
       cy.visit('/');
     });
 
     it('Navigation', () => {
       cy.get(dataCyWrapper(QUESTION_BAR_CY)).should('be.visible');
-      cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).should('be.disabled');
+      quizNavigator.prevBtnShouldBeDisabled();
 
       cy.get(`${dataCyWrapper(PLAY_VIEW_QUESTION_TITLE_CY)}`).should(
         'contain',
         QUESTION_APP_SETTINGS[0].data.question
       );
 
       // go to next
-      cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).click();
+      quizNavigator.goToNext();
       cy.get(`${dataCyWrapper(PLAY_VIEW_QUESTION_TITLE_CY)}`).should(
         'contain',
         QUESTION_APP_SETTINGS[1].data.question
       );
       // go to prev
-      cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).click();
+      quizNavigator.goToPrev();
       cy.get(`${dataCyWrapper(PLAY_VIEW_QUESTION_TITLE_CY)}`).should(
         'contain',
         QUESTION_APP_SETTINGS[0].data.question
       );
       // go to next
-      cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).click();
+      quizNavigator.goToNext();
       cy.get(`${dataCyWrapper(PLAY_VIEW_QUESTION_TITLE_CY)}`).should(
         'contain',
         QUESTION_APP_SETTINGS[1].data.question
       );
       // go to next
-      cy.get(dataCyWrapper(QUESTION_BAR_NEXT_CY)).click();
+      quizNavigator.goToNext();
       cy.get(`${dataCyWrapper(PLAY_VIEW_QUESTION_TITLE_CY)}`).should(
         'contain',
         QUESTION_APP_SETTINGS[2].data.question