itemengine-cypress-automation 1.0.247-06SeptUpdates-b1623d7.0 → 1.0.248-23rdSeptUpdates-8103a8f.0

package/cypress/pages/listOrderingPage.js

@@ -1,6 +1,7 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, commonComponents, correctIncorrectAnswerLabelComponent, createQuestionBasePage, optionsWrapperComponent, questionInstructionsComponent, randomizeOptionsComponent, scoringSectionBaseEditTab, studentViewSettingsLabelComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, enableOuterBorderComponent } from "./components"
+import { autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, commonComponents, correctIncorrectAnswerLabelComponent, createQuestionBasePage, optionsWrapperComponent, questionInstructionsComponent, randomizeOptionsComponent, scoringSectionBaseEditTab, studentViewSettingsLabelComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, enableOuterBorderComponent, styleAndLayoutCustomizationAccordionComponent } from "./components"
+import { listOrderingCommonStyleAndLayoutComponent } from "./components/listOrderingCommonStyleAndLayoutComponent";
 const options = ['sprout', 'plant', 'flower', 'seed'];
 const css = Cypress.env('css');
 
@@ -15,6 +16,8 @@ const selectors = {
     ...correctIncorrectAnswerLabelComponent,
     ...autoScoredSpecifyCorrectAnswerSection,
     ...enableOuterBorderComponent,
+    ...styleAndLayoutCustomizationAccordionComponent,
+    ...listOrderingCommonStyleAndLayoutComponent,
     //Specify correct answer section
     optionSpecifyCorrectAnswerSection: () => cy.get('.list-ordering-set-correct-answer [class*="AnswerWrapper"][role="button"]'),
     optionTextSpecifyCorrectAnswerSection: () => cy.get('.draggable-item-wrapper[overflow] .question-text-wrapper'),
@@ -96,6 +99,32 @@ const selectors = {
     optionsSeperateList: () => cy.get('[class*="DraggableItemstyle__ItemWrapper"]'),
     droppedOptionSeperateList: () => cy.get('[class*="MultipleDroppedItemstyles__FlexWrapper"]'),
     correctAnswersWrapper: () => cy.get('.correct-answers-wrapper'),
+    partialDifferentWeightsPointsLabelSeparateList: () => cy.get('[class*="ListOrderingResponsestyles__PartialPointsPerResponseLabel"]'),
+    optionOrientationSeparateList: () => cy.get('[class*="ClozeWithDragAndDropstyles__DraggableItemsGrid"]'),
+    specifyCorrectAnswerSectionMyListLabel: () => cy.get('[class*="ReorderAsSeparatestyles__TitleContainer"]'),
+    outerBorderPreviewSeparateList: () => cy.get('[class*="ReorderAsSeparatestyles__ReorderSeparateWrapper"]'),
+
+    //Style and layout
+    optionsLabel: () => cy.get('.draggable-options-label'),
+    dragHandleIconLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(0),
+    dragHandleOptions: () => cy.get('.drag-handle-icon-block'),
+    dragHandle: () => cy.get('.draggable-item-wrapper [class*="drag"]'),
+    dragHandleSeperateList: () => cy.get('.draggable-selected-option [class*="drag"]'),
+    withBorderOptionStyleButton: () => cy.get('[data-ngie-testid="with-border-toggle-button"]'),
+    withoutBorderOptionStyleButton: () => cy.get('[data-ngie-testid="without-border-toggle-button"]'),
+    specifyCorrectanswerSectionOption: () => cy.get('[class*="ListOrderingResponsestyles__ItemWrapper"]'),
+    noConnectorsButton: () => cy.get('[data-ngie-testid="no-connectors-toggle-button"]'),
+    connectorsButton: () => cy.get('[data-ngie-testid="connectors-toggle-button"]'),
+    connectorIcon: () => cy.get('[class*="ListOrderingResponsestyles__ShowIconWrapper"]'),
+    connectorType: () => cy.get('[class*="StyleAndLayoutCustomizationstyles__DropzoneConnectorOptionsWrapper"] [type="button"]'),
+    fillAndBorderColorWrapper: () => cy.get('[class*="DraggableOptionsstyles__ColorOptionWrapper"]'),
+    listContainerLabel: () => cy.get('.dropzone-label'),
+    specifyCorrectanswerSectionOptionSeperateList: () => cy.get('[class*="DraggableItemstyle__ItemWrapper"]'),
+    draggableOptionPanelLabel: () => cy.get('.draggable-option-panel-label'),
+    panelPlacementLabel: () => cy.get('.panel-placement-style .options-label'),
+    leftToggleButton: () => cy.get('[data-ngie-testid="left-toggle-button"]'),
+    rightToggleButton: () => cy.get('[data-ngie-testid="right-toggle-button"]'),
+    pannelPlacementRightToggle: () => cy.get('.panel-placement-reversed-cls'),
 }
 
 const steps = {
@@ -112,6 +141,209 @@ const steps = {
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
     ...enableOuterBorderComponent.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
+    ...listOrderingCommonStyleAndLayoutComponent.steps,
+
+    /**
+     * Verifies the border value of specify correct answer section options
+     * @param {string} borderValue - The expected border value.
+     */
+    verifyBorderStyleInSpecifyCorrectAnswer: (borderValue) => {
+        utilities.verifyCSS(listOrderingPage.specifyCorrectanswerSectionOption(), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies the border value of specify correct answer section options for seperate list
+     * @param {string} borderValue - The expected border value.
+     */
+    verifyBorderStyleInSpecifyCorrectAnswerForSeperateList: (borderValue) => {
+        utilities.verifyCSS(listOrderingPage.specifyCorrectanswerSectionOptionSeperateList(), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies that left toogle button is selected.
+     */
+    verifyLeftToggleButtonSelected: () => {
+        listOrderingPage.leftToggleButton()
+            .should('have.attr', 'aria-pressed', 'true')
+    },
+
+    /**
+     * Verifies that right toogle button is selected.
+     */
+    verifyRightToggleButtonSelected: () => {
+        listOrderingPage.rightToggleButton()
+            .should('have.attr', 'aria-pressed', 'true')
+    },
+
+    /**
+     * Verifies that the with border option style button is selected.
+     */
+    verifyWithBorderOptionStyleButtonSelected: () => {
+        listOrderingPage.withBorderOptionStyleButton()
+            .should('have.attr', 'aria-pressed', 'true')
+    },
+
+    /**
+     * Verifies that the without border option style button is selected.
+     */
+    verifyWithoutBorderOptionStyleButtonSelected: () => {
+        listOrderingPage.withoutBorderOptionStyleButton()
+            .should('have.attr', 'aria-pressed', 'true')
+    },
+
+    /**
+     * Verifies that the no connectors button is selected.
+     */
+    verifyNoConnectorsButtonSelected: () => {
+        listOrderingPage.noConnectorsButton()
+            .should('have.attr', 'aria-pressed', 'true')
+    },
+
+    /**
+     * Verifies that the connectors button is selected.
+     */
+    verifyConnectorsButtonSelected: () => {
+        listOrderingPage.connectorsButton()
+            .should('have.attr', 'aria-pressed', 'true')
+    },
+
+    /**
+    * Verifies that the specified drag handle option is selected.
+    * @param {number} index - The index of the drag handle option to verify.
+    */
+    verifyDragHandleOptionSelected: (index) => {
+        listOrderingPage.dragHandleOptions()
+            .eq(index)
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                listOrderingPage.colorBlockSelectedIcon()
+                    .should('exist');
+            });
+    },
+
+    verifyDragHandleIconSpecifyCorrectAnswer: (dragHandleOption, listType) => {
+        let dragIcon;
+        if (listType === "SameList") {
+            dragIcon = listOrderingPage.dragHandle();
+        } else if (listType === "SeperateList") {
+            dragIcon = listOrderingPage.dragHandleSeperateList();
+        }
+        switch (dragHandleOption) {
+            case 'drag icon':
+                dragIcon
+                    .should('have.class', 'drag-icon-button');
+                break;
+            case 'arrow icon':
+                dragIcon
+                    .should('have.class', 'drag-arrows-icon');
+                break;
+            case 'none':
+                dragIcon
+                    .should('not.exist');
+                break;
+            default:
+                throw new Error('Invalid drag handle option');
+        }
+    },
+
+    /**
+    * Selects a drag handle option.
+    * @param {number} index - The index of the drag handle option to select.
+    */
+    selectDragHandleOption: (index) => {
+        listOrderingPage.dragHandleOptions()
+            .eq(index)
+            .click();
+    },
+
+    /**
+    * Selects a right toggle button.
+    */
+    selectRightToggleButton: () => {
+        listOrderingPage.rightToggleButton()
+            .click();
+    },
+
+    /**
+    * Selects a without border option style button.
+    */
+    selectWithoutBorderOptionStyleButton: () => {
+        listOrderingPage.withoutBorderOptionStyleButton()
+            .click();
+    },
+
+    /**
+    * Selects connectors button.
+    */
+    selectConnectorsButton: () => {
+        listOrderingPage.connectorsButton()
+            .click();
+    },
+
+    /**
+    * verify connectors are visible or not
+    * @param {number} totalNumberOfConnectors - total number of connectors present in specify correct answer section
+    */
+    verifyTotalNumberOfConnectors: (totalNumberOfConnectors) => {
+        for (let connector = 0; connector < totalNumberOfConnectors; connector++) {
+            utilities.verifyElementVisibilityState(listOrderingPage.connectorIcon().eq(connector), 'visible');
+        }
+    },
+    
+    /**
+    * Verifies the connector.
+    * @param {string} connectorName - name of the connector
+    */
+    verifyConnectorType: (connectorName) => {
+        switch (connectorName) {
+            case 'Left Arrow':
+                listOrderingPage.connectorType().eq(0)
+                    .should('have.attr', 'aria-label', 'leftArrow connector end point shape');
+                break;
+            case 'Right Arrow':
+                listOrderingPage.connectorType().eq(1)
+                    .should('have.attr', 'aria-label', 'rightArrow connector end point shape');
+                break;
+            case 'Double Arrow':
+                listOrderingPage.connectorType().eq(2)
+                    .should('have.attr', 'aria-label', 'doubleArrow connector end point shape');
+                break;
+            case 'Line':
+                listOrderingPage.connectorType().eq(3)
+                    .should('have.attr', 'aria-label', 'line connector end point shape');
+                break;
+            case 'Dash':
+                listOrderingPage.connectorType().eq(4)
+                    .should('have.attr', 'aria-label', 'dashed connector end point shape');
+                break;
+        }
+    },
+
+    /**
+    * Verifies that the connector is selected.
+    * @param {number} index - The index of the connector to verify.
+    */
+    verifyConnectorTypeSelected: (index) => {
+        listOrderingPage.connectorType()
+            .eq(index)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * Selects a connector type.
+    * @param {number} index - The index of the connector type to select.
+    */
+    selectConnectorType: (index) => {
+        listOrderingPage.connectorType()
+            .eq(index)
+            .click();
+    },
+
     /**
      * @param {string} optionsText text content of the option
      * @param {number} targetIndex the position at which the options is being dropped
@@ -173,7 +405,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -268,7 +500,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -333,6 +565,18 @@ const steps = {
             });
         return optionsArray;
     },
+    getOptionsArraySeparateList: () => {
+        const optionsArray = []
+        listOrderingPage.optionsSeperateList()
+            .each(($el) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((text) => {
+                        optionsArray.push(text);
+                    });
+            });
+        return optionsArray;
+    },
 
     /**
      * @param {string[]} optionsArray array of options set in the options section
@@ -361,6 +605,33 @@ const steps = {
             .should('not.have.text', '')
             .and('not.have.text', previousOrderOfOptionsArray.join(''));
     },
+    /**
+     * @param {string[]} optionsArray array of options set in the options section
+     * @description this function verifies if the options are Randomized in the preview tab
+     */
+    verifyRandomizeOptionOrderSeparateList: (optionsArray) => {
+        let currentOptionsArray = [...optionsArray]
+        cy.log(currentOptionsArray)
+        for (let index = 0; index < currentOptionsArray.length; index++) {
+            listOrderingPage.optionsSeperateList()
+                .eq(index)
+                .then(($element) => {
+                    expect($element.text()).to.be.oneOf(currentOptionsArray);
+                    currentOptionsArray = currentOptionsArray.filter((value) => value !== $element.text())
+                });
+        };
+        listOrderingPage.steps.verifyOptionsAreReRandomizedSeparateList(optionsArray)
+    },
+
+    /**
+    * @param {string[]} previousOrderOfOptionsArray array of previous order of options
+    * @description this function verifies that the order of the options is different from the previous order
+    */
+    verifyOptionsAreReRandomizedSeparateList: (previousOrderOfOptionsArray) => {
+        listOrderingPage.optionsSeperateList()
+            .should('not.have.text', '')
+            .and('not.have.text', previousOrderOfOptionsArray.join(''));
+    },
 
     verifyOuterBorderOfQuestionPreview: () => {
         utilities.verifyCSS(listOrderingPage.questionBorderPreviewTab(), {
@@ -380,6 +651,12 @@ const steps = {
             .and('match', /0px none/);
     },
 
+    verifyOuterBorderOfQuestionPreviewNotExistsSeparateList: () => {
+        listOrderingPage.outerBorderPreviewSeparateList()
+            .should('have.css', 'border')
+            .and('match', /0px none/);
+    },
+
     /**
      * @description Verifies that the image in the Specify Correct Answer section has the correct source and alt text.
      * @param {number} index - The index of the option in the Specify Correct Answer section.
@@ -409,7 +686,7 @@ const steps = {
         utilities.getNthElement(listOrderingPage.optionSpecifyCorrectAnswerSection(), index)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -594,7 +871,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -961,7 +1238,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -1005,7 +1282,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -1060,6 +1337,23 @@ const steps = {
         }
     },
 
+    /** Verifies the orientation option on the list ordering page in specify correct answer.
+    * @param {'Vertical' | 'Horizontal'} orientationOption - The orientation option to verify.
+    */
+    verifyOptionOrientationSeparateList: (orientationOption) => {
+        switch (orientationOption) {
+            case 'Vertical':
+                listOrderingPage.optionOrientationSeparateList()
+                    .should('have.css', 'display', 'flex')
+                    .should('have.css', 'flex-wrap', 'wrap');
+                break;
+            case 'Horizontal':
+                listOrderingPage.optionOrientationSeparateList()
+                    .should('have.css', 'display', 'flex');
+                break;
+        }
+    },
+
     /** Verifies the orientation option on the list ordering page in specify correct answer.
     * @param {'enabled' | 'disabled'} wrappingState - The orientation option to verify.
     */
@@ -1076,6 +1370,22 @@ const steps = {
         }
     },
 
+    /** Verifies the orientation option on the list ordering page in specify correct answer.
+    * @param {'enabled' | 'disabled'} wrappingState - The orientation option to verify.
+    */
+    verifyHorizontalWrappingSeparateList: (wrappingState) => {
+        switch (wrappingState) {
+            case 'enabled':
+                listOrderingPage.optionOrientationSeparateList()
+                    .should('have.css', 'flex-wrap', 'wrap');
+                break;
+            case 'disabled':
+                listOrderingPage.optionOrientationSeparateList()
+                    .should('not.have.css', 'flex-wrap', 'wrap');
+                break;
+        }
+    },
+
     /** Verifies the orientation option on the list ordering page in preview tab.
     * @param {'Vertical' | 'Horizontal'} orientationOption - The orientation option to verify.
     */
@@ -1155,6 +1465,16 @@ const steps = {
         });
     },
 
+    /**
+     * Verifies the order of options in seperate list.
+     * @param {string[]} optionsTextArray - An array containing the text of options in the expected order.
+     */
+    verifyOptionsOrderAsSeperateList: (optionsTextArray) => {
+        optionsTextArray.forEach((option, index) => {
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingPage.optionsSeperateList(), index), option);
+        });
+    },
+
     /**
     * @param {string} optionsText option to be checked for the correct icon
     * @description This function verifies the correct icon in the preview tab
@@ -1188,6 +1508,26 @@ const steps = {
             .click();
     },
 
+    clickAndUnDropOptionSeperateList: (optionsText) => {
+        listOrderingPage.dropzoneSeperateList()
+            .contains(optionsText)
+            .realClick();
+        listOrderingPage.optionOrientationSeparateList()
+            .realClick();
+    },
+
+    /**
+    * @param {string} optionsText text content of the equation option
+    * @description click and drop a equation option into the dropzone in the specify correct answer section
+    */
+    clickAndDropEquationOptionSeperateList: (optionsText) => {
+        listOrderingPage.optionsSeperateList()
+            .contains(optionsText)
+            .realClick();
+        listOrderingPage.dropzoneSeperateList()
+            .realClick();
+    },
+
     /**
      * Verifies the order of Horizontal options in the "Specify Correct Answer" section.
      * @param {string[]} optionsTextArray - An array containing the text of options in the expected order.
@@ -1217,7 +1557,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -1229,7 +1569,19 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
+    },
+
+    /**
+     * @description Verifies that the equation text in the correct answer section is correct.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyOptionWithEquationTextInDropzoneCorrectAnswerSectionSeperateListEditTab: (optionIndex) => {
+        listOrderingPage.droppedOptionSeperateList()
+            .eq(optionIndex)
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -1241,7 +1593,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -1289,6 +1641,17 @@ const steps = {
             .should('have.text', 'This is a bold option');
     },
 
+    /**
+     * @description Verifies that the bold text in the correct answer section is correct for seperate list.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyOptionWithBoldTextInDropzoneCorrectAnswerSectionSeperateListEditTab: (optionIndex) => {
+        listOrderingPage.droppedOptionSeperateList()
+            .eq(optionIndex)
+            .find('strong')
+            .should('have.text', 'This is a bold option');
+    },
+
     /**
      * @description Verifies that the bold text in the Preview tab is correct for seperate list.
      * @param {number} optionIndex - The index of the option in the Preview tab.
@@ -1377,6 +1740,8 @@ const tests = {
     ...additionalSettingsAccessibilitySectionComponent.tests,
     ...createQuestionBasePage.tests,
     ...enableOuterBorderComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
+    ...listOrderingCommonStyleAndLayoutComponent.tests,
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
             utilities.verifyElementCount(listOrderingPage.optionSpecifyCorrectAnswerSection(), 4);
@@ -1386,6 +1751,15 @@ const tests = {
             });
         });
     },
+    verifyContentsOfSpecifyCorrectAnswerSectionSeperateList: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            utilities.verifyElementCount(listOrderingPage.optionsSeperateList(), 4);
+            listOrderingPage.steps.verifyOptionsOrderAsSeperateList(options);
+            options.forEach((optionText, index) => {
+                utilities.verifyElementVisibilityState(utilities.getNthElement(listOrderingPage.draggableOptionDragIcon(), index), 'visible');
+            });
+        });
+    },
 
     verifyContentsOfSpecifyCorrectAnswerSectionDropdownLayout: () => {
         it('By default, 4 options should be displayed with dropdowns in the specify correct answer section', () => {