itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/components/draggableOptionsSectionComponent.js

@@ -0,0 +1,280 @@
+import utilities from "../../support/helpers/utilities"
+import { optionsWrapperComponent } from "./optionsWrapperComponent";
+const draggableOptionsDropdownListOptions = ['Standard', 'Grouped'];
+const css = Cypress.env('css');
+
+const selectors = {
+    draggableOptionsLabel: () => cy.get('.response-option-label'),
+    draggableOptionsLayoutLabel: () => cy.get('#Draggable-options-layout-dropdown-label'),
+    draggableOptionsLayoutDropdown: () => cy.get('#Draggable-options-layout-select'),
+    draggableOptionsLayoutDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Draggable-options-layout-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Draggable-options-layout-dropdown-label"] [role="option"]')
+        }
+    },
+    optionsForDragAndDropLabel: () => cy.get('.cloze-with-drag-and-drop-options-label'),
+    groupTab: () => cy.get('[data-ngie-testid*="group"][data-ngie-testid*="-tab"]'),
+    groupResponseContainer: () => cy.get('.group-container-box'),
+    groupTitleLabel: () => cy.get('.group-title'),
+    groupTitleInputField: () => cy.get('.group-title-input [aria-label="Group title"]'),
+    addGroupButton: () => cy.get('.add-group-wrapper .ngie-button'),
+    closeGroupTab: () => cy.get('[class*="CloseButton"]')
+}
+
+const steps = {
+    expandDraggableOptionsLayoutDropdown: () => {
+        draggableOptionsSectionComponent.draggableOptionsLayoutDropdown()
+            .click();
+    },
+
+    /**
+     * Selects an option from the Draggable Options Layout dropdown.
+     * @param {string} listOption - The option to be selected from the dropdown.
+     */
+    selectOptionFromDraggableOptionsLayoutDropdown: (listOption) => {
+        draggableOptionsSectionComponent.draggableOptionsLayoutDropdownListOptions(listOption)
+            .click();
+    },
+
+    /**
+     * Verifies the active state of a group tab based on its index.
+     * @param {number} index - The index of the group tab to be verified.
+     */
+    verifyGroupTabActiveState: (index) => {
+        utilities.getNthElement(draggableOptionsSectionComponent.groupTab(), index)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * Adds a group title to the input field and verifies its value.
+     * @returns {void}
+     */
+    addGroupTitle: (groupTitle) => {
+        draggableOptionsSectionComponent.groupTitleInputField()
+            .type(groupTitle)
+            .should('have.value', groupTitle);
+    },
+
+    addGroup: () => {
+        draggableOptionsSectionComponent.addGroupButton()
+            .click();
+    },
+
+    /**
+     * Deletes a group based on its index.
+     * @param {number} groupIndex - The index of the group to be deleted.
+     */
+    deleteGroup: (groupIndex) => {
+        draggableOptionsSectionComponent.groupTab()
+            .eq(groupIndex)
+            .within(() => {
+                draggableOptionsSectionComponent.closeGroupTab()
+                    .click();
+            });
+    },
+
+    /**
+     * Verifies the visibility state of the close icon for a group tab based on its index.
+     * @param {number} groupIndex - The index of the group to be verified.
+     */
+    verifyGroupTabCloseIconVisible: (groupIndex) => {
+        draggableOptionsSectionComponent.groupTab()
+            .eq(groupIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.closeGroupTab(), 'visible');
+            });
+    },
+
+    verifyGroup1TabCloseIconNotExists: () => {
+        draggableOptionsSectionComponent.groupTab()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.closeGroupTab(), 'notExist');
+            });
+    },
+
+    verifyGroupedOptionsSectionTitleAndInputField: () => {
+        utilities.verifyInnerText(draggableOptionsSectionComponent.groupTitleLabel(), 'Group title');
+        utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.groupTitleLabel(), 'visible');
+        utilities.verifyInputFieldValue(draggableOptionsSectionComponent.groupTitleInputField(), '');
+        utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.groupTitleInputField(), 'visible');
+    },
+
+    /**
+     * Switches to a group tab based on its index.
+     * @param {number} groupIndex - The index of the group tab to switch to.
+     */
+    switchToGroupTab: (groupIndex) => {
+        draggableOptionsSectionComponent.groupTab()
+            .eq(groupIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the label of a group tab based on its index.
+     * @param {number} groupIndex - The index of the group tab to be verified.
+     */
+    verifyGroupTabLabel: (groupIndex) => {
+        utilities.verifyInnerText(utilities.getNthElement(draggableOptionsSectionComponent.groupTab(), groupIndex), `Group ${groupIndex + 1}`)
+    },
+
+    /**
+     * @param {string} groupTitle group title
+     * @param {string[]} optionArray array of options for a particular group
+     * @description add a group with title and options in the response options section 
+     */
+    addGroupWithTitleAndOptionsInDraggableOptionsSection: (groupTitle, optionArray) => {
+        const numOptionsToAdd = Math.max(0, optionArray.length - 2);
+        draggableOptionsSectionComponent.steps.addGroup();
+        draggableOptionsSectionComponent.steps.addGroupTitle(groupTitle);
+        for (let i = 0; i < numOptionsToAdd; i++) {
+            optionsWrapperComponent.steps.addOption();
+        }
+        optionsWrapperComponent.steps.addInputToOptionsInputField(optionArray);
+    },
+}
+
+const tests = {
+    verifyDraggableOptionsLayoutDropdownSectionContents: () => {
+        it('\'Draggable options\' label should be displayed', () => {
+            utilities.verifyInnerText(draggableOptionsSectionComponent.draggableOptionsLabel(), 'Draggable options');
+            utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.draggableOptionsLabel(), 'visible');
+        });
+
+        it('\'Draggable options layout\' label and dropdown should be displayed and option \'Standard\' should be selected by default', () => {
+            utilities.verifyInnerText(draggableOptionsSectionComponent.draggableOptionsLayoutLabel(), 'Draggable options layout');
+            utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.draggableOptionsLayoutDropdown(), 'visible');
+            utilities.verifyInnerText(draggableOptionsSectionComponent.draggableOptionsLayoutDropdown(), 'Standard');
+        });
+
+        it('CSS of \'Draggable options\', \'Draggable options layout\' labels and \'Draggable options layout\' dropdown in default state', { tags: 'css' }, () => {
+            utilities.verifyCSS(draggableOptionsSectionComponent.draggableOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(draggableOptionsSectionComponent.draggableOptionsLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(draggableOptionsSectionComponent.draggableOptionsLayoutDropdown(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.defaultDropdownBorder}`
+            });
+            draggableOptionsSectionComponent.draggableOptionsLayoutDropdown()
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+        });
+
+        it('When the user clicks on \'Draggable options layout\' dropdown, a list of 2 options should open - Standard and Grouped', () => {
+            draggableOptionsSectionComponent.steps.expandDraggableOptionsLayoutDropdown()
+            draggableOptionsDropdownListOptions.forEach((option, count) => {
+                utilities.verifyInnerText(utilities.getNthElement(draggableOptionsSectionComponent.draggableOptionsLayoutDropdownListOptions(), count), option);
+            });
+        });
+
+        it('CSS of \'Draggable options layout\' dropdown and dropdown content in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(draggableOptionsSectionComponent.draggableOptionsLayoutDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(draggableOptionsSectionComponent.draggableOptionsLayoutDropdownListOptions(), 1), {
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(utilities.getNthElement(draggableOptionsSectionComponent.draggableOptionsLayoutDropdownListOptions(), 0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+        });
+
+        it('Accessibility of \'Draggable options layout\' dropdown and dropdown content in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(draggableOptionsSectionComponent.draggableOptionsLayoutDropdown());
+            cy.checkAccessibility(draggableOptionsSectionComponent.draggableOptionsLayoutDropdownListOptions().parents('.dropdown-list-ul'));
+        });
+    },
+
+    verifyGroupedOptionsLayoutSectionContents: () => {
+        it('When the user selects the \'Grouped\' option from the \'Draggable options layout\' dropdown, a section of options with tab \'Group 1\' should be displayed. The \'Group 1\' tab should be in active state. Close icon should not be displayed', () => {
+            draggableOptionsSectionComponent.steps.expandDraggableOptionsLayoutDropdown();
+            draggableOptionsSectionComponent.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            utilities.verifyInnerText(draggableOptionsSectionComponent.groupTab(), 'Group 1');
+            utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.groupTab(), 'visible');
+            draggableOptionsSectionComponent.steps.verifyGroupTabActiveState(0);
+            draggableOptionsSectionComponent.steps.verifyGroup1TabCloseIconNotExists();
+        });
+
+        it('\'Group title\' label and input field should be displayed and by default, the input field should be empty', () => {
+            draggableOptionsSectionComponent.steps.verifyGroupedOptionsSectionTitleAndInputField();
+        });
+
+        it('\'Enter group title\' placeholder should be displayed inside the group title input field, when the user enters text in the input field, the placeholder should disappear and when the user clears the input field, the placeholder text should appear again', () => {
+            draggableOptionsSectionComponent.groupTitleInputField()
+                .should('have.attr', 'placeholder', 'Enter group title');
+            draggableOptionsSectionComponent.steps.addGroupTitle('Group title A')
+            draggableOptionsSectionComponent.groupTitleInputField()
+                .should('not.have.attr', 'placeholder');
+            draggableOptionsSectionComponent.groupTitleInputField()
+                .clear();
+            draggableOptionsSectionComponent.groupTitleInputField()
+                .should('have.attr', 'placeholder', 'Enter group title');
+            cy.log('Post step: adding the group title again')
+            draggableOptionsSectionComponent.steps.addGroupTitle('Group title A')
+        });
+
+        it('CSS of Grouped section contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(draggableOptionsSectionComponent.groupTitleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(draggableOptionsSectionComponent.groupTitleInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(draggableOptionsSectionComponent.addGroupButton(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.medium
+            });
+        });
+
+        it('\'Add Group\' button should be present', () => {
+            utilities.verifyInnerText(draggableOptionsSectionComponent.addGroupButton(), 'Add group')
+            utilities.verifyElementVisibilityState(draggableOptionsSectionComponent.addGroupButton(), 'visible');
+        });
+
+        it('When there is only one group present \'Close\' icon should not be displayed next to \'Group 1\' tab', () => {
+            draggableOptionsSectionComponent.steps.verifyGroup1TabCloseIconNotExists();
+        });
+    },
+
+    addGroupFunctionality: () => {
+        it('When the user clicks on the \'Add Group\' button, a new group should get added with tab \'Group 2\'', () => {
+            draggableOptionsSectionComponent.steps.addGroup();
+            utilities.verifyElementCount(draggableOptionsSectionComponent.groupTab(), 2);
+            utilities.verifyInnerText(utilities.getNthElement(draggableOptionsSectionComponent.groupTab(), 1), 'Group 2');
+        });
+
+        it('By default, the newly added group should have a \'Close\' button next to the group tab, \'Close\' icon should not be displayed next to \'Group 1\' tab, \'Group title\' label and input field, \'Options\' label and 2 option input fields with drag handles and disabled delete buttons', () => {
+            draggableOptionsSectionComponent.steps.verifyGroupTabCloseIconVisible(1);
+            draggableOptionsSectionComponent.steps.verifyGroupedOptionsSectionTitleAndInputField();
+            utilities.verifyElementCount(optionsWrapperComponent.optionWrapper(), 2);
+            optionsWrapperComponent.steps.verifyOptionsContents(0);
+            optionsWrapperComponent.steps.verifyOptionsContents(1);
+        });
+    }
+}
+
+export const draggableOptionsSectionComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/enableOuterBorderComponent.js

@@ -0,0 +1,59 @@
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    enableOuterBorderLabel: () => cy.get('[data-ngie-testid="enable-outer-border-checkbox"] .MuiFormControlLabel-label'),
+    enableOuterBorderCheckbox: () => cy.get('[data-ngie-testid="enable-outer-border-checkbox"] input'),
+}
+
+const steps = {
+    verifyEnableOuterBorderCheckboxCheckedState: () => {
+        enableOuterBorderComponent.enableOuterBorderCheckbox()
+            .should('be.checked');
+    },
+
+    verifyEnableOuterBorderCheckboxUncheckedState: () => {
+        enableOuterBorderComponent.enableOuterBorderCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkEnableOuterBorderCheckbox: () => {
+        enableOuterBorderComponent.enableOuterBorderCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckEnableOuterBorderCheckbox: () => {
+        enableOuterBorderComponent.enableOuterBorderCheckbox()
+            .click()
+            .should('not.be.checked');
+    }
+}
+
+const tests = {
+    verifyEnableOuterBorderContents: () => {
+        it('\'Enable outer border\' label and checkbox should be displayed. By default, \'Enable outer border\' checkbox should be in checked state', () => {
+            utilities.verifyInnerText(enableOuterBorderComponent.enableOuterBorderLabel(), 'Enable outer border');
+            utilities.verifyElementVisibilityState(enableOuterBorderComponent.enableOuterBorderLabel(), 'visible');
+            utilities.verifyElementVisibilityState(enableOuterBorderComponent.enableOuterBorderCheckbox(), 'exist');
+            enableOuterBorderComponent.steps.verifyEnableOuterBorderCheckboxCheckedState();
+        });
+
+        it('CSS of \'Enable outer border\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(enableOuterBorderComponent.enableOuterBorderLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(enableOuterBorderComponent.enableOuterBorderCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+    }
+}
+
+export const enableOuterBorderComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/equationEditorFlyout.js

@@ -1,7 +1,6 @@
 import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
 import constants from "../../fixtures/constants";
 import { dialogBoxBase } from "../dialogBoxBase";
-import { essayResponsePage } from "../essayResponsePage";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -49,7 +48,7 @@ const steps = {
         equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.comma.ariaLabel)
             .click();
         equationEditorFlyout.previewInputField()
-            .type('What is the value of x');
+            .type('What is the value of x?');
         equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.questionMark.ariaLabel)
             .click();
         equationEditorFlyout.previewInputField()
@@ -126,30 +125,6 @@ const tests = {
                         });
                 });
         });
-    },
-
-    verifyEquationEditorFlyoutSymbolCategoriesFunctionality: (categoryName, wordCount) => {
-        let symbols = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
-        let mappedArr = symbols.map(x => x.displayText)
-        it('If the user clicks on the symbol then that symbol should be displayed in the Equation Editor flyout input field', () => {
-            equationEditorFlyout.categoryCharacters()
-                .then($elements => {
-                    const selectorLength = $elements.length;
-                    for (let index = 0; index < selectorLength; index++) {
-                        equationEditorFlyout.categoryCharacters()
-                            .eq(index)
-                            .click();
-                    }
-                });
-            //The equation editor input Field equation is not checked.
-        });
-
-        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField(categoryName)
-        if (categoryName === 'keypad') {
-            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(`1234567890·,+−×÷`, wordCount);
-        } else {
-            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(mappedArr.toString().replaceAll(',', ''), wordCount)
-        }
     }
 }
 export const equationEditorFlyout = {

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -1,4 +1,4 @@
-const defaultFormattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Superscript', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special characters', 'Insert Table'];
+import utilities from "../../support/helpers/utilities";
 
 const selectors = {
     //Basic section
@@ -38,7 +38,7 @@ const selectors = {
     wordLimitReachedWarningMessage: () => cy.get('[data-at="limit-reached"]'),
     //Preview tab
     responseField: () => cy.get('[title="Enter your response to the question here."]'),
-    responseFieldWordCount: () => cy.get('[data-at="character-count"]'),
+    responseFieldWordCount: () => cy.get('[class*="InputLimitLabelWrapper"]'),
 }
 
 const steps = {
@@ -76,9 +76,12 @@ const steps = {
             .should('have.text', textContent);
     },
 
-    verifyResponseFieldWordCount: (countValue) => {
-        essayResponseCommonComponents.responseFieldWordCount()
-            .should('have.text', countValue);
+    /**
+     * @description this function verifies word limit in the preview tab
+     * @param {number} wordLimit as set in the set limit section
+     */
+    verifyResponseFieldWordCount: (wordLimit) => {
+        utilities.verifyInnerText(essayResponseCommonComponents.responseFieldWordCount(), `Maximum ${wordLimit} words`);
     },
 
     verifyWordLimitReachedWarningMessage: () => {
@@ -101,17 +104,38 @@ const steps = {
             .should('have.attr', 'contenteditable', 'false');
     },
 
-    verifyDefaultToolbarOptions: () => {
+    /**
+     * @description Verify the displayed toolbar options
+     * @param {string[]} defaultFormattingOptions Array of toolbar options
+     * @param {string} toolbarOption title of toolbar option after which a separator is visible
+     */
+    verifyDefaultToolbarOptions: (defaultFormattingOptions, toolbarOption) => {
         essayResponseCommonComponents.previewTabToolbarOption()
             .each(($element, count) => {
                 cy.wrap($element)
-                    .should('have.attr', 'title', defaultFormattingOptionsPreviewTab[count])
+                    .should('have.attr', 'title', defaultFormattingOptions[count])
                     .and('be.visible');
             });
-        essayResponseCommonComponents.previewTabToolbarOption('Underline (Ctrl+U)')
+        essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
             .next()
             .should('have.attr', 'role', 'separator')
             .should('be.visible');
+    },
+
+    /**
+     * @param {string} toolbarOption title of the toolbar options
+     * @description Select the toolbar option in preview tab.
+     */
+    selectPreviewTabToolbarOption: (toolbarOption) => {
+        if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format') {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .click()
+                .should('have.attr', 'aria-pressed', 'false');
+        } else {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .click()
+                .should('have.attr', 'aria-pressed', 'true');
+        }
     }
 }
 

package/cypress/pages/components/figOverImageCanvasComponent.js

@@ -0,0 +1,53 @@
+import utilities from "../../support/helpers/utilities";
+import { backgroundImageUploadComponent } from "./backgroundImageUploadComponent";
+
+const selectors = {
+    insertResponseAreaButton: () => cy.get('button[aria-label*="insert"]').eq(0),
+    selectResponseAreaButton: () => cy.get('button[aria-label*="select"]').eq(0),
+    canvasImage: () => cy.get('.canvas-image'),
+    canvasImagePreviewTab: () => cy.get('.background-image'),
+    removeDropzoneButton: () => cy.get('.remove-button')
+}
+
+const steps = {
+    /**
+     * @param {number} xCoordinateInPercentage - The x co-ordinate for position of the response area
+     * @description Adds response area to the canvas.
+     */
+    insertResponseArea: (yCoordinateInPercentage) => {
+        figOverImageCanvasComponent.insertResponseAreaButton()
+            .click();
+        figOverImageCanvasComponent.canvasImage()
+            .then(($element) => {
+                const imageHeight = $element[0].clientHeight;
+                const xCoordinate = 25;
+                const yCoordinate = yCoordinateInPercentage * imageHeight / 100;
+                figOverImageCanvasComponent.canvasImage()
+                    .click(xCoordinate, yCoordinate, { force: true });
+            });
+        figOverImageCanvasComponent.selectResponseAreaButton()
+            .click();
+    },
+
+    verifyImageIsUploaded: () => {
+        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImage(), 'visible');
+        utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
+        //Note: wait is added here for the image to fully load, else the first two response areas gets overlapped
+        cy.wait(2000);
+    },
+
+    /**
+     * @description this function removes a dropzone from the canvas
+     * @param {number} index of the dropzone to be removed
+     */
+    removeDropzone: (index) => {
+        figOverImageCanvasComponent.removeDropzoneButton()
+            .eq(index)
+            .click({ force: true });
+    }
+}
+
+export const figOverImageCanvasComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/fillInTheGapsCommonComponents.js

@@ -1,4 +1,3 @@
-import { commonComponents } from "./commonComponents";
 import { autoScoredScoringSectionMultipleResponsesType } from "./autoScoredScoringSectionMultipleResponsesType";
 import { scoringSectionBase } from "./scoringSectionBase";
 import { autoScoredSetCorrectAnswerSection } from "./autoScoredSetCorrectAnswerSection";
@@ -7,11 +6,6 @@ import { autoScoredAdditionalSettings } from "./autoScoredAdditionalSettings";
 const css = Cypress.env('css');
 
 const selectors = {
-    questionLabel: () => cy.get('.cloze-with-text-question-wrapper .title-casing'),
-    questionInputField: () => cy.get('.cloze-with-text-question-wrapper [title="question"]'),
-    responseToken: () => cy.get('.cke_widget_wrapper_add_response_element'),
-    responseTokenCloseButton: () => cy.get('.add_response_close'),
-    ckEditorAddResponseButton: () => cy.get('[title="Add Response"]'),
     setCorrectAnswerResponseFieldLabel: () => cy.get('.cloze-with-text-form-control-wrapper .input-field-label'),
     additionalSettingsResponseAccordion: () => cy.get('.response-setting-container .ngie-accordion-summary'),
     previewTabQuestionContainer: () => cy.get('[class*="ClozeWithTextPreviewstyle__QuestionPreviewWrapper"]'),
@@ -44,15 +38,6 @@ const selectors = {
 }
 
 const steps = {
-    deleteAResponseToken: (tokenIndex) => {
-        fillInTheGapsCommonComponents.responseToken()
-            .eq(tokenIndex)
-            .within(() => {
-                fillInTheGapsCommonComponents.responseTokenCloseButton()
-                    .click();
-            });
-    },
-
     verifyIncorrectOptionCrossmarkIcon: (index) => {
         fillInTheGapsCommonComponents.previewTabResponseWrapper()
             .eq(index)
@@ -76,19 +61,6 @@ const steps = {
             .should('not.exist');
     },
 
-    verifyResponseTokenIndexAndCloseButton: (responseTokenIndex) => {
-        fillInTheGapsCommonComponents.responseToken()
-            .eq(responseTokenIndex)
-            .find('marker')
-            .should('have.text', responseTokenIndex + 1);
-        fillInTheGapsCommonComponents.responseToken()
-            .eq(responseTokenIndex)
-            .within(() => {
-                fillInTheGapsCommonComponents.responseTokenCloseButton()
-                    .should('be.visible');
-            });
-    },
-
     addPartialDifferentWeightsPoints: (responsePointsArray) => {
         responsePointsArray.forEach((points, count) => {
             scoringSectionBase.pointsInputField()
@@ -100,13 +72,6 @@ const steps = {
         });
     },
 
-    addResponseTokenInQuestionField: () => {
-        fillInTheGapsCommonComponents.questionInputField()
-            .click();
-        fillInTheGapsCommonComponents.ckEditorAddResponseButton()
-            .click();
-    },
-
     expandResponseAccordion: (responseIndex) => {
         fillInTheGapsCommonComponents.responseAccordionWrapper()
             .eq(responseIndex)
@@ -194,36 +159,6 @@ const tests = {
         });
     },
 
-    addTokenAndVerifyMinimumOneTokenRequiredErrorMessageNotExist: () => {
-        it('When the user adds a token in the question field, then the error message should disappear', () => {
-            fillInTheGapsCommonComponents.ckEditorAddResponseButton()
-                .click();
-            fillInTheGapsCommonComponents.responseToken()
-                .eq(0)
-                .should('be.visible');
-            commonComponents.errorMessage()
-                .should('not.exist');
-        });
-    },
-
-    verifyQuestionInputFieldPlaceholderText: () => {
-        it('When the user clears the question input field, \'Enter question\' placeholder text should be displayed and when the user enters text in the input field, the placeholder should disappear', () => {
-            fillInTheGapsCommonComponents.questionInputField()
-                .click()
-                .type('{backspace}'.repeat(175))
-                .should('have.text', '')
-                .blur();
-            fillInTheGapsCommonComponents.questionInputField()
-                .and('have.attr', 'data-cke-editorplaceholder', 'Enter question');
-            fillInTheGapsCommonComponents.questionInputField()
-                .click()
-                .type('Lorem Ipsum')
-                .should('have.text', '​​​​​​​Lorem Ipsum');
-            fillInTheGapsCommonComponents.questionInputField()
-                .and('not.have.attr', 'data-cke-editorplaceholder', 'Enter question');
-        });
-    },
-
     verifyAutoScoredPartialEqualWeightsScoringEditTabContents: () => {
         it('User should be able to select \'Partial - equal weights\' scoring type', () => {
             autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox()