itemengine-cypress-automation 1.0.20 → 1.0.22

package/cypress/e2e/ILC/EssayResponseBasic/essayResponseBasicCustomizeFormattingOptions.js

@@ -0,0 +1,207 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponseBasicPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+const css = Cypress.env('css');
+
+const formattingOptions = [essayResponseBasicPage.cutCustomizeFormattingOption, essayResponseBasicPage.copyCustomizeFormattingOption, essayResponseBasicPage.pasteCustomizeFormattingOption, essayResponseBasicPage.specialCharacterCustomizeFormattingOption];
+const formattingOptionLabel = ['Cut', 'Copy', 'Paste', 'Special characters'];
+const stateOfFormattingOption = ['ngie-toggle-button-selected', 'ngie-toggle-button-selected', 'ngie-toggle-button-selected', 'ngie-toggle-button-not-selected'];
+
+describe('Create question page - Essay Response - Basic: Customize formatting options (for student player) section contents, toolbar options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Customize formatting options (for student player) section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
+        });
+
+        it('\'Customize formatting options (for student player)\' label should be displayed and expand collapse icon should not be displayed beside the label. By default, following options should be in selected state - \'Cut, Copy, Paste\'. Special characters option should be in unselected state', () => {
+            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
+                .verifyInnerText('Customize formatting options (for student player)');
+            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
+                .find('.MuiExpansionPanelSummary-expandIcon')
+                .should('not.exist');
+            formattingOptions.forEach((button, count) => {
+                button()
+                    .verifyInnerText(formattingOptionLabel[count])
+                    .and('have.class', stateOfFormattingOption[count]);
+            });
+        });
+
+        it('CSS of \'Customize formatting options (for student player)\' label and contents', { tags: 'css' }, () => {
+            cy.log('CSS of Customize formatting options (for student player) label');
+            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);//Issue posted- https://redmine.zeuslearning.com/issues/525805
+            cy.log('CSS of selected toolbar formatting option')
+            essayResponseBasicPage.cutCustomizeFormattingOption()
+                .should('have.css', 'background-color', css.color.activeButtons)
+                .within(() => {
+                    commonComponents.tickIconForOptionButtons()
+                        .should('have.css', 'color', css.color.defaultBackground);
+                    essayResponseBasicPage.customizeFormattingOptionsIcon()
+                        .should('have.css', 'color', css.color.defaultBackground);
+                    essayResponseBasicPage.customizeFormattingOptionsLabel()
+                        .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular);
+                });
+            cy.log('CSS of unselected toolbar formatting option')
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .should('have.css', 'background-color', css.color.secondaryBtnBg)
+                .within(() => {
+                    essayResponseBasicPage.customizeFormattingOptionsLabel()
+                        .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of \'Customize formatting options (for student player)\' label and contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseBasicPage.customizeFormattingOptionsWrapper());
+        });
+    });
+
+    describe('Customize formatting options (for student player) - Preview tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
+            cy.barsPreLoaderWait();
+            essayResponseBasicPage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            essayResponseBasicPage.steps.resetPreviewTabResponseField();
+        });
+
+        it('When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - \'Cut, Copy, Paste\'', () => {
+            essayResponseBasicPage.previewTabToolbarWrapper()
+                .within(() => {
+                    formattingOptionLabel.slice(0, 2).forEach((optionName, count) => {
+                        cy.get('.cke_button')
+                            .eq(count)
+                            .should('have.attr', 'title', optionName)
+                            .and('be.visible');
+                    });
+                    essayResponseBasicPage.previewTabToolbarOption('Special Characters')
+                        .should('not.exist');
+                });
+        });
+
+        it('When the user selects all formatting options from the \'Customize formatting options (for student player)\' section, all formatting options should appear in the preview tab and all options should be in enabled sate', () => {
+            cy.log('Switching to edit tab')
+            essayResponseBasicPage.steps.switchToEditTab()
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .click();
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .should('have.class', 'ngie-toggle-button-selected');
+            essayResponseBasicPage.steps.switchToPreviewTab();
+            essayResponseBasicPage.previewTabToolbarWrapper()
+                .within(() => {
+                    formattingOptionLabel.forEach((optionName, count) => {
+                        cy.get('.cke_button')
+                            .eq(count)
+                            .should('have.attr', 'title', optionName)
+                            .and('be.visible');
+                    });
+                });
+        });
+
+        it('CSS of formatting options in Preview tab', { tags: 'css' }, () => {
+            essayResponseBasicPage.previewTabToolbarOption('Cut')
+                .find('.cke_button_icon')
+                .should('have.css', 'color', css.color.activeButtons);
+        });
+
+        it('Accessibility of formatting options in Preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseBasicPage.previewTabToolbarWrapper())
+        });
+
+        it('When the user deselects an option from \'Customize formatting options (for student player)\' section, then that option should not be displayed in the preview tab toolbar.', () => {
+            cy.log('Switching to edit tab')
+            essayResponseBasicPage.steps.switchToEditTab()
+            essayResponseBasicPage.cutCustomizeFormattingOption()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected');
+            essayResponseBasicPage.steps.switchToPreviewTab();
+            cy.barsPreLoaderWait();
+            essayResponseBasicPage.previewTabToolbarWrapper()
+                .within(() => {
+                    essayResponseBasicPage.previewTabToolbarOption('Cut')
+                        .should('not.exist');
+                });
+        });
+    });
+
+    describe('Cut, Copy, Paste formatting options - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
+            cy.barsPreLoaderWait();
+            essayResponseBasicPage.steps.setWordLimit(5);
+            cy.log('Selecting \'Special Characters\' formatting option from Edit tab');
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .click()
+            essayResponseBasicPage.steps.switchToPreviewTab();
+            cy.barsPreLoaderWait();
+        });
+
+        afterEach(() => {
+            essayResponseBasicPage.steps.resetPreviewTabResponseField();
+        });
+
+        it('When the user selects the text from the response field and clicks on the \'Cut\', then the text should get removed from the field and word count should update accordingly', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.cutTextFromResponseField();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('0/5');
+        });
+
+        it('When the user has cut some text from response and clicks on the \'Paste\' option, the text that was cut should get pasted in the response field and the word count should increase accordingly', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.cutTextFromResponseField();
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('3/5');
+        });
+
+        it('When the user enters text in the response field, selects the text and then clicks on the \'Copy\', the text should get copied and when the user clicks on the \'Paste\' toolbar option, then the copied text should get pasted in response field and the word count should increase accordingly', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum ');
+            essayResponseBasicPage.steps.copyTextFromResponseField();
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('2/5');
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem Ipsum\u00a0Lorem Ipsum\u00a0');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('4/5');
+        });
+
+        it('User should not be able to paste text more than max word limit.', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem ipsum, dolor sit.');
+            essayResponseBasicPage.steps.copyTextFromResponseField();
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem ipsum, dolor sit.');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('4/5');
+        });
+
+        it('When the user tries to paste a text and the word limit reaches after pasting, \'word limit reached\' warning message should be displayed beside word count.', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.copyTextFromResponseField();
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem Ipsum dolorLorem Ipsum dolor');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('5/5');
+            essayResponseBasicPage.wordLimitReachedWarningMessage();
+        });
+    });
+    //TO DO- Special characters flyout cases are pending
+});

package/package.json

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