itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/components/correctIncorrectAnswerLabelComponent.js

@@ -0,0 +1,38 @@
+import utilities from "../../support/helpers/utilities";
+import { autoScoredScoringPreviewTab } from "./autoScoredScoringPreviewTab";
+
+const selectors = {
+    correctAnswersLabel: () => cy.get('.correct-answers-label'),
+    correctAnswerContainer: () => cy.get('[class*="correct-answer-wrapper"]'),
+    correctIncorrectAnswerBlock: () => cy.get('[class*="-answer-block"]'),
+    correctIncorrectStatusMessageText: () => cy.get('[class*="AnswerStatusText"]'),
+    correctIncorrectAnswerLabel: () => cy.get('[class*="CorrectIncorrectLabel"]')
+}
+
+const steps = {
+
+    /**
+    * @param {("correct" | "incorrect")} answerStatus - The status of the answer.
+    * @description Verifies the visibility and content of the correct/incorrect answer label block.
+    * If the answer is correct, it also verifies the visibility of the correct icon;
+    * otherwise, it verifies the visibility of the incorrect icon.
+    */
+    verifyCorrectIncorrectAnswerLabel: (answerStatus) => {
+        utilities.verifyElementVisibilityState(correctIncorrectAnswerLabelComponent.correctIncorrectAnswerBlock(), 'visible');
+        utilities.verifyInnerText(correctIncorrectAnswerLabelComponent.correctIncorrectStatusMessageText(), `Your answer is\n${answerStatus}`)
+        if (answerStatus === 'correct') {
+            utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');
+        } else {
+            utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'visible');
+        }
+    },
+
+    verifyCorrectIncorrectStatusMessageNotExists: () => {
+        utilities.verifyElementVisibilityState(correctIncorrectAnswerLabelComponent.correctIncorrectAnswerBlock(), 'notExist');
+    },
+}
+
+export const correctIncorrectAnswerLabelComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/createQuestionBasePage.js

@@ -1,3 +1,4 @@
+import utilities from "../../support/helpers/utilities";
 import { createItemPage } from "../createItemPage";
 import { dialogBoxBase } from "../dialogBoxBase";
 import { selectQuestionResourceToolPage } from "../selectQuestionResourceToolPage";
