itemengine-cypress-automation 1.0.143-migrationScripts-d059d60.0 → 1.0.143

package/cypress/pages/components/fillInTheGapsCommonComponents.js

@@ -1,642 +0,0 @@
-import { autoScoredScoringSectionMultipleResponsesType } from "./autoScoredScoringSectionMultipleResponsesType";
-import { scoringSectionBase } from "./scoringSectionBase";
-import { autoScoredSetCorrectAnswerSection } from "./autoScoredSetCorrectAnswerSection";
-import { additionalSettingsPanel } from "./additionalSettingsPanel";
-import { autoScoredAdditionalSettings } from "./autoScoredAdditionalSettings";
-const css = Cypress.env('css');
-
-const selectors = {
-    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"]'),
-    //ScoringSection
-    pointsPerResponseLabel: () => cy.get('.cloze-with-text-partial-points-per-response-label'),
-    partialEqualWeightsPointsPerResponseScore: () => cy.get('.cloze-with-text-partial-points'),
-    // Additional setting accordion
-    advanceSettingsforAllResponseAreasLabel: () => cy.get('.additional-settings-heading-label').eq(0),
-    placeholderTextLabel: () => cy.get('.text-label').eq(0),
-    placeholderTextInputField: () => cy.get('.additional-option-placeholder-input [aria-label="Placeholder Text"]').eq(0),
-    heightLabel: () => cy.get('.additional-settings-label[aria-labelledby="Height (px)"]').eq(0),
-    heightInputField: () => cy.get('input[aria-label="Height (px)"]').eq(0),
-    widthLabel: () => cy.get('.additional-settings-label[aria-labelledby="Width (px)"]').eq(0),
-    widthInputField: () => cy.get('input[aria-label="Width (px)"]').eq(0),
-    //Response accordion
-    advanceSettingForIndividualResponsesLabel: () => cy.get('.additional-settings-heading-label').eq(1),
-    studentResponseAreaAndLayoutLabel: () => cy.get('.additional-settings-heading-label').eq(2),
-    responseAccordionWrapper: () => cy.get('.response-setting-container'),
-    responseAccordionPlaceholderLabel: () => cy.get('.common-text-wrapper .text-label'),
-    ariaLabelLabel: () => cy.get('.text-label'),
-    ariaLabelInputField: () => cy.get('.input-field [aria-label="ARIA label"]'),
-    responseAccordionCustomLabel: () => cy.get('.custom-label-container'),
-    matchFromAllResponsesLabel: () => cy.get('[data-ngie-testid="match-from-all-responses-checkbox"] .MuiFormControlLabel-label'),
-    matchFromAllResponsesCheckbox: () => cy.get('[data-ngie-testid="match-from-all-responses-checkbox"] input'),
-    previewTabResponseWrapper: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper'),
-    previewTabCorrectAnswerContainer: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectAnswerWrapper"]'),
-    previewTabCorrectAnswerLabel: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectAnswerLabel"]'),
-    previewTabCorrectAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectResponseWrapper"] [aria-label*="Add answer for response"]'),
-    previewTabCorrectAnswerResponseNumerationWrapper: () => fillInTheGapsCommonComponents.previewTabCorrectAnswerContainer().find('.response-input-adornment') //Verify once numeration is implemented in all FIG questions
-}
-
-const steps = {
-    verifyIncorrectOptionCrossmarkIcon: (index) => {
-        fillInTheGapsCommonComponents.previewTabResponseWrapper()
-            .eq(index)
-            .find('.tick-icon-wrapper')
-            .should('have.class', 'icon-incorrect')
-            .and('be.visible');
-    },
-
-    verifyCorrectOptionCheckmarkIcon: (index) => {
-        fillInTheGapsCommonComponents.previewTabResponseWrapper()
-            .eq(index)
-            .find('.tick-icon-wrapper')
-            .should('have.class', 'icon-correct')
-            .and('be.visible');
-    },
-
-    verifyCorrectIncorrectIconNotVisible: (index) => {
-        fillInTheGapsCommonComponents.previewTabResponseWrapper()
-            .eq(index)
-            .prev('.tick-icon-wrapper')
-            .should('not.exist');
-    },
-
-    addPartialDifferentWeightsPoints: (responsePointsArray) => {
-        responsePointsArray.forEach((points, count) => {
-            scoringSectionBase.pointsInputField()
-                .eq(count)
-                .clear()
-                .type(points)
-                .should('have.value', points)
-                .blur();
-        });
-    },
-
-    expandResponseAccordion: (responseIndex) => {
-        fillInTheGapsCommonComponents.responseAccordionWrapper()
-            .eq(responseIndex)
-            .find('.ngie-accordion-summary')
-            .should('have.attr', 'aria-expanded', 'false')
-            .click()
-            .should('have.attr', 'aria-expanded', 'true');
-    },
-
-    setAriaLabelInResponseAccordion: (responseIndex, textContent) => {
-        fillInTheGapsCommonComponents.responseAccordionWrapper()
-            .eq(responseIndex)
-            .within(() => {
-                fillInTheGapsCommonComponents.ariaLabelInputField()
-                    .type(textContent)
-                    .should('have.value', textContent);
-            });
-    },
-
-    setPlaceholderTextInResponseAccordion: (responseIndex, textContent) => {
-        fillInTheGapsCommonComponents.responseAccordionWrapper()
-            .eq(responseIndex)
-            .within(() => {
-                fillInTheGapsCommonComponents.placeholderTextInputField()
-                    .type(textContent)
-                    .should('have.value', textContent);
-            });
-    },
-
-    setWidthInResponseAccordion: (responseIndex, value) => {
-        fillInTheGapsCommonComponents.responseAccordionWrapper()
-            .eq(responseIndex)
-            .within(() => {
-                fillInTheGapsCommonComponents.widthInputField()
-                    .clear()
-                    .type(value)
-                    .should('have.value', value);
-            });
-    },
-
-    setHeightInResponseAccordion: (responseIndex, value) => {
-        fillInTheGapsCommonComponents.responseAccordionWrapper()
-            .eq(responseIndex)
-            .within(() => {
-                fillInTheGapsCommonComponents.heightInputField()
-                    .clear()
-                    .type(value)
-                    .should('have.value', value);
-            });
-    },
-
-    /**
-     * Verify correct answer responses in the correct answer container and count.
-     * @param {string} questionType - The question type ('fill in the gaps - text' or 'fill in the gaps with dropdown').
-     * @param {string[]} correctAnswerArray - An array of correct answer strings.
-     */
-    verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount: (questionType, correctAnswerArray) => {
-        const isDropdown = questionType.includes('dropdown');
-        const responseWrapperSelector = isDropdown ? 'have.text' : 'have.value';
-        fillInTheGapsCommonComponents.previewTabCorrectAnswerContainer()
-            .should('be.visible');
-        fillInTheGapsCommonComponents.previewTabCorrectAnswerLabel()
-            .verifyInnerText('Correct answers:');
-        correctAnswerArray.forEach((responseFieldText, count) => {
-            fillInTheGapsCommonComponents.previewTabCorrectAnswerResponseWrapper()
-                .eq(count)
-                .should(responseWrapperSelector, responseFieldText);
-        });
-        fillInTheGapsCommonComponents.previewTabCorrectAnswerResponseWrapper()
-            .should('have.length', correctAnswerArray.length);
-    },
-
-    setPlaceholderText: (placeholder) => {
-        fillInTheGapsCommonComponents.placeholderTextInputField()
-            .type(placeholder)
-            .should('have.value', placeholder);
-    },
-
-    setResponseContainerHeight: (height) => {
-        fillInTheGapsCommonComponents.heightInputField()
-            .type(height)
-            .should('have.value', height)
-            .blur();
-    }
-}
-
-const tests = {
-    verifyMatchFromAllResponsesGetsDisabledWhenAlternateTabsAreDeleted: () => {
-        it('When the user removes all the \'Alternate\' tabs, \'Match from all responses\' functionality should get disabled', () => {
-            autoScoredSetCorrectAnswerSection.deleteAlternateTabButton()
-                .click();
-            autoScoredSetCorrectAnswerSection.alternateAnswerTab(1)
-                .should('not.exist');
-            fillInTheGapsCommonComponents.matchFromAllResponsesCheckbox()
-                .should('not.be.checked')
-                .parents('.response-condition-checkbox-label')
-                .should('have.class', 'Mui-disabled');
-        });
-    },
-
-    verifyAutoScoredPartialEqualWeightsScoringEditTabContents: () => {
-        it('User should be able to select \'Partial - equal weights\' scoring type', () => {
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox()
-                .click()
-                .should('be.checked');
-        });
-
-        it('When the Points input field is empty and the user has switched to \'Partial - equal weights\' scoring, then \'Points per response\' label should be displayed and a \'-\' should be displayed besides each response, \'Penalty Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed and \'Round down score\' label and checkbox should be displayed and by default it should be checked', () => {
-            autoScoredScoringSectionMultipleResponsesType.pointsPerResponseLabel()
-                .verifyInnerText('Points per response')
-                .should('be.visible');
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsPointsPerResponseScore()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .verifyInnerText('-');
-                });
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel()
-                .verifyInnerText('Penalty points')
-                .should('be.visible');
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
-                .should('have.value', '')
-                .and('be.visible');
-            scoringSectionBase.steps.expandMinimumScoringDropdown();
-            scoringSectionBase.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
-            scoringSectionBase.minimumScoreIfAttemptedLabel()
-                .verifyInnerText('Minimum points')
-                .and('be.visible');
-            scoringSectionBase.minimumScoreIfAttemptedInputField()
-                .should('have.value', '')
-                .and('be.visible');
-            autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel()
-                .verifyInnerText('Rounding')
-                .and('be.visible');
-            autoScoredScoringSectionMultipleResponsesType.roundingDropdown()
-                .verifyInnerText('None');
-        });
-
-        it('When user gives a score input to \'Points\' input field, then the score should be equally divided and displayed besides each response under the \'Points per response\' label', () => {
-            scoringSectionBase.pointsInputField()
-                .type('4');
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsPointsPerResponseScore()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .verifyInnerText('2');
-                });
-        });
-    },
-
-    verifyAutoScoredPartialEqualWeightsScoringEditTabFunctionality: () => {
-        it('When user removes a response from the question, then the points per response score should be updated accordingly', () => {
-            fillInTheGapsCommonComponents.steps.deleteAResponseToken(2);
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsPointsPerResponseScore()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .verifyInnerText('2');
-                });
-        });
-
-        it('User should be able to enter points in \'Penalty Points\' and \'Minimum score awarded (if attempted)\' input fields', () => {
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
-                .type('1')
-                .should('have.value', '1');
-            scoringSectionBase.minimumScoreIfAttemptedInputField()
-                .type('1')
-                .should('have.value', '1');
-        });
-
-        it('CSS of \'Points per response\' label and its displayed score, \'Penalty Points\' and \'Minimum score awarded (if attempted)\' and \'Round down score\' checkbox', { tags: 'css' }, () => {
-            autoScoredScoringSectionMultipleResponsesType.pointsPerResponseLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsPointsPerResponseScore()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            scoringSectionBase.minimumScoreIfAttemptedLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-        });
-
-        it('Accessibility of \'Penalty Points\' and \'Minimum score awarded (if attempted)\' input field and \'Round down score\' checkbox', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField());
-            cy.checkAccessibility(scoringSectionBase.minimumScoreIfAttemptedInputField());
-            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.roundingDropdown());
-        });
-
-        it('When the user switches to \'All or nothing\' scoring, the \'Points per response\' label and the points displayed for individual responses should not be displayed and the points displayed in \'Points\' input field should remain unchanged', () => {
-            autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox()
-                .click();
-            autoScoredScoringSectionMultipleResponsesType.pointsPerResponseLabel()
-                .should('not.exist');
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsPointsPerResponseScore()
-                .should('not.exist');
-            scoringSectionBase.pointsInputField()
-                .should('have.value', '4');
-        });
-
-        it('When user has entered points in \'All or nothing\' scoring type and switches to \'Partial equal weights\' scoring type, then the score should be equally divided and displayed besides each response under the \'Points per response\' label', () => {
-            scoringSectionBase.pointsInputField()
-                .clear()
-                .type('9');
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox()
-                .click();
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsPointsPerResponseScore()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .verifyInnerText('4.5');
-                });
-        });
-    },
-
-    verifyAutoScoredPartialDifferentWeightsScoringEditTabContents: () => {
-        it('User should be able to select \'Partial - different weights\' scoring', () => {
-            autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox()
-                .click()
-                .should('be.checked');
-        });
-
-        it('When the user has switched to \'Partial - different weights\' scoring, then \'Points per response\' label should be displayed and a points input field should be displayed besides each response option, \'Penalty Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed and \'Round down score\' checkbox should be displayed and by default it should be checked', () => {
-            autoScoredScoringSectionMultipleResponsesType.pointsPerResponseLabel()
-                .verifyInnerText('Points per response')
-                .and('be.visible');
-            scoringSectionBase.pointsInputField()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .should('have.value', '');
-                });
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel()
-                .verifyInnerText('Penalty points')
-                .should('be.visible');
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
-                .should('have.value', '')
-                .and('be.visible');
-            scoringSectionBase.steps.expandMinimumScoringDropdown();
-            scoringSectionBase.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
-            scoringSectionBase.minimumScoreIfAttemptedLabel()
-                .verifyInnerText('Minimum points')
-                .and('be.visible');
-            scoringSectionBase.minimumScoreIfAttemptedInputField()
-                .should('have.value', '')
-                .and('be.visible');
-            autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel()
-                .verifyInnerText('Rounding')
-                .and('be.visible');
-            autoScoredScoringSectionMultipleResponsesType.roundingDropdown()
-                .verifyInnerText('None');
-        });
-
-        it('When the user has not set any answer in the response, then the \'Points per response\' input field should be disabled', () => {
-            scoringSectionBase.pointsInputField()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .should('be.disabled');
-                });
-        });
-    },
-
-    verifyAutoScoredPartialDifferentWeightsScoringEditTabFunctionality: () => {
-        it('User should be able to give a score input to \'Points per response\' input fields', () => {
-            autoScoredScoringSectionMultipleResponsesType.steps.addPartialDifferentWeightsPoints([2.3, 3.4]);
-        });
-
-        it('User should be able to enter points in \'Penalty Points\' and \'Minimum score awarded (if attempted)\' input fields', () => {
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
-                .type('1')
-                .should('have.value', '1');
-            scoringSectionBase.minimumScoreIfAttemptedInputField()
-                .type('1')
-                .should('have.value', '1');
-        });
-
-        it('CSS of \'Points per response\' label, \'Penalty Points\' and \'Minimum score awarded (if attempted)\' and \'Round down score\' checkbox', { tags: 'css' }, () => {
-            autoScoredScoringSectionMultipleResponsesType.pointsPerResponseLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            scoringSectionBase.minimumScoreIfAttemptedLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-        });
-
-        it('Accessibility of \'Points per response\', \'Penalty Points\' and \'Minimum score awarded (if attempted)\' input fields and \'Round down score\' checkbox', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(scoringSectionBase.pointsInputField());
-            cy.checkAccessibility(scoringSectionBase.minimumScoreIfAttemptedInputField());
-            cy.checkAccessibility(autoScoredScoringSectionMultipleResponsesType.roundingDropdown());
-        });
-
-        it('When the user switches to \'All or nothing\' scoring, the points added for individual responses in Partial - different weights scoring should get summed up in the All or nothing scoring Points input field', () => {
-            autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox()
-                .click();
-            scoringSectionBase.pointsInputField()
-                .should('have.value', '5.7');
-        });
-
-        it('When user has entered points in \'All or nothing\' scoring type and switches to \'Partial different weights\' scoring type, then the points allocated should get equally divided between each correct response', () => {
-            scoringSectionBase.pointsInputField()
-                .clear()
-                .type('9');
-            autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox()
-                .click();
-            scoringSectionBase.pointsInputField()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .should('have.value', '4.5');
-                });
-        });
-    },
-
-    verifyManuallyScoredScoringContents: () => {
-        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 student to check answer\' checkbox should not be displayed', () => {
-            autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel()
-                .should('not.exist');
-            autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox()
-                .should('not.exist');
-            autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox()
-                .should('not.exist');
-            autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox()
-                .should('not.exist');
-            cy.log('Pre-step: Selecting minimum scoring from dropdown');
-            scoringSectionBase.steps.expandMinimumScoringDropdown();
-            scoringSectionBase.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
-            scoringSectionBase.minimumScoreIfAttemptedLabel()
-                .verifyInnerText('Minimum points')
-                .and('be.visible');
-            scoringSectionBase.minimumScoreIfAttemptedInputField()
-                .should('have.value', '')
-                .and('be.visible');
-            additionalSettingsPanel.additionalSettingsPanel()
-                .click();
-            autoScoredAdditionalSettings.checkAnswerLabel()
-                .should('not.exist');
-            autoScoredAdditionalSettings.allowStudentsToCheckAnswerLabel()
-                .should('not.exist');
-        });
-    },
-
-    verifyAdvanceSettingsForAllResponsesLabelAndCSS: () => {
-        it('\'Advanced settings for all response areas\' label should be displayed', () => {
-            fillInTheGapsCommonComponents.advanceSettingsforAllResponseAreasLabel()
-                .verifyInnerText('Advanced settings for all response areas')
-                .should('be.visible');
-        });
-
-        it('CSS of \'Advanced settings for all response areas\' section', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.advanceSettingsforAllResponseAreasLabel()
-                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
-        });
-    },
-
-    verifyPlaceholderTextLabelInputFieldAndCSS: () => {
-        it('\'Placeholder text\' label and input field should be displayed and by default, the input field should be empty', () => {
-            fillInTheGapsCommonComponents.placeholderTextLabel()
-                .verifyInnerText('Placeholder text');
-            fillInTheGapsCommonComponents.placeholderTextInputField()
-                .should('have.value', '');
-        });
-
-        it('CSS of \'Placeholder text\' section', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.placeholderTextLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            fillInTheGapsCommonComponents.placeholderTextInputField()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-        });
-    },
-
-    verifyHeightAndWidthLabelInputFieldWithCSSAnda11y: () => {
-        it('\'Height\' and \'Width\' labels and input fields should be displayed and by default, the input fields should be empty', () => {
-            fillInTheGapsCommonComponents.heightLabel()
-                .verifyInnerText('Height (px)');
-            fillInTheGapsCommonComponents.heightInputField()
-                .should('have.value', '');
-            fillInTheGapsCommonComponents.widthLabel()
-                .verifyInnerText('Width (px)');
-            fillInTheGapsCommonComponents.widthInputField()
-                .should('have.value', '');
-        });
-
-        it('CSS of \'Height\' and \'Width\' section', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.heightLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            fillInTheGapsCommonComponents.heightInputField()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-            fillInTheGapsCommonComponents.widthLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            fillInTheGapsCommonComponents.widthInputField()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('Accessibility of \'Height\' and \'Width\' section', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsCommonComponents.heightLabel().parents('.common-text-wrapper'));
-        });
-    },
-
-    verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y: () => {
-        it('\'Advanced settings for individual response area\' label should be displayed', () => {
-            fillInTheGapsCommonComponents.advanceSettingForIndividualResponsesLabel()
-                .verifyInnerText('Advanced settings for individual response area')
-                .should('be.visible');
-        });
-
-        it('CSS of \'Advanced settings for individual response area\' section', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.advanceSettingForIndividualResponsesLabel()
-                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
-        });
-
-        it('By default \'Response\' accordion should be collapsed and by clicking on the \'Response\' accordion, user should be able to expand the accordion', () => {
-            cy.log('Expand the Response accordion 1')
-            fillInTheGapsCommonComponents.steps.expandResponseAccordion(0)
-            cy.log('Expand the Response accordion 2')
-            fillInTheGapsCommonComponents.steps.expandResponseAccordion(1)
-        });
-
-        it('CSS of \'Additonal Settings\' accordion', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .eq(0)
-                .find('.additional-settings')
-                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.bold);
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .eq(0)
-                .find('svg')
-                .eq(0)
-                .should('have.css', 'fill', css.color.activeButtons);
-        });
-
-        it('Accessibility of \'Response\' accordion', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsCommonComponents.responseAccordionWrapper().parents('.ngie-accordion-detail'));
-        });
-    },
-
-    verifyDefaultStateOfAriaLabelInputFieldInResponseAccordionAndCSS: () => {
-        it('CSS of \'ARIA label\' section', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsCommonComponents.ariaLabelLabel()
-                                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-                            fillInTheGapsCommonComponents.ariaLabelInputField()
-                                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-                        });
-                });
-        });
-
-        //Note: a11y covered in Additional Settings: Response accordion
-
-        it('By default, \'ARIA label\' label and empty \'ARIA label\' input field should be displayed', () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsCommonComponents.ariaLabelLabel()
-                                .verifyInnerText('ARIA label');
-                            fillInTheGapsCommonComponents.ariaLabelInputField()
-                                .should('have.value', '');
-                        });
-                });
-        });
-
-        it('When user has not set \'ARIA label\' in the response accordion then \'Custom\' label should not be displayed', () => {
-            fillInTheGapsCommonComponents.responseAccordionCustomLabel()
-                .should('not.exist');
-        });
-    },
-
-    verifyCustomLabelOnResponseAccordionCSS: () => {
-        it('CSS of Custom label', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsCommonComponents.responseAccordionCustomLabel()
-                        .verifyCSS(css.color.activeButtons, css.fontSize.normal, css.fontWeight.medium)
-                        .should('have.css', 'border', `1px solid ${css.color.primaryBtnBorder}`)
-                });
-        });
-    },
-
-    verifyDefaultStateOfPlaceholderTextInputFieldInResponseAccordionAndCSS: () => {
-        it('\'Placeholder text\' label and input field should be displayed and by default, the input field should be empty for both the Response accordions', () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsCommonComponents.responseAccordionPlaceholderLabel()
-                                .verifyInnerText('Placeholder text');
-                            fillInTheGapsCommonComponents.placeholderTextInputField()
-                                .should('have.value', '');
-                        });
-                })
-        });
-
-        it('CSS of \'Placeholder text\' section', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsCommonComponents.responseAccordionPlaceholderLabel()
-                        .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-                    fillInTheGapsCommonComponents.placeholderTextInputField()
-                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-                });
-        });
-    },
-
-    verifyDefaultStateOfHeightAndWidthInputFieldInResponseAccordionAndCSS: () => {
-        it('\'Height (px)\' and \'Width (px)\' labels and input fields should be displayed and by default, the input fields should be empty for both the Response accordions', () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsCommonComponents.heightLabel()
-                                .verifyInnerText('Height (px)');
-                            fillInTheGapsCommonComponents.heightInputField()
-                                .should('have.value', '');
-                            fillInTheGapsCommonComponents.widthLabel()
-                                .verifyInnerText('Width (px)');
-                            fillInTheGapsCommonComponents.widthInputField()
-                                .should('have.value', '');
-                        });
-                });
-        });
-
-        it('CSS of \'Height\' and \'Width\' section', { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsCommonComponents.heightLabel()
-                        .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-                    fillInTheGapsCommonComponents.heightInputField()
-                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-                    fillInTheGapsCommonComponents.widthLabel()
-                        .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-                    fillInTheGapsCommonComponents.widthInputField()
-                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-                });
-        });
-    },
-
-    verifyCustomLabelNotVisibleOnResponseAccordion: (advancedSetting) => {
-        it(`When user has not set ${advancedSetting} in the input field then Custom label should not be displayed on the response accordion`, () => {
-            fillInTheGapsCommonComponents.responseAccordionCustomLabel()
-                .should('not.exist');
-        });
-    },
-
-    verifyCustomLabelVisibleOnResponseAccordion: (advancedSetting) => {
-        it(`When the user sets ${advancedSetting} for a response then Custom label should be displayed on that response accordion and the other accordion should remain the same`, () => {
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsCommonComponents.responseAccordionCustomLabel()
-                        .verifyInnerText('Custom')
-                        .should('be.visible');
-                });
-            fillInTheGapsCommonComponents.responseAccordionWrapper()
-                .eq(1)
-                .within(() => {
-                    fillInTheGapsCommonComponents.responseAccordionCustomLabel()
-                        .should('not.exist');
-                });
-        });
-    }
-}
-
-export const fillInTheGapsCommonComponents = {
-    ...selectors,
-    steps,
-    tests
-}