itemengine-cypress-automation 1.0.553-IEI-3480-e6afc10.0 → 1.0.553-IEI-7000-main-8cb7c78.0

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -1,4 +1,4 @@
-import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent, specifyRowsAndColumnsComponent, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent } from "./components";
+import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent, specifyRowsAndColumnsComponent, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent, printPreviewComponent } from "./components";
 import utilities from "../support/helpers/utilities";
 import constants from "../fixtures/constants";
 import { createItemPage } from "./createItemPage";
@@ -25,6 +25,7 @@ const selectors = {
     ...gradingViewEnumerationComponent,
     ...ariaLabelSectionComponent,
     ...scoringSectionBaseEditTab,
+    ...printPreviewComponent,
 
     editCellPropertyButton: () => cy.get('.action-menu button'),
     editCellPropertyList: () => cy.get('.ngie-action-cell-container [role="menu"]'),
@@ -70,7 +71,7 @@ const selectors = {
     dropzoneAriaLabelInputField: () => cy.get('[type="text"][aria-label*="Enter ARIA label"]'),
 
     //Preview tab table
-    tableRowContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__RowContainer"]'),
+    tableRowContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__RowContainer"],[class*="Matrixstyles__MatrixRow"]'),
     leftArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Left Pagination Button"][class*="Matrixstyles__PaginationControl"]'),
     rightArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Right Pagination Button"][class*="Matrixstyles__PaginationControl"]'),
     cellContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="CellDropZonestyles__CellContainer"],[class*="question-preview-wrapper"] [class*="Cellstyles__StyledCell"]'),
@@ -91,7 +92,7 @@ const selectors = {
     penaltyPointsForIncorrectOptionInputField: () => cy.get('input[aria-label*="enalty points for each incorrect option"]'),
     penaltyPointsForEachIncorrectOptionOrDropzoneLabel: () => cy.get('[class*="PenaltyScoreForEachIncorrectstyles__PointsLabel"]'),
     tableOuterBorder: () => cy.get('.table-border'),
-    maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Matrixstyles__MaxLimitWrapper"]'),
+    maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Matrixstyles__MaxLimitWrapper"],[class*="MaximumLimitstyles__MaximumLimitWrapper"]'),
     dropzoneGridSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__TableWrapper"]'),
     dropzoneGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__TableWrapper"]'),
 
@@ -154,12 +155,17 @@ const selectors = {
     panelPlacementOptions: (placementOption) => cy.get(`.panel-placement-style button[aria-label*="panel placement ${placementOption}"]`),
     optionAlignmentInPanelOptions: (alignmentOption) => cy.get(`.option-alignment button[aria-label*="option alignment in panel ${alignmentOption}"]`),
     optionsWrapper: () => cy.get('[class*="StandardDropZonestyles__DraggableItemsGrid"]'),
-    optionsWrapperPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="StandardDropZonestyles__DraggableItemsGrid"]'),
+    optionsWrapperPreviewTab: () => cy.get('[class*="StandardDropZonestyles__DraggableItemsGrid"],.standard-options-dropzone'),
     optionsPreviewTab: () => cy.get('[class*="CellDropZonestyles__DraggableItemWrapper"]'),
     iconWrapperInPreviewTab: () => cy.get('[class*="DragAndDropMatrixstyles__TickIconWrapper"]'),
     gridBoxInPreviewTab: () => cy.get('[class*="CellDropZonestyles__DraggableWrapper"]'),
-    optionPanelWrapper: () => cy.get('.option-drag-and-drop'),
-    optionsInputFieldInQuestionPreviewTab: () => cy.get('.draggable-items-flex-wrapper .question-text-wrapper,.options-flex-wrapper .question-text-wrapper')
+    optionPanelWrapper: () => cy.get('.option-drag-and-drop, .options-dropzone-wrapper'),
+    optionsInputFieldInQuestionPreviewTab: () => cy.get('.draggable-items-flex-wrapper .question-text-wrapper,.options-flex-wrapper .question-text-wrapper'),
+    fitAllColumnsInOnePageLabel: () => cy.get('label[aria-label*="Fit all columns in one page"]'),
+    fitAllColumnsInOnePageCheckbox: () => cy.get('[aria-label*="Fit all columns in one page"] input'),
+    dropzoneHeightInputField: () => cy.get('input[id*="Dropzone height (px)"]'),
+    dropzoneHeightLabel: () => cy.get('label[for*="Dropzone height (px)"]'),
+    tableRowContainerStudentView: () => cy.get('[class*="Matrixstyles__MatrixContainer"]'),
 }
 
 const steps = {
@@ -187,6 +193,7 @@ const steps = {
     ...gradingViewEnumerationComponent.steps,
     ...ariaLabelSectionComponent.steps,
     ...createItemPage.steps,
+    ...printPreviewComponent.steps,
 
     /**
      * @description Modifies the dropzone property based on the specified list option.
@@ -1516,21 +1523,21 @@ const steps = {
                 dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
                     .each(($el) => {
                         cy.wrap($el)
-                            .should('have.css', 'row-gap', '0px');
+                            .should('have.css', 'column-gap', '0px');
                     });
                 break;
             case 'Small':
                 dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
                     .each(($el) => {
                         cy.wrap($el)
-                            .should('have.css', 'row-gap', '8px');
+                            .should('have.css', 'column-gap', '8px');
                     });
                 break;
             case 'Wide':
                 dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
                     .each(($el) => {
                         cy.wrap($el)
-                            .should('have.css', 'row-gap', '24px');
+                            .should('have.css', 'column-gap', '24px');
                     });
                 break;
             default:
@@ -2015,25 +2022,16 @@ const steps = {
     verifyDragHandleIconPreviewTab: (dragHandleOption) => {
         switch (dragHandleOption) {
             case 'drag icon':
-                dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
-                    .within(() => {
-                        dragAndDropIntoCategoriesPage.dragHandle()
-                            .should('have.class', 'drag-icon-button');
-                    });
+                dragAndDropIntoCategoriesPage.dragHandle()
+                    .should('have.class', 'drag-icon-button');
                 break;
             case 'arrow icon':
-                dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
-                    .within(() => {
-                        dragAndDropIntoCategoriesPage.dragHandle()
-                            .should('have.class', 'drag-arrows-icon');
-                    });
+                dragAndDropIntoCategoriesPage.dragHandle()
+                    .should('have.class', 'drag-arrows-icon');
                 break;
             case 'none':
-                dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
-                    .within(() => {
-                        dragAndDropIntoCategoriesPage.dragHandle()
-                            .should('not.be.visible');
-                    });
+                dragAndDropIntoCategoriesPage.dragHandle()
+                    .should('not.be.visible');
                 break;
         }
     },
@@ -2053,12 +2051,9 @@ const steps = {
    * @param {string} colorValue - The expected background color value.
    */
     verifyDraggableOptionsFillColorPreviewTab: (colorValue) => {
-        dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
-            .within(() => {
-                utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
-                    'background-color': colorValue
-                });
-            });
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+            'background-color': colorValue
+        });
     },
 
     /**
@@ -2076,12 +2071,19 @@ const steps = {
     * @param {string} colorValue - The expected border color value.
     */
     verifyDraggableOptionsBorderColorPreviewTab: (colorValue) => {
-        dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
-            .within(() => {
-                utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
-                    'border': `1px solid ${colorValue}`
-                });
-            });
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+            'border': `1px solid ${colorValue}`
+        });
+    },
+
+    /**
+    * Verifies the border color of grid
+    * @param {string} colorValue - The expected border color value.
+    */
+    verifyDraggableOptionsBorderColorAllView: (colorValue) => {
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+            'border': `1px dotted ${colorValue}`
+        });
     },
 
     /**
@@ -2158,35 +2160,32 @@ const steps = {
      * @param {string} placementOption - The panel placement option to verify.
      */
     verifyPanelPlacementPreviewTab: (placementOption) => {
-        dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
-            .within(() => {
-                switch (placementOption) {
-                    case 'Bottom':
-                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
-                            .should('have.css', 'width', '844px')
-                            .and('have.css', 'padding-top', '32px')
-                            .and('have.css', 'padding-bottom', '16px')
-                        break;
-                    case 'Top':
-                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
-                            .should('have.css', 'width', '844px')
-                            .and('have.css', 'padding-top', '16px')
-                            .and('have.css', 'padding-bottom', '32px')
-                        break;
-                    case 'Left':
-                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
-                            .should('have.css', 'width', '200px')
-                            .and('have.css', 'padding-right', '24px')
-                            .and('have.css', 'padding-left', '8px')
-                        break;
-                    case 'Right':
-                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
-                            .should('have.css', 'width', '200px')
-                            .and('have.css', 'padding-right', '8px')
-                            .and('have.css', 'padding-left', '24px')
-                        break;
-                }
-            });
+        switch (placementOption) {
+            case 'Bottom':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '32px')
+                    .and('have.css', 'padding-bottom', '16px')
+                break;
+            case 'Top':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '16px')
+                    .and('have.css', 'padding-bottom', '32px')
+                break;
+            case 'Left':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '24px')
+                    .and('have.css', 'padding-left', '8px')
+                break;
+            case 'Right':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '8px')
+                    .and('have.css', 'padding-left', '24px')
+                break;
+        }
     },
 
     /**
@@ -2316,6 +2315,67 @@ const steps = {
             .should('not.exist');
     },
 
+    verifyFitAllColumnsInOnePageCheckboxUnchecked: () => {
+        dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyFitAllColumnsInOnePageCheckboxChecked: () => {
+        dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageCheckbox()
+            .should('be.checked');
+    },
+
+    checkFitAllColumnsInOnePageCheckbox: () => {
+        dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageCheckbox()
+            .click()
+        steps.verifyFitAllColumnsInOnePageCheckboxChecked();
+    },
+
+    uncheckFitAllColumnsInOnePageCheckbox: () => {
+        dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageCheckbox()
+            .click();
+        steps.verifyFitAllColumnsInOnePageCheckboxUnchecked();
+    },
+
+    /**
+     * This function verifies text in cell height input field
+     * @param {number} cellHeight of the rows
+     */
+    verifyDropzoneHeightInputField: (cellHeight) => {
+        dragAndDropIntoCategoriesPage.dropzoneHeightInputField()
+            .should('have.value', cellHeight);
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyRowSpacingStudentView: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                dragAndDropIntoCategoriesPage.tableRowContainerStudentView()
+                    .eq(0)
+                    .should('have.css', 'row-gap', '0px');
+                break;
+            case 'Small':
+                dragAndDropIntoCategoriesPage.tableRowContainerStudentView()
+                    .eq(0)
+                    .should('have.css', 'row-gap', '8px');
+                break;
+            case 'Wide':
+                dragAndDropIntoCategoriesPage.tableRowContainerStudentView()
+                    .eq(0)
+                    .should('have.css', 'row-gap', '24px');
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    verifyOptionAlignmentInPanelInStudentView: () => {
+        dragAndDropIntoCategoriesPage.optionsWrapperPreviewTab()
+            .should('have.css', 'align-content', 'flex-start');
+    },
 }
 
 const tests = {
@@ -2339,6 +2399,7 @@ const tests = {
     ...styleAndLayoutCustomizationAccordionComponent.tests,
     ...gradingViewEnumerationComponent.tests,
     ...ariaLabelSectionComponent.tests,
+    ...printPreviewComponent.tests,
     verifyContentsOfSpecifyCorrectAnswerSection: (scoringType) => {
         it(`When the user selects ${scoringType} from scoring type dropdown then the specify correct answer sections should be displayed`, () => {
             dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertySpecifyCorrectAnswer(0, 'None');
@@ -2382,21 +2443,17 @@ const tests = {
             };
         });
 
-        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
-
         it('When the user drops an option in the dropzone, the error message should disappear', () => {
             dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Eagle': 1 });
         });
 
-        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
-
         it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
             //Navigation button
             utilities.verifyCSS(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection().find('path'), {
-                'fill': css.color.nextPreviousButtonFill
+                'fill': css.color.secondaryBtnDisabled
             });
             utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection(), 15), {
-                'background-color': css.color.defaultBackground,
+                'background-color': css.color.matrixHeadingCellBg,
                 'border-color': css.color.matrixCellBorder
             });
             utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection(), 15), {
@@ -2405,7 +2462,7 @@ const tests = {
             });
             utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection(), 16), {
                 'background-color': css.color.matrixDropzoneCellBg,
-                'border': `1px dashed ${css.color.matrixCellBorder}`
+                'border': `0px none ${css.color.codeBlockText}`
             });
             utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection(), 30), {
                 'background-color': css.color.matrixSubheadingCellBg,
@@ -2416,24 +2473,83 @@ const tests = {
                 'border-color': css.color.matrixCellBorder
             });
             utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellLabel(), 16), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellLabel(), 0), {
                 'color': css.color.text,
                 'font-size': css.fontSize.heading,
                 'font-weight': css.fontWeight.bold
             });