@@ -19,6 +20,7 @@ const steps = {
     navigateToCreateQuestion: (questionType) => {
         cy.visit('/item-engine/demo/create-item');
         createItemPage.steps.clickOnAddQuestion();
+        cy.log(`Navigating to ${questionType} question type`)
         selectQuestionResourceToolPage.steps.selectQuestionType(questionType);
     },
 
@@ -69,7 +71,7 @@ const steps = {
         createQuestionBasePage.previewTab()
             .should('have.attr', 'aria-selected', 'true');
     },
-    
+
     clickOnSaveQuestionButton: () => {
         createQuestionBasePage.saveQuestionButton()
             .click();
@@ -83,90 +85,103 @@ const steps = {
     verifyPreviewTabNotSelectedState: () => {
         createQuestionBasePage.previewTab()
             .should('have.attr', 'aria-selected', 'false');
+    },
+    
+    clickOnCancelButton: () => {
+        createQuestionBasePage.cancelButton()
+        .click(); 
     }
 }
 
 const tests = {
     verifyCreateQuestionPageQuestionTypeHeader: (questionType) => {
-        it('CSS of Header section', { tags: 'css' }, () => {
-            createItemPage.createQuestionPageQuestionTypeHeader()
-                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.bold);
-            createQuestionBasePage.cancelButton()
-                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.transparent);
-            createQuestionBasePage.saveQuestionButton()
-                .verifyCSS(css.color.successBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.successBtnBg);
-        });
-
-        it(`Accessibility of ${questionType} Header section`, { tags: 'a11y' }, () => {
-            cy.checkAccessibility(createItemPage.createQuestionPageQuestionTypeHeader().parents('[class*="header-wrapper"]'));
-        });
-
         it(`${questionType} label should be displayed`, () => {
-            createItemPage.createQuestionPageQuestionTypeHeader()
-                .verifyInnerText(questionType);
+            utilities.verifyInnerText(createItemPage.createQuestionPageQuestionTypeHeader(), questionType);
         });
 
         it('\'Cancel\' button should be displayed', () => {
-            createQuestionBasePage.cancelButton()
-                .verifyInnerText('Cancel');
+            utilities.verifyInnerText(createQuestionBasePage.cancelButton(), 'Cancel');
         });
 
         it('\'Save\' button should be displayed', () => {
-            if (questionType === 'Passage' || questionType === 'Reading ruler' || questionType === 'Audio player') {
-                createQuestionBasePage.saveQuestionButton()
-                    .verifyInnerText('Save');
+            let exceptionQuestions = ['Desmos scientific calculator', 'Desmos graphing calculator', 'Desmos four-function calculator', 'Desmos geometry tool', 'Desmos matrix calculator', 'Passage', 'Reading ruler', 'Audio player', 'Ruler', 'Protractor']
+            if (exceptionQuestions.includes(questionType)) {
+                utilities.verifyInnerText(createQuestionBasePage.saveQuestionButton(), 'Save');
             }
             else {
-                createQuestionBasePage.saveQuestionButton()
-                    .verifyInnerText('Save question');
+                utilities.verifyInnerText(createQuestionBasePage.saveQuestionButton(), 'Save question');
             }
         });
+
+        it('CSS of Header section', { tags: 'css' }, () => {
+            utilities.verifyCSS(createItemPage.createQuestionPageQuestionTypeHeader(), {
+                'color': css.color.questionHeading,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(createQuestionBasePage.cancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(createQuestionBasePage.saveQuestionButton(), {
+                'color': css.color.successBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.successBtnBg
+            });
+        });
+
+        it(`Accessibility of ${questionType} Header section`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(createItemPage.createQuestionPageQuestionTypeHeader().parents('[class*="header-wrapper"]'));
+        });
     },
 
     verifyCancelButton: (questionType) => {
         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();
-            selectQuestionResourceToolPage.selectAQuestionHeaderText()
-                .should('be.visible');
-            selectQuestionResourceToolPage.questionTypeOptionTitle()
-                .should('be.visible');
+            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 with message \'Are you sure you want to leave this page? Your changes have not been saved.\'', () => {
             selectQuestionResourceToolPage.steps.selectQuestionType(questionType);
-            questionInstructionsComponent.questionInstructionsInputField()
-                .should('be.visible')
-                .type('Edited')
-                .should('have.text', 'Edited');
+            questionInstructionsComponent.steps.addTextInQuestionInstructionsInputField('Edited');
             if (questionType !== 'feedback scale' && questionType !== 'highlight image') {
                 scoringSectionBase.steps.allotPoints(20);
             };
             createQuestionBasePage.cancelButton()
                 .click();
-            dialogBoxBase.dialogBox()
-                .should('be.visible');
-            dialogBoxBase.dialogBoxContent()
-                .verifyInnerText('Are you sure you want to leave this page? Your changes have not been saved.');
-            dialogBoxBase.buttonAccept()
-                .verifyInnerText('Yes, I want to leave this page');
-            dialogBoxBase.buttonReject()
-                .verifyInnerText('No, I\'d like to go back');
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to leave this page? Your changes have not been saved.');
+            utilities.verifyInnerText(dialogBoxBase.buttonAccept(), 'Yes, I want to leave this page');
+            utilities.verifyInnerText(dialogBoxBase.buttonReject(), 'No, I\'d like to go back');
         });
 
         it('CSS of popup', { tags: 'css' }, () => {
-            dialogBoxBase.dialogBox()
-                .should('have.css', 'background-color', css.color.defaultBackground);
-            dialogBoxBase.dialogBoxContent()
-                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.regular);
-            dialogBoxBase.buttonAccept()
-                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.primaryBtnBg);
-            dialogBoxBase.buttonReject()
-                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
-                .should('have.css', 'background-color', css.color.transparent);
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'background-color': css.color.defaultBackground
+            })
+
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
         });
 
         it('Accessibility of popup', { tags: 'a11y' }, () => {
@@ -177,10 +192,8 @@ const tests = {
             dialogBoxBase.buttonReject()
                 .click();
             createQuestionBasePage.editTab()
-                .should('have.attr', 'aria-selected')
-                .and('eq', 'true');
-            questionInstructionsComponent.questionInstructionsInputField()
-                .verifyInnerText('Edited');
+                .should('have.attr', 'aria-selected', 'true');
+            utilities.verifyTextContent(questionInstructionsComponent.questionInstructionsInputField(), 'Edited');
         });
 
         it(`Clicking on \'Yes, I want to leave this page\' button should should discard all changes and direct the user to the \'Select a question\' page.`, () => {
@@ -188,17 +201,18 @@ const tests = {
                 .click();
             dialogBoxBase.buttonAccept()
                 .click();
-            selectQuestionResourceToolPage.selectAQuestionHeaderText()
-                .should('be.visible');
-            selectQuestionResourceToolPage.questionTypeOptionTitle()
-                .should('be.visible');
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.questionTypeOptionTitle(), 'visible');
         });
     },
 
