itemengine-cypress-automation 1.0.166-migrationScripts-b8c79a0.0 → 1.0.167-repoUpdate10April-1465c8c.0

package/cypress/pages/components/index.js

@@ -60,3 +60,6 @@ export * from './ariaLabelSectionComponent';
 export * from './placeholderTextSectionComponent';
 export * from './additionalSettingsAccessibilitySectionComponent';
 export * from './specifyRowsAndColumnsComponent'
+export * from './toolsAndControlsComponent';
+export * from './resetPopupComponent';
+export * from './defaultToolDropdown';

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/measuringToolComponent.js

@@ -18,7 +18,7 @@ const selectors = {
     },
     rotationButtonInPreviewTab: () => cy.get('.icon-rotate'),
     toolColorLabel: () => cy.get('.color-pallete p'),
-    toolColorBlock: () => cy.get('[class*="ColorBlockWrapper"] .MuiToggleButton-root')
+    toolColorBlock: () => cy.get('[class*="ColorBlockWrapper"] .MuiToggleButton-root:visible')
 }
 
 const steps = {
@@ -145,7 +145,7 @@ const steps = {
     selectColorBlock: (colorIndex) => {
         measuringToolComponent.toolColorBlock()
             .eq(colorIndex)
-            .click();
+            .click({force:'true'});
     },
 
     verifyToolColorBlocksVisibility: () => {

package/cypress/pages/components/resetPopupComponent.js

@@ -0,0 +1,74 @@
+import utilities from "../../support/helpers/utilities";
+import { dialogBoxBase } from "../dialogBoxBase";
+const css = Cypress.env('css');
+
+const selectors = {
+    resetPopupConfirmResetButton: () => cy.get('.accept-button'),
+    resetPopupCancelButton: () => cy.get('.reject-button'),
+}
+
+const steps = {
+    confirmReset: () => {
+        resetPopupComponent.resetPopupConfirmResetButton()
+            .click();
+    },
+
+    cancelReset: () => {
+        resetPopupComponent.resetPopupCancelButton()
+            .click();
+    }
+}
+
+const tests = {
+    verifyResetPopupContentWithCSSAndA11y: () => {
+        it('When the user clicks on the \'Reset\' button then a dialog box should appear with title \'Reset\'', () => {
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'exist');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Reset');
+        });
+
+        it('The dialog box should have content \'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.\' with \'Cancel\' and \'Confirm reset\' buttons should be displayed', () => {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.');
+            utilities.verifyInnerText(resetPopupComponent.resetPopupConfirmResetButton(), 'Confirm reset');
+            utilities.verifyInnerText(resetPopupComponent.resetPopupCancelButton(), 'Cancel');
+        });
+
+        it('CSS of Reset dialog box', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(resetPopupComponent.resetPopupCancelButton().find('p'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(resetPopupComponent.resetPopupCancelButton(), {
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(resetPopupComponent.resetPopupConfirmResetButton().find('p'), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(resetPopupComponent.resetPopupConfirmResetButton(), {
+                'background-color': css.color.editTableDeleteButton
+            });
+        });
+
+        it('Accessibility of Reset dialog box', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+    }
+}
+
+export const resetPopupComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -16,7 +16,7 @@ const selectors = {
     },
     pointsLabel: () => cy.get('.points-label'),
     //TODO: Need to update below selectors, once https://redmine.zeuslearning.com/issues/553983 gets resolved
-    pointsInputField: () => cy.get('[class*="points-input-field"]:visible input[type="text"]'),
+    pointsInputField: () => cy.get('.points-label-wrapper [class*="points-input-field"]:visible input[type="text"]'),
     pleaseEnterPointsErrorMessage: () => cy.get('[class*="ErrorBlockstyles__ErrorText"]:visible'),
     pointsWrapper: () => cy.get('.set-correct-answer-points-wrapper'),
     minimumScoringLabel: () => cy.get('#minimum-scoring-dropdown-label'),

package/cypress/pages/components/setPointsPopupBase.js

@@ -4,21 +4,23 @@ import { scoringSectionBase } from "./scoringSectionBase";
 
 const selector = {
     ...dialogBoxBase,
-    dialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"][role="alertdialog"]'),
+    dialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"][role="dialog"]'),
     setPointsPopupOptions: () => cy.get('#alert-dialog-description .question-text-wrapper'),
-    setPointsPopupPointsLabel: () => cy.get('[class*="ListOrderingstyles__PointsLabel"]')
+    setPointsPopupPointsLabel: () => cy.get('[class*="ListOrderingstyles__PointsLabel"]'),
+    setPointsPopupSaveButton: () => cy.get('.popup-button-wrapper button').eq(1),
+    setPointsPopupCancelButton: () => cy.get('.popup-button-wrapper button').eq(0),
 }
 
 const steps = {
     cancelSetPointsPopup: () => {
-        setPointsPopupBase.buttonReject()
+        setPointsPopupBase.setPointsPopupCancelButton()
             .click();
         setPointsPopupBase.dialogBox()
             .should('not.exist');
     },
 
     saveSetPointsPopup: () => {
-        setPointsPopupBase.buttonAccept()
+        setPointsPopupBase.setPointsPopupSaveButton()
             .click();
         setPointsPopupBase.dialogBox()
             .should('not.exist');

package/cypress/pages/components/specifyRowsAndColumnsComponent.js

@@ -5,8 +5,8 @@ const selectors = {
     specifyColumnsAndRowsLabel: () => cy.get('[class*="SpecifyColumnRowsLabel"]'),
     columnsInputStepperLabel: () => cy.get('.input-stepper-label').eq(0),
     rowsInputStepperLabel: () => cy.get('.input-stepper-label').eq(1),
-    columnsInputStepperWrapper: () => cy.get('.input-stepper-wrapper[aria-label="Columns"]'),
-    rowsInputStepperWrapper: () => cy.get('.input-stepper-wrapper[aria-label="Rows"]'),
+    columnsInputStepperWrapper: () => cy.get('.input-stepper-wrapper').eq(0),
+    rowsInputStepperWrapper: () => cy.get('.input-stepper-wrapper').eq(1),
     inputStepperDecreaseButton: () => cy.get('.input-stepper-button[aria-label="Decrease count"]'),
     inputStepperIncreaseButton: () => cy.get('.input-stepper-button[aria-label="Increase count"]'),
     inputStepperCountInputField: () => cy.get('.input-stepper-textfield'),
@@ -126,7 +126,64 @@ const steps = {
     },
 }
 
+const tests = {
+    verifySpecifyColumnsAndRowsDefaultInputSteppers: () => {
+        it('\'Specify columns and rows\' title should be displayed', () => {
+            utilities.verifyInnerText(specifyRowsAndColumnsComponent.specifyColumnsAndRowsLabel(), 'Specify columns and rows');
+            utilities.verifyElementVisibilityState(specifyRowsAndColumnsComponent.specifyColumnsAndRowsLabel(), 'visible');
+        });
+
+        it('\'Columns\' and \'Option rows\' headings and their input stepper should be displayed and default the value for \'Columns\' and \'Option rows\' should be set to 3 and 4 respectively', () => {
+            utilities.verifyInnerText(specifyRowsAndColumnsComponent.columnsInputStepperLabel(), 'Columns');
+            utilities.verifyElementVisibilityState(specifyRowsAndColumnsComponent.columnsInputStepperLabel(), 'visible');
+            utilities.verifyInnerText(specifyRowsAndColumnsComponent.rowsInputStepperLabel(), 'Option rows');
+            utilities.verifyElementVisibilityState(specifyRowsAndColumnsComponent.rowsInputStepperLabel(), 'visible');
+            utilities.verifyElementVisibilityState(specifyRowsAndColumnsComponent.columnsInputStepperWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(specifyRowsAndColumnsComponent.rowsInputStepperWrapper(), 'visible');
+            specifyRowsAndColumnsComponent.steps.verifyColumnInputStepperIncreaseDecreaseButton();
+            specifyRowsAndColumnsComponent.steps.verifyRowInputStepperIncreaseDecreaseButton();
+            specifyRowsAndColumnsComponent.steps.verifyColumnInputStepperCountInputFieldValue(3);
+            specifyRowsAndColumnsComponent.steps.verifyRowsInputStepperCountInputFieldValue(4);
+        });
+
+        it('CSS of \'Specify columns and rows\' Columns and Rows input steppers section\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(specifyRowsAndColumnsComponent.specifyColumnsAndRowsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(specifyRowsAndColumnsComponent.columnsInputStepperLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(specifyRowsAndColumnsComponent.rowsInputStepperLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(specifyRowsAndColumnsComponent.inputStepperCountInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(specifyRowsAndColumnsComponent.inputStepperIncreaseButton().find('path'), {
+                'stroke': css.color.activeButtons
+            });
+            utilities.verifyCSS(specifyRowsAndColumnsComponent.inputStepperDecreaseButton().find('path'), {
+                'stroke': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Specify columns and rows\' Columns and Rows input steppers section\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(specifyRowsAndColumnsComponent.specifyColumnsAndRowsLabel().parents('[class*="single-select-grid-option-selection-component"]'));
+        });
+    }
+}
+
 export const specifyRowsAndColumnsComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/toolSettingsComponent.js

@@ -1,16 +1,18 @@
 import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
 
+const tools = ['Ruler', 'Protractor', 'Reading ruler', 'Simple Calculator', 'Scientific Calculator'];
 const selectors = {
     toolSettingsPanel: () => cy.get('.tool-settings-customization-wrapper .ngie-accordion-summary'),
     toolSettingsRegion: () => cy.get('.tool-settings-customization-wrapper [role="region"]'),
     addToolsLabel: () => cy.get('[class*="AddToolsHeading"]'),
     toolSettingsHelpText: () => cy.get('[class*="AddToolsInstructions"]'),
-    toolButton: () => cy.get('.icon-button-custom-format'),
-    toolTickIcon: () => cy.get('.icon-button-custom-format .tick-icon-wrapper'),
-    toolIcon: () => cy.get('[class*="DragItemstyles__IconWrapper"]'),
-    toolLabel: () => cy.get('[class*="DragItemstyles__ButtonLabel"]'),
-    toolDragHandleButton: () => cy.get('[class*="DragItemstyles__DragIconWrapper"]'),
-    toolEditIcon: () => cy.get('[class*="DragItemstyles__ItemContainer"] .icon-pencil'),
+    toolButton: () => cy.get('.tool-settings-customization-wrapper .icon-button-custom-format'),
+    toolTickIcon: () => cy.get('.tool-settings-customization-wrapper .icon-button-custom-format .tick-icon-wrapper'),
+    toolIcon: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__IconWrapper"]'),
+    toolLabel: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ButtonLabel"]'),
+    toolDragHandleButton: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__DragIconWrapper"]'),
+    toolEditIcon: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ItemContainer"] .icon-pencil'),
 }
 
 const steps = {
@@ -25,11 +27,11 @@ const steps = {
             .should('have.attr', 'aria-expanded', 'true');
     },
 
-/**
- * @param {number} toolIndex index of the tool
- * @param {string} toolName name of the tool
- * @description function verifies content and visibility of the tool
- */
+    /**
+     * @param {number} toolIndex index of the tool
+     * @param {string} toolName name of the tool
+     * @description function verifies content and visibility of the tool
+     */
     verifyToolButton: (toolIndex, toolName) => {
         utilities.verifyElementVisibilityState(utilities.getNthElement(toolSettingsComponent.toolButton(), toolIndex), 'visible');
         utilities.verifyElementVisibilityState(utilities.getNthElement(toolSettingsComponent.toolIcon(), toolIndex), 'visible');
@@ -88,7 +90,73 @@ const steps = {
     }
 }
 
+const tests = {
+    verifyToolSettingsContent: () => {
+        it('By default \'Tool settings\' accordion should be collapsed and by clicking on the \'Tool settings\' accordion, user should be able to expand the accordion', () => {
+            toolSettingsComponent.steps.verifyToolSettingsAccordionIsCollapsed();
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('CSS of \'Tool settings\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(toolSettingsComponent.toolSettingsPanel().find('.accordion_label'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(toolSettingsComponent.toolSettingsPanel().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(toolSettingsComponent.addToolsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(toolSettingsComponent.toolSettingsHelpText(), {
+                'color': css.color.helperText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(utilities.getNthElement(toolSettingsComponent.toolButton(), 0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(utilities.getNthElement(toolSettingsComponent.toolLabel(), 0), {
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Additional Settings\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(toolSettingsComponent.toolSettingsPanel().parents('.tool-settings-customization-wrapper'));
+        });
+
+        it(`When \'Tool settings\' accordion is expanded, then \'Add tools\' and \'Select the tools that will be displayed to the students.\' labels should be displayed. Five tools ${tools} should be displayed with their labels, icons, drag handle button and edit icon. By default tools should not be selected`, () => {
+            utilities.verifyInnerText(toolSettingsComponent.addToolsLabel(), 'Add tools');
+            utilities.verifyInnerText(toolSettingsComponent.toolSettingsHelpText(), 'Select the tools that will be displayed to the students.');
+            utilities.verifyElementCount(toolSettingsComponent.toolButton(), 5);
+            tools.forEach((toolName, toolIndex) => {
+                toolSettingsComponent.steps.verifyToolButton(toolIndex, toolName);
+            });
+        });
+
+        it('When user clicks on tool button, then that tool button should be selected and tick icon should be displayed on the button', () => {
+            toolSettingsComponent.steps.selectTool(0);
+        });
+
+        it('CSS of tool in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(toolSettingsComponent.toolButton(), 0), {
+                'background-color': css.color.activeButtons,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+        });
+
+        it('Accessibility of tool in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(toolSettingsComponent.toolLabel().parents('.icon-button-custom-format'));
+        });
+    }
+}
+
 export const toolSettingsComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/toolsAndControlsComponent.js

@@ -0,0 +1,69 @@
+const selectors = {
+    toolsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__ToolbarLabel"]').eq(0),
+    toolOptions: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format[aria-label*="${toolOptionAriaLabel}"]`).eq(0)
+        } else {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format`)
+        }
+    },
+    controlsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__ToolbarLabel"]').eq(1),
+    controlOptions: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.icon-button-custom-format[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find('.icon-button-custom-format')
+        }
+    },
+    toolOptionsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`[class*="DragItemstyles__LabelWrapper"]`),
+    toolOptionsTickIcon: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.tick-icon-wrapper`),
+    controlsOptionsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`[class*="DragItemstyles__LabelWrapper"]`),
+    controlsTickIcon: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.tick-icon-wrapper`)
+}
+
+const steps = {
+    /**
+     * This function selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    selectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            toolsAndControlsComponent.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    /**
+     * This function de-selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    deselectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            toolsAndControlsComponent.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    /**
+     * This function selects tool options
+     * @param {string[]} controlOptionAriaLabel array aria-label of tool options
+     */
+    selectControl: (controlOptionAriaLabel) => {
+        toolsAndControlsComponent.controlOptions(controlOptionAriaLabel)
+            .click();
+    },
+
+    /**
+     * This function de-selects tool options
+     * @param {string[]} controlOptionAriaLabel array aria-label of tool options
+     */
+    deselectControl: (controlOptionAriaLabel) => {
+        toolsAndControlsComponent.controlOptions(controlOptionAriaLabel)
+            .click();
+    }
+}
+
+export const toolsAndControlsComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -46,14 +46,6 @@ const selectors = {
     correctAnswerContainer: () => cy.get('[class*="_CorrectAnswerWrapper"]'),
 
     //Specify columns and rows
-    specifyColumnsAndRowsLabel: () => cy.get('[class*="SpecifyColumnRowsLabel"]'),
-    columnsInputStepperLabel: () => cy.get('.input-stepper-label').eq(0),
-    rowsInputStepperLabel: () => cy.get('.input-stepper-label').eq(1),
-    columnsInputStepperWrapper: () => cy.get('.input-stepper-wrapper[aria-label="Columns"]'),
-    rowsInputStepperWrapper: () => cy.get('.input-stepper-wrapper[aria-label="Rows"]'),
-    inputStepperDecreaseButton: () => cy.get('.input-stepper-button[aria-label="Decrease count"]'),
-    inputStepperIncreaseButton: () => cy.get('.input-stepper-button[aria-label="Increase count"]'),
-    inputStepperCountInputField: () => cy.get('.input-stepper-textfield'),
     specifyColumnsAndRowsTableWrapper: () => cy.get('.drag-drop-table-wrapper'),
     specifyColumnsAndRowsTableRowContainer: () => cy.get('[class*="DragAndDropTablestyles__RowContainer"]'),
     setFirstRowCellsAsHeadingCheckbox: () => cy.get('[data-ngie-testid="set-first-row-cells-as-heading-checkbox"] .ngie-checkbox'),