itemengine-cypress-automation 1.0.104 → 1.0.106

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

@@ -0,0 +1,332 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage } from "../../../pages";
+
+describe('Create question page - Essay Response: Customize formatting options (for student player) toolbar options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Bulleted list, Numbered list formatting options - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Undo', 'Redo']);
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user types something in the response field and selects the \'Bulleted list\' toolbar option, then the entered text should appear as a bulleted list', () => {
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ul><li>Lorem Ipsum</li></ul>');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert/Remove Bulleted List');
+
+        //Comment: Here we are unable to verify the bullet point marker that appears since it is displayed using ::marker
+        it('When the user selects the \'Bulleted list\' toolbar option in an empty response field, then a bulleted list with \'1 bullet point\' should be displayed in the response field and when the user enters text, then that text should appear as a bulleted list', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ul><li><br></li></ul>');
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ul><li>Lorem Ipsum</li></ul>');
+        });
+
+        it('When the user presses the \'Enter\' key, another bullet point should appear below the first point and user should be able to enter text to the 2nd list item', () => {
+            essayResponsePage.responseField()
+                .type('{enter}')
+                .find('li')
+                .should('have.length', 2);
+            essayResponsePage.responseField()
+                .type('dolor sit amet')
+                .verifyInnerHTML('<ul><li>Lorem Ipsum</li><li>dolor sit amet</li></ul>')
+        });
+
+        it('When the user presses the \'Enter\' key twice without typing anything in the new bullet point, then the \'Bulleted list\' toolbar option should get deselected, the list should end and the cursor should move out of the list', () => {
+            essayResponsePage.responseField()
+                .type('{enter}{enter}')
+                .find('li')
+                .should('have.length', 2);
+            essayResponsePage.previewTabToolbarOption('Insert/Remove Bulleted List')
+                .should('have.attr', 'aria-pressed', 'false');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ul><li>Lorem Ipsum</li><li>dolor sit amet</li></ul><p><br></p>');
+        });
+
+        it('When the user types something in the response field and selects the \'Numbered list\' toolbar option, then the entered text should appear as a numbered list', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ol><li>Lorem Ipsum</li></ol>');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert/Remove Numbered List');
+
+        //Comment: Here we are unable to verify the number of the list item that appears since it is displayed using ::marker
+        it('When the user selects the \'Numbered list\' toolbar option in an empty response field, then a numbered list with \'1. list item\' should be displayed in the response field and when the user enters text, then that text should appear as a numbered list', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ol><li><br></li></ol>');
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ol><li>Lorem Ipsum</li></ol>');
+        });
+
+        it('When the user presses the \'Enter\' key, \'2. list item\' should appear below the first list item and user should be able to enter text to the 2nd list item', () => {
+            essayResponsePage.responseField()
+                .type('{enter}')
+                .find('li')
+                .should('have.length', 2);
+            essayResponsePage.responseField()
+                .type('dolor sit amet')
+                .verifyInnerHTML('<ol><li>Lorem Ipsum</li><li>dolor sit amet</li></ol>')
+        });
+
+        it('When the user presses the \'Enter\' key again without typing anything in the second list item, then the \'Numbered list\' toolbar option should get deselected, the list should end and the cursor should move out of the list', () => {
+            essayResponsePage.responseField()
+                .type('{enter}{enter}')
+                .find('li')
+                .should('have.length', 2);
+            essayResponsePage.previewTabToolbarOption('Insert/Remove Numbered List')
+                .should('have.attr', 'aria-pressed', 'false');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ol><li>Lorem Ipsum</li><li>dolor sit amet</li></ol><p><br></p>');
+        });
+
+        it('When user is typing in a bulleted list, switches to the next line and clicks on the \'Numbered list\' option, then the \'Bulleted list\' toolbar option should get deselected, the bulleted list should end and a numbered list should begin', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum{enter}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
+            essayResponsePage.previewTabToolbarOption('Insert/Remove Bulleted List')
+                .should('have.attr', 'aria-pressed', 'false');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ul><li>Lorem Ipsum</li></ul><ol><li><br></li></ol>');
+        });
+
+        it('When the user adds multi line text, selects the entered text and clicks on the \'Numbered list\' toolbar option, then the lines should get converted to a list', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum{enter}dolor sit amet{selectAll}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<ol><li>Lorem Ipsum</li><li>dolor sit amet</li></ol>');
+        });
+    });
+
+    describe('Superscript, Subscript formatting options - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Subscript', 'Undo', 'Redo']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.responseField()
+                .type('log')
+                .should('have.text', 'log');
+        });
+
+        it('When the user selects the \'Superscript\' toolbar option and types something in the response field, then the text should be displayed as a Superscript', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Superscript');
+            essayResponsePage.responseField()
+                .type('x')
+                .verifyInnerHTML('<p>log<sup>​​​​​​​x</sup></p>');
+        });
+
+        it('When the user deselects the \'Superscript\' toolbar option, then the subsequent text that the user enters should appear in default format', () => {
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Superscript');
+            essayResponsePage.responseField()
+                .type('y')
+                .verifyInnerHTML('<p>log<sup>x</sup>​​​​​​​y</p>');
+        });
+
+        it('When the user enters text in the response field, selects the text and then selects the \'Superscript\' toolbar option, then the should be displayed as a superscript and if the user deselects the \'Superscript\' toolbar option, then the entered text should be displayed in default format', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.responseField()
+                .type('log{selectAll}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Superscript');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p><sup>log</sup></p>')
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Superscript');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p>log</p>');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Superscript');
+
+        it('When the user selects the \'Subscript\' toolbar option, then the text entered in the response field should be displayed as a Subscript', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.responseField()
+                .type('log')
+                .should('have.text', 'log');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.responseField()
+                .type('e')
+                .verifyInnerHTML('<p>log<sub>​​​​​​​e</sub></p>');
+        });
+
+        it('When the user deselects the \'Subscript\' toolbar option, then the subsequent text that the user enters should appear in default format', () => {
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.responseField()
+                .type('y')
+                .verifyInnerHTML('<p>log<sub>e</sub>​​​​​​​y</p>');
+        });
+
+        it('When the user enters text in the response field, selects the text and then selects the \'Subscript\' toolbar option, then the should be displayed as a subscript and if the user deselects the \'Subscript\' toolbar option, then the entered text should be displayed in default format', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.responseField()
+                .type('log{selectAll}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p><sub>log</sub></p>')
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p>log</p>');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Subscript');
+
+        it('The user should be able to enter mathemical statements that require a combination of both superscript and subscript (x raised to (log y to the base e)', () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.responseField()
+                .type('x')
+                .should('have.text', 'x');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Superscript');
+            essayResponsePage.responseField()
+                .type('log')
+                .verifyInnerHTML('<p>x<sup>​​​​​​​log</sup></p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.responseField()
+                .type('e')
+                .verifyInnerHTML('<p>x<sup>log<sub>​​​​​​​e</sub></sup></p>');
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.responseField()
+                .type('y')
+                .verifyInnerHTML('<p>x<sup>log<sub>e</sub>​​​​​​​y</sup></p>');
+        });
+    });
+
+    describe('Align left, Center, Align right, Justify formatting options - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Align Left', 'Align Center', 'Align Right', 'Align Justify', 'Undo', 'Redo']);
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user focuses in the response field, then none of the options should be displayed in selected state and the text in the response field should be displayed as normal text without any alignment', () => {
+            essayResponsePage.responseField()
+                .click();
+            essayResponsePage.previewTabToolbarOption('Align Left')
+                .should('have.attr', 'aria-pressed', 'false');
+            essayResponsePage.previewTabToolbarOption('Align Center')
+                .should('have.attr', 'aria-pressed', 'false');
+            essayResponsePage.previewTabToolbarOption('Align Right')
+                .should('have.attr', 'aria-pressed', 'false');
+            essayResponsePage.previewTabToolbarOption('Align Justify')
+                .should('have.attr', 'aria-pressed', 'false');
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum')
+                .verifyInnerHTML('<p>Lorem Ipsum</p>')
+        });
+
+        it('When the user selects the \'Center\' toolbar option, then text in the response field should get aligned to the center and \'Align left\' toolbar option should get deselected', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Center');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p style=\"text-align: center;\">Lorem Ipsum</p>')
+            essayResponsePage.previewTabToolbarOption('Align Left')
+                .should('have.attr', 'aria-pressed', 'false');
+        });
+
+        it('When the user selects the \'Align Left\' toolbar option, then text in the response field should get aligned to the left and \'Center\' toolbar option should get deselected', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Left');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p style="text-align: left;">Lorem Ipsum</p>');
+            essayResponsePage.previewTabToolbarOption('Align Center')
+                .should('have.attr', 'aria-pressed', 'false');
+        });
+
+        it('When the user selects the \'Align Right\' toolbar option, then text in the response field should get aligned to the right and \'Align left\' toolbar option should get deselected', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Right');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p style=\"text-align: right;\">Lorem Ipsum</p>');
+            essayResponsePage.previewTabToolbarOption('Align Left')
+                .should('have.attr', 'aria-pressed', 'false');
+        });
+
+        it('When the user deselects \'Align Right\' toolbar option, then the text in the response field should be displayed as normal text without any alignment', () => {
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Align Right');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+        });
+
+        it('When the user selects the \'Justify\' toolbar option, then text in the response field should get justified alignment and \'Align right\' toolbar option should get deselected', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Justify');
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p style="text-align: justify;">Lorem Ipsum</p>');
+            essayResponsePage.previewTabToolbarOption('Align Right')
+                .should('have.attr', 'aria-pressed', 'false');
+        });
+
+        it('When the user switches to the next line, \'Justify\' toolbar option  should persist', () => {
+            essayResponsePage.responseField()
+                .type('{enter}');
+            essayResponsePage.previewTabToolbarOption('Align Justify');
+        });
+
+        //checking undo and redo functionality for one text alignment option only, not necessary to check for all
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Align Right');
+    });
+
+    describe('Increase indent, Decrease indent formatting options - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Increase Indent', 'Decrease Indent', 'Undo', 'Redo']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum');
+        });
+
+        it('When the user has not increased any indent, the \'Decrease indent\' toolbar option should be in disabled state', () => {
+            essayResponsePage.previewTabToolbarOption('Decrease Indent')
+                .should('have.attr', 'aria-disabled', 'true');
+        });
+
+        it('When the user selects the \'Increase indent\' toolbar option, then indentation of text in the response field should increase and the \'Decrease indent\' toolbar option should get enabled', () => {
+            essayResponsePage.previewTabToolbarOption('Increase Indent')
+                .click();
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p style=\"margin-left: 40px;\">Lorem Ipsum</p>');
+            essayResponsePage.previewTabToolbarOption('Decrease Indent')
+                .should('have.attr', 'aria-disabled', 'false');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Increase Indent');
+
+        it('When the user selects the \'Decrease indent\' toolbar option, then the indentation of text in the response field should decrease', () => {
+            essayResponsePage.previewTabToolbarOption('Decrease Indent')
+                .click();
+            essayResponsePage.responseField()
+                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Decrease Indent');
+    });
+});