itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/desmosGraphingPage.js

@@ -0,0 +1,256 @@
+import utilities from "../support/helpers/utilities";
+import { commonComponents, createQuestionBasePage, questionInstructionsComponent, additionalSettingsPanel, scoringSectionBaseEditTab } from "./components";
+import { desmosToolComponent } from "./components/desmosToolComponent";
+
+const selectors = {
+    ...desmosToolComponent,
+    ...scoringSectionBaseEditTab,
+    ...commonComponents,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    desmosGraphingTool: () => cy.get('[id*="desmos-graph-tool"]'),
+    desmosGraphingToolExpressionPanel: () => cy.get('[id*="desmos-graph-tool"] .dcg-exppanel-container.dcg-add-shadow'),
+    studentViewSettingsLabel: () => cy.get('[class*="StudentViewWrapper"]'),
+    hideExpressionListLabel: () => cy.get('[data-ngie-testid="hide-expression-list-checkbox"] .MuiFormControlLabel-label'),
+    hideExpressionListCheckbox: () => cy.get('[data-ngie-testid="hide-expression-list-checkbox"] input'),
+    showHideListButton: () => cy.get('.dcg-show-expressions-tab[role="button"]'),
+    desmosGraphingWidthLabel: () => cy.get('[class*="LabelInputWrapper"]').eq(0),
+    desmosGraphingWidthInputField: () => cy.get('[class*="DimensionInputWrapper"] input').eq(0),
+    desmosGraphingHeightLabel: () => cy.get('[class*="LabelInputWrapper"]').eq(1),
+    desmosGraphingHeightInputField: () => cy.get('[class*="DimensionInputWrapper"] input').eq(1),
+    desmosGraphingExpressionPreviewTab: () => cy.get('.edit-question-preview-wrapper .dcg-expressionlist .dcg-main .dcg-mathquill-wrapper'),
+    desmosGraphingOutput: () => cy.get('.dcg-evaluation-container .dcg-typeset-math .dcg-mq-mathspeak').eq(1),
+    buttonAspectRatio: () => cy.get('[class*="LockIconWrapper"] button'),
+    buttonResetDimensions: () => cy.get('[class*="ResetIconWrapper"] button'),
+    specifyPredefinedExpressionLabel: () => cy.get('.label-wrapper'),
+    addExpressionButton: () => cy.get('.dcg-add-expression-btn:visible'),
+    expressionListNewFolderOption: () => cy.get('.dcg-action-newfolder'),
+    folderInExpressionList: () => cy.get('.dcg-expressionfolder'),
+    accessibilityLabel: () => cy.get('.edit-check-answer-label'),
+    flagNonAccessibleCheckbox: () => cy.get('[data-ngie-testid="response-option-checkbox"] input'),
+    flagNonAccessibleLabel: () => cy.get('[data-ngie-testid="response-option-checkbox"] .MuiFormControlLabel-label')
+}
+
+const steps = {
+    ...desmosToolComponent.steps,
+    ...createQuestionBasePage.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...additionalSettingsPanel.steps,
+    ...questionInstructionsComponent.steps,
+    verifyHideExpressionListCheckboxUnchecked: () => {
+        desmosGraphingPage.hideExpressionListCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkHideExpressionListCheckbox: () => {
+        desmosGraphingPage.hideExpressionListCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckHideExpressionListCheckbox: () => {
+        desmosGraphingPage.hideExpressionListCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyExpressionListPanelVisible: () => {
+        utilities.verifyElementVisibilityState(desmosGraphingPage.desmosGraphingToolExpressionPanel(), 'visible');
+    },
+
+    verifyPreviewTabExpressionListPanelVisible: () => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(desmosGraphingPage.desmosGraphingToolExpressionPanel(), 'visible');
+            });
+    },
+
+    verifyPreviewTabExpressionListPanelHidden: () => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                desmosGraphingPage.desmosGraphingToolExpressionPanel()
+                    .should('have.attr', 'style', 'transform:translate(-100%, 0)');
+            });
+    },
+
+    showHideList: () => {
+        desmosGraphingPage.showHideListButton()
+            .click();
+    },
+
+    verifyDesmosGraphingWidthInputField: (width) => {
+        desmosGraphingPage.desmosGraphingWidthInputField()
+            .should('have.value', width);
+    },
+
+    verifyDesmosGraphingHeightInputField: (height) => {
+        desmosGraphingPage.desmosGraphingHeightInputField()
+            .should('have.value', height);
+    },
+
+    /**
+    * @param {number} width value to enter in width input field
+    * @description this function enters value in width input field
+    */
+    enterInputInDesmosGraphingWidthInputField: (width) => {
+        desmosGraphingPage.desmosGraphingWidthInputField()
+            .clear()
+            .type(width)
+            .should('have.value', width);
+    },
+
+    /**
+    * @param {number} height value to enter in height input field
+    * @description this function enters value in height input field
+    */
+    enterInputInDesmosGraphingHeightInputField: (height) => {
+        desmosGraphingPage.desmosGraphingHeightInputField()
+            .clear()
+            .type(height)
+            .should('have.value', height);
+    },
+
+    /**
+     * @description this function locks aspect ratio
+     */
+    lockAspectRatio: () => {
+        desmosGraphingPage.buttonAspectRatio()
+            .click();
+        steps.verifyButtonAspectRatioLocked();
+    },
+
+    /**
+     * @description this function unlocks aspect ratio
+     */
+    unlockAspectRatio: () => {
+        desmosGraphingPage.buttonAspectRatio()
+            .click();
+        steps.verifyButtonAspectRatioUnlocked();
+    },
+
+    /**
+     * @description this function verifies aspect ratio is locked
+     */
+    verifyButtonAspectRatioLocked: () => {
+        desmosGraphingPage.buttonAspectRatio()
+            .should('have.attr', 'aria-label', 'Locked aspect ratio')
+    },
+
+    /**
+    * @description this function verifies aspect ratio is unlocked
+    */
+    verifyButtonAspectRatioUnlocked: () => {
+        desmosGraphingPage.buttonAspectRatio()
+            .should('have.attr', 'aria-label', 'Unlocked aspect ratio')
+    },
+
+    /**
+    * @description this function verifies the reset dimensions button is disabled
+    */
+    verifyButtonResetDimensionsDisabled: () => {
+        desmosGraphingPage.buttonResetDimensions()
+            .should('be.disabled');
+    },
+
+    /**
+    * @description this function verifies the reset dimensions button is enabled
+    */
+    verifyButtonResetDimensionsEnabled: () => {
+        desmosGraphingPage.buttonResetDimensions()
+            .should('be.enabled');
+    },
+
+    /**
+    * @description this function resets dimensions
+    */
+    resetDimensions: () => {
+        desmosGraphingPage.buttonResetDimensions()
+            .click();
+    },
+
+    verifyDesmosGraphingDimensions: (width, height) => {
+        desmosGraphingPage.desmosGraphingTool()
+            .should('have.css', 'width', width)
+            .and('have.css', 'height', height);
+    },
+
+    verifyPreviewTabDesmosGraphingDimensions: (width, height) => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                desmosGraphingPage.desmosGraphingTool()
+                    .should('have.css', 'width', `${width}px`)
+                    .and('have.css', 'height', `${height}px`);
+            });
+    },
+
+    addExpression: () => {
+        desmosGraphingPage.addExpressionButton()
+            .click();
+    },
+
+    selectNewFolderOptionFromExpressionList: () => {
+        desmosGraphingPage.expressionListNewFolderOption()
+            .click();
+    },
+
+    addFolderInPreviewTabExpressionList: () => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                steps.addExpression();
+                steps.selectNewFolderOptionFromExpressionList();
+            });
+    },
+
+    verifyDesmosGraphingOutput: (output) => {
+        utilities.verifyInnerText(desmosGraphingPage.desmosGraphingOutput(), output);
+    },
+
+    verifyPreviewTabDesmosGraphingOutput: (output) => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyInnerText(desmosGraphingPage.desmosGraphingOutput(), output);
+            });
+    },
+
+    verifyFolderInExpressionListVisible: () => {
+        utilities.verifyElementVisibilityState(desmosGraphingPage.folderInExpressionList(), 'notExist');
+    },
+
+    verifyFlagThisItemNonAccessibleCheckboxIsUnchecked: () => {
+        desmosGraphingPage.flagNonAccessibleCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkFlagThisItemNonAccessibleCheckbox: () => {
+        desmosGraphingPage.flagNonAccessibleCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyInputInPreviewTabTextAreaField: (inputText) => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyInnerText(desmosToolComponent.previewTabDesmosTextArea(), inputText);
+            });
+    },
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...additionalSettingsPanel.tests,
+    verifyGraphingQuestionSpecifyPredefinedExpressionContent: () => {
+        it('When user selects a scoring type the contents of the Specify predefined expression should be displayed', () => {
+            utilities.verifyElementVisibilityState(desmosGraphingPage.desmosGraphingTool(), 'visible');
+            utilities.verifyElementVisibilityState(desmosGraphingPage.previewTabDesmosToolGraph(), 'visible');
+            utilities.verifyElementVisibilityState(desmosToolComponent.previewTabDesmosToolKeypadButton(), 'visible');
+        });
+    }
+}
+
+export const desmosGraphingPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/desmosToolPage.js

