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

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/styleAndLayoutCustomizationAllViews.js

@@ -0,0 +1,230 @@
+import { dragAndDropIntoCategoriesPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { colorPopupComponent } from "../../../pages/components";
+let correctAnswerViews = ['Question preview', 'Item preview', 'Grading view'];
+const views = utilities.getViews(correctAnswerViews);
+const css = Cypress.env('css');
+let itemReferenceID = "";
+const modifiedColor = 'rgb(121, 60, 60)';
+
+describe('Create Item page - Drag and drop into categories: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - Default State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+                        cy.barsPreLoaderWait();
+                        dragAndDropIntoCategoriesPage.steps.addTextInQuestionInstructionsInputField('Navigating to drag and drop into categories');
+                        dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    dragAndDropIntoCategoriesPage.steps.clickOnSaveQuestionButton();
+                    dragAndDropIntoCategoriesPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            if (view === 'Grading view') {
+                it(`\'Row spacing\' no spacing option is selected then no spacing should be displayed between the row options${view}`, () => {
+                    dragAndDropIntoCategoriesPage.steps.verifyRowSpacingStudentView('No spacing');
+                });
+
+                it(`Options should have default alignment in ${view}`, () => {
+                    dragAndDropIntoCategoriesPage.steps.verifyOptionAlignmentInPanelInStudentView();
+                });
+            }
+
+            if (view !== 'Grading view') {
+                it(`\'Row spacing\' no spacing option is selected then no spacing should be displayed between the row options${view}`, () => {
+                    dragAndDropIntoCategoriesPage.steps.verifyRowSpacingPreviewTab('No spacing');
+                });
+
+                it(`Options should have default alignment in ${view}`, () => {
+                    dragAndDropIntoCategoriesPage.steps.verifyOptionAlignmentInPanelInPreviewTab('Left');
+                });
+            }
+
+            it(`\'Column spacing\' no spacing option is selected then no spacing should be displayed between column options${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyColumnSpacingPreviewTab('No spacing');
+            });
+
+            it(`Dropzone should have default border color, fill color, and border style in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDropzoneBorderStylePreviewTab('dashed');
+                dragAndDropIntoCategoriesPage.steps.verifyFillColorPreviewTab(css.color.matrixDropzoneCellBg);
+                dragAndDropIntoCategoriesPage.steps.verifyBorderColorPreviewTab(css.color.activeComponentBorder);
+            });
+
+            it(`Draggable options should have default fill color, border color, and border style in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsBorderStylePreviewTab('solid');
+                dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsFillColorPreviewTab(css.color.defaultBackground);
+                dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsBorderColorPreviewTab(css.color.figDefaultComponentBorder);
+            });
+
+            it(`Drag handle icon should be displayed in default state in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDragHandleIconPreviewTab('drag icon');
+            });
+
+            it(`Draggable option panel should have default placement in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyPanelPlacementPreviewTab('Bottom');
+            });
+
+            it(`Dropzone dimensions should be default state in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDropzoneDimensionsPreviewTab('Auto');
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - modified State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+                        cy.barsPreLoaderWait();
+                        dragAndDropIntoCategoriesPage.steps.addTextInQuestionInstructionsInputField('Navigating to drag and drop into categories');
+                        dragAndDropIntoCategoriesPage.steps.expandStyleAndLayoutCustomizationAccordion();
+                        dragAndDropIntoCategoriesPage.steps.expandRowSpacingDropdown();
+                        dragAndDropIntoCategoriesPage.steps.selectRowSpacingDropdownOption('Small');
+                        dragAndDropIntoCategoriesPage.steps.expandColumnSpacingDropdown();
+                        dragAndDropIntoCategoriesPage.steps.selectColumnSpacingDropdownOption('Wide');
+                        dragAndDropIntoCategoriesPage.steps.editColor(0);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        dragAndDropIntoCategoriesPage.steps.editColor(1);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        dragAndDropIntoCategoriesPage.steps.editColor(2);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        dragAndDropIntoCategoriesPage.steps.editColor(3);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        dragAndDropIntoCategoriesPage.steps.selectDragHandleOption(1);
+                        dragAndDropIntoCategoriesPage.steps.selectDraggableOptionsBorderStyleOption('dotted');
+                        dragAndDropIntoCategoriesPage.steps.selectDropzoneBorderStyleOption('solid');
+                        dragAndDropIntoCategoriesPage.steps.selectPanelPlacementOption('Top');
+                        dragAndDropIntoCategoriesPage.steps.selectOptionAlignmentInPanelOption('right');
+                        dragAndDropIntoCategoriesPage.steps.expandDropzoneDimensionsDropdown();
+                        dragAndDropIntoCategoriesPage.steps.selectDropzoneDimensionsDropdownOption('Custom');
+                        dragAndDropIntoCategoriesPage.steps.enterTextInDropzoneWidthInputField(0, 160);
+                        dragAndDropIntoCategoriesPage.steps.verifyDropzoneWidthInputField(0, '160');
+                        dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    dragAndDropIntoCategoriesPage.steps.clickOnSaveQuestionButton();
+                    dragAndDropIntoCategoriesPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            if (view === 'Grading view') {
+                it(`\'Row spacing\' no spacing option is selected then small spacing should be displayed between the row options${view}`, () => {
+                    dragAndDropIntoCategoriesPage.steps.verifyRowSpacingStudentView('Small');
+                });
+            }
+
+            if (view !== 'Grading view') {
+                it(`\'Row spacing\' no spacing option is selected then small spacing should be displayed between the row options${view}`, () => {
+                    dragAndDropIntoCategoriesPage.steps.verifyRowSpacingPreviewTab('Small');
+                });
+            }
+
+            it(`\'Column spacing\' no spacing option is selected then wide spacing should be displayed between column options${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyColumnSpacingPreviewTab('Wide');
+            });
+
+            it(`Dropzone should have modified border color, fill color, and border style in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDropzoneBorderStylePreviewTab('solid');
+                dragAndDropIntoCategoriesPage.steps.verifyBorderColorPreviewTab(modifiedColor);
+                dragAndDropIntoCategoriesPage.steps.verifyFillColorPreviewTab(modifiedColor);
+
+            });
+
+            it(`Draggable options should have modified fill color, border color, and border style in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsBorderStylePreviewTab('dotted');
+                dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsBorderColorAllView(modifiedColor);
+                dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsFillColorPreviewTab(modifiedColor);
+            });
+
+            it(`Drag handle icon should be displayed in modified state in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDragHandleIconPreviewTab('arrow icon');
+            });
+
+            it(`Draggable option panel should have modified placement in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyPanelPlacementPreviewTab('Top');
+            });
+
+            it(`Dropzone dimensions should be customized state in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyDropzoneWidthPreviewTab(0, 160);
+            });
+
+            it(`Options should have modified alignment in ${view}`, () => {
+                dragAndDropIntoCategoriesPage.steps.verifyOptionAlignmentInPanelInPreviewTab('Right');
+            });
+        });
+    });
+
+
+});

