itemengine-cypress-automation 1.0.28 → 1.0.29

package/cypress/e2e/ILC/FillInTheGapsDragAndDrop/fillInTheGapsDragAndDropClickAndDrop.js

@@ -0,0 +1,278 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+let optionsForResponses = ['Response 1', 'Response 2'];
+let optionsForResponses2 = ['Response 3', 'Response 4'];
+
+describe('Create Item Page: Fill in the gaps - drag and drop: Click and drop cases for \'Standard\' and \'Grouped\' response options layouts in \'Set correct answer\' section and \'Preview tab\'', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Set correct answer\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyInactiveStateOfResponseAreasAndDraggableOptionsWithCSSAndA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyActiveStateOfResponseAreaAndDraggableOptionsWithCSSAndA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyInactiveStateOfResponseAreaWhenDraggableOptionIsDeselectedInSetCorrectAnswerSection();
+
+        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 1');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .contains('Response 1')
+                        .should('not.exist');
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .should('have.length', 1);
+                });
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyFilledResponseAreaWithCSSAndA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfPartiallyFilledResponseAreasWhenDraggableOptionsIsSelectedInSetCorrectAnswerSection();
+
+        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the response container and the response area should get filled with the new draggable option', () => {
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Response 2', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 2');
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .contains('Response 1')
+                        .should('exist')
+                        .and('be.visible');
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .should('have.length', 1);
+                });
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifySelectedStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDeselectedStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInSetCorrectAnswerSection();
+
+        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get back in the response container, the response area should get errored and \'Error: Please set a correct answer\' error message should be displayed', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .should('have.class', 'isActiveForDropping')
+                .click();
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .should('not.have.class', 'isActiveForDropping')
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .should('have.length', 2);
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .contains('Response 2')
+                        .should('be.visible');
+                });
+            fillInTheGapsDragAndDropPage.steps.verifyErroredStateOfResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.errorMessage()
+                .verifyInnerText('Error: Please set a correct answer.')
+                .and('be.visible');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyErroredStateOfResponseAreaWithCSSAndA11yInSetCorrectAnswerSection();
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Preview tab\'', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyInactiveStateOfResponseAreasAndDraggableOptionsWithCSSAndA11yInPreviewTab();
+
+        fillInTheGapsDragAndDropPage.tests.verifyActiveStateOfResponseAreaAndDraggableOptionsWithCSSAndA11yInPreviewTab();
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfResponseAreaWhenDraggableOptionIsDeselectedInPreviewTab();
+
+        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInPreviewTab(0, 'Response 1');
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .contains('Response 1')
+                .should('not.exist');
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .should('have.length', 1);
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyFilledResponseAreaWithCSSAndA11yInPreviewTab();
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfPartiallyFilledResponseAreasInPreviewTab();
+
+        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the response container and the response area should get filled with the new draggable option', () => {
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Response 2', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInPreviewTab(0, 'Response 2');
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(1);
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .contains('Response 1')
+                .should('exist')
+                .and('be.visible');
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .should('have.length', 1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInPreviewTab();
+
+        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get back in the response container', () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.previewDraggableOptionsWrapper()
+                .click();
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .should('have.length', 2);
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .contains('Response 2')
+                .should('be.visible');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyMovingDraggableOptionFromOneResponseAreaToAnotherInPreviewTab();
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Set correct answer\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.selectResponseOptionsLayout('Grouped');
+            fillInTheGapsDragAndDropPage.steps.addGroupTitle(0, 'Group title A');
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            fillInTheGapsDragAndDropPage.addGroupButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.addGroupTitle(1, 'Group title B');
+            fillInTheGapsDragAndDropPage.groupResponseContainer()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(optionsForResponses2);
+                });
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyInactiveStateOfResponseAreasAndDraggableOptionsWithCSSAndA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyActiveStateOfResponseAreaAndDraggableOptionsWithCSSAndA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyInactiveStateOfResponseAreaWhenDraggableOptionIsDeselectedInSetCorrectAnswerSection();
+
+        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the respective group of the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 1');
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 2']);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, optionsForResponses2);
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyFilledResponseAreaWithCSSAndA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfPartiallyFilledResponseAreasWhenDraggableOptionsIsSelectedInSetCorrectAnswerSection();
+
+        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the respective group of the response container and the response area should get filled with the new draggable option', () => {
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Response 3', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 3');
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForResponses);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['Response 4']);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifySelectedStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDeselectedStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInSetCorrectAnswerSection();
+
+        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get removed from the response area, it should return in the respective group of the response container, the response area should get errored and \'Error: Please set a correct answer\' error message should be displayed', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .should('have.class', 'isActiveForDropping')
+                .click();
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .should('not.have.class', 'isActiveForDropping');
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForResponses);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, optionsForResponses2);
+            fillInTheGapsDragAndDropPage.steps.verifyErroredStateOfResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.errorMessage()
+                .verifyInnerText('Error: Please set a correct answer.')
+                .and('be.visible');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyErroredStateOfResponseAreaWithCSSAndA11yInSetCorrectAnswerSection();
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Preview tab\'', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.selectResponseOptionsLayout('Grouped');
+            fillInTheGapsDragAndDropPage.steps.addGroupTitle(0, 'Group title A');
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            fillInTheGapsDragAndDropPage.addGroupButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.addGroupTitle(1, 'Group title B');
+            fillInTheGapsDragAndDropPage.groupResponseContainer()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(optionsForResponses2);
+                });
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyInactiveStateOfResponseAreasAndDraggableOptionsWithCSSAndA11yInPreviewTab();
+
+        fillInTheGapsDragAndDropPage.tests.verifyActiveStateOfResponseAreaAndDraggableOptionsWithCSSAndA11yInPreviewTab();
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfResponseAreaWhenDraggableOptionIsDeselectedInPreviewTab();
+
+        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the respective group of the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInPreviewTab(0, 'Response 1');
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 2']);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, optionsForResponses2);
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyFilledResponseAreaWithCSSAndA11yInPreviewTab();
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfPartiallyFilledResponseAreasInPreviewTab();
+
+        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the respective group of the response container and the response area should get filled with the new draggable option', () => {
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Response 3', 0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInPreviewTab(0, 'Response 3');
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(1);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForResponses);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['Response 4']);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInPreviewTab();
+
+        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get removed from the response area and it should return in the respective group of the response container', () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.previewTabDraggableOptionsWrapper('fill in the gaps - drag and drop')
+                .should('have.class', 'isActiveForDropping')
+                .click();
+            fillInTheGapsDragAndDropPage.previewTabDraggableOptionsWrapper('fill in the gaps - drag and drop')
+                .should('not.have.class', 'isActiveForDropping');
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForResponses);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, optionsForResponses2);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyMovingDraggableOptionFromOneResponseAreaToAnotherInPreviewTab();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDrop/fillInTheGapsDragAndDropEditTabBasic.js

