itemengine-cypress-automation 1.0.86 → 1.0.88

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

@@ -0,0 +1,290 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Essay Response Preview: Add Table Functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Add Table flyout contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('\'Table\' option should be present in the preview tab toolbar', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Insert Table'), 'visible');
+        });
+
+        it('When user clicks on Table option in the toolbar, then the Table flyout should appear.', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBox(), 'visible');
+        });
+
+        it('Title of the flyout should be \'Table\'.', () => {
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxTitle(), 'Table');
+        });
+
+        it('\'Columns\' and \'Rows\' label should be displayed in the flyout along with their input fields, and the input fields should have values \'3\' and \'2\' by default.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBoxColumnsLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxColumnsLabel(), 'Columns');
+            essayResponsePage.steps.verifyTableFlyoutColumnsInputFieldValue(3);
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBoxRowsLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxRowsLabel(), 'Rows');
+            essayResponsePage.steps.verifyTableFlyoutRowsInputFieldValue(2);
+        });
+
+        it('\'Add Header Row\' and \'Highlight First Column\' label should be displayed in the flyout with a checkbox beside them and the checkboxes should be unchecked by default.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBoxAddRowHeaderLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxAddRowHeaderLabel(), 'Add row header');
+            essayResponsePage.steps.verifyUncheckedStateOfAddRowHeaderHighlightFirstColumnCheckbox();
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBoxHighlightFirstColumnLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxHighlightFirstColumnLabel(), 'Highlight first column');
+        });
+
+        it('Maximum and minimum input that the user can give in \'Columns\' and \'Rows\' input fields should be \'999\' and \'1\'.', () => {
+            essayResponsePage.steps.verifyMinimumAndMaximumValueOfTableFlyoutColumnsAndRowsInputField();
+        });
+
+        it('User should be able to change the value of \'Columns\' and \'Rows\' input fields by directly giving an input in them', () => {
+            essayResponsePage.steps.editTableFlyoutColumnsInputField(5);
+            essayResponsePage.steps.editTableFlyoutRowsInputField(10);
+        });
+
+        it('User should be able to change the value of \'Columns\' and \'Rows\' input fields by using increment and decrement buttons', () => {
+            essayResponsePage.steps.incrementTableFlyoutColumnsInputField(2);
+            essayResponsePage.steps.verifyTableFlyoutColumnsInputFieldValue(7);
+            essayResponsePage.steps.decrementTableFlyoutColumnsInputField(3);
+            essayResponsePage.steps.verifyTableFlyoutColumnsInputFieldValue(4);
+            essayResponsePage.steps.decrementTableFlyoutRowsInputField(4);
+            essayResponsePage.steps.verifyTableFlyoutRowsInputFieldValue(6);
+            essayResponsePage.steps.incrementTableFlyoutRowsInputField(2);
+            essayResponsePage.steps.verifyTableFlyoutRowsInputFieldValue(8);
+        });
+
+        it('When user inputs a value which exceeds the maximum and minimum value of \'Columns\' and \'Rows\' input fields, then \'Add table\' button should be disabled and when value is restored to the allowed range, then \'Add table\' button should be enabled again', () => {
+            essayResponsePage.steps.editTableFlyoutColumnsInputField(0);
+            utilities.verifyElementDisabledClass(essayResponsePage.addTableDialogBoxButtonAddTable());
+            essayResponsePage.steps.incrementTableFlyoutColumnsInputField(2);
+            utilities.verifyElementNotDisabled(essayResponsePage.addTableDialogBoxButtonAddTable());
+            essayResponsePage.steps.editTableFlyoutRowsInputField(1001);
+            utilities.verifyElementDisabledClass(essayResponsePage.addTableDialogBoxButtonAddTable());
+            essayResponsePage.steps.decrementTableFlyoutRowsInputField(5);
+            utilities.verifyElementNotDisabled(essayResponsePage.addTableDialogBoxButtonAddTable());
+        });
+
+        it('\'Add table\' button should be displayed in the flyout', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBoxButtonAddTable(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxButtonAddTable(), 'Add table');
+        });
+
+        it('CSS of table flyout', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxColumnsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxRowsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxColumnsInputField(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxRowsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxAddRowHeaderLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxHighlightFirstColumnLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxButtonAddTable(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxButtonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Add Table\' flyout.', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.addTableDialogBox());
+        });
+
+        it('\'Cancel\' button should be displayed in the flyout and when user clicks on it then the flyout should close.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBoxButtonCancel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxButtonCancel(), 'Cancel');
+            essayResponsePage.steps.clickOnTableFlyoutCancelButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBox(), 'notExist');
+        });
+    });
+
+    describe('Add table and enter input into the table.', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab. Open Table flyout, modify columns and rows input field and check both the checkboxes.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            essayResponsePage.steps.editTableFlyoutColumnsInputField(4);
+            essayResponsePage.steps.editTableFlyoutRowsInputField(4);
+        });
+
+        it('When user clicks on \'Add Table\' button, table with the set properties should be displayed in the response field.', () => {
+            essayResponsePage.steps.addTable();
+            utilities.verifyElementVisibilityState(essayResponsePage.previewInputFieldTable(), 'visible');
+            essayResponsePage.steps.verifyTableProperties(4, 16);
+        });
+
+        it('When cursor is focused is inside a table cell, the Table option from the toolbar should be disabled.', () => {
+            utilities.verifyElementDisabledClass(essayResponsePage.previewTabToolbarOption('Insert Table'));
+        });
+
+        it('User should be able to enter and clear text in the table cell', () => {
+            essayResponsePage.steps.addInputToTableCell(1, 'lorem');
+            utilities.verifyInnerText(utilities.getNthElement(essayResponsePage.tableCell(), 1), 'lorem');
+            essayResponsePage.steps.addInputToTableCell(1, '{backspace}'.repeat(5), { delay: 500 });
+        });
+
+        it('When user enters text in any cell, the column width of that cell should increase and the width of other columns should decrease.', () => {
+            essayResponsePage.steps.compareColumnWidthsWhenInputIsAddedInACell();
+        });
+
+        it('When user removes the text in any table cell, the column width of that cell should decrease and the width of other columns should simultaneously increase.', () => {
+            essayResponsePage.steps.compareColumnWidthsWhenInputIsRemovedInACell();
+        });
+
+        it('When user enters multi-line text in any table cell, the height of that cell and its row should increase.', () => {
+            essayResponsePage.steps.compareRowHeightWhenMultilineInputIsGivenInACell();
+        });
+
+        it('When the cursor focus is changed to outside the table, the Table option in the toolbar should be enabled again.', () => {
+            cy.log('Pre-step: Shifting the focus outside the table in the response field.');
+            essayResponsePage.steps.addInputToTableCell(15, '{rightArrow}{rightArrow}');
+            utilities.verifyElementNotDisabled(essayResponsePage.previewTabToolbarOption('Insert Table'));
+        });
+
+        it('When user clicks on Table option in the toolbar, then add table flyout should again appear in its default state.', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBox(), 'visible');
+            essayResponsePage.steps.verifyTableFlyoutColumnsInputFieldValue(3);
+            essayResponsePage.steps.verifyTableFlyoutRowsInputFieldValue(2);
+            essayResponsePage.steps.verifyUncheckedStateOfAddRowHeaderHighlightFirstColumnCheckbox();
+        });
+
+        it('When user clicks on \'Add Table\' button, then another table should be added in the response field.', () => {
+            essayResponsePage.steps.addTable();
+            utilities.verifyElementCount(essayResponsePage.previewInputFieldTable(), 2);
+        });
+
+        it('CSS of the table and text inside table cells.', { tags: 'css' }, () => {
+            utilities.getNthElement(essayResponsePage.previewInputFieldTable(), 0)
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(essayResponsePage.tableCell(), 0), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                        'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                        'background-color': css.color.transparent
+                    });
+                });
+        });
+
+        it('Accessibility of the table.', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.previewInputFieldTable());
+        });
+    });
+
+    describe('Add table with header row, highlighted column.', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay Response question type and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}{backspace}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+        });
+
+        it('When user checks the \'Add header row\' checkbox and then clicks on \'Add table\' button, the first row of the added table should be highlighted as table header', () => {
+            cy.log('Check the \'Add header row\' checkbox.');
+            essayResponsePage.steps.checkAddRowHeaderCheckbox();
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.verifyTableHeaderRowCellCount(3);
+            essayResponsePage.steps.verifyTableProperties(2, 3, 3);
+            essayResponsePage.steps.verifyTableHeaderCellsAreHighlighted();
+            essayResponsePage.steps.verifyTableNormalCellsAreNotHighlighted();
+        });
+
+        it('When user checks the \'Highlight first column\' checkbox and then clicks on \'Add table\' button, the first column of the added table should be highlighted.', () => {
+            cy.log('Check the \'Highlight first column\' checkbox.');
+            essayResponsePage.steps.checkHighlightFirstColumnCheckbox();
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.verifyFirstColumnsIsHighlighted(2);
+            essayResponsePage.steps.verifyTableProperties(2, 4, 2);
+            essayResponsePage.steps.verifyTableHeaderCellsAreHighlighted();
+            essayResponsePage.steps.verifyTableNormalCellsAreNotHighlighted();
+        });
+
+        it('When user checks both \'Add header row\' and \'Highlight first column\' checkboxes and then clicks on \'Add table\' button, the first column and first row of the added table should be highlighted.', () => {
+            cy.log('Check both \'Add header row\' and \'Highlight first column\' checkboxes.');
+            essayResponsePage.steps.checkAddRowHeaderCheckbox();
+            essayResponsePage.steps.checkHighlightFirstColumnCheckbox();
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.verifyTableHeaderRowCellCount(3);
+            essayResponsePage.steps.verifyFirstColumnsIsHighlighted(2);
+            essayResponsePage.steps.verifyTableProperties(2, 2, 4);
+            essayResponsePage.steps.verifyTableHeaderCellsAreHighlighted();
+            essayResponsePage.steps.verifyTableNormalCellsAreNotHighlighted();
+        });
+
+        it('CSS of table contents', { tags: 'css' }, () => {
+            cy.log('Check the \'Add header row\' checkbox.');
+            essayResponsePage.steps.checkAddRowHeaderCheckbox();
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.addInputToTableHeaderCell(0, 'lorem');
+            utilities.getNthElement(essayResponsePage.previewInputFieldTable(), 0)
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(essayResponsePage.tableHeaderCell(), 0), {
+                        'color': css.color.whiteText,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.bold,
+                        'background-color': css.color.highlightedTableCell
+                    });
+                });
+        });
+
+        it('Accessibility of the table.', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.previewInputFieldTable());
+        });
+    });
+});

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