-            utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellLabel(), 17), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection());
+        });
+    },
+
+    verifyPrintLayoutSettingsAccordionAdditionalContents: () => {
+        it('\'Fit all columns in one page\' label should be displayed', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageLabel(), 'Fit all columns in one page');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageLabel(), 'visible');
+        });
+
+        it('Fit all columns in one page checkbox should be displayed and in checked state by default', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageCheckbox(), 'exist');
+            steps.verifyFitAllColumnsInOnePageCheckboxChecked();
+        });
+
+        it('CSS of \'Fit all columns in one page\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Fit all columns in one page\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.fitAllColumnsInOnePageCheckbox().parents('.print-layout-settings-container'));
+        });
+
+        it('User should be able to check and uncheck the \'Fit all columns in one page\' checkbox', () => {
+            steps.uncheckFitAllColumnsInOnePageCheckbox();
+            steps.checkFitAllColumnsInOnePageCheckbox();
+        });
+
+        it('\'Dropzone height (px)\' label and input field should be displayed and input field should be prefilled with 58px by default', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.dropzoneHeightLabel(), 'Dropzone height (px)');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneHeightInputField('58');
+        });
+
+        it('CSS of \'Dropzone height (px)\' label', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.semibold
             });
-            utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.tableCellLabel(), 18), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
+        });
+
+        it('Accessibility of \'Dropzone height (px)\' label and input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.dropzoneHeightInputField().parents('.print-layout-settings-container'));
+        });
+
+        it('When the user unchecked Fit all columns in one page checkbox,Dropzone width (px) label and input field should be visible and by default it should be 156px', () => {
+            steps.uncheckFitAllColumnsInOnePageCheckbox();
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.dropzoneWidthLabel(), 'Dropzone width (px)');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneWidthInputField(0, '156');
+        });
+
+        it('CSS of \'Dropzone width (px)\' label', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
             });
         });
 
-        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection().parents('.correct-answer-accordion'))
+        it('Accessibility of \'Dropzone width (px)\' label and input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.dropzoneWidthInputField().parents('.print-layout-settings-container'));
         });
     },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.553-IEI-3480-e6afc10.0",
+  "version": "1.0.553-IEI-7000-main-8cb7c78.0",
   "description": "",
   "main": "index.js",
   "scripts": {