@@ -0,0 +1,198 @@
+import { commonComponents } from "../../../pages/components";
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create Item page - Fill in the gaps - drag and drop: Question Instructions, Question, Response options, Set Correct Answer', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps - drag and drop question type');
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps - drag and drop question type');
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Question input field', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Question\' label and input field should be displayed and should be prefilled with the text- \"Sample \'Lorem Ipsum\' text along with two response tokens with text \'Response\' should be present', () => {
+            fillInTheGapsDragAndDropPage.questionLabel()
+                .verifyInnerText('Question');
+            fillInTheGapsDragAndDropPage.questionInputField()
+                .should('have.text', 'Lorem ipsum dolor sit amet, 1Responseclose onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget 2Responseclose tempus tellus dapibus.');
+            fillInTheGapsDragAndDropPage.responseToken()
+                .should('have.length', 2);
+            fillInTheGapsDragAndDropPage.responseToken()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .find('content')
+                        .should('have.text', 'Response');
+                });
+        });
+
+        it('The response tokens should be displayed with a numeric count along with a close button in the question input field', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.steps.verifyResponseTokenIndexAndCloseButton(index)
+            };
+        });
+
+        it('When the user switches to the Preview tab, the sample \'Lorem Ipsum\' text along with two response fields should be displayed in the question field', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab()
+            fillInTheGapsDragAndDropPage.previewTabQuestionField()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n tempus tellus dapibus.');
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .should('have.length', 2)
+                .and('be.visible');
+        });
+
+        it('When user hovers over the response areas, \'Response field #\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the response field', () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .each(($element, count) => {
+                    cy.wrap($element)
+                        .verifyTooltip(`Response field ${count + 1}`);
+                });
+        });
+
+        it('When the user edits text in the question input field then the updated question should be displayed in the preview tab', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.questionInputField()
+                .click()
+                .type(' Lorem Ipsum')
+                .should('have.text', 'Lorem ipsum dolor sit amet, 1Responseclose onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget 2Responseclose tempus tellus dapibus. Lorem Ipsum')
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabQuestionField()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n tempus tellus dapibus. Lorem Ipsum');
+        });
+
+        it('When the user focuses in the question input field, the CKEditor toolbar should be displayed with a \'+Response\' button and when the user clicks on \'+Response\' button, a response token in the question input field, a response field along with \'Response #\' label in the \'Set correct answer\' section, a \'Response #\' accordion in the additional settings accordion and a new response field the \'Preview tab\' should get added', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.questionInputField()
+                .click();
+            fillInTheGapsDragAndDropPage.ckEditorAddResponseButton()
+                .should('be.visible');
+            fillInTheGapsDragAndDropPage.ckEditorAddResponseButton()
+                .click();
+            cy.log('Checking if 3rd response token gets added in the question input field with \'3\' count and a close icon')
+            fillInTheGapsDragAndDropPage.steps.verifyResponseTokenIndexAndCloseButton(2)
+            cy.log('Checking if 3rd response field gets added in the set correct answer section with \'Response 3\' label and when user hovers on the response fields, then a \'Response field #\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the response field')
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(2)
+                .should('be.visible');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseFieldLabel()
+                .eq(2)
+                .verifyInnerText('Response 3')
+                .and('be.visible');
+            for (let index = 0; index < fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea().length; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .realHover();
+                fillInTheGapsDragAndDropPage.tooltipText()
+                    .should('have.text', `Response field ${count + 1}`);
+                cy.log('Focusing away from the response area')
+                cy.get("body")
+                    .realHover({ position: "topLeft" });
+                fillInTheGapsDragAndDropPage.tooltipText()
+                    .should('not.exist');
+            }
+            cy.log('Checking if 3rd response accordion gets added in the additional settings panel with \'Response 3\' label')
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+            fillInTheGapsDragAndDropPage.additionalSettingsResponseAccordion()
+                .eq(2)
+                .verifyInnerText('Response 3')
+                .and('be.visible');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab()
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .should('have.length', 3)
+                .and('be.visible');
+            fillInTheGapsDragAndDropPage.previewTabQuestionField()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n tempus tellus dapibus. Lorem Ipsum');
+        })
+
+        it('When the user clicks on the \'close\' button present on a response token, the response token in the question input field should get removed and the count of the response tokens present in the question input field should get updated accordingly, response field along with \'Response #\' label in the \'Set correct answer\' section, \'Response #\' accordion in the additional settings accordion and the respective response field in the \'Preview tab\' should also get removed', () => {
+            cy.log('Pre step: Switching to Edit tab and deleting a response')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseToken(1);
+            cy.log('Checking if 3rd response token gets removed from the question input field and the numeric counts get updated')
+            fillInTheGapsDragAndDropPage.responseToken()
+                .eq(2)
+                .should('not.exist');
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.steps.verifyResponseTokenIndexAndCloseButton(index)
+            };
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(2)
+                .should('not.exist');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseFieldLabel()
+                .eq(2)
+                .should('not.exist');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseFieldLabel()
+                .each(($element, index) => {
+                    cy.wrap($element)
+                        .verifyInnerText(`Response ${index + 1}`);
+                });
+            fillInTheGapsDragAndDropPage.additionalSettingsResponseAccordion()
+                .eq(2)
+                .should('not.exist');
+            fillInTheGapsDragAndDropPage.additionalSettingsResponseAccordion()
+                .each(($element, index) => {
+                    cy.wrap($element)
+                        .verifyInnerText(`Response ${index + 1}`);
+                });
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab()
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .should('have.length', 2)
+                .and('be.visible');
+            fillInTheGapsDragAndDropPage.previewTabQuestionField()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget tempus tellus dapibus. Lorem Ipsum');
+        });
+
+        it('CSS of Question input field contents', { tags: 'css' }, () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.questionInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            fillInTheGapsDragAndDropPage.responseToken()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular)
+            fillInTheGapsDragAndDropPage.responseTokenCloseButton()
+                .should('have.css', 'border', `1px solid ${css.color.activeButtons}`);
+        });
+
+        it('When the user removes all response tokens from the question input field, an error message \'Error: Minimum one response token is required.\' should be displayed', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseToken(0);
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseToken(0);
+            fillInTheGapsDragAndDropPage.errorMessage()
+                .verifyInnerText('Error: Minimum one response token is required.');
+        });
+
+        commonComponents.tests.verifyCSSAnda11yOfErrorMessage()
+
+        fillInTheGapsDragAndDropPage.tests.addTokenAndVerifyMinimumOneTokenRequiredErrorMessageNotExist()
+
+        fillInTheGapsDragAndDropPage.tests.verifyQuestionInputFieldPlaceholderText();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDrop/fillInTheGapsDragAndDropEditTabScoringTypes.js

