itemengine-cypress-automation 1.0.18 → 1.0.20

package/cypress/e2e/ILC/EssayResponse/essayResponseHeaderSection.js

@@ -0,0 +1,80 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage, dialogBoxBase } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+
+describe('Create question page - Essay response: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+        });
+
+        essayResponsePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Essay response - rich text');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+        });
+
+        essayResponsePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+        });
+
+        essayResponsePage.tests.verifyCancelButton('essay response - rich text');
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                essayResponsePage.questionInstructionsLabelEditTab()
+                    .parents('.edit-question-instruction-wrapper')
+                    .within(() => {
+                        commonComponents.errorMessage()
+                            .verifyInnerText('Error: Question instructions are required.')
+                            .and('be.visible');
+                    });
+                essayResponsePage.pleaseEnterPointsErrorMessage()
+                    .verifyInnerText('Error: Please enter points.');
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                essayResponsePage.steps.addQuestionInstructions();
+                essayResponsePage.questionInstructionsLabelEditTab()
+                    .parents('.edit-question-instruction-wrapper')
+                    .within(() => {
+                        commonComponents.errorMessage()
+                            .should('not.exist');
+                    });
+                essayResponsePage.steps.allotPoints(20);
+                essayResponsePage.pleaseEnterPointsErrorMessage()
+                    .should('not.exist');
+            });
+        });
+
+        describe('Saving a question', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            essayResponsePage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+        });
+    });
+});

package/cypress/e2e/ILC/EssayResponse/essayResponseMathCharacters.js

@@ -0,0 +1,38 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Essay Response: Math Characters popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Math Characters popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type, selecting math characters from customize formatting options accordion and then switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Math characters']);
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        essayResponsePage.tests.verifySpecialOrMathCharactersPopup('mathCharacters');
+    });
+
+    describe('Add math character symbols to the response field', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type, selecting math characters from customize formatting options accordion, switching to preview tab and clicking on math characters toolbar option.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Math characters']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Math characters')
+                .click();
+        });
+
+        essayResponsePage.tests.addSpecialOrMathCharactersToResponseField('mathCharacters');
+    });
+});

package/cypress/e2e/ILC/EssayResponse/essayResponseMathCreateItem.js

