itemengine-cypress-automation 1.0.105 → 1.0.106

package/cypress/e2e/ILC/EssayResponse/essayResponseCustomizeFormattingOptions1.smoke.js

@@ -0,0 +1,336 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage } from "../../../pages";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+
+const formattingOptions = ['Bold', 'Italic', 'Underline', 'Division', 'Superscript', 'Bulleted List', 'Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special Characters', 'Insert Table', 'Equation Editor', 'Division', 'Code Inline', 'Code Editor', 'Strikethrough', 'Background Color', 'Text Color', 'Subscript', 'Remove Format', 'Division', 'Align Left', 'Align Center', 'Align Right', 'Align Justify', 'Division', 'Increase Indent', 'Decrease Indent', 'Division', 'Text direction left to right', 'Text direction right to left', 'Insert Horizontal Line', 'Block Quote', 'Math characters', 'Division', 'Undo', 'Redo', 'Division'];
+const defaultSelectedFormattingOptions = ['Bold', 'Italic', 'Underline', 'Division', 'Superscript', 'Bulleted List', 'Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special Characters', 'Insert Table'];
+const defaultFormattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Superscript', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special characters', 'Insert Table'];
+const formattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Superscript', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special characters', 'Insert Table', 'Equation Editor', 'Code Inline', 'Code Editor', 'Strikethrough', 'Background Color', 'Text Color', 'Subscript', 'Remove Format', 'Align Left', 'Align Center', 'Align Right', 'Align Justify', 'Increase Indent', 'Decrease Indent', 'Text direction left to right', 'Text direction right to left', 'Insert Horizontal Line', 'Block Quote', 'Math characters', 'Undo (Ctrl+Z)', 'Redo (Ctrl+Y)'];
+describe('Create question page - Essay Response: Customize formatting options (for student player) accordion contents, toolbar options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/530059, https://redmine.zeuslearning.com/issues/525223
+    describe('Customize formatting options (for student player) accordion contents', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+        });
+
+        it('By default \'Customize formatting options (for student player)\' accordion should be collapsed and by clicking on the \'Customize formatting options (for student player)\' accordion, user should be able to expand the accordion', () => {
+            essayResponsePage.customizeFormattingOptionsAccordion()
+                .verifyInnerText('Customize formatting options (for student player)')
+                .should('have.attr', 'aria-expanded', 'false');
+            essayResponsePage.customizeFormattingOptionsAccordion()
+                .click()
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+
+        it('CSS of \'Customize formatting options (for student player)\' accordion and contents', { tags: 'css' }, () => {
+            cy.log('CSS of accordion label and chevron icon')
+            essayResponsePage.customizeFormattingOptionsAccordionLabel()
+                .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold);
+            essayResponsePage.customizeFormattingOptionsAccordion()
+                .find('svg')
+                .should('have.css', 'fill', css.color.activeButtons);
+            cy.log('CSS of selected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Bold')
+                .should('have.css', 'background-color', css.color.primaryBtnBg)
+            cy.log('CSS of tick icon of selected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Bold')
+                .find('[data-name="Icon feather-check"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+            cy.log('CSS of background of tick icon of selected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Bold')
+                .find('[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.defaultBackground);
+            cy.log('CSS of icon of selected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Bold')
+                .find('.drag-item-flex-wrapper svg')
+                .should('have.css', 'fill', css.color.primaryBtn);
+            cy.log('CSS of drag handle of selected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Bold')
+                .find('.drag-icon-button-custom-format svg path')
+                .eq(1)
+                .should('have.css', 'color', css.color.activeButtons);
+            cy.log('CSS of unselected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Code Inline')
+                .should('have.css', 'background-color', css.color.secondaryBtnBg);
+            cy.log('CSS of icon of unselected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Code Inline')
+                .find('.drag-item-flex-wrapper path')
+                .eq(1)
+                .should('have.css', 'fill', css.color.secondaryBtn);
+            cy.log('CSS of drag handle of unselected toolbar formatting option')
+            essayResponsePage.customizeFormattingOptionsTiles('Code Inline')
+                .find('.drag-icon-button-custom-format svg path')
+                .eq(1)
+                .should('have.css', 'fill', css.color.secondaryBtn);
+        });
+
+        it('Accessibility of \'Customize formatting options (for student player)\' accordion and contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.customizeFormattingOptionsAccordion().parents('.Mui-expanded'));
+        });
+
+        it('When \'Customize formatting options (for student player)\' accordion is in expanded state, then all the formatting options should be displayed along with drag handle.', () => {
+            formattingOptions.forEach((optionName, count) => {
+                cy.get('.icon-button-custom-format')
+                    .eq(count)
+                    .should('have.attr', 'title', optionName)
+                    .within(() => {
+                        essayResponsePage.customizeFormattingOptionsdragHandleButton()
+                            .should('be.visible');
+                    });
+            });
+        });
+
+        it('When the \'Customize formatting options (for student player)\' accordion is in expanded state, then the following options should be in selected state by default - \'Bold, Italic, Underline, Division, Superscript, Bulleted list, Numbered list, Link, Insert Image, Special Characterss, Table\'. All the other options should be in unselected state.', () => {
+            defaultSelectedFormattingOptions.forEach((option, count) => {
+                cy.get('.icon-button-custom-format')
+                    .eq(count)
+                    .should('have.attr', 'data-aria-pressed', 'true');
+            });
+            for (let index = 11; index < formattingOptions.length; index++) {
+                cy.get('.icon-button-custom-format')
+                    .eq(index)
+                    .should('have.attr', 'data-aria-pressed', 'false');
+            };
+        });
+
+        it('User should be able to unselect any default selected formatting option and should be able to select any default unselected formatting option and the changes should be reflected in the toolbar in the preview tab', () => {
+            essayResponsePage.customizeFormattingOptionsTiles('Superscript')
+                .click()
+                .should('have.attr', 'data-aria-pressed', 'false');
+            essayResponsePage.customizeFormattingOptionsTiles('Strikethrough')
+                .click()
+                .should('have.attr', 'data-aria-pressed', 'true');
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Strikethrough')
+                .should('be.visible');
+            essayResponsePage.previewTabToolbarOption('Superscript')
+                .should('not.exist');
+        });
+
+        it('When the user selects the \'Equation editor\' formatting option, the \'Equation editor\' section should be displayed below the formatting options. On deselecting \'Equation editor\' formatting option, \'Equation editor\' section should disappear', () => {
+            cy.log('Switching to edit tab')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.customizeFormattingOptionsTiles('Equation Editor')
+                .click()
+                .should('have.attr', 'data-aria-pressed', 'true');
+            essayResponsePage.equationEditorOptionsWrapper()
+                .should('be.visible');
+            essayResponsePage.customizeFormattingOptionsTiles('Equation Editor')
+                .click()
+                .should('have.attr', 'data-aria-pressed', 'false');
+            essayResponsePage.equationEditorOptionsWrapper()
+                .should('not.exist');
+        });
+
+        it('User should be able to collapse \'Customize formatting options (for student player)\' accordion.', () => {
+            essayResponsePage.customizeFormattingOptionsAccordion()
+                .click()
+                .should('have.attr', 'aria-expanded', 'false');
+        });
+    });
+
+    describe('Customize formatting options (for student player) - Preview tab contents', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - \'Bold, Italic, Underline, Superscript, Bulleted list, Numbered list, Link, Insert Image, Special Characters, Table\' along with a separator after \'Underline\' option', () => {
+            essayResponsePage.previewTabToolbarWrapper()
+                .within(() => {
+                    defaultFormattingOptionsPreviewTab.forEach((optionName, count) => {
+                        cy.get('.cke_button')
+                            .eq(count)
+                            .should('have.attr', 'title', optionName)
+                            .and('be.visible');
+                    });
+                });
+            essayResponsePage.previewTabToolbarOption('Underline (Ctrl+U)')
+                .next()
+                .should('have.attr', 'role', 'separator')
+                .should('be.visible');
+        });
+
+        it('When the user selects all formatting options from the \'Customize formatting options (for student player)\' accordion, all formatting options should appear in the preview tab along with separator after \'Underline\', \'Equation Editor\', \'Remove Format\', \'Justify\', \'Decrease indent\', \'Math characters\' options', () => {
+            let separatorInToolbarContents = ['Underline (Ctrl+U)', 'Equation Editor', 'Remove Format', 'Align Justify', 'Decrease Indent', 'Math characters']
+            essayResponsePage.steps.switchToEditTab()
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            for (let index = 11; index < formattingOptions.length; index++) {
+                cy.get('.icon-button-custom-format')
+                    .eq(index)
+                    .click()
+                    .should('have.attr', 'data-aria-pressed', 'true');
+            };
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarWrapper()
+                .within(() => {
+                    formattingOptionsPreviewTab.forEach((optionName, count) => {
+                        cy.get('.cke_button')
+                            .eq(count)
+                            .should('have.attr', 'title', optionName)
+                            .and('be.visible');
+                    });
+                });
+            separatorInToolbarContents.forEach((toolbarOption) => {
+                essayResponsePage.previewTabToolbarOption(toolbarOption)
+                    .next()
+                    .should('have.attr', 'role', 'separator')
+                    .should('be.visible');
+            });
+        });
+
+        it('In the customized formatting options menu, if the user has selected a divider line at the end, then that line should not be present in the essay response toolbar', () => {
+            essayResponsePage.previewTabToolbarSeperator()
+                .should('have.length', 6);
+        });
+
+        it('All options should be in enabled state except \'Left indent\', \'Undo\', \'Redo\' options which should be in disabled state', () => {
+            let disabledOptions = ['Decrease Indent', 'Undo (Ctrl+Z)', 'Redo (Ctrl+Y)']
+            disabledOptions.forEach((optionName) => {
+                essayResponsePage.previewTabToolbarOption(optionName)
+                    .should('have.attr', 'aria-disabled', 'true');
+            });
+        });
+
+        it('CSS of formatting options in Preview tab', { tags: 'css' }, () => {
+            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
+                .find('.cke_button_icon')
+                .should('have.css', 'color', css.color.activeButtons);
+        });
+
+        it('Accessibility of formatting options in Preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.previewTabToolbarWrapper())
+        });
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Bold, Italic, Underline, Strikethrough formatting options - Preview tab', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Strikethrough', 'Undo', 'Redo']);
+                essayResponsePage.steps.switchToPreviewTab();
+            });
+
+            beforeEach(() => {
+                essayResponsePage.steps.resetPreviewTabResponseField();
+            });
+
+            it('When the user selects the \'Bold\' toolbar option and enters text in the response field, then the text should be displayed in bold and if the user deselects the \'Bold\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum')
+                    .verifyInnerHTML('<p><strong>​​​​​​​Lorem Ipsum</strong><br></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Bold (Ctrl+B)');
+                essayResponsePage.responseField()
+                    .type(' dolor')
+                    .verifyInnerHTML('<p><strong>Lorem Ipsum</strong>​​​​​​​ dolor<br></p>');
+            });
+
+            it('When the user enters text in the response field, selects the text and then selects the \'Bold\' toolbar option, then the should be displayed in bold and if the user deselects the \'Bold\' toolbar option, then the entered text should be displayed in default format', () => {
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><strong>Lorem Ipsum</strong></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Bold (Ctrl+B)');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            });
+
+            essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Bold (Ctrl+B)');
+
+            it('When the user selects the \'Italic\' toolbar option and enters text in the response field, then the text should be displayed in italic and if the user deselects the \'Italic\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum')
+                    .verifyInnerHTML('<p><em>​​​​​​​Lorem Ipsum</em><br></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Italic (Ctrl+I)');
+                essayResponsePage.responseField()
+                    .type(' dolor')
+                    .verifyInnerHTML('<p><em>Lorem Ipsum</em>​​​​​​​ dolor<br></p>');
+            });
+
+            it('When the user enters text in the response field, selects the text and then selects the \'Italic\' toolbar option, then the should be displayed in italic and if the user deselects the \'Italic\' toolbar option, then the entered text should be displayed in default format', () => {
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><em>Lorem Ipsum</em></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Italic (Ctrl+I)');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            });
+
+            essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Italic (Ctrl+I)');
+
+            it('When the user selects the \'Underline\' toolbar option and enters text in the response field, then the text should get underlined and if the user deselects the \'Underline\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum')
+                    .verifyInnerHTML('<p><u>​​​​​​​Lorem Ipsum</u><br></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Underline (Ctrl+U)');
+                essayResponsePage.responseField()
+                    .type(' dolor')
+                    .verifyInnerHTML('<p><u>Lorem Ipsum</u>​​​​​​​ dolor<br></p>');
+            });
+
+            it('When the user enters text in the response field, selects the text and then selects the \'Underline\' toolbar option, then the should get underlined and if the user deselects the \'Underline\' toolbar option, then the entered text should be displayed in default format', () => {
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><u>Lorem Ipsum</u></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Underline (Ctrl+U)');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            });
+
+            essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Underline (Ctrl+U)');
+
+            it('When the user selects the \'Strikethrough\' toolbar option and enters text in the response field, then the text should get striked through and if the user deselects the \'Strikethrough\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Strikethrough');
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum')
+                    .verifyInnerHTML('<p><s>​​​​​​​Lorem Ipsum</s><br></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Strikethrough');
+                essayResponsePage.responseField()
+                    .type(' dolor')
+                    .verifyInnerHTML('<p><s>Lorem Ipsum</s>​​​​​​​ dolor<br></p>');
+            });
+
+            it('When the user enters text in the response field, selects the text and then selects the \'Strikethrough\' toolbar option, then the should get striked through and if the user deselects the \'Strikethrough\' toolbar option, then the entered text should be displayed in default format', () => {
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Strikethrough');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><s>Lorem Ipsum</s></p>');
+                essayResponsePage.steps.deselectPreviewTabToolbarOption('Strikethrough');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            });
+
+            essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Strikethrough');
+
+            it('The user should be able to add a combination of \'Bold, Italic, Underline\' formatting options to the text in the response field', () => {
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><u><em><strong>Lorem Ipsum</strong></em></u></p>');
+            });
+        });
+    }
+});