itemengine-cypress-automation 1.0.119 → 1.0.121

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -1,742 +1,203 @@
-import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, draggableOptionsContainer, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase, draggableOptionContainer, draggableOptionsSectionComponent, questionInputFieldComponent } from "./components"
+import constants from "../fixtures/constants";
+import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
-let optionsForResponses = ['Response 1', 'Response 2'];
+import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer } from "./components"
 
 const selectors = {
-    ...scoringSectionBase,
-    ...createQuestionBasePage,
-    ...additionalSettingsPanel,
+    ...fillInTheGapsDragAndDropCommonComponents,
     ...questionInstructionsComponent,
-    ...commonComponents,
-    ...fillInTheGapsCommonComponents,
-    ...autoScoredSetCorrectAnswerSection,
-    ...autoScoredAdditionalSettings,
-    ...autoScoredPreviewBase,
-    ...autoScoredScoringSectionMultipleResponsesType,
-    ...optionsWrapperComponent,
-    ...previewScoringAndShowCorrectAnswerComponent,
-    ...draggableOptionContainer,
-    ...draggableOptionsSectionComponent,
     ...questionInputFieldComponent,
-    //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"]'),
+    //Specify correct answer section
+    dropzoneSpecifyCorrectAnswerSection: () => cy.get('[class="droppable-area"] [role="button"]'),
+    optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.draggable-selected-item'),
+
     //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'),
+    questionContainerPreviewTab: () => cy.get('.question-item-container'),
+    dropzonePreviewTab: () => cy.get('[class*="DroppableHotspotstyle__DroppableHotspotWrapper"]'),
+    dropzoneContainerPreviewTab: () => cy.get('.answer-status-response-preview-wrapper'),
+    optionContainerOptionsPreviewTab: () => cy.get('.no-split-pane-wrapper .draggable-selected-item'),
+    dropzoneWrapperPreviewTab: () => cy.get('.label-image-with-dnd-canvas-wrapper .cell'),
+    dropzoneNumeration: () => cy.get('[class*="DroppableHotspotstyle__NumerationDiv"]')
 }
 
 const steps = {
     ...createQuestionBasePage.steps,
-    ...questionInstructionsComponent.steps,
-    ...additionalSettingsPanel.steps,
-    ...scoringSectionBase.steps,
-    ...fillInTheGapsCommonComponents.steps,
-    ...autoScoredSetCorrectAnswerSection.steps,
-    ...autoScoredPreviewBase.steps,
-    ...autoScoredScoringSection.steps,
-    ...autoScoredAdditionalSettings.steps,
     ...optionsWrapperComponent.steps,
-    ...autoScoredScoringSectionMultipleResponsesType.steps,
-    ...previewScoringAndShowCorrectAnswerComponent.steps,
-    ...draggableOptionContainer.steps,
-    ...draggableOptionsSectionComponent.steps,
-    ...questionInputFieldComponent.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()
+    ...scoringSectionBaseEditTab.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...fillInTheGapsDragAndDropCommonComponents.steps,
+    ...correctIncorrectAnswerLabelComponent.steps,
+    ...questionInstructionsComponent.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...ckEditorToolbar.steps,
+    ...equationEditorFlyout.steps,
+    /**
+     * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
+     * @param {Object} optionsObject - An object where keys are option texts and values are dropzone indices.
+     */
+    clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection: (optionsObject) => {
+        Object.entries(optionsObject).forEach(([optionText, dropzoneIndex]) => {
+            fillInTheGapsDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection()
+                .contains(optionText)
+                .click();
+            fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(dropzoneIndex)
+                .click({ force: true });
+        });
+    },
+
+    /**
+     * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
+     * @param {Object} optionsObject - An object where keys are option texts and values are dropzone indices.
+     */
+    clickAndDropOptionInDropzonePreviewTab: (optionsObject) => {
+        Object.entries(optionsObject).forEach(([optionText, dropzoneIndex]) => {
+            fillInTheGapsDragAndDropPage.optionContainerOptionsPreviewTab()
+                .contains(optionText)
+                .click();
+            fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+                .eq(dropzoneIndex)
+                .click({ force: true });
+        });
+    },
+
+    /**
+    * @description Verifies the text content of a specific preview tab dropzone element.
+    * @param {number} count - The index of the preview tab dropzone element to verify (zero-based).
+    * @param {string} text - The expected text content to match against the inner text of the specified dropzone element.
+    */
+    verifyDropzoneTextPreviewTab: (count, text) => {
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), count), text);
+    },
+
+    verifyDropzoneNumeration: () => {
+        fillInTheGapsDragAndDropPage.dropzoneNumeration()
+            .each(($element, index) => {
+                cy.wrap($element)
+                    .should('have.text', `${index + 1}`)
+            });
+    },
+
+    /**
+   * Verifies the correct option icon for a specified dropzone in the Preview Tab.
+   * @param {number} optionIndex - The index of the option to verify.
+   */
+    verifyCorrectOptionIcon: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.dropzoneContainerPreviewTab()
             .eq(optionIndex)