@@ -0,0 +1,243 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponseMathPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import { equationEditorFlyout } from "../../../pages/components/equationEditorFlyout";
+const css = Cypress.env('css');
+
+describe('Create question page - Essay response - math', () => {
+    before(() => {
+        cy.loginAs('admin');
+        essayResponseMathPage.steps.navigateToCreateQuestion('essay response - math');
+    });
+
+    it('\'Essay response - math\' label should be displayed', () => {
+        essayResponseMathPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Essay response - math');
+    });
+
+    it('When the user expands the \'Customize formatting options (for student player)\' accordion, the \'Equation Editor\' formatting option should be selected by default', () => {
+        essayResponseMathPage.steps.expandCustomizeFormattingOptionsAccordion()
+        essayResponseMathPage.customizeFormattingOptionsTiles('Equation Editor')
+            .should('have.attr', 'data-aria-pressed', 'true');
+    });
+
+    describe('Text to not be rendered as LaTex section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseMathPage.steps.navigateToCreateQuestion('essay response - math');
+        });
+
+        it('CSS of \'Text to not be rendered as LaTex section\' section', { tags: 'css' }, () => {
+            essayResponseMathPage.textToNotBeRenderedAsLaTexLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
+            essayResponseMathPage.addTextButton()
+                .should('have.css', 'color', css.color.activeButtons)
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Text to not be rendered as LaTex section\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseMathPage.textToNotBeRenderedAsLaTexLabel().parents('.text-not-latex-wrapper'));
+        });
+
+        it('\'Text to not be rendered as LaTex\' label along with an \'+Add text\' button should be displayed and the \'Text to not be rendered as LaTex\' input field should not be present ', () => {
+            essayResponseMathPage.textToNotBeRenderedAsLaTexLabel()
+                .verifyInnerText('Text to not be rendered as LaTex');
+            essayResponseMathPage.addTextButton()
+                .verifyInnerText('Add text')
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        it('When the user clicks on the \'+Add text\' button, an input field with \'1\' count and a delete button should appear. The user should be able to enter text into the input field', () => {
+            essayResponseMathPage.addTextButton()
+                .click();
+            essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldWrapper(0)
+                .should('be.visible')
+                .within(() => {
+                    essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldCount()
+                        .should('have.text', '1');
+                    essayResponseMathPage.textToNotBeRenderedAsLaTextInputField()
+                        .type('mm')
+                        .should('have.value', 'mm');
+                });
+            essayResponseMathPage.deleteButton()
+                .should('be.visible');
+        });
+
+
+        it('CSS of \'Text to not be rendered as LaTex\' input field', { tags: 'css' }, () => {
+            essayResponseMathPage.textToNotBeRenderedAsLaTextInputField()
+                .should('have.css', 'color', css.color.text)
+                .parents('.input-field')
+                .should('have.css', 'background-color', css.color.defaultBackground);
+            essayResponseMathPage.deleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/548514
+        it('Accessibility of \'Text to not be rendered as LaTex\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseMathPage.textToNotBeRenderedAsLaTextInputField().parents('.text-not-to-be-rendered-input'))
+        });
+
+        it('When the user clicks on the \'+Add text\' button, an input field with \'2\' count and a delete button should appear.', () => {
+            essayResponseMathPage.addTextButton()
+                .click();
+            essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldWrapper(1)
+                .should('be.visible')
+                .within(() => {
+                    essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldCount()
+                        .should('have.text', '2');
+                });
+            essayResponseMathPage.deleteButton()
+                .eq(1)
+                .should('be.visible');
+        });
+
+        it('When the user clicks on the delete button of the \'1\' input field, the \'1\' input field should get deleted and the count of the \'2\' input field should update to \'1\'', () => {
+            essayResponseMathPage.deleteButton()
+                .eq(0)
+                .click();
+            essayResponseMathPage.textToNotBeRenderedAsLaTextInputField()
+                .should('have.length', 1);
+            essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldWrapper(0)
+                .within(() => {
+                    essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldCount()
+                        .should('have.text', '1');
+                });
+        });
+    });
+
+    describe('Text to not be rendered as LaTex - functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseMathPage.steps.navigateToCreateQuestion('essay response - math');
+            cy.barsPreLoaderWait();
+            essayResponseMathPage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponseMathPage.equationEditorSectionCategories()
+                .eq(10)
+                .click();
+            essayResponseMathPage.addTextButton()
+                .click();
+            essayResponseMathPage.steps.addTextToNotBeRenderedAsLatexEditTab(0, 'mm');
+            essayResponseMathPage.steps.switchToPreviewTab();
+            essayResponseMathPage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        it('When the user adds text in the input field of the equation editor flyout that is not set as text to not be rendered as LaTex, then that text should appear as a latex code and the text that is set to not be rendered as LaTex, should appear as text in regular format', () => {
+            equationEditorFlyout.previewInputField()
+                .type('80 mm Hg to 120 ');
+            equationEditorFlyout.categoryTab('Units')
+                .click();
+            equationEditorFlyout.categoryCharacters('Millimeter')
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type(' Hg');
+            equationEditorFlyout.previewInputField()
+                .find('.mq-operator-name')
+                .each(($element) => {
+                    expect($element).to.have.css('font-style', 'normal');
+                });
+            let latexCharacterIndexes = [2, 3, 4, 5]
+            equationEditorFlyout.previewInputField()
+                .within(() => {
+                    latexCharacterIndexes.forEach((characterIndex) => {
+                        essayResponseMathPage.inputFieldLatexCharacter()
+                            .eq(characterIndex)
+                            .should('have.css', 'font-style', 'italic');
+                    });
+                });
+            cy.get('#textarea-value')
+                .should('have.text', '80 mm H of g t o 120 mm H of g')
+        });
+
+        it('When the user clicks on the\'Ok\' button on the equation editor flyout, the text should appear the same as it was displayed in the input field of the equation editor flyout', () => {
+            equationEditorFlyout.buttonOk()
+                .click()
+            essayResponseMathPage.responseField()
+                .find('.cke_widget_element')
+                .should('have.attr', 'aria-label', '80 mm H of g t o 120 mm H of g')
+        });
+
+        it('When the user has set multiple texts to not be rendered as LaTex, then those texts should appear in regular format in the input field of the equation editor flyout as well as in the response field', () => {
+            essayResponseMathPage.steps.switchToEditTab()
+            essayResponseMathPage.addTextButton()
+                .click();
+            essayResponseMathPage.steps.addTextToNotBeRenderedAsLatexEditTab(1, 'Hg');
+            essayResponseMathPage.steps.switchToPreviewTab()
+            essayResponseMathPage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type('80 mmHg to 120 ');
+            equationEditorFlyout.categoryTab('Units')
+                .click();
+            equationEditorFlyout.categoryCharacters('Millimeter')
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type('Hg');
+            equationEditorFlyout.previewInputField()
+                .find('.mq-operator-name')
+                .each(($element) => {
+                    expect($element).to.have.css('font-style', 'normal');
+                });
+            let latexCharacterIndexes = [4, 5]
+            equationEditorFlyout.previewInputField()
+                .within(() => {
+                    latexCharacterIndexes.forEach((characterIndex) => {
+                        essayResponseMathPage.inputFieldLatexCharacter()
+                            .eq(characterIndex)
+                            .should('have.css', 'font-style', 'italic');
+                    });
+                });
+            cy.get('#textarea-value')
+                .should('have.text', '80 mm Hg t o 120 mm Hg');
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponseMathPage.responseField()
+                .find('.cke_widget_element')
+                .should('have.attr', 'aria-label', '80 mm Hg t o 120 mm Hg')
+        });
+
+        it('When the user has set any special character as \'text to not be rendered as LaTex\', then that special character should be rendered as LaTex code in the input field of the equation editor flyout as well as in the response field, it should NOT be rendered in regular format', () => {
+            essayResponseMathPage.steps.switchToEditTab()
+            essayResponseMathPage.addTextButton()
+                .click()
+            essayResponseMathPage.steps.addTextToNotBeRenderedAsLatexEditTab(2, '$');
+            essayResponseMathPage.steps.switchToPreviewTab()
+            essayResponseMathPage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type('200$');
+            cy.get('span[mathquill-command-id]')
+                .each(($element) => {
+                    expect($element).to.not.have.class('.mq-operator-name');
+                });
+            cy.get('#textarea-value')
+                .should('have.text', '200 Dollars');
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponseMathPage.responseField()
+                .find('.cke_widget_element')
+                .should('have.attr', 'aria-label', '200 Dollars');
+        });
+
+        it('When the user deletes a text to not be rendered as latex option then the deleted option text should be displayed as a \'LaTex code\' in the \'Equation editor\' flyout as well as in the response field', () => {
+            essayResponseMathPage.steps.switchToEditTab()
+            essayResponseMathPage.deleteButton()
+                .eq(1)
+                .click();
+            essayResponseMathPage.steps.switchToPreviewTab()
+            essayResponseMathPage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type('Hg');
+            essayResponseMathPage.inputFieldLatexCharacter()
+                .each(($element) => {
+                    expect($element).to.not.have.class('.mq-operator-name');
+                });
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponseMathPage.responseField()
+                .find('.cke_widget_element')
+                .should('have.attr', 'aria-label', 'H of g');
+        });
+    });
+});