itemengine-cypress-automation 1.0.119 → 1.0.121

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -1,11 +1,11 @@
 import utilities from "../support/helpers/utilities";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, figOverImageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent } from "./components";
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, imageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, additionalSettingsPanel } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
-    ...figOverImageCanvasComponent,
+    ...imageCanvasComponent,
     ...commonComponents,
     ...correctIncorrectAnswerLabelComponent,
     ...customizeSpecialCharacterComponent,
@@ -14,50 +14,17 @@ const selectors = {
     ...autoScoredStudentViewSettings,
     ...autoScoredScoringPreviewTab,
     ...backgroundImageUploadComponent,
+    ...fillInTheGapsTextCommonComponent,
 
     //TODO: Update below selectors after https://redmine.zeuslearning.com/issues/557945 is resolved
-    //response accordion
-    responseAccordion: () => cy.get('.response-text-accordion'),
-    responseAccordionLabel: () => cy.get('[class*="ResponseComponentstyles__Label"]'),
-    responseAccordionAnswersLabel: () => cy.get('.correct-response-answer-wrapper-cls .points-label'),
-    responseAccordionAnswerInputFieldWrapper: () => cy.get('.label-image-text-answer-label'),
-    responseAccordionAnswerNumeration: () => cy.get('.additional-option-placeholder-input .start-adornment'),
-    responseAccordionAnswerDeleteButton: () => cy.get('.delete-button'),
-    responseAccordionPointsWrapper: () => cy.get('[class*="ResponseComponentstyles__PointsDiv"]'),
-    responseAccordionPointsLabel: () => cy.get('[class*="ResponseComponentstyles__PointsLabel"]'),
-    responseAccordionPointsScore: () => cy.get('[class*="ResponseComponentstyles__Points-"]'),
-    responseAccordionPointsInputFieldWrapper: () => cy.get('[class*="ResponseComponentstyles__PointsWrapper"]'),
-    responseAccordionAddAlternateButton: () => cy.get('.add-alternate-btn'),
-    responseAccordionAddAlternateButtonLabel: () => cy.get('.add-alternate-btn p'),
-    responseAreaNumeration: () => cy.get('.response-input-adornment'),
-
-    answerInputFieldSpecifyCorrectAnswerSection: () => cy.get('.label-image-text-inline-text-field input'),
-    answerInputFieldPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field input'),
+
     responseContainerInPreviewTab: () => cy.get('[class*="AddTextResponseOnImagestyles__DraggableInput"]'),
     canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .image-container'),
-    correctAnswerSectionWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
-    correctAnswersLabel: () => cy.get('.label-image-with-text-correct-answer-label'),
-    responseStatusWrapper: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper:visible'),
-    tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
-    responseAreaNumeration: () => cy.get('.response-input-adornment'),
-    correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
-    correctAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__AnswerCell"]'),
-    correctAnswerResponse: () => cy.get('[class*="AnswerWrapperForLabel"]'),
-
-    setLimitLabel: () => cy.get('[class*="SetLimitWrapper"] .text-label'),
-    minimumCharacterLimitLabel: () => cy.get('.label-image-min-max-container .additional-settings-label').eq(0),
-    maximumCharacterLimitLabel: () => cy.get('.label-image-min-max-container .additional-settings-label').eq(1),
-    minMaxLabelAndInputFieldWrapper: () => cy.get('.label-image-min-max-container'),
-    minimumCharacterLimitInputField: () => cy.get('.label-image-min-max-container input').eq(0),
-    maximumCharacterLimitInputField: () => cy.get('.label-image-min-max-container input').eq(1),
-    characterRadioButton: () => cy.get('input[aria-label="Character"]'),
-    characterLabel: () => cy.get('[aria-label="Character"].ngie-radio-label'),
-    noneRadioButton: () => cy.get('input[aria-label="None"]'),
-    noneLabel: () => cy.get('[aria-label="None"].ngie-radio-label'),
-    limitReachedWarningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
+
     limitReachedWarningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
     correctAnswerResponseWrapper: () => cy.get('.label-image-with-text-correct-response-wrapper [class*="ClozeWithTextResponsestyles__AnswerCell"]'),
     specialCharactersButtonPreviewTab: () => cy.get('.cloze-with-text-special-character-button'),
+    tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
 
     //Special characters section
     specialCharactersLabel: () => cy.get('[class*="LabelImageWithTextstyles__CustomizedSpecialCharacterWrapper"]'),
@@ -101,89 +68,20 @@ const steps = {
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...optionsWrapperComponent.steps,
-    ...figOverImageCanvasComponent.steps,
+    ...imageCanvasComponent.steps,
     ...correctIncorrectAnswerLabelComponent.steps,
     ...autoScoredStudentViewSettings.steps,
     ...acceptedStudentInputComponent.steps,
     ...customizeSpecialCharacterComponent.steps,
     ...autoScoredStudentViewSettings.steps,
-
-    /**
-     * Enter text in the answer input fields of the specify correct answer section.
-     * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
-     * @param {number} responses[].responseIndex - The index of the answer input field for each response.
-     * @param {string} responses[].responseText - The text to be entered in the respective answer input field.
-     * @example - enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([
-     *   { responseIndex: 0, responseText: "Answer 1" },
-     *   { responseIndex: 1, responseText: "Answer 2" },
-     * ]);
-     */
-    enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection: (responses) => {
-        responses.forEach(({ responseIndex, responseText }) => {
-            utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
-                .clear()
-                .type(responseText)
-                .blur();
-        });
-    },
-
-    /**
-     * Enter text in the answer input fields of the preview tab.
-     * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
-     * @param {number} responses[].responseIndex - The index of the answer input field for each response.
-     * @param {string} responses[].responseText - The text to be entered in the respective answer input field.
-     */
-    enterTextInAnswerInputFieldsPreviewTab: (responses) => {
-        responses.forEach(({ responseIndex, responseText }) => {
-            utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
-                .clear()
-                .type(responseText)
-                .blur();
-        });
-    },
-
-    //Used in setLimitSection.js only. 
-    /**
-     * @param {number} responseIndex index number of text container
-     * @param {string} responseText text to be added in text container
-     * @description function enters text in the answer input fields of the preview tab
-     */
-    addTextInAnswerInputFieldsPreviewTab: (responseIndex, responseText) => {
-        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
-            .type(responseText);
-    },
-
-    /**
-     * Verify text in the answer input fields of the preview tab.
-     * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
-     * @param {number} responses[].responseIndex - The index of the answer input field for each response.
-     * @param {string} responses[].responseText - The text to be verified in the respective answer input field.
-     */
-    verifyTextInAnswerInputFieldsPreviewTab: (responses) => {
-        responses.forEach(({ responseIndex, responseText }) => {
-            utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
-                .should('have.value', responseText)
-        });
-    },
-
-    /**
-     * Verify that a specific answer input field is disabled on the preview tab.
-     * @param {number} inputFieldIndex - The index of the disabled answer input field.
-     */
-    verifyAnswerInputFieldDisabled: (inputFieldIndex) => {
-        utilities.verifyElementDisabled(utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), inputFieldIndex));
-    },
-
-    verifyCorrectAnswerSectionNotExists: () => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.correctAnswerSectionWrapper(), 'notExist');
-    },
-
+    ...fillInTheGapsTextCommonComponent.steps,
+    ...additionalSettingsPanel.steps,
     /**
      * Verify that the incorrect option icon is displayed for a specific answer input field.
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
      */
     verifyIncorrectOptionIcon: (inputFieldIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageTextPage.responseStatusWrapper(), inputFieldIndex)
