itemengine-cypress-automation 1.0.2

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -0,0 +1,884 @@
+import utilities from "../../support/helpers/utilities";
+import { additionalSettingsPanel } from "./additionalSettingsPanel";
+import { autoScoredAdditionalSettings } from "./autoScoredAdditionalSettings";
+import { autoScoredScoringSectionMultipleResponsesType } from "./autoScoredScoringSectionMultipleResponsesType";
+import { autoScoredSetCorrectAnswerSection } from "./autoScoredSetCorrectAnswerSection";
+import { commonComponents } from "./commonComponents";
+import { figOverImageCommonComponent } from "./figOverImageCommonComponent";
+import { scoringSectionBase } from "./scoringSectionBase";
+import { specialAndCustomSpecialCharactersComponent } from "./specialAndCustomSpecialCharactersComponent";
+const css = Cypress.env('css');
+
+const selectors = {
+    responseFieldSetCorrectAnswerSection: () => cy.get('.response-input-field input[type="text"]'),
+    responseFieldWrapperSetCorrectAnswerSection: () => cy.get('.response-input-field'),
+    responseFieldLabelSetCorrectAnswerSection: () => cy.get('.response-label'),
+    caseSensitiveLabel: () => cy.get('.ngie-checkbox-control-label').eq(0),
+    caseSensitiveCheckbox: () => cy.get('.ngie-checkbox input').eq(0),
+    ignoreSpacesBeforeAndAfterLabel: () => cy.get('.ngie-checkbox-control-label').eq(1),
+    ignoreSpacesBeforeAndAfterCheckbox: () => cy.get('.ngie-checkbox input').eq(1),
+    matchFromAllResponsesLabel: () => cy.get('.ngie-checkbox-control-label').eq(2),
+    matchFromAllResponsesCheckbox: () => cy.get('.ngie-checkbox input').eq(2),
+    responseFieldPreviewTab: () => cy.get('.edit-question-preview-wrapper .response-input-field input[type="text"]'),
+    responseFieldWrapperPreviewTab: () => cy.get('.edit-question-preview-wrapper .response-input-field'),
+    previewTabCorrectAnswerContainer: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectAnswerWrapper"]'),
+    previewTabCorrectAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectResponseWrapper"] [aria-label*="Response"]'),
+    previewTabResponseWrapper: () => cy.get('.draggable-input .cloze-with-text-answer-status-response-preview-wrapper'),
+    previewTabCorrectAnswerLabel: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectAnswerLabel"]'),
+    responseNumeration: () => cy.get('.response-input-adornment'),
+    setCharacterLimitLabel: () => cy.get('[aria-labelledby="Set character limit"]'),
+    setCharacterLimitInputField: () => cy.get('input[aria-label="Set character limit"]'),
+    typeOfAnswerInputLabel: () => cy.get('[id*="Type-of-Answer-input"][id*="dropdown-label"]'),
+    typeOfAnswerInputDropdown: () => cy.get('[id*="Type-of-Answer-input"][id*="select"]'),
+    typeOfAnswerInputDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Type-of-Answer-input"][aria-labelledby*="dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Type-of-Answer-input"][aria-labelledby*="dropdown-label"] li[role="option"]')
+        }
+    },
+    multilineResponseLabel: () => cy.get('[data-ngie-testid="multiline-response-checkbox"] .MuiFormControlLabel-label'),
+    multilineResponseCheckbox: () => cy.get('[data-ngie-testid="multiline-response-checkbox"] input'),
+    multilineResponseAreaSetCorrectAnswerSection: () => cy.get('.response-multiline-input-field textarea'),
+    multilineResponseAreaPreviewTab: () => cy.get('.cloze-with-text-response-preview-wrapper .response-multiline-input-field textarea'),
+    spellCheckLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"] .MuiFormControlLabel-label'),
+    spellCheckCheckbox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input[type="checkbox"]'),
+    previewTabResponseFieldSpecialCharactersButton: () => cy.get('.cloze-with-text-response-preview-wrapper .custon-special-character-button'),
+}
+
+const steps = {
+    /**
+     * Enters text into a response field in the 'Set correct answer' section.
+     * @param {number} index - The index of the response field to target.
+     * @param {string} text - The text to be entered into the response field.
+     * @returns {void}
+     */
+    enterTextInResponseFieldSetCorrectAnswerSection: (index, text) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(index)
+            .clear()
+            .type(text)
+            .blur();
+    },
+
+    /**
+     * Clears the response field in the correct answer section at the specified index.
+     * @param {number} index - The index of the response field to clear.
+     */
+    clearResponseFieldSetCorrectAnswerSection: (index) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(index)
+            .clear();
+    },
+
+    /**
+     * Clears the response field in the preview tab at the specified index.
+     * @param {number} index - The index of the response field to clear.
+     */
+    clearResponseFieldPreviewTab: (index) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(index)
+            .clear();
+    },
+
+    /**
+     * Verifies the text value in a response field in the 'Set Correct Answer' section.
+     * @param {number} index - The index of the response field to target.
+     * @param {string} value - The expected text value to compare against.
+     * @returns {void}
+     */
+    verifyTextInResponseFieldSetCorrectAnswerSection: (index, value) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(index)
+            .should('have.attr', 'value', value);
+    },
+
+    /**
+     * Enters text into a response field in the preview tab
+     * @param {number} index - The index of the response field to target.
+     * @param {string} text - The text to be entered into the response field.
+     * @returns {void}
+     */
+    enterTextInResponseFieldPreviewTab: (index, text) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(index)
+            .clear()
+            .type(text)
+            .blur();
+    },
+
+    /**
+     * Verifies the text value in a response field in the 'Set Correct Answer' section.
+     * @param {number} index - The index of the response field to target.
+     * @param {string} value - The expected text value to compare against.
+     * @returns {void}
+     */
+    verifyTextInResponseFieldPreviewTab: (index, value) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(index)
+            .should('have.attr', 'value', value);
+    },
+
+    verifyMatchFromAllResponsesLabelAndCheckboxEnabledState: () => {
+        fillInTheGapsTextCommonComponent.matchFromAllResponsesLabel()
+            .should('not.have.class', 'Mui-disabled');
+        fillInTheGapsTextCommonComponent.matchFromAllResponsesCheckbox()
+            .and('not.be.disabled');
+    },
+
+    verifyCaseSensitiveCheckboxNotChecked: () => {
+        fillInTheGapsTextCommonComponent.caseSensitiveCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyCaseSensitiveCheckBoxChecked: () => {
+        fillInTheGapsTextCommonComponent.caseSensitiveCheckbox()
+            .should('be.checked')
+    },
+
+    verifyIgnoreSpacesBeforeAndAfterCheckboxChecked: () => {
+        fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterCheckbox()
+            .should('be.checked');
+    },
+
+    verifyIgnoreSpacesBeforeAndAfterCheckboxNotChecked: () => {
+        fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyMatchFromAllResponsesLabelAndCheckboxDisabledState: () => {
+        fillInTheGapsTextCommonComponent.matchFromAllResponsesLabel()
+            .should('have.class', 'Mui-disabled');
+        fillInTheGapsTextCommonComponent.matchFromAllResponsesCheckbox()
+            .and('be.disabled');
+    },
+
+    //Note: Need to move this in figOverImageCommonComponent file along with the selectors once the checkbox enhancement build is uploaded
+    checkMatchFromAllResponsesCheckbox: () => {
+        fillInTheGapsTextCommonComponent.matchFromAllResponsesCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * @param {string[]} correctAnswerArray array of correct answer response
+     * @param {number[]} optionNumerationArray numeration of the correct answer response
+     * @description verify the correct answer responses in the correct answer container
+     */
+    verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount: (correctAnswerArray, optionNumerationArray) => {
+        fillInTheGapsTextCommonComponent.previewTabCorrectAnswerContainer()
+            .should('be.visible')
+            .within(() => {
+                correctAnswerArray.forEach((responseFieldText, count) => {
+                    fillInTheGapsTextCommonComponent.previewTabCorrectAnswerResponseWrapper()
+                        .eq(count)
+                        .should('have.value', responseFieldText);
+                });
+                optionNumerationArray.forEach((optionNumeration, count) => {
+                    fillInTheGapsTextCommonComponent.responseNumeration()
+                        .eq(count)
+                        .should('have.text', `${optionNumeration}`);
+                });
+            });
+        fillInTheGapsTextCommonComponent.previewTabCorrectAnswerResponseWrapper()
+            .should('have.length', optionNumerationArray.length);
+    },
+
+    /**
+     * Verify that the incorrect option at the specified index has a cross-mark icon and is visible.
+     * @param {number} index - The index of the incorrect option to verify.
+     */
+    verifyIncorrectOptionCrossmarkIcon: (index) => {
+        fillInTheGapsTextCommonComponent.previewTabResponseWrapper()
+            .eq(index)
+            .find('.tick-icon-wrapper')
+            .should('have.class', 'icon-incorrect')
+            .and('be.visible');
+    },
+
+    /**
+     * Verify that the correct option at the specified index has a check-mark icon and is visible.
+     * @param {number} index - The index of the correct option to verify.
+     */
+    verifyCorrectOptionCheckmarkIcon: (index) => {
+        fillInTheGapsTextCommonComponent.previewTabResponseWrapper()
+            .eq(index)
+            .find('.tick-icon-wrapper')
+            .should('have.class', 'icon-correct')
+            .and('be.visible');
+    },
+
+    verifyPreviewTabCorrectAnswerContainerNotExist: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.previewTabCorrectAnswerContainer(), 'notExist');
+    },
+
+    checkCaseSensitiveCheckbox: () => {
+        fillInTheGapsTextCommonComponent.caseSensitiveCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckIgnoreSpacesBeforeAndAfterCheckbox: () => {
+        fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    uncheckMatchFromAllResponsesCheckbox: () => {
+        fillInTheGapsTextCommonComponent.matchFromAllResponsesCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    /**
+     * @param {number} index - The index of the option to verify.
+     * @description Verify that the option at the specified index does not have a check-mark or cross-mark.
+     */
+    verifyCheckmarkOrCrossmarkNotVisible: (index) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.previewTabResponseWrapper().eq(index).find('.tick-icon-wrapper'), 'notExist');
+    },
+
+    /**
+     * Verify the character limit input field value.
+     * @param {string} value - The expected character limit value to match the input field value.
+     */
+    verifySetCharacterLimitInputFieldValue: (value) => {
+        fillInTheGapsTextCommonComponent.setCharacterLimitInputField()
+            .should('have.value', value)
+    },
+
+    /**
+     * Verify that the placeholder attribute does not exist in a response field in the Correct Answer section.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseFieldNotExists: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .should('not.have.attr', 'placeholder');
+    },
+
+    /**
+     * Verify that the placeholder attribute does not exist in a response field in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifyPlaceholderAttributeInPreviewTabResponseFieldNotExists: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(responseFieldIndex)
+            .should('not.have.attr', 'placeholder');
+    },
+
+    /**
+     * Verify the placeholder attribute in a response field in the Correct Answer section.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} placeholderText - The expected placeholder text to match the attribute.
+     */
+    verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseField: (responseFieldIndex, placeholderText) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'placeholder', placeholderText);
+    },
+
+    /**
+     * Verify the placeholder attribute in a response field in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} placeholderText - The expected placeholder text to match the attribute.
+     */
+    verifyPlaceholderAttributeInPreviewTabResponseField: (responseFieldIndex, placeholderText) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'placeholder', placeholderText);
+    },
+
+    /**
+     * @param {index} responseIndex Index of response field
+     * @param {string} ariaLabel Aria-label of response field
+     * @description Verify Aria-label of response field in set correct answer section
+     * @param {number} index of response field in preview tab
+     * @description this function focuses in the preview atb response field
+     */
+    focusInResponseFieldPreviewTab: (index) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(index)
+            .click();
+    },
+
+    /**
+    * @param {index} responseIndex Index of response
+    * @param {string} ariaLabel Aria-label of response
+    * @description Verify aria-label of response in set correct answer section
+    */
+    verifyResponseFieldAriaLabelAttributeInSetCorrectAnswerSection: (responseIndex, ariaLabel) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(responseIndex)
+            .should('have.attr', 'aria-label', ariaLabel);
+    },
+
+    /**
+   * @param {index} responseIndex Index of response field
+   * @param {string} ariaLabel Aria-label of response field
+   * @description Verify Aria-label of response field in preview tab
+   */
+    verifyResponseFieldAriaLabelAttributeInPreviewTab: (responseIndex, ariaLabel) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(responseIndex)
+            .should('have.attr', 'aria-label', ariaLabel);
+    },
+
+    /**
+     * @param {number} responseIndex Index of response field
+     * @description Verify response is displayed in set correct answer section
+     */
+    verifyResponseFieldIsDisplayedInSetCorrectAnswerSection: (responseIndex) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection().eq(responseIndex), 'visible');
+    },
+
+    /**
+     * @param {array} dropdownOptionsArray array of type of answer dropdown options 
+     * @description This function is used to verify the type of answer dropdown options 
+     */
+    verifyTypeOfAnswerDropdownOptions: (dropdownOptionsArray) => {
+        dropdownOptionsArray.forEach((option, count) => {
+            fillInTheGapsTextCommonComponent.typeOfAnswerInputDropdownListOptions()
+                .eq(count)
+                .should('have.text', option);
+        });
+    },
+
+    clickOnTypeOfAnswerDropdown: () => {
+        fillInTheGapsTextCommonComponent.typeOfAnswerInputDropdown()
+            .eq(0)
+            .click();
+    },
+
+    /**
+     * Select a specific option from the "Type of Answer" dropdown.
+     * @param {("Text" | "Number")} option - The option to select from the dropdown.
+     */
+    selectTypeOfAnswerDropdownOption: (option) => {
+        fillInTheGapsTextCommonComponent.typeOfAnswerInputDropdownListOptions(option)
+            .click();
+    },
+
+    setCharacterLimit: (value) => {
+        fillInTheGapsTextCommonComponent.setCharacterLimitInputField()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    verifySetCharacterLimitInputFieldMinimumValue: () => {
+        fillInTheGapsTextCommonComponent.setCharacterLimitInputField()
+            .should('not.have.value', '0')
+            .and('have.value', '1');
+    },
+
+    clearSetCharacterLimitInputField: () => {
+        fillInTheGapsTextCommonComponent.setCharacterLimitInputField()
+            .clear()
+            .blur();
+    },
+
+    /**
+     * Verify the height attribute of a response field in the Correct Answer section.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} height - The expected height value to match the attribute.
+     */
+    verifyHeightResponseFieldSetCorrectAnswerSection: (responseFieldIndex, height) => {
+        fillInTheGapsTextCommonComponent.responseFieldWrapperSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'height', height);
+    },
+
+    /**
+     * Verify the width attribute of a response field in the Correct Answer section.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} width - The expected width value to match the attribute.
+     */
+    verifyWidthResponseFieldSetCorrectAnswerSection: (responseFieldIndex, width) => {
+        fillInTheGapsTextCommonComponent.responseFieldWrapperSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'width', width);
+    },
+
+    /**
+     * Verify the height attribute of a response field in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} height - The expected height value to match the attribute.
+     */
+    verifyHeightResponseFieldPreviewTab: (responseFieldIndex, height) => {
+        fillInTheGapsTextCommonComponent.responseFieldWrapperPreviewTab()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'height', height);
+    },
+
+    /**
+     * Verify the width attribute of a response field in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} width - The expected width value to match the attribute.
+     */
+    verifyWidthResponseFieldPreviewTab: (responseFieldIndex, width) => {
+        fillInTheGapsTextCommonComponent.responseFieldWrapperPreviewTab()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'width', width);
+    },
+
+    verifyTypeOfAnswerLabelAndDropdownResponseAccordion: () => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .within(() => {
+                utilities.verifyInnerText(fillInTheGapsTextCommonComponent.typeOfAnswerInputLabel(), 'Type of answer input');
+                utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.typeOfAnswerInputLabel(), 'visible');
+                utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.typeOfAnswerInputDropdown(), 'visible');
+                utilities.verifyInnerText(fillInTheGapsTextCommonComponent.typeOfAnswerInputDropdown(), 'Text');
+            });
+    },
+
+    /**
+     * Click on the "Type of Answer" dropdown in a response accordion.
+     * @param {number} responseIndex - The index of the response accordion to click the dropdown in.
+     */
+    clickOnTypeOfAnswerDropdownInResponseAccordion: (responseIndex) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseIndex)
+            .within(() => {
+                fillInTheGapsTextCommonComponent.typeOfAnswerInputDropdown()
+                    .click();
+            });
+    },
+
+    /**
+     * Verify the selected option in the "Type of Answer" dropdown in a response accordion.
+     * @param {number} responseIndex - The index of the response accordion to verify.
+     * @param {string} option - The expected option to be selected in the dropdown.
+     */
+    verifySelectedOptionInTypeOfAnswerDropdownInResponseAccordion: (responseIndex, option) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseIndex)
+            .within(() => {
+                utilities.verifyInnerText(fillInTheGapsTextCommonComponent.typeOfAnswerInputDropdown(), option);
+            });
+    },
+
+    verifyMultilineResponseCheckboxNotChecked: () => {
+        fillInTheGapsTextCommonComponent.multilineResponseCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyMultilineResponseForResponseFieldSetCorrectAnswerSectionDisabled: () => {
+        fillInTheGapsTextCommonComponent.responseFieldWrapperSetCorrectAnswerSection()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('not.have.class', 'response-multiline-input-field');
+                // Assert that textarea does not exist
+                cy.wrap($el)
+                    .find('textarea')
+                    .should('not.exist');
+            });
+    },
+
+    verifyMultilineResponseForResponseFieldPreviewTabDisabled: () => {
+        fillInTheGapsTextCommonComponent.responseFieldWrapperPreviewTab()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('not.have.class', 'response-multiline-input-field')
+                // Assert that textarea does not exist
+                cy.wrap($el)
+                    .find('textarea')
+                    .should('not.exist');
+            });
+    },
+
+    checkMultilineResponseCheckbox: () => {
+        fillInTheGapsTextCommonComponent.multilineResponseCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckMultilineResponseCheckbox: () => {
+        fillInTheGapsTextCommonComponent.multilineResponseCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * Enter text in a multiline response area in the set correct answer section.
+     * @param {number} responseFieldIndex - The index of the response field to enter text in.
+     * @param {string} text - The text to enter in the multiline response area.
+     */
+    enterTextInMultilineResponseAreaSetCorrectAnswerSection: (responseFieldIndex, text) => {
+        fillInTheGapsTextCommonComponent.multilineResponseAreaSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .clear()
+            .type(text);
+    },
+
+    /**
+     * Verify the text in a multiline response area in the set correct answer section.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} text - The expected text to be present in the multiline response area.
+     */
+    verifyTextInMultilineResponseAreaSetCorrectAnswerSection: (responseFieldIndex, text) => {
+        fillInTheGapsTextCommonComponent.multilineResponseAreaSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .should('have.text', text);
+    },
+
+    /**
+     * Enter text in a multiline response area in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to enter text in.
+     * @param {string} text - The text to enter in the multiline response area.
+     */
+    enterTextInMultilineResponseAreaPreviewTab: (responseFieldIndex, text) => {
+        fillInTheGapsTextCommonComponent.multilineResponseAreaPreviewTab()
+            .eq(responseFieldIndex)
+            .clear()
+            .type(text);
+    },
+
+    /**
+     * Verify the text in a multiline response area in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     * @param {string} text - The expected text to be present in the multiline response area.
+     */
+    verifyTextInMultilineResponseAreaPreviewTab: (responseFieldIndex, text) => {
+        fillInTheGapsTextCommonComponent.multilineResponseAreaPreviewTab()
+            .eq(responseFieldIndex)
+            .should('have.text', text);
+    },
+
+    verifySpellCheckCheckboxNotChecked: () => {
+        fillInTheGapsTextCommonComponent.spellCheckCheckbox()
+            .should('not.be.checked');
+    },
+
+    /**
+     * Verify that the spell check for a response field in the Correct Answer section is disabled.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifySpellCheckOfResponseFieldSetCorrectAnswerSectionDisabled: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'spellcheck', 'false');
+    },
+
+    /**
+     * Verify that the spell check for a response field in the Correct Answer section is enabled.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifySpellCheckOfResponseFieldSetCorrectAnswerSectionEnabled: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'spellcheck', 'true');
+    },
+
+    /**
+     * Verify that the spell check for a response field in the Preview Tab is disabled.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifySpellCheckOfResponseFieldPreviewTabDisabled: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'spellcheck', 'false');
+    },
+
+    /**
+     * Verify that the spell check for a response field in the Preview Tab is enabled.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifySpellCheckOfResponseFieldPreviewTabEnabled: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(responseFieldIndex)
+            .should('have.attr', 'spellcheck', 'true');
+    },
+
+    checkSpellCheckCheckbox: () => {
+        fillInTheGapsTextCommonComponent.spellCheckCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * Verify the numeration of response fields in the Preview Tab and Correct Answer section.
+     * @param {string[]} numerationArray - An array of expected numeration strings to verify.
+     */
+    verifyPreviewTabResponseFieldAndCorrectAnswerNumeration: (numerationArray) => {
+        numerationArray.forEach((optionNumeration, index) => {
+            fillInTheGapsTextCommonComponent.previewTabResponseWrapper()
+                .eq(index)
+                .within(() => {
+                    fillInTheGapsTextCommonComponent.responseNumeration()
+                        .should('have.text', optionNumeration);
+                });
+            fillInTheGapsTextCommonComponent.previewTabCorrectAnswerResponseWrapper()
+                .eq(index)
+                .parent()
+                .within(() => {
+                    fillInTheGapsTextCommonComponent.responseNumeration()
+                        .should('have.text', optionNumeration);
+                });
+        });
+    },
+
+    /**
+     * @param {number} responseIndex Index of response field in preview tab
+     * @description Verify response field is displayed in preview tab
+     */
+    verifyResponseFieldIsDisplayedInPreviewTab: (responseIndex) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.responseFieldPreviewTab().eq(responseIndex), 'visible');
+    },
+
+    /**
+     * Verify that the special character button is not visible in a response field in the Correct Answer section.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifySpecialCharacterButtonNotVisibleInResponseFieldSetCorrectAnswerSection: (responseFieldIndex) => {
+        specialAndCustomSpecialCharactersComponent.setCorrectAnsResponseFieldSpecialCharactersButton()
+            .eq(responseFieldIndex)
+            .should('not.have.class', 'active-response-input-field')
+            .should('not.be.visible');
+    },
+
+    /**
+     * Focus and verify the special characters button in a response field in the Correct Answer section.
+     * @param {number} responseFieldIndex - The index of the response field to focus and verify.
+     */
+    focusAndVerifySpecialCharactersButtonInResponseFieldSetCorrectAnswerSection: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+            .eq(responseFieldIndex)
+            .click();
+        specialAndCustomSpecialCharactersComponent.setCorrectAnsResponseFieldSpecialCharactersButton()
+            .eq(responseFieldIndex)
+            .should('have.class', 'active-response-input-field')
+            .should('be.visible');
+    },
+
+    /**
+     * Verify that the special character button is not visible in a response field in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to verify.
+     */
+    verifySpecialCharacterButtonNotVisibleInResponseFieldPreviewTab: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.previewTabResponseFieldSpecialCharactersButton()
+            .eq(responseFieldIndex)
+            .should('not.have.class', 'active-response-input-field')
+            .should('not.be.visible');
+    },
+
+    /**
+     * Focus and verify the special characters button in a response field in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to focus and verify.
+     */
+    focusAndVerifySpecialCharactersButtonInResponseFieldPreviewTab: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(responseFieldIndex)
+            .click();
+        fillInTheGapsTextCommonComponent.previewTabResponseFieldSpecialCharactersButton()
+            .eq(responseFieldIndex)
+            .should('have.class', 'active-response-input-field')
+            .should('be.visible');
+    },
+
+    /**
+     * Click on the special characters button in a response field in the Preview Tab.
+     * @param {number} responseFieldIndex - The index of the response field to click the button.
+     */
+    clickOnSpecialCharactersButtonPreviewTab: (responseFieldIndex) => {
+        fillInTheGapsTextCommonComponent.previewTabResponseFieldSpecialCharactersButton()
+            .eq(responseFieldIndex)
+            .click();
+    },
+
+    /**
+     * Verify the numeration of response fields in the Preview Tab.
+     * @param {string[]} optionNumerationArray - An array of expected numeration strings to verify.
+     */
+    verifyResponseFieldNumeration: (optionNumerationArray) => {
+        fillInTheGapsTextCommonComponent.previewTabResponseWrapper()
+            .should('be.visible')
+            .within(() => {
+                optionNumerationArray.forEach((optionNumeration, count) => {
+                    fillInTheGapsTextCommonComponent.responseNumeration()
+                        .eq(count)
+                        .should('have.text', `${optionNumeration}`);
+                });
+            });
+    }
+}
+
+const tests = {
+    ...autoScoredSetCorrectAnswerSection.tests,
+    /**
+     * @param {string} tabName Correct or Alternate tab
+     * @description This function verifies the input field and error states of set correct answer section
+     */
+    verifySetCorrectAnswerTabContentsAndFunctionality: (tabName) => {
+        it('An empty points input field and two empty response fields with labels \'Response 1\' and \'Response 2\' should be present', () => {
+            scoringSectionBase.steps.verifyPointsFieldValue('');
+            for (let index = 0; index < 2; index++) {
+                utilities.verifyInnerText(fillInTheGapsTextCommonComponent.responseFieldLabelSetCorrectAnswerSection().eq(index), `Response ${index + 1}`)
+                utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection().eq(index), 'visible');
+            };
+        });
+
+        it('User should be able to enter text in the empty response field', () => {
+            fillInTheGapsTextCommonComponent.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'Flower');
+            fillInTheGapsTextCommonComponent.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'Flower');
+        });
+
+        it(`When the user has only partially filled response fields out of the available response fields, \'Error: Please set a correct answer.\' validation error message should be thrown along with an error icon on the \'${tabName}\'`, () => {
+            fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection()
+                .eq(1)
+                .focus()
+                .blur();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (tabName == 'Correct tab') {
+                autoScoredSetCorrectAnswerSection.correctTab()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSetCorrectAnswerSection.alternateAnswerTab(1)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSetCorrectAnswerSection.setCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSetCorrectAnswerSection.tests.verifyCSSAndA11yOfAutoScoredSetCorrectAnswerErrorMessage();
+
+        it('CSS of response field error state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsTextCommonComponent.responseFieldWrapperSetCorrectAnswerSection().eq(1), {
+                'background-color': css.color.errorFieldBg
+            });
+            utilities.verifyCSS(fillInTheGapsTextCommonComponent.responseFieldWrapperSetCorrectAnswerSection().eq(1).find('fieldset'), {
+                'border': `1px solid ${css.color.errorFieldBorder}`
+            });
+        });
+
+        it('Accessibility of response field error state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection().parents('.cloze-with-text-response-form-controls-wrapper'));
+        });
+
+        it('When the user has added text in all the available response fields, the error message should disappear', () => {
+            fillInTheGapsTextCommonComponent.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, 'Leaf');
+            fillInTheGapsTextCommonComponent.steps.verifyTextInResponseFieldSetCorrectAnswerSection(1, 'Leaf');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+        });
+
+        autoScoredSetCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(tabName);
+
+        it(`CSS of ${tabName} contents`, { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsTextCommonComponent.responseFieldLabelSetCorrectAnswerSection(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it(`Accessibility of ${tabName} contents`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection().parents('.cloze-with-text-authoring-mode-response-wrapper'));
+        });
+    },
+
+    verifyCorrectResponseConditionSectionDefaultState: () => {
+        it('\'Case sensitive\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsTextCommonComponent.caseSensitiveLabel(), 'Case sensitive');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.caseSensitiveLabel(), 'visible');
+            fillInTheGapsTextCommonComponent.steps.verifyCaseSensitiveCheckboxNotChecked();
+        });
+
+        it('\'Ignore spaces before and after\' functionality label and checkbox should be displayed and by default it should be checked', () => {
+            utilities.verifyInnerText(fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterLabel(), 'Ignore spaces before and after');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterLabel(), 'visible');
+            fillInTheGapsTextCommonComponent.steps.verifyIgnoreSpacesBeforeAndAfterCheckboxChecked();
+        });
+
+        it('\'Match from all responses\' functionality label and checkbox should be displayed and by default it should be unchecked and disabled', () => {
+            utilities.verifyInnerText(fillInTheGapsTextCommonComponent.matchFromAllResponsesLabel(), 'Match from all responses');
+            fillInTheGapsTextCommonComponent.steps.verifyMatchFromAllResponsesLabelAndCheckboxDisabledState();
+        });
+
+        it('When the user hovers over the \'Match from all responses\' label, \'Feature available for only alternate correct answers\' text should appear on a tooltip, on hovering away from the label, the tooltip should disappear', () => {
+            fillInTheGapsTextCommonComponent.matchFromAllResponsesLabel()
+                .verifyTooltip('Feature available for only alternate correct answers');
+        });
+
+        it('CSS of correct response conditions section', { tags: 'css' }, () => {
+            const labels = [fillInTheGapsTextCommonComponent.caseSensitiveLabel, fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterLabel, fillInTheGapsTextCommonComponent.matchFromAllResponsesLabel]
+            const uncheckedCheckboxes = [fillInTheGapsTextCommonComponent.caseSensitiveCheckbox, fillInTheGapsTextCommonComponent.matchFromAllResponsesCheckbox]
+            labels.forEach((checkingLabel) => {
+                utilities.verifyCSS(checkingLabel(), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+            uncheckedCheckboxes.forEach((uncheckedCheckbox) => {
+                utilities.verifyCSS(uncheckedCheckbox().parent().find('svg'), {
+                    'fill': css.color.uncheckedCheckbox
+                });
+            });
+            utilities.verifyCSS(fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterCheckbox().parent().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            cy.log('Checking CSS of match from all responses tooltip')
+            utilities.hoverOverElement(fillInTheGapsTextCommonComponent.matchFromAllResponsesLabel());
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible');
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        it(`Accessibility of correct response conditions section`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterCheckbox().parents('.ngie-checkbox-form-group'));
+            cy.log('Checking a11y of match from all responses tooltip')
+            utilities.hoverOverElement(fillInTheGapsTextCommonComponent.matchFromAllResponsesLabel());
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible');
+            cy.checkAccessibility(commonComponents.tooltipText());
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+    },
+
+    verifyResponseContentsOfSetCorrectAnswerSection: () => {
+        it('Response option contents should be displayed in the set correct answer section', () => {
+            for (let index = 0; index < 2; index++) {
+                utilities.verifyInnerText(fillInTheGapsTextCommonComponent.responseFieldLabelSetCorrectAnswerSection().eq(index), `Response ${index + 1}`)
+                utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.responseFieldSetCorrectAnswerSection().eq(index), 'visible');
+            };
+        });
+    },
+
+    verifyManualScoringEditTabFunctionality: () => {
+        it('When the user has selected \'Manually scored\' option from the \'Scoring type\' dropdown then the \'Set correct answer\' section should not be displayed; \'All or nothing\', \'Partial - equal weights\' and \'Partial - different weights\' radio buttons should not be displayed; \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed and inside additional settings accordion, Check answer section i.e. \'Allow students to check answer\' checkbox should not be displayed', () => {
+            utilities.verifyElementVisibilityState(autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.caseSensitiveCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.ignoreSpacesBeforeAndAfterCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.matchFromAllResponsesCheckbox(), 'notExist');
+            scoringSectionBase.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+            additionalSettingsPanel.steps.expandAdditonalSettings();
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.checkAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.allowStudentsToCheckAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox(), 'notExist');
+        });
+    }
+}
+
+export const fillInTheGapsTextCommonComponent = {
+    ...selectors,
+    steps,
+    tests
+}