itemengine-cypress-automation 1.0.19 → 1.0.21

package/cypress/e2e/ILC/EssayResponseMath/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');
+        });
+    });
+});

package/package.json

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