+        utilities.getNthElement(fillInTheGapsTextCommonComponent.responseStatusWrapper(), inputFieldIndex)
             .within(() => {
                 utilities.verifyCSS(fillInTheGapsOverImageTextPage.tickIconWrapper(), {
                     'fill': css.color.incorrectAnswer
@@ -196,7 +94,7 @@ const steps = {
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
      */
     verifyCorrectOptionIcon: (inputFieldIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageTextPage.responseStatusWrapper(), inputFieldIndex)
+        utilities.getNthElement(fillInTheGapsTextCommonComponent.responseStatusWrapper(), inputFieldIndex)
             .within(() => {
                 utilities.verifyCSS(fillInTheGapsOverImageTextPage.tickIconWrapper(), {
                     'fill': css.color.correctAnswer
@@ -209,38 +107,28 @@ const steps = {
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
      */
     verifyCorrectIncorrectIconNotExist: (inputFieldIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageTextPage.responseStatusWrapper(), inputFieldIndex)
+        utilities.getNthElement(fillInTheGapsTextCommonComponent.responseStatusWrapper(), inputFieldIndex)
             .within(() => {
                 utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.tickIconWrapper(), 'notExist');
             });
     },
 
-    verifyResponseAreaNumeration: () => {
-        fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab()
-            .each(($element, index) => {
-                cy.wrap($element)
-                    .parents('.cloze-with-text-response-field-wrapper')
-                    .within(() => {
-                        utilities.verifyTextContent(fillInTheGapsOverImageTextPage.responseAreaNumeration(), `${index + 1}`);
-                    });
-            });
-    },
-
     /**
-     * Verify correct answer responses in the correct answer section and count.
-     * @param {string[]} correctAnswerArray - An array containing the expected correct answer responses.
-     * @example verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Petals', 'Stem']);
+     * Enter text in the answer input fields of the specify correct answer section.
+     * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
+     * @param {number} responses[].responseIndex - The index of the answer input field for each response.
+     * @param {string} responses[].responseText - The text to be entered in the respective answer input field.
+     * @example - enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([
+     *   { responseIndex: 0, responseText: "Answer 1" },
+     *   { responseIndex: 1, responseText: "Answer 2" },
+     * ]);
      */
-    verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount: (correctAnswerArray) => {
-        utilities.verifyElementCount(fillInTheGapsOverImageTextPage.correctAnswerResponseWrapper(), correctAnswerArray.length);
-        correctAnswerArray.forEach((correctAnswer, index) => {
-            fillInTheGapsOverImageTextPage.correctAnswerResponseWrapper()
-                .eq(index)
-                .within(() => {
-                    utilities.verifyInnerText(fillInTheGapsOverImageTextPage.correctAnswerResponseNumeration(), `${index + 1}`);
-                    fillInTheGapsOverImageTextPage.correctAnswerResponse()
-                        .should('have.text', correctAnswer);
-                });
+    enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection: (responses) => {
+        responses.forEach(({ responseIndex, responseText }) => {
+            utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
+                .clear()
+                .type(responseText)
+                .blur();
         });
     },
 
@@ -386,9 +274,9 @@ const steps = {
     },
 
     /**
-  * click on custom special character symbol in special characters popup in preview tab
-  * @param {string} customSpecialCharacterSymbol custom special character symbol
-  */
+     * Click on custom special character symbol in special characters popup in preview tab
+     * @param {string} customSpecialCharacterSymbol custom special character symbol
+     */
     clickOnCustomSpecialCharacterSymbolInSpecialCharactersPopupPreviewTab: (customSpecialCharacterSymbol) => {
         dialogBoxBase.dialogBox()
             .within(() => {
@@ -399,10 +287,10 @@ const steps = {
     },
 
     /**
-* Verify the points input field and label displayed in response accordions
-* @param {number} responseAccordionIndex index of response accordion
-* @param {number} pointsInputFieldValue Points input field value
-*/
+     * Verify the points input field and label displayed in response accordions
+     * @param {number} responseAccordionIndex index of response accordion
+     * @param {number} pointsInputFieldValue Points input field value
+     */
     verifyPointsLabelAndInputFieldInResponseAccordion: (responseAccordionIndex, pointsInputFieldValue) => {
         utilities.getNthElement(fillInTheGapsOverImageTextPage.responseAccordionPointsInputFieldWrapper(), responseAccordionIndex)
             .within(() => {
@@ -414,10 +302,10 @@ const steps = {
     },
 
     /**
-   * allot points inside response accordion points input field
-   * @param {number} responseAccordionIndex index of response accordion
-   * @param {number} pointsInputFieldValue Points input field value to be allotted
-   */
+     * Allot points inside response accordion points input field
+     * @param {number} responseAccordionIndex index of response accordion
+     * @param {number} pointsInputFieldValue Points input field value to be allotted
+     */
     allotPointsInResponseAccordion: (responseAccordionIndex, pointsInputFieldValue) => {
         utilities.getNthElement(fillInTheGapsOverImageTextPage.responseAccordionPointsInputFieldWrapper(), responseAccordionIndex)
             .within(() => {
@@ -425,27 +313,6 @@ const steps = {
             });
     },
 
-    verifyCharacterRadioButtonSelected: () => {
-        fillInTheGapsOverImageTextPage.characterRadioButton()
-            .should('be.checked');
-    },
-
-    verifyNoneRadioButtonNotSelected: () => {
-        fillInTheGapsOverImageTextPage.noneRadioButton()
-            .should('not.be.checked');
-    },
-
-    selectCharacterRadioButton: () => {
-        fillInTheGapsOverImageTextPage.characterRadioButton()
-            .click()
-            .should('be.checked');
-    },
-
-    selectNoneRadioButton: () => {
-        fillInTheGapsOverImageTextPage.noneRadioButton()
-            .click()
-    },
-
     /**
      *@description Verify text in the answer input fields of the specify correct answer section.
      * @param {Object[]} responses - An array of objects containing the responseIndex and responseText.
@@ -520,116 +387,6 @@ const steps = {
             .should('be.checked');
     },
 
-    /**
-     * @param {number} minLimit value of minimum input field
-     * @description this function verifies the value in minimum limit input field
-     */
-    verifyMinimumCharacterLimitInputField: (minLimit) => {
-        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
-            .should('have.value', minLimit);
-    },
-
-    /**
-     * @param {number} maxLimit value of maximum input field
-     * @description this function verifies the value in maximum limit input field
-     */
-    verifyMaximumCharacterLimitInputField: (maxLimit) => {
-        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
-            .should('have.value', maxLimit);
-    },
-
-    /**
-     * @param {number} maxLimit value to be entered in maximum limit input field
-     * @description this function enters the value in maximum limit input field
-     */
-    setMaximumLimit: (maxLimit) => {
-        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
-            .clear()
-            .type(maxLimit)
-            .blur();
-    },
-
-    /**
-     * @param {number} maxLimit value to be entered in maximum limit input field
-     * @description this function verifies the value in maximum limit input field
-     */
-    verifyMaximumLimit: (maxLimit) => {
-        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
-            .should('have.value', maxLimit);
-
-    },
-
-    /**
-     * @param {number} minLimit value to be entered in minimum limit input field
-     * @description this function enters and verifies the value in minimum limit input field
-     */
-    setMinimumLimit: (minLimit) => {
-        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
-            .clear()
-            .type(minLimit)
-            .blur();
-    },
-
-    /**
-     * @param {number} minLimit value to be entered in minimum limit input field
-     * @description this function verifies the value in minimum limit input field
-     */
-    verifyMinimumLimit: (minLimit) => {
-        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
-            .should('have.value', minLimit)
-    },
-
-    clearAndFocusOutOfMaximumCharacterLimitInputField: () => {
-        fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField()
-            .clear()
-            .blur();
-    },
-
-    clearAndFocusOutOfMinimumCharacterLimitInputField: () => {
-        fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField()
-            .clear()
-            .blur();
-    },
-
-    verifyMaximumLimitErrorMessage: () => {
-        utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), 1), 'Error: Maximum limit must be greater than or equal to Minimum limit.');
-        utilities.verifyElementVisibilityState(utilities.getNthElement(commonComponents.errorMessage(), 1), 'visible');
-    },
-
-    verifyMinimumLimitErrorMessage: () => {
-        utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), 0), 'Error: Minimum limit must be less than or equal to Maximum limit.');
-        utilities.verifyElementVisibilityState(utilities.getNthElement(commonComponents.errorMessage(), 0), 'visible');
-    },
-
-    /**
-     * @param {number} responseIndex index of response container
-     * @param {number} maxlen value of maxlength attribute
-     * @description function verifies maxlength attribute of response container in preview tab
-     */
-    verifyMaximumCharacterLimitInPreviewTab: (responseIndex, maxlen) => {
-        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
-            .should('have.attr', 'maxlength', maxlen);
-    },
-
-    /**
-     * @param {number} responseIndex index of input field in specify correct answer
-     * @param {number} maxlen value of maxlength attribute
-     * @description function verifies maxlength attribute of input field in specify correct answer
-     */
-    verifyMaximumCharacterLimit: (responseIndex, maxlen) => {
-        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
-            .should('have.attr', 'maxlength', maxlen);
-    },
-
-    /**
-     * @param {number} responseIndex index of response container in preview tab
-     * @description function verifies maxlength attribute of input field in preview tab
-     */
-    verifyMaximumCharacterLimitNotExistInPreviewTab: (responseIndex) => {
-        utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), responseIndex)
-            .should('not.have.attr', 'maxlength');
-    },
-
     verifyLimitReachedWarningMessageNotExist: () => {
         utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.limitReachedWarningMessage(), 'notExist');
     },
@@ -691,7 +448,7 @@ const steps = {
      * @param {string} style pointer style
      * @param {number} responseContainerIndex text container index
      */
-    verifyTextContainerPointerStyleInPreviewTab: (style,  responseContainerIndex) => {
+    verifyTextContainerPointerStyleInPreviewTab: (style, responseContainerIndex) => {
         const getPosition = (option) => {
             switch (option) {
                 case 'bottom':
@@ -715,7 +472,7 @@ const steps = {
         const expectedPosition = getPosition(style);
         if (style == 'top right' || style == 'bottom right') {
             fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
-                .eq( responseContainerIndex)
+                .eq(responseContainerIndex)
                 .should('have.css', 'top', expectedPosition.top)
                 .and('have.css', 'right', expectedPosition.right);
         }
@@ -723,11 +480,11 @@ const steps = {
             fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
                 .should('not.exist')
         }
-        else if(style == 'bottom'){
+        else if (style == 'bottom') {
             fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
-            .eq(responseContainerIndex)
-            .should('have.css', 'bottom', expectedPosition.bottom)
-            .and('have.css', 'left', expectedPosition.left);
+                .eq(responseContainerIndex)
+                .should('have.css', 'bottom', expectedPosition.bottom)
+                .and('have.css', 'left', expectedPosition.left);
         }
         else {
             fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
@@ -738,7 +495,7 @@ const steps = {
     },
 
     verifyTextContainerNotExistInPreviewTab: () => {
-        utilities.verifyElementVisibilityState( fillInTheGapsOverImageTextPage.responseContainerInPreviewTab(), 'notExist');
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseContainerInPreviewTab(), 'notExist');
     },
 
     /**
@@ -746,7 +503,7 @@ const steps = {
      * @description this function verifies width of canvas
      */
     verifyCanvasWidthInPreviewTab: (width) => {
-         fillInTheGapsOverImageTextPage.canvasInPreviewTab()
+        fillInTheGapsOverImageTextPage.canvasInPreviewTab()
             .should('have.attr', 'width', width);
     },
 
@@ -755,7 +512,7 @@ const steps = {
      * @description this function verifies height of canvas
      */
     verifyCanvasHeightInPreviewTab: (height) => {
-         fillInTheGapsOverImageTextPage.canvasInPreviewTab()
+        fillInTheGapsOverImageTextPage.canvasInPreviewTab()
             .should('have.css', 'height', `${height}px`);
     },
 
@@ -831,7 +588,7 @@ const steps = {
                 throw new Error('invalid state string');
         }
     },
-    
+
     /**
     * Verify answer input field placeholder text
     * @param {number} answerFieldIndex index of answer input field
@@ -867,8 +624,9 @@ const tests = {
     ...commonComponents.tests,
     ...autoScoredStudentViewSettings.tests,
     ...backgroundImageUploadComponent.tests,
-    ...figOverImageCanvasComponent.tests,
+    ...imageCanvasComponent.tests,
     ...questionInstructionsComponent.tests,
+    ...fillInTheGapsTextCommonComponent.tests,
 
     /**
     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.