itemengine-cypress-automation 1.0.105 → 1.0.106

package/cypress/pages/readingRulerPage.js

@@ -1,11 +1,16 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, additionalSettingsPanel } from "./components";
+import { createQuestionBasePage, additionalSettingsPanel, colorPopupComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 const css = Cypress.env('css');
 
+const resizeButtons = ['resizeButton', 'topResizeButton', 'bottomResizeButton'];
+
 const selectors = {
     ...additionalSettingsPanel,
+    ...colorPopupComponent,
+    ...selectQuestionResourceToolPage,
+
     //TODO: Need to update selectors https://redmine.zeuslearning.com/issues/518498
     displayButtonToStudentLabel: () => cy.get('[data-ngie-testid="display-button-to-student-checkbox"] .MuiFormControlLabel-label'),
     allowStudentToResizeLabel: () => cy.get('[data-ngie-testid="allow-student-to-resize-checkbox"] .MuiFormControlLabel-label'),
@@ -17,15 +22,22 @@ const selectors = {
     opacityLabel: () => cy.get('#input-slider'),
     opacityInputField: () => cy.get('.line-reader-opacity input'),
     opacitySlider: () => cy.get('.MuiSlider-root'),
-    colorLabel: () => cy.get('[class*="LineReaderstyles__PropertyLabel"]').eq(2),
-    colorBlock: () => cy.get('.MuiFormControlLabel-labelPlacementBottom .MuiRadio-root'),
-    colorBlockLabel: () => cy.get('[aria-label="color"] .MuiFormControlLabel-label'),
-    defaultNumberOfLinesLabel: () => cy.get('[class*="LineReaderstyles__PropertyLabel"]').eq(3),
+    colorLabel: () => cy.get('[class*="ColorPalleteLabel"]'),
+    colorBlock: () => cy.get('[class*="ColorPalletestyles__ButtonWrapper"] button'),
+    colorBlockLabel: () => cy.get('[class*="ColorPalletestyles__LabelText"]'),
+    customColorWrapper: () => cy.get('[class*="ColorSelectionWrapper"]'),
+    customLabel: () => cy.get('[class*="CustomLabelWrapper"]'),
+    customColorEditIcon: () => cy.get('.icon-pencil'),
+    defaultNumberOfLinesLabel: () => cy.get('[class*="LineReaderstyles__PropertyLabel"]').eq(2),
     defaultNumberOfLinesInputField: () => cy.get('input[aria-label="Default number of lines"]'),
-    rulerStyleButton: () => cy.get('[class*="LineReaderstyles__RulerStyleButton"]'),
+    rulerStyleLabel: () => cy.get('[class*="RulerStyle"] [class*="PropertyLabel"]'),
+    rulerStyleButton: () => cy.get('[class*="RulerStyleButton"][role="button"]'),
     rulerStyleButtonLabel: () => cy.get('[class*="LineReaderstyles__ButtonLabel"]'),
+    rulerStyleButtonIcon: () => cy.get('[class*="RulerStyleIconLabelWrapper"] svg'),
     //Preview Tab
-    readingRulerButton: () => cy.get('.LineReaderButton'),
+    readingRulerButton: () => cy.get('.line-reader-preview-wrapper .ngie-button'),
+    readingRulerVisibleImagePreviewTab: () => cy.get('.line-reader-preview-wrapper g'),
+    readingRulerHideImagePreviewTab: () => cy.get('.line-reader-preview-wrapper #Hide_cell'),
     readingRuler: () => cy.get('.resizable'),
     closeButton: () => cy.get('.LineReaderCloseButton'),
     dragButton: () => cy.get('.LineReaderMoveButton'),
@@ -40,6 +52,9 @@ const selectors = {
 const steps = {
     ...createQuestionBasePage.steps,
     ...additionalSettingsPanel.steps,
+    ...dialogBoxBase.steps,
+    ...selectQuestionResourceToolPage.steps,
+    ...colorPopupComponent.steps,
 
     verifyDisplayButtonToStudentCheckboxIsChecked: () => {
         readingRulerPage.displayButtonToStudentCheckbox()
@@ -56,35 +71,76 @@ const steps = {
      * @description function selects ruler style
      */
     selectRulerStyle: (styleName) => {
-        let style;
+        let index;
         switch (styleName) {
             case 'Line focus':
-                style = '.line-focus';
+                index = 0;
                 break;
             case 'Overlay mask':
-                style = '.overlay-mask';
+                index = 1;
                 break;
-            case 'Darg handle':
-                style = '.drag-handle';
+            case 'Drag handle':
+                index = 2;
                 break;
             default:
                 throw new Error(`Unknown ruler style: ${styleName}`);
         }
-        
-        readingRulerPage.rulerStyleButton()
-            .find(style)
+
+        utilities.getNthElement(readingRulerPage.rulerStyleButton(), index)
+            .should('have.attr', 'aria-label', styleName)
             .click()
-            .find('.MuiIconButton-label svg')
+            .find('svg')
+            .eq(1)
             .should('exist');
     },
 
     /**
-     * @param {number} index index of ruler style
      * @param {("Line focus"|"Overlay mask"|"Drag handle")} styleName name of ruler style
-     * @description function verifies ruler style button label 
+     * @description function verifies ruler style selected style
+     */
+    verifyRulerStyleSelectedState: (styleName) => {
+        let index;
+        switch (styleName) {
+            case 'Line focus':
+                index = 0;
+                break;
+            case 'Overlay mask':
+                index = 1;
+                break;
+            case 'Drag handle':
+                index = 2;
+                break;
+            default:
+                throw new Error(`Unknown ruler style: ${styleName}`);
+        }
+
+        utilities.getNthElement(readingRulerPage.rulerStyleButton(), index)
+            .should('have.attr', 'aria-label', styleName)
+            .find('svg')
+            .eq(1)
+            .should('exist');
+    },
+
+    clickOnCustomColorBlock: () => {
+        readingRulerPage.customColorWrapper()
+            .click();
+    },
+
+    clickOnCustomBlockEditIcon: () => {
+        readingRulerPage.customColorEditIcon()
+            .click();
+    },
+
+    /**
+     * @param {number} styleIndex index of the ruler style button
+     * @param {string} styleName name of the ruler style button
+     * @description function verifies content and visibility of the ruler style button
      */
-    verifyRulerStyleButtonLabel: (index, styleName) => {
-        utilities.verifyInnerText(utilities.getNthElement(readingRulerPage.rulerStyleButtonLabel(), index), styleName);
+    verifyRulerStyleButton: (styleName, styleIndex) => {
+        utilities.verifyElementVisibilityState(utilities.getNthElement(readingRulerPage.rulerStyleButton(), styleIndex), 'visible');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(readingRulerPage.rulerStyleButtonIcon(), styleIndex), 'visible');
+        utilities.verifyInnerText(utilities.getNthElement(readingRulerPage.rulerStyleButtonLabel(), styleIndex), styleName);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(readingRulerPage.rulerStyleButtonLabel(), styleIndex), 'visible');
     },
 
     verifyVisibleOnLandingCheckboxIsUnchecked: () => {
@@ -133,7 +189,14 @@ const steps = {
         readingRulerPage.colorBlock()
             .eq(blockIndex)
             .find('svg')
-            .should('not.exist');
+            .should('not.visible');
+    },
+
+    verifyCustomColor: (colorCodeHex, colorCode) => {
+        utilities.verifyInnerText(utilities.getNthElement(readingRulerPage.colorBlockLabel(), 5), colorCodeHex);
+        utilities.verifyCSS(utilities.getNthElement(readingRulerPage.colorBlock(), 5), {
+            'background-color': colorCode
+        });
     },
 
     selectColorBlock: (blockIndex) => {
@@ -196,60 +259,91 @@ const steps = {
             .should('not.be.checked');
     },
 
-    verifySelectedStateOfReadingRulerButton: () => {
-        readingRulerPage.readingRulerButton()
-            .should('have.class', 'active');
-    },
-
-    verifyUnselectedStateOfReadingRulerButton: () => {
-        readingRulerPage.readingRulerButton()
-            .should('not.have.class', 'active');
+    verifyVisibleOnLandingCheckboxChecked: () => {
+        readingRulerPage.visibleOnLandingCheckbox()
+            .should('be.checked');
     },
 
-    clickOnReadingRulerButton: () => {
-        readingRulerPage.readingRulerButton()
-            .click({ force: true });
+    /**
+     * @param {("Show"|"Hide")} visibility
+     */
+    verifyReadingRulerVisibilityButtonLabelPreviewTab: (visibility) => {
+        utilities.verifyInnerText(readingRulerPage.readingRulerButton(), `${visibility} reading ruler`);
+        if (visibility == 'Hide') {
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRulerHideImagePreviewTab(), 'visible');
+            steps.verifyReadingRulerExistInPreviewTab();
+        } else {
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRulerVisibleImagePreviewTab(), 'visible');
+            steps.verifyReadingRulerNotExistInPreviewTab();
+        }
     },
 
-    verifyResizeButtonsEnabled: () => {
-        readingRulerPage.resizeButton()
-            .should('be.enabled');
-        readingRulerPage.topResizeButton()
-            .should('be.enabled');
-        readingRulerPage.bottomResizeButton()
-            .should('be.enabled');
+    verifyReadingRulerButtonNotExistInPreviewTab: () => {
+        utilities.verifyElementVisibilityState(readingRulerPage.readingRulerButton(), 'notExist');
     },
 
-    verifyCloseButtonEnabled: () => {
-        readingRulerPage.closeButton()
-            .should('be.enabled');
+    clickOnReadingRulerButtonInPreviewTab: () => {
+        readingRulerPage.readingRulerButton()
+            .click({ force: true });
     },
 
-    verifyDragButtonEnabled: () => {
-        readingRulerPage.dragButton()
-            .should('be.enabled');
+    /**
+ * Verifies the resize buttons in the preview tab based on the specified ruler style.
+ * @param {'Line focus'| 'Overlay mask'| 'Drag handle'} style - The style of the ruler
+ */
+    verifyRulerButtonsInPreviewTab: (style) => {
+        switch (style) {
+            case 'Line focus':
+            case 'Drag handle':
+                readingRulerPage.topResizeButton()
+                    .should('be.visible')
+                    .should('be.enabled');
+                readingRulerPage.bottomResizeButton()
+                    .should('be.visible')
+                    .should('be.enabled');
+                if (style === 'Drag handle') {
+                    readingRulerPage.resizeButton()
+                        .should('be.visible')
+                        .should('be.enabled');
+                }
+                readingRulerPage.closeButton()
+                    .should('be.visible')
+                    .should('be.enabled');
+                break;
+            case 'Overlay mask':
+                resizeButtons.forEach(button => {
+                    readingRulerPage[button]()
+                        .should('not.exist');
+                });
+                readingRulerPage.closeButton()
+                    .should('be.visible')
+                    .should('be.enabled');
+                break;
+            default:
+                throw new Error('Invalid ruler style');
+        }
     },
 
-    verifyResizeButtonDisabled: () => {
+    verifyResizeButtonNotExistInPreviewTab: () => {
         readingRulerPage.resizeButton()
-            .should('be.disabled');
+            .should('not.exist');
         readingRulerPage.topResizeButton()
-            .should('be.disabled');
+            .should('not.exist');
         readingRulerPage.bottomResizeButton()
-            .should('be.disabled');
+            .should('not.exist');
     },
 
-    hoverOnReadingRulerButton: () => {
+    hoverOnReadingRulerButtonInPreviewTab: () => {
         readingRulerPage.readingRulerButton()
             .realHover()
     },
 
-    hoverAwayFromReadingRulerButton: () => {
+    hoverAwayFromReadingRulerButtonInPreviewTab: () => {
         readingRulerPage.readingRulerButton()
             .realHover({ position: 'topLeft' })
     },
 
-    clickOnCloseButtonInReadingRuler: () => {
+    clickOnCloseButtonInReadingRulerInPreviewTab: () => {
         readingRulerPage.closeButton()
             .click()
     },
@@ -264,11 +358,12 @@ const steps = {
     },
 
     /**
-     * @param {string} colorValue color of the ruler
-     * @description this function verifies color of the ruler displayed in the preview tab
-     */
-    verifyReadingRulerColorInPreviewTab: (colorValue) => {
-        const fillColor = () => {
+    * @param {number} colorValue The index representing the color of the ruler
+    * @param {string} [colorCode=null] The expected color code (optional, only used when colorValue is 5)
+    * @description Verifies the color of the ruler displayed in the preview tab
+    */
+    verifyReadingRulerColorInPreviewTab: (colorValue, colorCode = null) => {
+        const getColorCode = () => {
             switch (colorValue) {
                 case 0:
                     return '#707070';
@@ -281,22 +376,49 @@ const steps = {
                 case 4:
                     return '#991D00';
                 default:
-                    return 'incorrect colorIndex';
+                    throw new Error('Incorrect color index');
             }
         };
-        readingRulerPage.rulerColor()
-            .should('have.attr', 'color', fillColor());
+
+        if (colorValue === 5) {
+            if (!colorCode) {
+                throw new Error('Color code is required when color value is 5');
+            }
+            readingRulerPage.rulerColor()
+                .should('have.attr', 'color', colorCode);
+        } else {
+            readingRulerPage.rulerColor()
+                .should('have.attr', 'color', getColorCode());
+        }
     },
 
     /**
-     * @param {number} heightValue height of the ruler
-     * @param {number} sizeValue size of the ruler
-     * @description this function verifies height and size of ruler displayed in the preview tab
-     */
-    verifyHeightAndSizeOfReadingRuler: (heightValue, sizeValue) => {
+    * @param {("Line focus"|"Overlay mask"|"Drag handle")} rulerStyle name of ruler style
+    * @param {number} defaultNumberOfLinesValue number of default lines
+    * @description this function verifies height and size of ruler displayed in the preview tab
+    */
+    verifySizeOfReadingRulerInPreviewTab: (rulerStyle, defaultNumberOfLinesValue) => {
+        let height, size;
+        switch (rulerStyle) {
+            case 'Line focus':
+                height = 422;
+                size = 42;
+                break;
+            case 'Overlay mask':
+                height = 22;
+                size = 42;
+                break;
+            case 'Drag handle':
+                height = 142;
+                size = 42;
+                break;
+            default:
+                throw new Error(`Unknown ruler style: ${rulerStyle}`);
+        }
         readingRulerPage.readingRuler()
-            .should('have.attr', 'height', heightValue)
-            .should('have.attr', 'size', sizeValue)
+            .should('have.attr', 'height', `${(defaultNumberOfLinesValue - 1) * 22 + height}`)
+            .and('have.attr', 'size', `${(defaultNumberOfLinesValue - 1) * 22 + size}`)
+            .and('have.attr', 'width', 548);
     },
 
     verifyReadingRulerExistInPreviewTab: () => {
@@ -304,6 +426,34 @@ const steps = {
             .should('be.visible');
     },
 
+    verifyReadingRulerNotExistInPreviewTab: () => {
+        readingRulerPage.readingRuler()
+            .should('not.exist');
+    },
+
+    /**
+    * @param {("Line focus"|"Overlay mask"|"Drag handle")} rulerStyle name of ruler style
+    * @description function verifies ruler style in preview tab
+    */
+    verifyRulerStyleInPreviewTab: (rulerStyle) => {
+        switch (rulerStyle) {
+            case 'Line focus':
+                readingRulerPage.readingRuler()
+                    .should('have.class', 'line-focus-line-reader-overlay');
+                break;
+            case 'Overlay mask':
+                readingRulerPage.readingRuler()
+                    .should('have.class', 'overlay-mask-line-reader-overlay');
+                break;
+            case 'Drag handle':
+                readingRulerPage.readingRuler()
+                    .should('have.class', 'drag-handle-line-reader-overlay');
+                break;
+            default:
+                throw new Error(`Unknown ruler style: ${rulerStyle}`);
+        }
+    },
+
     //additional settings
     addTextToTeacherGuidelinesInputField: () => {
         readingRulerPage.additionalSettingsTeacherGuidelinesInputField()
@@ -315,43 +465,8 @@ const steps = {
 const tests = {
     ...createQuestionBasePage.tests,
     ...additionalSettingsPanel.tests,
-    //Header section
-    verifyCancelButton: () => {
-        it('When user has made no edits and clicks on Cancel button, the user should be directed back to the \'Select a Question\' page', () => {
-            createQuestionBasePage.cancelButton()
-                .click();
-            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.selectAQuestionHeaderText(), 'visible');
-            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.questionTypeOptionTitle(), 'visible');
-        });
-
-        it('When user has made some edits/changes and clicks on Cancel button, a popup should be displayed', () => {
-            selectQuestionResourceToolPage.steps.selectResourceType('reading ruler');
-            utilities.verifyElementVisibilityState(readingRulerPage.opacityInputField(), 'visible');
-            readingRulerPage.steps.addInputToOpacityInputField('30');
-            createQuestionBasePage.cancelButton()
-                .click();
-            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible')
-        });
-
-        dialogBoxBase.tests.verifyContentsOfLeavePagePopupWithCSSAnda11y();
-
-        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
-            dialogBoxBase.buttonReject()
-                .click();
-            createQuestionBasePage.editTab()
-                .should('have.attr', 'aria-selected', 'true')
-            readingRulerPage.steps.verifyOpacityInputFieldValue('30');
-        });
-
-        it(`Clicking on \'Yes, I want to leave this page\' button should discard all changes and direct the user to the \'Select a question\' page.`, () => {
-            createQuestionBasePage.cancelButton()
-                .click();
-            dialogBoxBase.buttonAccept()
-                .click();
-            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.selectAQuestionHeaderText(), 'visible');
-            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.questionTypeOptionTitle(), 'visible');
-        });
-    },
+    ...colorPopupComponent.tests,
+    ...dialogBoxBase.tests,
 }
 
 export const readingRulerPage = {

package/cypress/pages/singleSelectionPage.js

@@ -455,6 +455,7 @@ const tests = {
     ...autoScoredScoringSection.tests,
     ...autoScoredScoringPreviewTab.tests,
     ...optionsWrapperComponent.tests,
+    ...commonComponents.tests,
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('In the \'Correct\' accordion, all options with checkboxes should be displayed', () => {
             utilities.verifyElementCount(singleSelectionPage.optionWrapperSpecifyCorrectAnswerSection(), 4);

package/cypress/pages/textEntryMathPage.js

@@ -68,8 +68,13 @@ const selectors = {
     typeOfExpressionDropdownOption: () => cy.get('[aria-labelledby*="Type-dropdown-label"] li'),
     syntaxLabel: () => cy.get('#Syntax-dropdown-label'),
     syntaxDropdown: () => cy.get('#Syntax-select'),
-    syntaxDropdownOption: () => cy.get('[aria-labelledby*="Syntax-dropdown-label"] li'),
-
+    syntaxDropdownOption: (ariaLabel) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Syntax-dropdown-label"] li[aria-label*="${ariaLabel}"]`).eq(0)
+        } else {
+            return cy.get('[aria-labelledby*="Syntax-dropdown-label"] li')
+        }
+    },
     //Additional settings
     textContainersAriaLabelInputField: () => cy.get('[class*="ClozeMathstyle__SingleAriaLabelContainer"]'),
     textContainersAriaLabelInputFieldNumeration: () => cy.get('[class*="ClozeMathstyle__Numeration"]'),
@@ -590,10 +595,10 @@ const steps = {
 
     /**
    * select syntax dropdown option
-   * @param {number} optionIndex index of syntax dropdown option
+   * @param {number} ariaLabel ariaLabel of syntax dropdown option
    */
-    selectSyntaxDropdownListOption: (optionIndex) => {
-        utilities.getNthElement(textEntryMathPage.syntaxDropdownOption(), optionIndex)
+    selectSyntaxDropdownListOption: (ariaLabel) => {
+        textEntryMathPage.syntaxDropdownOption(ariaLabel)
             .click();
     },
 
@@ -756,7 +761,13 @@ const tests = {
     },
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
-        it('By default, for the two response token in question input field, two response accordions \'Response 1\' and \'Response 2\' should be present in collapsed state in the \'Specify correct answer section\'', () => {
+        it('When question input field in empty, then by default no response accordion should be displayed in the specify correct answer section', () => {
+            utilities.verifyElementVisibilityState(textEntryMathPage.responseAccordion(), 'notExist');
+        });
+
+        it('When user adds response tokens in question input field, then response accordions should be displayed in collapsed state in the \'Specify correct answer section\' with appropriate numeration', () => {
+            textEntryMathPage.steps.addResponseToken();
+            textEntryMathPage.steps.addResponseToken();
             utilities.verifyElementCount(textEntryMathPage.responseAccordion(), 2);
             textEntryMathPage.steps.verifyResponseAccordionIsCollapsed(0);
             textEntryMathPage.steps.verifyResponseAccordionIsCollapsed(1);

package/cypress/pages/videoResponsePage.js

@@ -30,14 +30,6 @@ const selectors = {
     fullScreenButton: () => cy.get('button[aria-label="Full Screen"]'),
     savedResponseText: () => cy.get('[class*="VideoRecorderstyle__ResponseTextWrapper"]'),
     maxRecorderLengthInputField: () => cy.get('input[aria-label="Maximum recorder length"]'),
-    playbackSpeedOptionsList: () => cy.get('[class*="VideoRecorderstyle__PlaybackSpeedOptions"]'),
-    playbackSpeedOption: (ariaLabel = null) => {
-        if (ariaLabel) {
-            return cy.get(`.speed-option[aria-label="${ariaLabel}"]`)
-        } else {
-            return cy.get('.speed-option')
-        }
-    },
     confirmRetakeButton: () => cy.get('.delete-action-btn-wrapper button').eq(1),
     cancelRetakeButton: () => cy.get('.delete-action-btn-wrapper button').eq(0),
     retakePopupContent: () => cy.get('.retake-popup-content'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.105",
+  "version": "1.0.106",
   "description": "",
   "main": "index.js",
   "scripts": {

package/scripts/sorry-cypress.mjs

@@ -84,7 +84,7 @@ export function runSorryCypressSpinnaker() {
     startTime = process.env.START_TIME;
     ciBuildId = setCiBuildId("spinnaker", startTime);
     const envArgs = setCommandLineEnvArgs()
-    let command = `cy2 run --parallel --browser chrome --record --key imaginelearning/itemengine-cypress-automation --ci-build-id ${ciBuildId} ${envArgs},grepTags=-css+-a11y --spec "cypress/e2e/ILC/**/*.js"`;
+    let command = `cy2 run --parallel --browser chrome --record --key imaginelearning/itemengine-cypress-automation --ci-build-id ${ciBuildId} ${envArgs},grepTags=-css+-a11y --spec "cypress/e2e/ILC/**/*.smoke.js"`;
     execSync(command, { stdio: "inherit" });
 }