itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/components/measuringToolComponent.js

@@ -0,0 +1,215 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+import { dialogBoxBase } from "../dialogBoxBase";
+
+const colorValues = ['rgba(255, 255, 255, 1)', 'rgb(186, 201, 255)', 'rgb(128, 239, 255)', 'rgb(255, 238, 215)', 'rgb(255, 238, 78)', 'rgb(220, 223, 230)'];
+
+const selectors = {
+    ...commonComponents,
+    alternativeTextInputField: () => cy.get('.additional-option-placeholder-input input'),
+    rotationLabel: () => cy.get('#Rotation-dropdown-label'),
+    rotationDropdown: () => cy.get('#Rotation-select'),
+    rotationDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Rotation-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Rotation-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"]')
+        }
+    },
+    rotationButtonInPreviewTab: () => cy.get('.icon-rotate'),
+    opacityLabel: () => cy.get('.MuiGrid-align-items-xs-center [class*="PropertyLabel"]'),
+    opacityInputField: () => cy.get('.MuiGrid-align-items-xs-center .text-input-field input'),
+    opacitySlider: () => cy.get('.MuiGrid-align-items-xs-center .opacity-slider'),
+    toolColorBlock: () => cy.get('[class*="ColorBlockWrapper"] .MuiToggleButton-root')
+}
+
+const steps = {
+    verifyEmptyAndVisibleAlternativeTextInput: () => {
+        utilities.verifyInnerText(measuringToolComponent.alternativeTextInputField(), '');
+        utilities.verifyElementVisibilityState(measuringToolComponent.alternativeTextInputField(), 'exist');
+    },
+
+    /**
+     * @param {string} text text to be added in input field
+     * @description this function adds text in input field and then verifies it
+     */
+    enterAndVerifyAlternativeTextInInputField: (text) => {
+        measuringToolComponent.alternativeTextInputField()
+            .type(text);
+        measuringToolComponent.alternativeTextInputField()
+            .should('have.value', text);
+    },
+
+    /**
+     * @param {string} text text to be added in input field
+     * @description this function adds text in input field and then verifies it inside popup
+     */
+    enterAndVerifyTextInAlternativeTextInputFieldInPopup: (text) => {
+        dialogBoxBase.dialogBox()
+            .within(() => {
+                measuringToolComponent.alternativeTextInputField()
+                    .type(text);
+                measuringToolComponent.alternativeTextInputField()
+                    .should('have.value', text);
+            });
+    },
+
+    verifyAlternativeTextInputField: (text) => {
+        measuringToolComponent.alternativeTextInputField()
+            .should('have.value', text);
+    },
+
+    clearAlternativeTextInputFieldText: () => {
+        measuringToolComponent.alternativeTextInputField()
+            .clear();
+    },
+
+    verifyDefaultRotationLabelAndDropdown: () => {
+        utilities.verifyInnerText(measuringToolComponent.rotationLabel(), 'Rotation');
+        utilities.verifyElementVisibilityState(measuringToolComponent.rotationLabel(), 'visible');
+        utilities.verifyInnerText(measuringToolComponent.rotationDropdown(), 'Allow rotation');
+        utilities.verifyElementVisibilityState(measuringToolComponent.rotationDropdown(), 'exist');
+    },
+
+    expandRotationDropdown: () => {
+        measuringToolComponent.rotationDropdown()
+            .click();
+        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'visible');
+    },
+
+    /**
+     * @param {string[]} dropdownOptionsArray array containing options of rotation dropdown list
+     * @description this function is used to verify inner text of expanded dropdown list options
+     */
+    verifyRotationDropdownOptions: (dropdownOptionsArray) => {
+        dropdownOptionsArray.forEach((option, count) => {
+            measuringToolComponent.rotationDropdownListOptions()
+                .eq(count)
+                .should('have.text', option);
+        });
+    },
+
+    /**
+     * @param {string} option is the option to be selected from dropdown list
+     * @description function selects option from expanded dropdown list
+     */
+    selectOptionFromRotationDropdown: (option) => {
+        measuringToolComponent.rotationDropdownListOptions(option)
+            .click();
+        utilities.verifyInnerText(measuringToolComponent.rotationDropdown(), option);
+    },
+
+    verifyRotationButtonNotVisibleInPreviewTab: () => {
+        utilities.verifyElementVisibilityState(measuringToolComponent.rotationButtonInPreviewTab(), 'notExist');
+    },
+
+    verifyRotationButtonVisibleInPreviewTab: () => {
+        utilities.verifyElementVisibilityState(measuringToolComponent.rotationButtonInPreviewTab(), 'exist');
+    },
+
+    verifyDefaultOpacityLabelSliderAndInputField: () => {
+        utilities.verifyInnerText(measuringToolComponent.opacityLabel(), 'Opacity');
+        utilities.verifyElementVisibilityState(measuringToolComponent.opacityLabel(), 'visible');
+        utilities.verifyElementVisibilityState(measuringToolComponent.opacitySlider(), 'visible')
+        measuringToolComponent.steps.verifyOpacitySliderValue(40);
+        measuringToolComponent.steps.verifyOpacityInputFieldValue(40);
+        utilities.verifyElementVisibilityState(measuringToolComponent.opacityInputField(), 'visible');
+    },
+
+    /**
+     * @param {number} value holds value of input field
+     * @description function verifies value in input field
+     */
+    verifyOpacityInputFieldValue: (value) => {
+        measuringToolComponent.opacityInputField()
+            .should('have.value', value);
+    },
+
+    verifyMaxOpacitySliderValue: () => {
+        measuringToolComponent.opacitySlider()
+            .find('[role="slider"]')
+            .should('have.attr', 'aria-valuemax', 100);
+    },
+
+    /**
+     * @param {number} value holds value of slider
+     * @description function verifies value in slider
+     */
+    verifyOpacitySliderValue: (value) => {
+        measuringToolComponent.opacitySlider()
+            .find('input')
+            .should('have.value', value);
+    },
+
+    /**
+     * @param {number} value holds value to be added in input field
+     * @description function adds value in input field
+     */
+    enterInputToOpacityInputField: (value) => {
+        measuringToolComponent.opacityInputField()
+            .clear()
+            .type(value);
+        measuringToolComponent.opacityInputField()
+            .should('have.value', value);
+    },
+
+    clickOnOpacitySlider: () => {
+        measuringToolComponent.opacitySlider()
+            .click();
+    },
+
+    /**
+     * @param {number} colorIndex index for color block
+     * @description function verifies selected state of color block
+     */
+    verifyToolColorSelectedState: (colorIndex) => {
+        measuringToolComponent.toolColorBlock()
+            .eq(colorIndex)
+            .find('svg')
+            .should('be.visible');
+    },
+
+    /**
+     * @param {number} colorIndex index for color block
+     * @description function verifies unselected state of color block
+     */
+    verifyToolColorUnselectedState: (colorIndex) => {
+        measuringToolComponent.toolColorBlock()
+            .eq(colorIndex)
+            .find('svg')
+            .should('not.be.visible');
+    },
+
+    /**
+     * @param {number} blockIndex index for color block
+     * @param {string} colorValue color value for the color block
+     * @description function verifies color value for the color block
+     */
+    verifyColorBlock: (blockIndex, colorValue) => {
+        utilities.verifyCSS(measuringToolComponent.toolColorBlock().eq(blockIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * @param {number} colorIndex is index for color block
+     * @description function selects the color block
+     */
+    selectColorBlock: (colorIndex) => {
+        measuringToolComponent.toolColorBlock()
+            .eq(colorIndex)
+            .click();
+    },
+
+    verifyToolColorBlocksVisibility: () => {
+        utilities.verifyElementCount(measuringToolComponent.toolColorBlock(), 6);
+        colorValues.forEach((color, blockIndex) => {
+            measuringToolComponent.steps.verifyColorBlock(blockIndex, colorValues[blockIndex]);
+        });
+    },
+}
+
+export const measuringToolComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/optionsWrapperComponent.js

@@ -1,5 +1,9 @@
 import constants from "../../fixtures/constants";
+import utilities from "../../support/helpers/utilities";
+import { ckEditorToolbar } from "./ckEditorToolbar";
 import { commonComponents } from "./commonComponents";
+import { equationEditorFlyout } from "./equationEditorFlyout";
+const css = Cypress.env('css');
 
 const selectors = {
     optionsLabel: () => cy.get('.options-label'),
@@ -121,7 +125,7 @@ const steps = {
     focusInOptionsInputField: (index) => {
         optionsWrapperComponent.optionsInputField()
             .eq(index)
-            .focus();
+            .click();
     },
 
     /**
@@ -191,11 +195,7 @@ const steps = {
     */
     addInputToOptionsInputField: (optionsTextArray) => {
         optionsTextArray.forEach((optionsText, index) => {
-            optionsWrapperComponent.optionsInputField()
-                .eq(index)
-                .type(optionsText)
-                .should('have.text', optionsText)
-                .blur();
+            optionsWrapperComponent.steps.enterTextInOptionInputField(index, optionsText);
         });
     },
 
@@ -213,9 +213,312 @@ const steps = {
                     .type(textContent);
             });
     },
+
+    /**
+     * @param {number} index of option input field
+     * @param {string} textContent to enter text in the options input field
+     */
+    enterTextInOptionInputField: (index, textContent) => {
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                optionsWrapperComponent.optionsInputField()
+                    .eq(index)
+                    .type(textContent)
+                    .blur();
+            });
+    },
+
+    /**
+     * @param {number} optionFieldsCount - The number of option fields to be added.
+     * @description Adds multiple option fields to the component.
+     */
+    addMultipleOptionFields: (optionFieldsCount) => {
+        for (let i = 0; i < optionFieldsCount; i++) {
+            optionsWrapperComponent.addOptionButton()
+                .click();
+        };
+    },
+
+    verifyDeleteOptionButtonDisabledState: () => {
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                optionsWrapperComponent.deleteOptionButton()
+                    .each(($element) => {
+                        utilities.verifyElementDisabled(cy.wrap($element))
+                    });
+            });
+    },
+
+    getOptionCount: () => {
+        return optionsWrapperComponent.optionWrapper().its('length')
+    },
+
+    /**
+     * Verifies the contents of option fields within the options section.
+     * @param {Array<string>} optionsTextArray - An array of strings representing the expected text content for each option field.
+     */
+    verifyOptionFieldContentsInOptionsSection: (optionsTextArray) => {
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                optionsTextArray.forEach((option, optionIndex) => {
+                    utilities.verifyTextContent(utilities.getNthElement(optionsWrapperComponent.optionsInputField(), optionIndex), option);
+                });
+            });
+    }
+}
+
+const tests = {
+    /**
+     * Verifies the contents and styling of the 'Options' section.
+     * @param {number} optionFieldsCount - The expected number of option input fields.
+     */
+    verifyOptionsSectionContents: ({ optionFieldsCount, optionLabel }) => {
+        it(`\'${optionLabel}\' label should be displayed`, () => {
+            utilities.verifyInnerText(optionsWrapperComponent.optionsLabel(), optionLabel);
+        });
+
+        it(`By default ${optionFieldsCount} option input fields with placeholder text, drag handle and delete option icon buttons should be displayed`, () => {
+            for (let index = 0; index < optionFieldsCount; index++) {
+                optionsWrapperComponent.steps.verifyOptionsContents(index);
+            };
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            utilities.verifyInnerText(optionsWrapperComponent.addOptionButton(), 'Add option');
+            utilities.verifyElementVisibilityState(optionsWrapperComponent.addOptionButton(), 'visible');
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(optionsWrapperComponent.optionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(commonComponents.dragHandleButton().find('path'), {
+                'fill': css.color.secondaryBtnActive
+            });
+            commonComponents.deleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.verifyCSS(optionsWrapperComponent.optionsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(optionsWrapperComponent.addOptionButton(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.medium
+            });
+        });
+    },
+
+    /**
+     * Verify the error state of an 'Options' input field.
+     * @param {number} inputFieldIndex - The index of the 'Options' input field to verify.
+     * @throws {Error} Throws an error if the expected error message is not displayed.
+     */
+    verifyOptionInputFieldErrorState: (inputFieldIndex) => {
+        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
+            optionsWrapperComponent.optionsInputField()
+                .eq(inputFieldIndex)
+                .click()
+                .blur();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Option is required.');
+        });
+
+        it('User should be able to enter text in options input field and \'Error: Option is required.\' error message should disappear', () => {
+            optionsWrapperComponent.optionsInputField()
+                .eq(inputFieldIndex)
+                .type('option 1')
+                .blur();
+            optionsWrapperComponent.optionWrapper()
+                .eq(inputFieldIndex)
+                .within(() => {
+                    utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+                });
+        });
+    },
+
+    /**
+     * Verify the ability to upload images in the 'Options' input field.
+     * @param {number} inputFieldIndex - The index of the 'Options' input field to verify.
+     * @returns {undefined}
+     */
+    verifyImageUploadInOptionsInputField: (inputFieldIndex) => {
+        it('User should be able to upload images in options input field', () => {
+            optionsWrapperComponent.steps.focusInOptionsInputField(inputFieldIndex);
+            ckEditorToolbar.steps.selectImageOptionFromCKEditorToolbar();
+            ckEditorToolbar.steps.addImageToInputField();
+            optionsWrapperComponent.steps.verifyImageAndAltTextInOptionsInputField(inputFieldIndex);
+        });
+    },
+    
+    /**
+     * Verify the ability to add bold text in the 'Options' input field.
+     * @param {number} inputFieldIndex - The index of the 'Options' input field to verify.
+     * @returns {undefined}
+     */
+    verifyBoldTextInOptionsInputField: (inputFieldIndex) => {
+        it('User should be able to add bold text in options input field', () => {
+            optionsWrapperComponent.steps.focusInOptionsInputField(inputFieldIndex);
+            ckEditorToolbar.steps.selectBoldOptionFromCKEditorToolbar();
+            optionsWrapperComponent.steps.addBoldTextInputToOptionsInputField(inputFieldIndex);
+            optionsWrapperComponent.steps.verifyBoldOption(inputFieldIndex);
+        });
+    },
+
+    /**
+     * Verify the ability to add an equation in the 'Options' input field.
+     * @param {number} inputFieldIndex - The index of the 'Options' input field to verify.
+     * @returns {undefined}
+     */
+    verifyEquationTextInOptionsInputField: (inputFieldIndex) => {
+        it('User should be able to add an equation in options input field', () => {
+            optionsWrapperComponent.steps.focusInOptionsInputField(inputFieldIndex);
+            ckEditorToolbar.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            equationEditorFlyout.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            optionsWrapperComponent.steps.verifyEquationInOptionsInputField(inputFieldIndex);
+        });
+    },
+
+    verifyDragHandleTooltip: () => {
+        it('On hovering over the drag handle of the options, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+            utilities.triggerMouseover(utilities.getNthElement(commonComponents.dragHandleButton(), 0));
+            utilities.verifyInnerText(commonComponents.tooltipText(), 'Drag to reorder');
+            utilities.triggerMouseout(utilities.getNthElement(commonComponents.dragHandleButton(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        it('CSS of drag handle tooltip', { tags: 'css' }, () => {
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    utilities.triggerMouseover(commonComponents.dragHandleButton());
+                });
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    utilities.triggerMouseout(commonComponents.dragHandleButton())
+                });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        it('Accessibility of drag handle tooltip', { tags: 'a11y' }, () => {
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    utilities.triggerMouseover(commonComponents.dragHandleButton());
+                });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
+            cy.checkAccessibility(commonComponents.tooltipText());
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    utilities.triggerMouseout(commonComponents.dragHandleButton())
+                });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+    },
+
+    verifyDisabledDeleteButtonTooltip: () => {
+        it('When the user hovers over the disabled delete buttons of the options then \'Minimum two options are required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the delete button', () => {
+            utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)
+                .trigger('mouseover', { force: true });
+            utilities.verifyInnerText(commonComponents.tooltipText(), 'Minimum two options are required');
+            utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)
+                .trigger('mouseout', { force: true });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        it('CSS of disabled delete button tooltip', { tags: 'css' }, () => {
+            utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)
+                .trigger('mouseover', { force: true });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)
+                .trigger('mouseout', { force: true });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        it('Accessibility of disabled delete button tooltip', { tags: 'a11y' }, () => {
+            utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)
+                .trigger('mouseover', { force: true });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
+            cy.checkAccessibility(commonComponents.tooltipText());
+            utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)
+                .trigger('mouseout', { force: true });
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+    },
+
+    verifyAddOptionFunctionality: () => {
+        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed and option numeration should increment', () => {
+            let initialOptionCount;
+            optionsWrapperComponent.steps.getOptionCount().then((count) => {
+                initialOptionCount = count;
+                optionsWrapperComponent.steps.addOption();
+                optionsWrapperComponent.steps.getOptionCount().should('eq', initialOptionCount + 1);
+                optionsWrapperComponent.steps.verifyOptionsContents(initialOptionCount);
+            });
+        });
+    },
+
+    verifyEnabledDeleteButtonAndTooltip: () => {
+        it('When the number of options are greater than 2 then the \'Delete\' icon buttons should get enabled', () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .should('be.enabled');
+        });
+
+        it('CSS of enabled \'Delete\' option button', { tags: 'css' }, () => {
+            utilities.verifyCSS(optionsWrapperComponent.deleteOptionButton(), {
+                'opacity': '1'
+            });
+            optionsWrapperComponent.deleteOptionButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+        })
+
+        it('Accessibility of enabled \'Delete\' option button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(optionsWrapperComponent.deleteOptionButton());
+        });
+
+        it('when the user hovers over the enabled \'Delete\' icon buttons, then \'Delete option\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)
+                .verifyTooltip('Delete option');
+        });
+
+        it('CSS of enabled delete button tooltip', { tags: 'css' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.triggerMouseout(utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        it('Accessibility of enabled delete button tooltip', { tags: 'a11y' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
+            cy.checkAccessibility(commonComponents.tooltipText());
+            utilities.triggerMouseout(utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+    }
 }
 
 export const optionsWrapperComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/previewScoringAndShowCorrectAnswerComponent.js

@@ -1,6 +1,6 @@
 import { createQuestionBasePage } from "./createQuestionBasePage";
 const css = Cypress.env('css');
-
+//This file be deprecated, the new file is autoScoredScoringPreviewTab
 const selectors = {
     showCorrectAnswerCheckbox: () => cy.get('input[aria-label="Show correct answer"]'),
     showCorrectAnswerCheckboxLabel: () => cy.get('.showAnswer-options-label').eq(1),
@@ -56,7 +56,6 @@ const tests = {
         });
     },
 
-    //V3 - This function should be updated in all files
     verifyShowCorrectAnswerLabelAndCheckboxExistAndPreviewScoreNotExistInPreviewTab: () => {
         it('Show correct answer checkbox should be displayed and it should be unchecked by default and points should not be displayed beside it ', () => {
             previewScoringAndShowCorrectAnswerComponent.gradingViewRadioButton()

package/cypress/pages/components/questionInputFieldComponent.js

@@ -0,0 +1,109 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+
+const selectors = {
+    questionLabel: () => cy.get('.cloze-with-text-question-wrapper .title-casing'),
+    questionInputField: () => cy.get('.cloze-with-text-question-wrapper [title="question"]'),
+    responseToken: () => cy.get('.cke_widget_wrapper_add_response_element'),
+    responseTokenCloseButton: () => cy.get('.add_response_close'),
+    ckEditorAddResponseButton: () => cy.get('[title="Add Response"]'),
+    responseTokenNumeration: () => cy.get('marker'),
+    responseTokenResponseLabel: () => cy.get('content')
+}
+
+const steps = {
+    addResponseTokenInQuestionField: () => {
+        questionInputFieldComponent.questionInputField()
+            .click();
+        questionInputFieldComponent.ckEditorAddResponseButton()
+            .click();
+    },
+
+    /**
+     * @description Delete a response token by clicking on its close button
+     * @param {number} responseTokenIndex response token index
+     */
+    deleteAResponseToken: (responseTokenIndex) => {
+        utilities.getNthElement(questionInputFieldComponent.responseToken(), responseTokenIndex)
+            .within(() => {
+                questionInputFieldComponent.responseTokenCloseButton()
+                    .click();
+            });
+    },
+
+    /**
+     * @description Verify response token numeration and close button
+     * @param {number} responseTokenIndex response token index
+     */
+    verifyResponseTokenNumerationAndCloseButton: (responseTokenIndex) => {
+        utilities.getNthElement(questionInputFieldComponent.responseToken(), responseTokenIndex)
+            .within(() => {
+                utilities.verifyInnerText(questionInputFieldComponent.responseTokenNumeration(), `${responseTokenIndex + 1}`);
+                utilities.verifyElementVisibilityState(questionInputFieldComponent.responseTokenNumeration(), 'visible');
+                utilities.verifyElementVisibilityState(questionInputFieldComponent.responseTokenCloseButton(), 'visible');
+            });
+    },
+
+    /**
+     * @description Add input to question input field
+     * @param {string} textInput Text input to be given in question input field
+     */
+    addInputToQuestionInputField: (textInput) => {
+        questionInputFieldComponent.questionInputField()
+            .type(textInput);
+    },
+
+    clearQuestionInputField: () => {
+        questionInputFieldComponent.questionInputField()
+            .clear()
+            .should('have.value', '')
+            .blur();
+    },
+
+    clickInQuestionInputField: () => {
+        questionInputFieldComponent.questionInputField()
+            .click();
+    },
+
+    addResponseToken: () => {
+        questionInputFieldComponent.steps.clickInQuestionInputField();
+        questionInputFieldComponent.ckEditorAddResponseButton()
+            .click();
+    },
+
+    verifyQuestionInputFieldPlaceholder: () => {
+        questionInputFieldComponent.questionInputField()
+            .should('have.attr', 'data-cke-editorplaceholder', 'Enter question');
+    },
+
+    verifyQuestionInputFieldPlaceholderNotDisplayed: () => {
+        questionInputFieldComponent.questionInputField()
+            .should('not.have.attr', 'data-cke-editorplaceholder');
+    },
+}
+
+const tests = {
+    verifyQuestionInputFieldPlaceholderText: () => {
+        it('When the user clears the question input field, \'Enter question\' placeholder text should be displayed and when the user enters text in the input field, the placeholder should disappear', () => {
+            questionInputFieldComponent.steps.clearQuestionInputField();
+            questionInputFieldComponent.steps.verifyQuestionInputFieldPlaceholder();
+            questionInputFieldComponent.steps.addInputToQuestionInputField('Lorem Ipsum');
+            utilities.verifyInnerText(questionInputFieldComponent.questionInputField(), '​​​​​​​Lorem Ipsum');
+            questionInputFieldComponent.steps.verifyQuestionInputFieldPlaceholderNotDisplayed();
+        });
+    },
+
+    addTokenAndVerifyMinimumOneTokenRequiredErrorMessageNotExist: () => {
+        it('When the user adds a token in the question field, then the error message should disappear', () => {
+            questionInputFieldComponent.steps.addResponseToken();
+            utilities.verifyElementCount(questionInputFieldComponent.responseToken(), 1);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+    },
+}
+
+export const questionInputFieldComponent = {
+    ...selectors,
+    steps,
+    tests
+}