-    verifySavedSuccessfullySnackbarCSSanda11y: () => {
+    verifySavedSuccessfullySnackbarCSSAndA11y: () => {
         it('CSS of Saved successfully snackbar', { tags: 'css' }, () => {
-            commonComponents.snackbar()
-                .verifyCSS(css.color.whiteText, css.fontSize.normal, css.fontWeight.regular);
+            utilities.verifyCSS(commonComponents.snackbar(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
         });
 
         it('Accessibility of Saved successfully snackbar', { tags: 'a11y' }, () => {
@@ -209,20 +223,24 @@ const tests = {
     verifyTabsSection: () => {
         it('CSS of Tabs section', { tags: 'css' }, () => {
             //CSS of active Edit tab
-            createQuestionBasePage.editTab()
-                .verifyCSS(css.color.activeButtons, css.fontSize.default, css.fontWeight.bold);
+            utilities.verifyCSS(createQuestionBasePage.editTab(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
             //CSS of inactive Preview tab
-            createQuestionBasePage.previewTab()
-                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.bold);
+            utilities.verifyCSS(createQuestionBasePage.previewTab(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
         });
 
         //Note: a11y covered in Header section
 
         it('\'Edit\' and \'Preview\' tabs should be present', () => {
-            createQuestionBasePage.editTab()
-                .verifyInnerText('Edit');
-            createQuestionBasePage.previewTab()
-                .verifyInnerText('Preview');
+            utilities.verifyInnerText(createQuestionBasePage.editTab(), 'Edit');
+            utilities.verifyInnerText(createQuestionBasePage.previewTab(), 'Preview');
         });
 
         it('\'Edit\' tab should be selected by default', () => {
@@ -233,17 +251,15 @@ const tests = {
         it('User should be able to switch to the \'Preview\' tab', () => {
             createQuestionBasePage.steps.switchToPreviewTab();
             createQuestionBasePage.editTab()
-                .should('not.have.class', 'active');
-            createQuestionBasePage.editTabWrapper()
-                .should('not.be.visible');
+                .should('not.have.attr', 'aria-selected', 'true');
+            utilities.verifyElementVisibilityState(createQuestionBasePage.editTabWrapper(), 'hidden');
         });
 
         it('User should be able to switch back to the \'Edit\' tab', () => {
             createQuestionBasePage.steps.switchToEditTab();
             createQuestionBasePage.editTab()
                 .should('have.attr', 'aria-selected', 'true');
-            createQuestionBasePage.editTabWrapper()
-                .should('be.visible');
+            utilities.verifyElementVisibilityState(createQuestionBasePage.editTabWrapper(), 'visible');
         });
     }
 }

package/cypress/pages/components/desmosToolComponent.js

@@ -0,0 +1,104 @@
+import utilities from "../../support/helpers/utilities"
+
+const selectors = {
+    previewTabDesmosToolGraph: () => cy.get('.dcg-graph-outer[role="img"]'),
+    previewTabDesmosToolKeypadButton: () => cy.get('.dcg-show-keypad-container .dcg-tooltip-hit-area-container [role="button"]'),
+    previewTabDesmosToolDragHandle: () => cy.get('[class*="DesmosHeader"] [role="button"]'),
+    previewTabDesmosToolCloseButton: () => cy.get('[class*="DesmosHeader"] button'),
+    previewTabDesmosTextArea: () => cy.get('.dcg-mq-container .dcg-mq-root-block'),
+    previewTabDesmosOutput: () => cy.get('[class*="output"] .dcg-mq-root-block'),
+    previewTabDesmosToolSidebar: () => cy.get('.dcg-sidebar'),
+    previewTabDesmosToolSidebarButton: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.dcg-sidebar [role="button"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('.dcg-sidebar [role="button"]')
+        }
+    },
+    previewTabDesmosSidebarToolTitle: () => cy.get('.dcg-sidebar .dcg-tool-title'),
+    previewTabDesmosSidebarSteps: () => cy.get('.dcg-complex-tool-steps-container [role="listitem"]'),
+    previewTabDesmosTool: () => cy.get('[id*="desmos-tool"]'),
+    previewTabDesmosToolKeypad: () => cy.get('[class*="DesmosToolstyles__DesmosToolViewWrapper"] .dcg-basic-keypad-container'),
+    previewTabDesmosToolKeypadKeys: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.dcg-basic-keypad  .dcg-keypad-btn[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('.dcg-basic-keypad  .dcg-keypad-btn')
+        }
+    }
+}
+
+const steps = {
+    verifyDesmosToolIsVisible: () => {
+        utilities.verifyElementVisibilityState(desmosToolComponent.previewTabDesmosTool(), 'visible');
+    },
+
+    verifyDesmosToolDoesNotVisible: () => {
+        utilities.verifyElementVisibilityState(desmosToolComponent.previewTabDesmosTool(), 'hidden');
+    },
+
+    /**
+    * @param {string} option of the button on keypad
+    */
+    clickOnDesmosToolKeypadKeys: (option) => {
+        desmosToolComponent.previewTabDesmosToolKeypadKeys(option)
+            .click();
+    },
+
+    clickOnDesmosToolSidebarButton: (option) => {
+        desmosToolComponent.previewTabDesmosToolSidebarButton(option)
+            .click();
+    },
+
+    /**
+   * @param {string} option of the button on keypad
+   */
+    verifyWidthAndHeightOfDesmosTool: (width, height) => {
+        desmosToolComponent.previewTabDesmosTool()
+            .should('have.attr', 'width', width)
+            .and('have.attr', 'height', height);
+    },
+
+    verifyDesmosSidebarSteps: (arrayOfSteps) => {
+        arrayOfSteps.forEach((step, index) => {
+            desmosToolComponent.previewTabDesmosSidebarSteps()
+                .eq(index)
+                .should('have.text', step)
+        })
+    },
+
+    verifyInputInTextAreaField: (inputText) => {
+        utilities.verifyInnerText(desmosToolComponent.previewTabDesmosTextArea(), inputText);
+    },
+
+    verifyTextAreaOutput: (output) => {
+        utilities.verifyInnerText(desmosToolComponent.previewTabDesmosOutput(), output);
+    },
+
+    closeDesmosTool: () => {
+        desmosToolComponent.previewTabDesmosToolCloseButton()
+            .click();
+    },
+
+    verifyPreviewTabDesmosToolKeypadIsVisible: () => {
+        utilities.verifyElementVisibilityState(desmosToolComponent.previewTabDesmosToolKeypad(), 'visible');
+    },
+
+    verifyPreviewTabDesmosToolDragHandleIsVisible: () => {
+        utilities.verifyElementVisibilityState(desmosToolComponent.previewTabDesmosToolDragHandle(), 'visible');
+    },
+
+    verifyPreviewTabDesmosToolCloseButtonIsVisible: () => {
+        utilities.verifyElementVisibilityState(desmosToolComponent.previewTabDesmosToolCloseButton(), 'visible');
+    },
+
+    clickOnDesmosToolKeypadButton: () => {
+        desmosToolComponent.previewTabDesmosToolKeypadButton()
+            .click();
+    }
+}
+
+export const desmosToolComponent = {
+    ...selectors,
+    steps
+}