@@ -0,0 +1,107 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+let optionsForResponses = ['Response 1', 'Response 2'];
+
+describe('Create Item Page: Fill in the gaps - drag and drop: Edit tab scoring types and set correct answer section (Correct answer tab)', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Autoscored: All or Nothing scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps - drag and drop question type');
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultResponseLabelAndResponseAreasInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultDraggableOptionsInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyPointsFieldErrorState(10);
+
+        fillInTheGapsDragAndDropPage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for AutoScored: Partial equal weights scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps - drag and drop question type');
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAutoScoredPartialEqualWeightsScoringEditTabContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultResponseLabelAndResponseAreasInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultDraggableOptionsInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyScoreForPartialEqualWeightsWhenResponseTokenIsAdded();
+
+        fillInTheGapsDragAndDropPage.tests.verifyAutoScoredPartialEqualWeightsScoringEditTabFunctionality();
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for AutoScored: Partial different weights scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps - drag and drop question type');
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAutoScoredPartialDifferentWeightsScoringEditTabContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultResponseLabelAndResponseAreasInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultDraggableOptionsInSetCorrectAnswerSection();
+
+        it('When user adds an answer in the response area then the \'Points per response\' input field should be enabled', () => {
+            cy.log('Pre step: adding input in the option fields')
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            optionsForResponses.forEach((responseText, index) => {
+                fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea(responseText, index);
+                fillInTheGapsDragAndDropPage.pointsInputField()
+                    .eq(index)
+                    .should('be.enabled');
+            });
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAutoScoredPartialDifferentWeightsScoringEditTabFunctionality()
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Manually Scored scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps - dropdown question type');
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        it('User should be able to select \'Manually scored\' scoring type from scoring type dropdown', () => {
+            fillInTheGapsDragAndDropPage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored')
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyManuallyScoredScoringContents()
+        fillInTheGapsDragAndDropPage.tests.verifyPointsFieldErrorState(10);
+        fillInTheGapsDragAndDropPage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Non Scored scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps - dropdown question type');
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyEditTabNonScoredScoringSectionContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultResponseLabelAndResponseAreasInSetCorrectAnswerSection();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultDraggableOptionsInSetCorrectAnswerSection();
+    });
+});