package/cypress/pages/components/additionalSettingsPanel.js

@@ -25,6 +25,8 @@ const selectors = {
     },
     fontSizeListOptionLabels: () => cy.get('[aria-labelledby*="Font-Size-dropdown-label"] li[role="option"] .dropdown-label-text'),
     fontSizesLabels: () => cy.get('[aria-labelledby*="Font-Size-dropdown-label"] li[role="option"] .dropdown-post-label-text'),
+    teacherGuidelinesLabelInGradingView: () => cy.get('[class*="GradingViewstyles__GuidelineTitle"]'),
+    teacherGuidelinesDescriptionInGradingView: () => cy.get('[class*="GradingViewstyles__GuideLineDescription"] [data-testid*="question-instruction-element"]'),
 }
 
 const steps = {
@@ -71,6 +73,22 @@ const steps = {
         additionalSettingsPanel.fontSizeDropdown()
             .trigger('mouseover')
             .click();
+    },
+
+    /**
+     * This function verifies 'Teacher guidelines' label
+     * @param {string} expectedText expected text for the label
+     */
+    verifyTeacherGuidelinesLabelInGradingView: (expectedText) => {
+        utilities.verifyInnerText(additionalSettingsPanel.teacherGuidelinesLabelInGradingView(), expectedText);
+    },
+
+    /**
+     * This function verifies 'Teacher guidelines' description text
+     * @param {string} expectedText expected text for the description
+     */
+    verifyTeacherGuidelinesDescriptionInGradingView: (expectedText) => {
+        utilities.verifyInnerText(additionalSettingsPanel.teacherGuidelinesDescriptionInGradingView(), expectedText);
     }
 }
 

package/cypress/pages/components/draggableOptionsSectionComponent.js

@@ -245,7 +245,7 @@ const tests = {
             utilities.verifyCSS(draggableOptionsSectionComponent.addGroupButton(), {
                 'color': css.color.secondaryBtnActive,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.medium
+                'font-weight': css.fontWeight.regular
             });
         });
 

package/cypress/pages/components/maximumCapacityPerDropzoneComponent.js

@@ -5,7 +5,7 @@ const selectors = {
     maxCapacityPerDropzoneDropdown: () => cy.get('#Maximum-capacity-per-dropzone-select'),
     maxCapacityPerDropzoneDropdownListOptions: (ariaLabel = null) => {
         if (ariaLabel) {
-            return cy.get(`[aria-labelledby*="Maximum-capacity-per-dropzone-dropdown-label"] [role="option"][aria-label="${ariaLabel}"]`)
+            return cy.get(`[aria-labelledby*="Maximum-capacity-per-dropzone-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
         } else {
             return cy.get('[aria-labelledby*="Maximum-capacity-per-dropzone-dropdown-label"] [role="option"]')
         }

package/cypress/pages/components/optionsWrapperComponent.js

@@ -343,7 +343,7 @@ const tests = {
             utilities.verifyCSS(optionsWrapperComponent.addOptionButton(), {
                 'color': css.color.secondaryBtnActive,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.medium
+                'font-weight': css.fontWeight.regular
             });
         });
     },
@@ -477,7 +477,7 @@ const tests = {
             utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
             utilities.verifyCSS(commonComponents.tooltipText(), {
                 'color': css.color.whiteText,
-                'font-size': css.fontSize.normal,
+                'font-size': css.fontSize.small,
                 'font-weight': css.fontWeight.regular
             });
             utilities.getNthElement(optionsWrapperComponent.deleteOptionButton(), 0)