-            .should('not.have.class', 'item-selected');
-    },
-
-    verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection: (optionIndex) => {
-        fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
+            .within(() => {
+                fillInTheGapsDragAndDropCommonComponents.tickIconWrapper()
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            });
+    },
+
+    /**
+    * @description Verifies the incorrect option icon for a specified dropzone in the Preview Tab.
+    * @param {number} optionIndex - The index of the option to verify.
+    */
+    verifyIncorrectOptionIcon: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.dropzoneContainerPreviewTab()
             .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()
+            .within(() => {
+                fillInTheGapsDragAndDropCommonComponents.tickIconWrapper()
+                    .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
+            });
+    },
+
+    /**
+    * @description Verifies the absence of a correct/incorrect option icon for a specified option in the Preview Tab.
+    * @param {number} optionIndex - The index of the option to verify.
+    */
+    verifyCorrectIncorrectIconNotExist: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.dropzoneContainerPreviewTab()
             .eq(optionIndex)
-            .should('not.have.class', 'item-selected');
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropCommonComponents.tickIconWrapper(), 'notExist');
+            });
     },
 
-    verifyActiveStateOfDraggableOptionInPreviewTab: (optionIndex) => {
-        fillInTheGapsDragAndDropPage.previewTabDraggableOption()
+    /**
+     * @description Verifies that the image in the Preview tab has the correct source and alt text.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDraggableOptionWithImageInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.optionContainerOptionsPreviewTab()
             .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()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+    },
+
+    /**
+     * @description Verifies that the bold text in the Preview tab is correct.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDraggableOptionWithBoldTextInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.optionContainerOptionsPreviewTab()
             .eq(optionIndex)
-            .should('not.have.class', 'isActiveForDrop');
-    },
-
-    verifyInactiveStateOfFilledResponseAreaInPreviewTab: (optionIndex) => {
-        fillInTheGapsDragAndDropPage.previewTabResponseArea()
+            .find('strong')
+            .should('have.text', 'This is a bold option');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+    },
+
+    /**
+     * @description Verifies that the equation text in the Preview tab is correct.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDraggableOptionWithEquationTextInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.optionContainerOptionsPreviewTab()
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+    },
+
+    /**
+     * @description Verifies that the image in the Preview tab has the correct source and alt text.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDropzoneWithImageInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
             .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,
-    ...autoScoredScoringSectionMultipleResponsesType.tests,
-    ...draggableOptionContainer.tests,
-    ...draggableOptionsSectionComponent.tests,
-    ...questionInputFieldComponent.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')
-            questionInputFieldComponent.questionInputField()
-                .click();
-            questionInputFieldComponent.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');
-                });
-        });
-
-        //Failing due to https://redmine.zeuslearning.com/issues/547859
-        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'));
-        });
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
     },
 
-    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();
-        });
+    /**
+     * @description Verifies that the equation text in the Preview tab is correct.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDropzoneWithEquationTextInPreviewTab: (optionIndex) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .eq(optionIndex)
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
     },
 
-    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);
-        });
+    /**
+    * @description Verifies that the preview dropzone option at a specified index is disabled.
+    * @param {number} dropzoneIndex - The index of the preview dropzone option to verify (zero-based).
+    */
+    verifyPreviewDropzoneOptionDisabled: (dropzoneIndex) => {
+        utilities.verifyElementDisabled(fillInTheGapsDragAndDropPage.dropzonePreviewTab().eq(dropzoneIndex));
     },
 
-    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');
-        });
+    /**
+   * @description Verifies the text content of a specific preview tab dropzone element.
+   * @param {number} count - The index of the preview tab dropzone element to verify (zero-based).
+   * @param {string} text - The expected text content to match against the inner text of the specified dropzone element.
+   */
+    verifyDropzoneContainsTextPreviewTab: (count, text) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .eq(count)
+            .contains(text);
     },
-
-    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
+    steps
 }