itemengine-cypress-automation 1.0.120 → 1.0.122-updateILCRepo28Feb-2c3e0e3.0

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -1,47 +1,26 @@
 import utilities from "../support/helpers/utilities";
-import { figOverImageCanvasComponent, autoScoredScoringPreviewTab, optionsWrapperComponent, commonComponents, createQuestionBasePage, backgroundImageUploadComponent, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType } from "./components";
+import { imageCanvasComponent, autoScoredScoringPreviewTab, createQuestionBasePage, backgroundImageUploadComponent, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, randomizeOptionsComponent, optionsWrapperComponent, studentViewSettingsLabelComponent, additionalSettingsPanel } from "./components";
 const css = Cypress.env('css');
 
 const optionsForDropdown = ['Flower', 'Petal', 'Stem', 'Branch'];
 
 const selectors = {
     ...questionInstructionsComponent,
-    ...figOverImageCanvasComponent,
+    ...imageCanvasComponent,
     ...autoScoredScoringPreviewTab,
     ...correctIncorrectAnswerLabelComponent,
-    ...autoScoredScoringSectionMultiResponseType,
-    ...autoScoredSpecifyCorrectAnswerSection,
-    //Dropdown options section
-    dropdownOptionsTab: () => cy.get('.ngie-tablist-tab-button[data-ngie-testid*="dropdown"]'),
-    dropdownOptionsInputField: () => cy.get('.input-editable  input[type*="text"]'),
-
-    //Specify correct answer dropdown
-    dropdownSpecifyCorrectAnswerSection: () => cy.get('.response-dropdown [role="combobox"]'),
-    dropdownLabelSpecifyCorrectAnswerSection: () => cy.get('.response-label'),
-
-    //Dropdown list
-    dropdownListOptions: (ariaLabel = null) => {
-        if (ariaLabel) {
-            return cy.get(`[role="listbox"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
-        } else {
-            return cy.get('[role="listbox"] .dropdown-menu-item')
-        }
-    },
-
-    //Preview tab
-    dropdownPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-haspopup="listbox"]'),
-    dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Canvasstyle__DropzoneWrapper"]'),
-    dropdownNumerationPreviewTab: () => cy.get('.answer-numeration-number-box'),
+    ...fillInTheGapsDropdownCommonComponent,
+    ...optionsWrapperComponent,
+    ...randomizeOptionsComponent,
+    ...backgroundImageUploadComponent,
+    dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class="Canvasstyle__DropzoneWrapper"]'),
     correctAnswerSectionWrapper: () => cy.get('.dnd-correct-answer-wrapper'),
-    correctAnswersLabel: () => cy.get('.correct-answers-label'),
-    correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
     correctAnswerResponseWrapper: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerCell"]'),
     correctAnswerResponse: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerWrapper"]'),
-    tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
 }
 
 const steps = {
-    ...figOverImageCanvasComponent.steps,
+    ...imageCanvasComponent.steps,
     ...autoScoredScoringPreviewTab.steps,
     ...correctIncorrectAnswerLabelComponent.steps,
     ...createQuestionBasePage.steps,
@@ -51,133 +30,55 @@ const steps = {
     ...autoScoredStudentViewSettings.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
+    ...fillInTheGapsDropdownCommonComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...optionsWrapperComponent.steps,
+    ...randomizeOptionsComponent.steps,
     /**
-    * @param {number} dropdownOptionsTabIndex Index of the dropdown options tab
-    * @param {string[]} responseTextArray Array of text to be given as input in options input field
-    * @description Add input to dropdown options input fields
-    */
-    addInputToDropdownOptionFields: (dropdownOptionsTabIndex, responseTextArray) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), dropdownOptionsTabIndex)
-            .click();
-        fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsSelected(dropdownOptionsTabIndex);
-        optionsWrapperComponent.optionsSectionWrapper()
+     * Verify that the correct option icon is is displayed for a specific dropdown.
+     * @param {number} dropdownIndex - The index of the dropdown.
+     */
+    verifyCorrectOptionIcon: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
             .within(() => {
-                responseTextArray.forEach((responseFieldText, optionIndex) => {
-                    fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(optionIndex, responseFieldText);
+                utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.tickIconWrapper(), {
+                    'fill': css.color.correctAnswer
                 });
             });
     },
 
     /**
-     * @param {number} optionIndex index of the option input field 
-     * @param {string} responseText text to be given as input in option input field
-     * @description Add input to options input fields
-     */
-    addInputToDropdownOptionInputField: (optionIndex, responseFieldText) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsInputField(), optionIndex)
-            .clear()
-            .type(responseFieldText, { delay: 0 })
-            .should('have.value', responseFieldText);
-    },
-
-    /**
-    * @param {number} dropdownOptionsTabIndex Index of the dropdown options tab
-    * @description Verify dropdown options tab is selected
-    */
-    verifyDropdownOptionsTabIsSelected: (dropdownOptionsTabIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), dropdownOptionsTabIndex)
-            .should('have.class', 'Mui-selected');
-    },
-
-    /**
-    * @param {number} dropdownIndex Index of the dropdown
-    * @param {string} dropdownOption Option to be selected in the dropdown
-    * @description Select option from dropdown in specify correct answer section
-    */
-    selectResponseFromDropdownSpecifyCorrectAnswerSection: (dropdownIndex, dropdownOption) => {
-        fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSpecifyCorrectAnswerSection(dropdownIndex)
-        fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(dropdownOption);
-        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), dropdownIndex), dropdownOption);
-    },
-
-    /**
-     * @param {string} dropdownOption Option to be selected from dropdown
-     * @description Select option from dropdown
+     * Verify that both correct and incorrect option icons do not exist for a specific dropdown.
+     * @param {number} dropdownIndex - The index of the dropdown.
      */
-    selectOptionFromDropdownList: (dropdownOption) => {
-        fillInTheGapsOverImageDropdownPage.dropdownListOptions(dropdownOption)
-            .click();
-        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
-    },
-
-    /**
-    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
-    * @description Expand response dropdown in specify correct answer section
-    */
-    expandResponseDropdownInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
-            .click({ position: "right" });
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
-            .should('have.attr', 'aria-expanded', 'true');
-    },
-
-    /**
-    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
-    * @description Verify dropdown is expanded in specify correct answer section
-    */
-    verifyDropdownIsExpandedInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
-            .should('have.attr', 'aria-expanded', 'true');
-    },
-
-    /**
-    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
-    * @description Verify dropdown is collapsed in specify correct answer section
-    */
-    verifyDropdownIsCollapsedInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
-            .should('have.attr', 'aria-expanded', 'false');
-        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
-    },
-
-    /**
-    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
-    * @description Expand and collapse dropdown in specify correct answer section
-    */
-    expandAndCollapseDropdownInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
-            .click({ position: "right" });
-        cy.get('body')
-            .click();
+    verifyCorrectIncorrectIconNotExist: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.tickIconWrapper(), 'notExist');
+            });
     },
 
     /**
-    * @param {Object[]} CorrectAnswerArray - An array of objects containing the dropdownIndex and dropdownOption to be selected.
-    * @param {number} CorrectAnswerArray[].dropdownIndex - The index of dropdown in preview tab
-    * @param {string} CorrectAnswerArray[].dropdownOption - The dropdown option to be selected from dropdown list
-    * @description Select option from dropdown in preview tab
+    * Verify that the incorrect option icon is displayed for a specific dropdown.
+    * @param {number} dropdownIndex - The index of the dropdown.
     */
-    selectResponseFromDropdownInPreviewTab: (CorrectAnswerArray) => {
-        CorrectAnswerArray.forEach(({ dropdownIndex, dropdownOption }) => {
-            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(dropdownIndex);
-            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(dropdownOption);
-            fillInTheGapsOverImageDropdownPage.steps.verifyTextDisplayedInDropdownPreviewTab(dropdownIndex, dropdownOption);
-        });
-    },
-
-    /**
-     * @param {number} dropdownIndex Index of dropdown in preview tab
-     * @description Expand dropdown in preview tab
-     */
-    expandDropdownInPreviewTab: (dropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex)
-            .click();
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex)
-            .should('have.attr', 'aria-expanded', 'true');
+    verifyIncorrectOptionIcon: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
+            .within(() => {
+                utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.tickIconWrapper(), {
+                    'fill': css.color.incorrectAnswer
+                });
+            });
     },
 
-    verifyTextDisplayedInDropdownPreviewTab: (dropdownIndex, dropdownText) => {
-        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex), dropdownText);
+    verifyCorrectIncorrectIconsNotExist: () => {
+        fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab()
+            .each(($element) => {
+                cy.wrap($element)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), 'notExist');
+                    });
+            });
     },
 
     verifyDropdownNumerationPreviewTab: () => {
@@ -185,7 +86,7 @@ const steps = {
             .each(($element, index) => {
                 cy.wrap($element)
                     .within(() => {
-                        utilities.verifyTextContent(fillInTheGapsOverImageDropdownPage.dropdownNumerationPreviewTab(), `${index + 1}`);
+                        utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.dropdownNumerationPreviewTab(), `${index + 1}`);
                     });
             });
     },
@@ -196,101 +97,86 @@ const steps = {
      * @example verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Petals', 'Stem']);
      */
     verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount: (correctAnswerArray) => {
-        utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapper(), correctAnswerArray.length);
+        utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.correctAnswerResponse(), correctAnswerArray.length);
         correctAnswerArray.forEach((correctAnswer, index) => {
             fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapper()
                 .eq(index)
                 .within(() => {
-                    utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.correctAnswerResponseNumeration(), `${index + 1}`);
+                    utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.correctAnswerResponseNumeration(), `${index + 1}`);
                     fillInTheGapsOverImageDropdownPage.correctAnswerResponse()
                         .should('have.text', correctAnswer);
                 });
         });
     },
 
-    /**
-    * Verify that the incorrect option icon is displayed for a specific dropdown.
-    * @param {number} dropdownIndex - The index of the dropdown.
-    */
-    verifyIncorrectOptionIcon: (dropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
-            .within(() => {
-                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), {
-                    'fill': css.color.incorrectAnswer
-                });
-            });
-    },
-
-    /**
-     * Verify that the correct option icon is is displayed for a specific dropdown.
-     * @param {number} dropdownIndex - The index of the dropdown.
-     */
-    verifyCorrectOptionIcon: (dropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
-            .within(() => {
-                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), {
-                    'fill': css.color.correctAnswer
-                });
-            });
-    },
-
-    /**
-     * Verify that both correct and incorrect option icons do not exist for a specific dropdown.
-     * @param {number} dropdownIndex - The index of the dropdown.
-     */
-    verifyCorrectIncorrectIconNotExist: (dropdownIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
-            .within(() => {
-                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), 'notExist');
-            });
-    },
-
     verifyCorrectAnswerSectionNotExists: () => {
         utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.correctAnswerSectionWrapper(), 'notExist');
     },
 
-    verifyCorrectIncorrectIconsNotExist: () => {
-        fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab()
-            .each(($element) => {
-                cy.wrap($element)
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), 'notExist');
-                    });
-            });
-    },
-
     /**
-     * Verify text displayed in the dropdowns of the preview tab.
-     * @param {Object[]} dropdownTextArray - An array of objects containing the dropdownIndex and dropdownText.
-     * @param {number} dropdownTextArray[].dropdownIndex - The index of the dropdown.
-     * @param {string} dropdownTextArray[].dropdownText - The text to be verified in the respective dropdown.
+     * @description Verify dropdown pointer style in preview tab
+     * @param {string} style dropdown pointer style
+     * @param {number} dropzoneIndex index of dropdown
      */
-    verifyTextInDropdownsInPreviewTab: (dropdownTextArray) => {
-        dropdownTextArray.forEach(({ dropdownIndex, dropdownText }) => {
-            fillInTheGapsOverImageDropdownPage.steps.verifyTextDisplayedInDropdownPreviewTab(dropdownIndex, dropdownText);
-        });
+    verifyDropdownPointerStyleInPreviewTab: (style, dropzoneIndex) => {
+        const getPosition = (option) => {
+            switch (option) {
+                case 'bottom':
+                    return { top: '-31.5px', left: '-37.5px' };
+                case 'bottom right':
+                    return { top: '-25px', left: '-40px' };
+                case 'right':
+                    return { top: '-21px', left: '-36.5px' };
+                case 'top right':
+                    return { top: '-19px', left: '-31px' };
+                case 'top':
+                    return { top: '-22.5px', left: '-25.5px' };
+                case 'top left':
+                    return { top: '-27px', left: '-24px' };
+                case 'left':
+                    return { bottom: '-20px', left: '-27px' };
+                case 'bottom left':
+                    return { bottom: '-18px', left: '-32px' };
+            }
+        }
+        const expectedPosition = getPosition(style);
+        if (style == 'left' || style == 'bottom left') {
+            fillInTheGapsOverImageDropdownPage.dropdownPreviewTab()
+                .eq(dropzoneIndex)
+                .should('have.css', 'bottom', expectedPosition.bottom)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+        else if (style == 'none') {
+            fillInTheGapsOverImageDropdownPage.dropdownPreviewTab()
+                .eq(dropzoneIndex)
+                .should('not.have.css', 'bottom')
+                .and('not.have.css', 'left');
+        }
+        else {
+            fillInTheGapsOverImageDropdownPage.dropdownPreviewTab()
+                .eq(dropzoneIndex)
+                .should('have.css', 'top', expectedPosition.top)
+                .and('have.css', 'left', expectedPosition.left);
+        }
     },
 
     /**
-     * Verify that a specific dropdown is disabled in the preview tab.
-     * @param {number} dropdownIndex - The index of the disabled dropdown.
-     */
-    verifyDropdownIsDisabled: (dropdownIndex) => {
-        utilities.verifyElementDisabledClass(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex));
-    },
-
-    verifyPointsPerResponseLabel: () => {
-        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response: -');
-        utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
+    * @param {*} width width of canvas
+    * @description this function verifies width of canvas
+    */
+    verifyCanvasWidthInPreviewTab: (width) => {
+        fillInTheGapsOverImageDropdownPage.canvasInPreviewTab()
+            .should('have.attr', 'width', width);
     },
 
     /**
-     * @description Verify points per response score displayed for partial equal weights
-     * @param {number} pointsPerResponse points per response score 
+     * @param {*} height height of canvas
+     * @description this function verifies height of canvas
      */
-    verifyPartialEqualWeightsPointsPerResponseScore: (pointsPerResponse) => {
-        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), `Points per response: ${pointsPerResponse}`);
-    },
+    verifyCanvasHeightInPreviewTab: (height) => {
+        fillInTheGapsOverImageDropdownPage.canvasImageInPreviewTab()
+            .should('have.css', 'height', `${height}px`);
+    }
 }
 
 const tests = {
@@ -298,64 +184,14 @@ const tests = {
     ...autoScoredSpecifyCorrectAnswerSection.tests,
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringSectionMultiResponseType.tests,
-    /**
-    * Verifies the contents and functionality of the 'Specify correct answer' accordion for fill in the gaps over image dropdown question.
-    * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
-    * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
-    */
-    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
-        it(`When user has added a response token in image, then its corresponding dropdown \'Dropdown 1\' should be displayed in the ${accordionName} accordion in collapsed state`, () => {
-            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), 1);
-            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownIsCollapsedInSpecifyCorrectAnswerSection(0);
-            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), 0), 'Dropdown 1');
-        });
-
-        it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
-            fillInTheGapsOverImageDropdownPage.steps.expandAndCollapseDropdownInSpecifyCorrectAnswerSection(0);
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
-        });
-
-        it('When the user selects any option from the dropdown, then error message should disappear and that option should be displayed on the dropdown', () => {
-            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, optionsForDropdown[0]);
-            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
-        });
-
-        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
-
-        it(`CSS of ${accordionName} accordion contents`, { tags: 'css' }, () => {
-            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
-                'background-color': css.color.figActiveComponentBg,
-                'border': `1px solid ${css.color.activeComponentBorder}`
-            });
-            //CSS of selected dropdown option which appears on dropdown
-            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
-                'color': css.color.liText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it(`Accessibility of ${accordionName} accordion contents`, { tags: 'a11y' }, () => {
-            cy.checkAccessibility(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0).parents('[aria-label="Specify correct answer section"]'));
-        });
-    },
-
-    verifyContentsOfSpecifyCorrectAnswerSection: () => {
-        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
-            fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection()
-                .each(($element, index) => {
-                    utilities.verifyElementVisibilityState(cy.wrap($element), 'visible');
-                    utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), index), `Dropdown ${index + 1}`);
-                    utilities.verifyElementVisibilityState(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), index), 'visible');
-                })
-        });
-    },
+    ...optionsWrapperComponent.tests,
+    ...randomizeOptionsComponent.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...questionInstructionsComponent.tests,
+    ...backgroundImageUploadComponent.tests,
+    ...imageCanvasComponent.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...createQuestionBasePage.tests,
 }
 
 export const fillInTheGapsOverImageDropdownPage = {