itemengine-cypress-automation 1.0.2

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -0,0 +1,742 @@
+import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, dragAndDropSetCorrectAnswerCheckboxComponents, draggableOptionsContainer, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase } from "./components"
+import { dragAndDropResponseOptions } from "./components/dragAndDropResponseOptions";
+const css = Cypress.env('css');
+let optionsForResponses = ['Response 1', 'Response 2'];
+
+const selectors = {
+    ...scoringSectionBase,
+    ...createQuestionBasePage,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...commonComponents,
+    ...fillInTheGapsCommonComponents,
+    ...autoScoredSetCorrectAnswerSection,
+    ...autoScoredAdditionalSettings,
+    ...autoScoredPreviewBase,
+    ...autoScoredScoringSectionMultipleResponsesType,
+    ...optionsWrapperComponent,
+    ...previewScoringAndShowCorrectAnswerComponent,
+    ...dragAndDropResponseOptions,
+    ...draggableOptionsContainer,
+    //TODO: Can be shifted to optionsWrapperComponent once https://redmine.zeuslearning.com/issues/518498 is resolved
+    setCorrectAnswerResponseArea: () => cy.get('[class="droppable-area"] [role="button"]'),
+    setCorrectAnswerDraggableOption: () => cy.get('.draggable-selected-item'),
+    randomizeOptionsLabel: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] .MuiFormControlLabel-label'),
+    reuseOptionsLabel: () => cy.get('[data-ngie-testid="reuse-options-checkbox"] .MuiFormControlLabel-label'),
+    hideDragHandleLabel: () => cy.get('[data-ngie-testid="hide-drag-handle-checkbox"] .MuiFormControlLabel-label'),
+    matchFromAllResponsesLabel: () => cy.get('[data-ngie-testid="match-from-all-responses-checkbox"] .MuiFormControlLabel-label'),
+    randomizeOptionsCheckbox: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] input'),
+    reuseOptionsCheckbox: () => cy.get('[data-ngie-testid="reuse-options-checkbox"] input'),
+    hideDragHandleCheckbox: () => cy.get('[data-ngie-testid="hide-drag-handle-checkbox"] input'),
+    matchFromAllResponsesCheckbox: () => cy.get('[data-ngie-testid="match-from-all-responses-checkbox"] input'),
+    setCorrectAnswerResponseAreaWrapper: () => cy.get('[class*="DroppableHotspotstyle__DroppableHotspotWrapper"]'),
+    setCorrectAnswerDraggableOptionContainer: () => cy.get('[class*="ClozeWithDragAndDropstyles__DraggableWrapper"]'),
+    //Preview tab
+    previewTabResponseArea: () => cy.get('.no-split-pane-wrapper [class="droppable-area"] [role="button"]'),
+    previewTabQuestionField: () => cy.get('.no-split-pane-wrapper div[class*="ClozeWithDragAndDropstyles__QuestionItemContainer"]'),
+    previewTabDraggableOption: () => cy.get('.no-split-pane-wrapper .draggable-selected-item'),
+    previewDraggableOptionsWrapper: () => cy.get('.no-split-pane-wrapper .draggable-wrapper'),
+    previewTabCorrectAnswerContainer: () => cy.get('[class*="ClozeWithDragAndDropstyles__CorrectAnswerTextWrapper"]'),
+    previewTabCorrectAnswerLabel: () => fillInTheGapsDragAndDropPage.previewTabCorrectAnswerContainer().find('[class*="ClozeWithDragAndDropstyles__CorrectAnswerLabel"]'),
+    previewTabCorrectAnswerResponseNumerationWrapper: () => cy.get('[class*="ClozeWithDragAndDropstyles__NumerationWrapper"]'),
+    previewTabCorrectAnswerResponseWrapper: () => fillInTheGapsDragAndDropPage.previewTabCorrectAnswerResponseNumerationWrapper().parents('[class*="ClozeWithDragAndDropstyles__ItemWrapper"]'),
+    previewTabCorrectAnswerResponseText: () => cy.get('[class*="ClozeWithDragAndDropstyles__ItemWrapper"] .question-text-wrapper'),
+    previewTabResponseAreaWrapper: () => cy.get('.no-split-pane-wrapper [class*="DroppableHotspotstyle__DroppableHotspotWrapper"]'),
+    draggableOption: () => cy.get('.draggable-selected-item'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...scoringSectionBase.steps,
+    ...fillInTheGapsCommonComponents.steps,
+    ...autoScoredSetCorrectAnswerSection.steps,
+    ...autoScoredPreviewBase.steps,
+    ...autoScoredScoringSection.steps,
+    ...autoScoredAdditionalSettings.steps,
+    ...optionsWrapperComponent.steps,
+    ...dragAndDropResponseOptions.steps,
+    ...autoScoredScoringSectionMultipleResponsesType.steps,
+    ...dragAndDropResponseOptions.steps,
+    ...draggableOptionsContainer.steps,
+    ...dragAndDropSetCorrectAnswerCheckboxComponents.steps,
+    ...previewScoringAndShowCorrectAnswerComponent.steps,
+    setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea: (optionName, responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+            .contains(optionName)
+            .click();
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+            .eq(responseAreaIndex)
+            .click();
+    },
+
+    previewTabClickAndDropDraggableOptionInResponseArea: (optionName, responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+            .contains(optionName)
+            .click();
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(responseAreaIndex)
+            .click();
+    },
+
+    verifyIncorrectOptionCrossmarkIcon: (index) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(index)
+            .parents('[class="droppable-area"]')
+            .prev('.tick-icon-wrapper')
+            .should('have.class', 'icon-incorrect')
+            .and('be.visible');
+    },
+
+    verifyCorrectOptionCheckmarkIcon: (index) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(index)
+            .parents('[class="droppable-area"]')
+            .prev('.tick-icon-wrapper')
+            .should('have.class', 'icon-correct')
+            .and('be.visible');
+    },
+
+    verifyCorrectIncorrectIconNotVisible: (index) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(index)
+            .parents('[class="droppable-area"]')
+            .prev('.tick-icon-wrapper')
+            .should('not.exist');
+    },
+
+    verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount: (correctAnswerArray, optionNumerationArray) => {
+        fillInTheGapsDragAndDropPage.previewTabCorrectAnswerContainer()
+            .should('be.visible');
+        fillInTheGapsDragAndDropPage.previewTabCorrectAnswerLabel()
+            .verifyInnerText('Correct answers:');
+        correctAnswerArray.forEach((responseFieldText, count) => {
+            fillInTheGapsDragAndDropPage.previewTabCorrectAnswerResponseNumerationWrapper()
+                .eq(count)
+                .should('have.text', optionNumerationArray[count]);
+            fillInTheGapsDragAndDropPage.previewTabCorrectAnswerResponseText()
+                .eq(count)
+                .verifyInnerText(responseFieldText);
+        });
+        fillInTheGapsDragAndDropPage.previewTabCorrectAnswerResponseWrapper()
+            .should('have.length', correctAnswerArray.length);
+    },
+
+    verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection: (responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+            .eq(responseAreaIndex)
+            .should('have.class', 'isEmpty');
+    },
+
+    verifyActiveStateOfResponseAreaInSetCorrectAnswerSection: (responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+            .eq(responseAreaIndex)
+            .should('have.class', 'isActiveForDrop');
+    },
+
+    verifyInactiveStateOfDraggableOptionInSetCorrectAnswerSection: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+            .eq(optionIndex)
+            .should('not.have.class', 'item-selected');
+    },
+
+    verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+            .eq(optionIndex)
+            .should('have.class', 'item-selected');
+        fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+            .should('have.class', 'itemSelected');
+    },
+
+    verifyErroredStateOfResponseAreaInSetCorrectAnswerSection: (responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+            .eq(responseAreaIndex)
+            .should('have.class', 'isEmpty')
+            .and('have.class', 'error');
+    },
+
+    verifyInactiveStateOfResponseAreaInPreviewTab: (responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(responseAreaIndex)
+            .should('have.class', 'isEmpty');
+    },
+
+    verifyActiveStateOfResponseAreaInPreviewTab: (responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(responseAreaIndex)
+            .should('have.class', 'isActiveForDrop');
+    },
+
+    verifyInactiveStateOfDraggableOptionInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+            .eq(optionIndex)
+            .should('not.have.class', 'item-selected');
+    },
+
+    verifyActiveStateOfDraggableOptionInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+            .eq(optionIndex)
+            .should('have.class', 'item-selected');
+    },
+
+    verifyFilledResponseAreaInSetCorrectAnswerSection: (responseAreaIndex, optionText) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseAreaWrapper()
+            .eq(responseAreaIndex)
+            .should('have.class', 'isNotEmpty');
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+            .eq(responseAreaIndex)
+            .should('have.text', optionText)
+            .and('be.visible');
+    },
+
+    verifyInactiveStateOfFilledResponseAreaInSetCorrectAnswerSection: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+            .eq(optionIndex)
+            .should('not.have.class', 'isActiveForDrop');
+    },
+
+    verifyInactiveStateOfFilledResponseAreaInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(optionIndex)
+            .should('not.have.class', 'isActiveForDrop');
+    },
+
+    verifyFilledResponseAreaInPreviewTab: (responseAreaIndex, optionText) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseAreaWrapper()
+            .eq(responseAreaIndex)
+            .should('have.class', 'isNotEmpty');
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .eq(responseAreaIndex)
+            .should('have.text', optionText)
+            .and('be.visible');
+    },
+
+    clickAndDropDraggableOptionInResponseContainerOfSetCorrectAnswerSection: (optionName) => {
+        fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+            .contains(optionName)
+            .click();
+        fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper('fill in the gaps - drag and drop')
+            .click();
+    },
+
+    clickAndDropDraggableOptionInResponseContainerOfPreviewTab: (optionName) => {
+        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .contains(optionName)
+            .click();
+        fillInTheGapsDragAndDropPage.previewDraggableOptionsWrapper('fill in the gaps - drag and drop')
+            .click();
+    }
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...fillInTheGapsCommonComponents.tests,
+    ...scoringSectionBase.tests,
+    ...autoScoredScoringSection.tests,
+    ...commonComponents.tests,
+    ...additionalSettingsPanel.tests,
+    ...autoScoredSetCorrectAnswerSection.tests,
+    ...autoScoredAdditionalSettings.tests,
+    ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...dragAndDropResponseOptions.tests,
+    ...autoScoredScoringSectionMultipleResponsesType.tests,
+    ...dragAndDropSetCorrectAnswerCheckboxComponents.tests,
+    ...draggableOptionsContainer.tests,
+    verifyDefaultResponseLabelAndResponseAreasInSetCorrectAnswerSection: () => {
+        it('Two empty response areas with labels \'Response 1\' and \'Response 2\' should be displayed', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseFieldLabel()
+                    .eq(index)
+                    .verifyInnerText(`Response ${index + 1}`);
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('be.visible')
+                    .verifyInnerText('');
+            };
+        });
+    },
+
+    verifyDefaultDraggableOptionsInSetCorrectAnswerSection: () => {
+        it('The two empty draggable options should be displayed along with their drag handles', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .should('have.length', 2)
+                .each(($element) => {
+                    cy.wrap($element)
+                        .should('be.visible')
+                        .verifyInnerText('')
+                        .find('.drag-indicator-icon')
+                        .should('be.visible');
+                });
+        });
+    },
+
+    verifyDraggableOptionContentsInAlternateTab: () => {
+        it('The draggable options set by the user should also be displayed in the response container of the alternate tab in the \'Set correct answer\' section', () => {
+            draggableOptionsContainer.steps.verifyDraggableResponsesSetCorrectAnswer('fill in the gaps - drag and drop', optionsForResponses);
+        });
+    },
+
+    verifyScoreForPartialEqualWeightsWhenResponseTokenIsAdded: () => {
+        it('When user adds a response token to the question, one more response area should be displayed in the response container of the set correct answer section and points per response score should be updated accordingly', () => {
+            cy.log('Pre-step: Adding a response token to question field')
+            fillInTheGapsDragAndDropPage.questionInputField()
+                .click();
+            fillInTheGapsDragAndDropPage.ckEditorAddResponseButton()
+                .click();
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .should('have.length', '3');
+            fillInTheGapsDragAndDropPage.partialEqualWeightsPointsPerResponseScore()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .verifyInnerText('1.33');
+                });
+        });
+    },
+
+    verifyReuseOptionScoring: () => {
+        it('When the user has set same answer options in the \'Set correct answer\' section, then the user should be awarded full points on attempting the question with reused options', () => {
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Response 1', 1);
+            fillInTheGapsDragAndDropPage.previewScoreText()
+                .verifyInnerText('5/5');
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+        });
+    },
+
+    verifyHideDragHandleFunctionalityInSetCorrectAnswerSection: () => {
+        it('When the \'Hide drag handle\' functionality is disabled, then the draggable options displayed in response container of the \'Set correct answer\' section should have a drag handle', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .each($element => {
+                    cy.wrap($element)
+                        .within(() => {
+                            fillInTheGapsDragAndDropPage.draggableOptionDragIcon()
+                                .should('be.visible');
+                        });
+                });
+        });
+
+        it('When the user enables the \'Hide drag handle\' functionality, then the draggable options displayed in response container of the \'Set correct answer\' section should not have a drag handle', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.hideDragHandleCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .each($element => {
+                    cy.wrap($element)
+                        .within(() => {
+                            fillInTheGapsDragAndDropPage.draggableOptionDragIcon()
+                                .should('not.exist');
+                        });
+                });
+        });
+    },
+
+    verifyInactiveStateOfResponseAreasAndDraggableOptionsWithCSSAndA11yInSetCorrectAnswerSection: () => {
+        it('When the user has not selected any draggable option, the draggable options and response areas should be in inactive state', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .each($element => {
+                            cy.wrap($element)
+                                .should('not.have.class', 'item-selected');
+                        });
+                });
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .each($element => {
+                    cy.wrap($element)
+                        .should('have.class', 'isEmpty');
+                });
+        });
+
+        it('CSS of inactive state of draggable options and response areas', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .and('have.css', 'background-color', `${css.color.defaultBackground}`)
+                .find('.drag-indicator-icon')
+                .should('have.css', 'fill', `${css.color.activeButtons}`);
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
+        });
+
+        it('Accessibility of inactive state of draggable options and response areas', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper().parents('.cloze-width-drag-and-drop-set-correct-response'));
+        });
+    },
+
+    verifyActiveStateOfResponseAreaAndDraggableOptionsWithCSSAndA11yInSetCorrectAnswerSection: () => {
+        it('When the user selects a draggable option, it should get in selected state and all the response areas should get in active state', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .contains('Response 1')
+                .click();
+            cy.log('checking active state of selected draggable option')
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection(0);
+            cy.log('checking default state of unselected draggable option(s)')
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .each(($element, index) => {
+                            if (index !== 0) {
+                                cy.wrap($element)
+                                    .should('not.have.class', 'item-selected');
+                            };
+                        });
+                });
+            cy.log('checking active state of all response areas')
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+        });
+
+        it('CSS of active state of draggable options and response areas', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .eq(0)
+                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
+                .and('have.css', 'background-color', `${css.color.figActiveComponentBg}`)
+                .find('.drag-indicator-icon')
+                .should('have.css', 'fill', `${css.color.activeButtons}`);
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
+        });
+
+        it('Accessibility of active state of draggable options and response areas', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper().parents('.cloze-width-drag-and-drop-set-correct-response'));
+        });
+    },
+
+    verifyInactiveStateOfResponseAreaWhenDraggableOptionIsDeselectedInSetCorrectAnswerSection: () => {
+        it('When the user deselects the draggable option, it should get in deselected state and the response areas should return to the inactive state', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .contains('Response 1')
+                .click();
+            cy.log('Checking default state of deselected draggable option')
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfDraggableOptionInSetCorrectAnswerSection(0);
+            cy.log('Checking default inactive state of response areas')
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+        });
+    },
+
+    verifyFilledResponseAreaWithCSSAndA11yInSetCorrectAnswerSection: () => {
+        it('When the user has dropped a draggable option inside a response area, drag handle should not be displayed in the response area', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseAreaWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOptionDragIcon()
+                        .should('not.exist');
+                });
+        });
+
+        it('CSS of filled response area', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .should('have.css', 'background-color', css.color.transparent)
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of filled response area', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper().parents('.cloze-width-drag-and-drop-set-correct-response'));
+        });
+    },
+
+    verifyStateOfPartiallyFilledResponseAreasWhenDraggableOptionsIsSelectedInSetCorrectAnswerSection: () => {
+        it('When the response areas are partially filled and the user selects a draggable option, then only the empty response area should get in active state', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .contains('Response 2')
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfFilledResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+            cy.log('Post step: deselecting the draggable option')
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .contains('Response 2')
+                .click();
+        });
+    },
+
+    verifySelectedStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInSetCorrectAnswerSection: () => {
+        it('When the user selects a draggable option from the filled response area, the response container should get active for dropping the option, the filled response area should not get in active state and only the empty response area should get active', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOptionsWrapper()
+                .should('have.class', 'isActiveForDropping');
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfFilledResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+        });
+
+        it('CSS of draggable option from the filled response area in selected state', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
+                .and('have.css', 'background-color', `${css.color.figActiveComponentBg}`);
+        });
+
+        it('Accessibility of draggable option from the filled response area in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea().parents('.cloze-width-drag-and-drop-set-correct-response'));
+        });
+    },
+
+    verifyDeselectedStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInSetCorrectAnswerSection: () => {
+        it('When the user deselects a draggable option from the filled response area, the draggable option should return to the inactive state', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfFilledResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInSetCorrectAnswerSection(1);
+        });
+    },
+
+    verifyErroredStateOfResponseAreaWithCSSAndA11yInSetCorrectAnswerSection: () => {
+        it('CSS of error state of response area', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.css', 'border', `2px dashed ${css.color.errorFieldBorder}`)
+                .and('have.css', 'background-color', `${css.color.textAreaErrorBg}`);
+        });
+
+        it('Accessibility of error state of response area', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea().parents('.cloze-width-drag-and-drop-set-correct-response'));
+        });
+
+        it('When the user selects a draggable option when a response area is in errored state, the error state of the response area should persist and the user should be able to drop an option into the errored response area', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+                .contains('Response 1')
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyErroredStateOfResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 1');
+        });
+
+        it('When the user has filled the errored response area, the response area should get filled with the dropped option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('not.have.class', 'isEmpty error');
+            fillInTheGapsDragAndDropPage.errorMessage()
+                .should('not.exist');
+        });
+
+        it('The user should be able to move a draggable option from one response area to another response area and the empty response area should get errored and \'Error: Please set a correct answer\' error message should be displayed', () => {
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(1)
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(1, 'Response 1');
+            fillInTheGapsDragAndDropPage.steps.verifyErroredStateOfResponseAreaInSetCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.errorMessage()
+                .verifyInnerText('Error: Please set a correct answer.')
+                .and('be.visible');
+        });
+    },
+
+    verifyInactiveStateOfResponseAreasAndDraggableOptionsWithCSSAndA11yInPreviewTab: () => {
+        it('When the user has not selected any draggable option, the draggable options and response areas should be in inactive state', () => {
+            fillInTheGapsDragAndDropPage.previewTabDraggableOptionsWrapper('fill in the gaps - drag and drop')
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .each($element => {
+                            cy.wrap($element)
+                                .should('not.have.class', 'item-selected');
+                        });
+                });
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .each($element => {
+                    cy.wrap($element)
+                        .should('have.class', 'isEmpty');
+                });
+        });
+
+        it('CSS of inactive state of draggable options and response areas', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .and('have.css', 'background-color', `${css.color.defaultBackground}`)
+                .find('.drag-indicator-icon')
+                .should('have.css', 'fill', `${css.color.activeButtons}`);
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
+        });
+
+        it('Accessibility of inactive state of draggable options and response areas', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.previewDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
+        });
+    },
+
+    verifyActiveStateOfResponseAreaAndDraggableOptionsWithCSSAndA11yInPreviewTab: () => {
+        it('When the user selects a draggable option, it should get in selected state and all the response areas should get in active state', () => {
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .contains('Response 1')
+                .click();
+            cy.log('checking active state of selected draggable option')
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0);
+            cy.log('checking default state of unselected draggable option')
+            fillInTheGapsDragAndDropPage.previewTabDraggableOptionsWrapper('fill in the gaps - drag and drop')
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .each(($element, index) => {
+                            if (index !== 0) {
+                                cy.wrap($element)
+                                    .should('not.have.class', 'item-selected');
+                            };
+                        });
+                });
+            cy.log('checking active state of all response areas')
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInPreviewTab(0);
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInPreviewTab(1);
+        });
+
+        it('CSS of active state of draggable options and response areas', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.previewTabDraggableOptionsWrapper('fill in the gaps - drag and drop')
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOption()
+                        .eq(0)
+                        .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
+                        .and('have.css', 'background-color', `${css.color.figActiveComponentBg}`)
+                        .find('.drag-indicator-icon')
+                        .should('have.css', 'fill', `${css.color.activeButtons}`);
+                });
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
+        });
+
+        it('Accessibility of active state of draggable options and response areas', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.previewDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
+        });
+    },
+
+    verifyStateOfResponseAreaWhenDraggableOptionIsDeselectedInPreviewTab: () => {
+        it('When the user deselects the draggable option, it should get in deselected state and the response areas should return to the inactive state', () => {
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .contains('Response 1')
+                .click();
+            cy.log('Checking default state of deselected draggable option')
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfDraggableOptionInPreviewTab(0);
+            cy.log('Checking default inactive state of response areas')
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(0);
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(1);
+        });
+    },
+
+    verifyFilledResponseAreaWithCSSAndA11yInPreviewTab: () => {
+        it('When the user has dropped a draggable option inside a response area, drag handle should not be displayed in the response area', () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseAreaWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.draggableOptionDragIcon()
+                        .should('not.exist');
+                });
+        });
+
+        it('CSS of filled response area', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of filled response area', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.previewDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
+        });
+    },
+
+    verifyStateOfPartiallyFilledResponseAreasInPreviewTab: () => {
+        it('When the response areas are partially filled and the user selects a draggable option, then only the empty response area should get in active state', () => {
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .contains('Response 2')
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfFilledResponseAreaInPreviewTab(0);
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInPreviewTab(1);
+            cy.log('Post step: deselecting the draggable option')
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .contains('Response 2')
+                .click();
+        });
+    },
+
+    verifyStateOfDraggableOptionInFilledResponseAreaWithCSSandA11yInPreviewTab: () => {
+        it('When the user selects a draggable option from the filled response area, the response container should get active for dropping the option, the filled response area should not get in active state and only the empty response area should get active', () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.previewTabDraggableOptionsWrapper('fill in the gaps - drag and drop')
+                .should('have.class', 'isActiveForDropping');
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfFilledResponseAreaInPreviewTab(0);
+            fillInTheGapsDragAndDropPage.steps.verifyActiveStateOfResponseAreaInPreviewTab(1);
+        });
+
+        it('CSS of draggable option from the filled response area in selected state', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
+                .and('have.css', 'background-color', `${css.color.figActiveComponentBg}`);
+        });
+
+        it('Accessibility of draggable option from the filled response area in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.previewDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
+        });
+
+        it('When the user deselects a draggable option from the filled response area, the draggable option should return to the inactive state', () => {
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfFilledResponseAreaInPreviewTab(0);
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(1);
+        });
+    },
+
+    verifyMovingDraggableOptionFromOneResponseAreaToAnotherInPreviewTab: () => {
+        it('The user should be able to move a draggable option from one response area to another response area', () => {
+            cy.log('Pre step: Setting up an option in the response area')
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Response 1', 0);
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .click();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(1)
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfResponseAreaInPreviewTab(0);
+            fillInTheGapsDragAndDropPage.steps.verifyFilledResponseAreaInPreviewTab(1, 'Response 1');
+        });
+    },
+
+    verifyHideDragHandleFunctionalityInPreviewTab: () => {
+        it('When the \'Hide drag handle\' functionality is disabled, then the draggable options displayed in response container of the preview tab should have a drag handle', () => {
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .each($element => {
+                    cy.wrap($element)
+                        .within(() => {
+                            fillInTheGapsDragAndDropPage.draggableOptionDragIcon()
+                                .should('be.visible');
+                        });
+                });
+        });
+
+        it('When the \'Hide drag handle\' functionality is enabled, then the draggable options displayed in response container of the preview tab should not have a drag handle', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.hideDragHandleCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+                .each($element => {
+                    cy.wrap($element)
+                        .within(() => {
+                            fillInTheGapsDragAndDropPage.draggableOptionDragIcon()
+                                .should('not.exist');
+                        });
+                });
+        });
+    }
+}
+
+export const fillInTheGapsDragAndDropPage = {
+    ...selectors,
+    steps,
+    tests
+}