@@ -0,0 +1,79 @@
+import { essayResponsePage, itemPreviewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let previewContentViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+const defaultFormattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Table', 'Increase Indent', 'Decrease Indent', 'Undo (Ctrl+Z)', 'Redo (Ctrl+Y)'];
+
+//Failing due to https://redmine.zeuslearning.com/issues/553382
+describe('Create item page - Essay response: Preview contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to Essay response question type');
+                        essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                        cy.barsPreLoaderWait();
+                        essayResponsePage.steps.addQuestionInstructions();
+                        essayResponsePage.steps.allotPoints(10);
+                        essayResponsePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                };
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    essayResponsePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - ${defaultFormattingOptionsPreviewTab.join('')} along with a separator after ${defaultFormattingOptionsPreviewTab[7]} option`, () => {
+                essayResponsePage.steps.verifyDefaultToolbarOptions(defaultFormattingOptionsPreviewTab, defaultFormattingOptionsPreviewTab[7]);
+            });
+
+            it('Word count should be displayed in the format \'Maximum 1000 words\'', () => {
+                essayResponsePage.steps.verifyResponseFieldWordCount(1000);
+            });
+
+            it('When the user updates the formatting options and types something in the response field', () => {
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+                essayResponsePage.steps.enterInputInResponseField('This is a test for grading view preview contents');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><strong><em><u>​​​​​​​This is a test for grading view preview contents</u></em></strong><br></p>');
+            });
+
+            it('CSS of formatting options in Preview tab', { tags: 'css' }, () => {
+                utilities.verifyCSS(essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)').find('.cke_button_icon'), {
+                    'color': css.color.activeButtons
+                });
+            });
+
+            it('Accessibility of formatting options in Preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(essayResponsePage.previewTabToolbarWrapper());
+            });
+        });
+    });
+});