@@ -0,0 +1,204 @@
+import utilities from "../support/helpers/utilities";
+import { commonComponents, createQuestionBasePage, questionInstructionsComponent, additionalSettingsPanel, scoringSectionBaseEditTab, toolVisibilityComponent } from "./components";
+import { desmosToolComponent } from "./components/desmosToolComponent";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...scoringSectionBaseEditTab,
+    ...commonComponents,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...desmosToolComponent,
+    ...toolVisibilityComponent,
+    desmosToolVisibilityLabel: () => cy.get('[class*="DesmosToolsVisibilitySectionstyles__Label"]'),
+    widthLabel: () => cy.get('[class*="SizeLabel"]').eq(0),
+    heightLabel: () => cy.get('[class*="SizeLabel"]').eq(1),
+    widthInputField: () => cy.get('.text-input-field input').eq(0),
+    heightInputField: () => cy.get('.text-input-field input').eq(1),
+    previewTabDesmosToolVisibilityButton: () => cy.get('.desmos-tool-visibility-button'),
+    previewTabDesmosToolVisibleImage: () => cy.get('.desmos-tool-visibility-button #eye'),
+    previewTabDesmosToolHideImage: () => cy.get('.desmos-tool-visibility-button #Hide_cell'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...additionalSettingsPanel.steps,
+    ...questionInstructionsComponent.steps,
+    ...desmosToolComponent.steps,
+    ...toolVisibilityComponent.steps,
+    /**
+     * @param {string} label of the desmos visibility
+     * @description this function verifies the label of the desmos
+     */
+    verifyDesmosVisibilityLabel: (label) => {
+        utilities.verifyInnerText(desmosToolPage.desmosToolVisibilityLabel(), label);
+        utilities.verifyElementVisibilityState(desmosToolPage.desmosToolVisibilityLabel(), 'visible');
+    },
+
+    /**
+     * @param {number} height value in height input field
+     * @param {number} width  value in width input field
+     * @description this function verifies height and width input fields and labels
+     */
+    verifyHeightWidthLabelAndInputField: (width, height) => {
+        utilities.verifyInnerText(desmosToolPage.heightLabel(), 'Height (px)');
+        utilities.verifyElementVisibilityState(desmosToolPage.heightLabel(), 'visible');
+        utilities.verifyInnerText(desmosToolPage.widthLabel(), 'Width (px)');
+        utilities.verifyElementVisibilityState(desmosToolPage.widthLabel(), 'visible');
+        desmosToolPage.heightInputField()
+            .should('have.value', height);
+        desmosToolPage.widthInputField()
+            .should('have.value', width);
+    },
+
+    /**
+     * @param {number} width value to enter in width input field
+     * @description this function enters value in width input field
+     */
+    enterInputInWidthInputField: (width) => {
+        desmosToolPage.widthInputField()
+            .clear()
+            .type(width)
+            .should('have.value', width);
+    },
+
+    /**
+     * @param {number} height value to enter in height input field
+     * @description this function enters value in height input field
+     */
+    enterInputInHeightInputField: (height) => {
+        desmosToolPage.heightInputField()
+            .clear()
+            .type(height)
+            .should('have.value', height);
+    },
+
+    /**
+     * @param {("Show"|"Hide")} visibility
+     * @param {string} desmosName name of the desmos
+     */
+    verifyPreviewTabDesmosToolVisibilityButtonLabel: (visibility, desmosName) => {
+        utilities.verifyInnerText(desmosToolPage.previewTabDesmosToolVisibilityButton(), `${visibility} desmos ${desmosName}`)
+        if (visibility == 'Hide') {
+            utilities.verifyElementVisibilityState(desmosToolPage.previewTabDesmosToolHideImage(), 'visible');
+        } else {
+            utilities.verifyElementVisibilityState(desmosToolPage.previewTabDesmosToolVisibleImage(), 'visible');
+        }
+    },
+
+    verifyPreviewTabDesmosToolVisibilityButtonDoesNotExist: () => {
+        utilities.verifyElementVisibilityState(desmosToolPage.previewTabDesmosToolVisibilityButton(), 'notExist');
+    },
+
+    clickOnDesmosToolVisibilityButton: () => {
+        desmosToolPage.previewTabDesmosToolVisibilityButton()
+            .click();
+    }
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...additionalSettingsPanel.tests,
+    /**
+     * @description this function checks all the content on edit tab of desmos tool
+     * @param {string} desmosTool - name of the desmos tool
+     */
+    verifyEditTabContents: (desmosTool) => {
+        it(`\'Desmos - ${desmosTool} visibility\' label should be displayed on the edit tab`, () => {
+            desmosToolPage.steps.verifyDesmosVisibilityLabel(`Desmos ${desmosTool} Visibility`);
+        });
+
+        it('\'Width (px)\' and \'Height (px)\' labels with input fields should be displayed and by default it would be set to 600px by 400 px respectively', () => {
+            desmosToolPage.steps.verifyHeightWidthLabelAndInputField('600', '400');
+        });
+
+        it('User should be able to enter values in the \'Width (px)\' and \'Height (px)\' input fields', () => {
+            desmosToolPage.steps.enterInputInWidthInputField('200');
+            desmosToolPage.steps.enterInputInHeightInputField('300');
+        });
+
+        it('\'Add show/hide button\' checkbox and label should be displayed and by default the checkbox should be unchecked', () => {
+            desmosToolPage.steps.verifyAddShowHideButtonLabelAndCheckbox();
+        });
+
+        it(`When the user checks the \'Add show/hide button\' checkbox then \'Launch the Desmos - ${desmosTool} by default\' checkbox and label should be displayed and by default it should be unchecked`, () => {
+            desmosToolPage.steps.checkAddShowHideButtonCheckbox();
+            desmosToolPage.steps.verifyLaunchToolByDefaultLabelAndCheckbox(`desmos ${desmosTool}`);
+        });
+
+        it(`The user should be able to check the \'Launch the Desmos - ${desmosTool} by default\' checkbox`, () => {
+            desmosToolPage.steps.checkLaunchToolByDefaultCheckbox();
+        });
+
+        it('CSS of edit tab basic section', { tags: 'css' }, () => {
+            utilities.verifyCSS(desmosToolPage.desmosToolVisibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(desmosToolPage.widthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(desmosToolPage.heightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(desmosToolPage.widthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(desmosToolPage.heightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(desmosToolPage.addShowHideButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(desmosToolPage.launchToolByDefaultLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of edit tab contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(desmosToolPage.desmosToolVisibilityLabel().parents('[class*="EditTabWrapper"]'));
+        });
+    },
+
+    verifyPreviewTabContentsCSSAndA11y: () => {
+        it('CSS of preview tab basic section', { tags: 'css' }, () => {
+            utilities.verifyCSS(desmosToolPage.previewTabDesmosToolVisibilityButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(desmosToolComponent.previewTabDesmosToolDragHandle().find('[id*="drag_handle"]'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(desmosToolPage.previewTabDesmosToolHideImage(), {
+                'color': css.color.activeButtons,
+            });
+        });
+
+        it('Accessibility of preview tab desmos tool', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(desmosToolComponent.previewTabDesmosTool().parents('.resource-and-tool-author-preview'));
+        });
+    }
+}
+
+export const desmosToolPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/dialogBoxBase.js

@@ -6,8 +6,8 @@ const selectors = {
     dialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"]'),
     dialogBoxTitle: () => cy.get('.dialog-title'),
     dialogBoxContent: () => cy.get('div[id="alert-dialog-description"]'),
-    buttonReject: () => cy.get('[class*="action"][class*="wrapper"] button').eq(0),
-    buttonAccept: () => cy.get('[class*="action"][class*="wrapper"] button').eq(1),
+    buttonReject: () => cy.get('.save-action-btn-wrapper button').eq(0),
+    buttonAccept: () => cy.get('.save-action-btn-wrapper button').eq(1),
     buttonClose: () => cy.get('[aria-label="CLOSE"]')
 }
 
@@ -16,7 +16,7 @@ const steps = {
         utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
         utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Warning!');
         utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Please fill the required fields.');
-        utilities.verifyElementVisibilityState(dialogBoxBase.closeButton(), 'visible');
+        utilities.verifyElementVisibilityState(dialogBoxBase.buttonClose(), 'visible');
     },
 
     closeWarningPopup: () => {
@@ -69,12 +69,12 @@ const tests = {
             utilities.verifyCSS(dialogBoxBase.buttonAccept(), {
                 'color': css.color.primaryBtn,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
+                'font-weight': css.fontWeight.semibold
             });
             utilities.verifyCSS(dialogBoxBase.buttonReject(), {
                 'color': css.color.secondaryBtn,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
+                'font-weight': css.fontWeight.semibold,
                 'background-color': css.color.transparent
             });
         });