Merge pull request #2 from rajnishdargan/asq-dev

Issue #223093 feat: Arrange Sequence Question Implementation

package.json

@@ -34,8 +34,8 @@
     "@project-sunbird/sb-styles": "0.0.16",
     "@project-sunbird/sunbird-file-upload-library": "1.0.2",
     "@project-sunbird/telemetry-sdk": "1.3.0",
-    "@tekdi/sunbird-quml-player-web-component": "5.0.0-beta.0",
-    "@tekdi/sunbird-resource-library": "9.0.0-beta.0",
+    "@tekdi/sunbird-quml-player-web-component": "5.0.0-beta.1",
+    "@tekdi/sunbird-resource-library": "9.0.0-beta.1",
     "@types/jquery": "^3.5.29",
     "alphanum-sort": "^1.0.2",
     "async": "^3.2.4",

projects/questionset-editor-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekdi/sunbird-questionset-editor",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.1",
   "dependencies": {
     "tslib": "^2.0.0"
   },

projects/questionset-editor-library/src/lib/components/question/question.component.html

@@ -77,6 +77,13 @@
                 [mapping]="scoreMapping" [maxScore]="maxScore"
                 [isReadOnlyMode]="isReadOnlyMode"></lib-match>
 
+              <lib-sequence *ngIf="questionInteractionType === 'order'"
+              [questionPrimaryCategory]="questionPrimaryCategory"
+              [editorState]="editorState" [showFormError]="showFormError"
+              (editorDataOutput)="editorDataHandler($event)"
+              [maxScore]="maxScore"
+              [isReadOnlyMode]="isReadOnlyMode"></lib-sequence>
+
               <lib-slider *ngIf="questionInteractionType === 'slider'" [editorDataInput]="sliderOptions"
                 (onChange)="sliderData($event)"></lib-slider>
 

projects/questionset-editor-library/src/lib/components/question/question.component.spec.ts

@@ -2,6 +2,9 @@ import { QuestionService } from "./../../services/question/question.service";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { QuestionComponent } from "./question.component";
+import { McqForm } from '../../interfaces/McqForm';
+import { MtfForm } from '../../interfaces/MtfForm';
+import { AsqForm } from '../../interfaces/AsqForm';
 import { Router } from "@angular/router";
 import { PlayerService } from "../../services/player/player.service";
 import { EditorTelemetryService } from "../../services/telemetry/telemetry.service";
@@ -796,6 +799,21 @@ describe("QuestionComponent", () => {
     expect(component.leafFormConfig).toBeDefined();
   });
 
+  it('should return McqForm when questionInteractionType is "choice"', () => {
+    component.questionInteractionType = 'choice';
+    expect(component.getFormClass()).toBe(McqForm);
+  });
+
+  it('should return MtfForm when questionInteractionType is "match"', () => {
+    component.questionInteractionType = 'match';
+    expect(component.getFormClass()).toBe(MtfForm);
+  });
+
+  it('should return AsqForm when questionInteractionType is "order"', () => {
+    component.questionInteractionType = 'order';
+    expect(component.getFormClass()).toBe(AsqForm);
+  });
+
   it("#onStatusChanges() should call onStatusChanges", () => {
     spyOn(component, "onStatusChanges");
     component.onStatusChanges("");
@@ -873,6 +891,12 @@ describe("QuestionComponent", () => {
     component.getMtfQuestionHtmlBody(question, templateId);
   });
 
+  it("call #getAsqQuestionHtmlBody() to verify questionBody", () => {
+    const question = '<div class=\'question-body\' tabindex=\'-1\'><div class=\'asq-title\' tabindex=\'0\'>{question}</div><div data-order-interaction=\'response1\' class=\'{templateClass}\'></div></div>';
+    const templateId = "asq-horizontal";
+    component.getAsqQuestionHtmlBody(question, templateId);
+  });
+
   it("Unit test for #sendForReview", () => {
     spyOn(component, "upsertQuestion");
     component.sendForReview();
@@ -1618,8 +1642,8 @@ describe("QuestionComponent", () => {
     expect(component.showFormError).toBeTruthy();
   });
 
-  it("#validateQuestionData() should call validateDefaultQuestionData and questionInteractionType is default", () => {
-    component.editorState = mockData.defaultQuestionMetaData.result.question;
+  it("#validateQuestionData() should call validateChoiceQuestionData when questionInteractionType is choice", () => {
+    component.editorState = mockData.defaultQuestionMetaData.result.question.editorState;
     component.editorState.question = "<p>2+2 = ?</p>";
     component.questionInteractionType = "choice";   
     spyOn(component, 'validateQuestionData').and.callThrough();
@@ -1628,6 +1652,26 @@ describe("QuestionComponent", () => {
     expect(component.validateChoiceQuestionData).toHaveBeenCalled();
   });
 
+  it("#validateQuestionData() should call validateMatchQuestionData when questionInteractionType is match", () => {
+    component.editorState = {}
+    component.editorState['question'] = "<p>Match the colour with the fruits</p>";
+    component.questionInteractionType = "match";
+    spyOn(component, 'validateQuestionData').and.callThrough();
+    spyOn(component, 'validateMatchQuestionData').and.callFake(() => {});
+    component.validateQuestionData();
+    expect(component.validateMatchQuestionData).toHaveBeenCalled();
+  });
+
+  it("#validateQuestionData() should call validateOrderQuestionData when questionInteractionType is order", () => {
+    component.editorState = {}
+    component.editorState['question'] = "<p>Arrange the numbers in ASC order</p>";
+    component.questionInteractionType = "order";
+    spyOn(component, 'validateQuestionData').and.callThrough();
+    spyOn(component, 'validateOrderQuestionData').and.callFake(() => {});
+    component.validateQuestionData();
+    expect(component.validateOrderQuestionData).toHaveBeenCalled();
+  });
+
   it('#validateChoiceQuestionData() should validate choice question data when all options are valid and set showFormError to false', () => {
     component.sourcingSettings = sourcingSettingsMock;
     component.editorState.question = "<p> Hi how are you </p>";
@@ -1659,6 +1703,36 @@ describe("QuestionComponent", () => {
     expect(component.showFormError).toBeFalsy();
   });
 
+  it("#validateOrderQuestionData() should validate match question data when all options have valid values and set showFormError to false", () => {
+    component.showFormError = false;
+    component.editorState = {
+      "question": "<p>arrange the nunbers</p>",
+      "options": [
+          {
+              "body": "<p>1</p>",
+              "length": 1
+          },
+          {
+              "body": "<p>2</p>",
+              "length": 1
+          },
+          {
+              "body": "<p>3</p>",
+              "length": 1
+          },
+          {
+              "body": "<p>4</p>",
+              "length": 1
+          }
+      ],
+      "templateId": "asq-vertical"
+    };
+    component.questionInteractionType = "order";
+    spyOn(component, "validateOrderQuestionData").and.callThrough();
+    component.validateOrderQuestionData();
+    expect(component.showFormError).toBeFalsy();
+  });
+
   it("#validateData() should validate and set showFormError to true when allowScoring is Yes", () => {
     component.treeNodeData = { data: { metadata: { allowScoring: "Yes" } } };
     component.editorState = mockData.mtfQuestionMetaData.result.question;