itemengine-cypress-automation 1.0.19 → 1.0.21

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

@@ -0,0 +1,412 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+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 - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('\'Table\' option should be present in the preview tab toolbar', () => {
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .should('be.visible');
+        });
+
+        it('When user clicks on Table option in the toolbar, then the Table flyout should appear.', () => {
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBox()
+                .should('be.visible');
+        });
+
+        it('CSS of table flyout', { tags: 'css' }, () => {
+            //ILC theme is not implemented in Essay Response Table flyout.
+        });
+
+        it('Accessibility of Add Table flyout.', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.addTableDialogBox());
+        });
+
+        it('Title of the flyout should be \'Table\'.', () => {
+            essayResponsePage.addTableDialogBoxTitle()
+                .verifyInnerText('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.', () => {
+            essayResponsePage.addTableDialogBoxColumnsLabel()
+                .verifyInnerText('Columns')
+                .and('be.visible');
+            essayResponsePage.addTableDialogBoxColumnsInputField()
+                .should('have.value', '3');
+            essayResponsePage.addTableDialogBoxRowsLabel()
+                .verifyInnerText('Rows')
+                .and('be.visible');
+            essayResponsePage.addTableDialogBoxRowsInputField()
+                .should('have.value', '2');
+        });
+
+        it('User should be able to modify the values of \'Columns\' and \'Rows\' input fields. Also maximum and minimum input that the user can give in \'Columns\' and \'Rows\' input fields should be \'999\' and \'1\'.', () => {  //TODO- Need to implement browser alerts: https://www.tutorialspoint.com/cypress/cypress_alerts.htm#:~:text=Cypress%20can%20work%20with%20alerts,to%20fire%20the%20browser%20events.
+            essayResponsePage.addTableDialogBoxColumnsInputField()
+                .should('have.attr', 'min', '1')
+                .and('have.attr', 'max', '999');
+            essayResponsePage.addTableDialogBoxRowsInputField()
+                .should('have.attr', 'min', '1')
+                .and('have.attr', 'max', '999');
+        });
+
+        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.', () => {
+            essayResponsePage.addTableDialogBoxAddHeaderRowLabel()
+                .verifyInnerText('Add header row')
+                .and('be.visible');
+            essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+                .should('not.be.checked');
+            essayResponsePage.addTableDialogBoxHighlightFirstColumnLabel()
+                .verifyInnerText('Highlight first column')
+                .and('be.visible');
+            essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('\'Cancel\' button should be displayed in the flyout and when user clicks on it then the flyout should close.', () => {
+            essayResponsePage.addTableDialogBoxButtonCancel()
+                .should('be.visible')
+                .click();
+            essayResponsePage.addTableDialogBox()
+                .should('not.be.visible');
+        });
+    });
+
+    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 - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBoxColumnsInputField()
+                .clear()
+                .type('4')
+            essayResponsePage.addTableDialogBoxRowsInputField()
+                .clear()
+                .type('4');
+            essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+                .click({ force: true });
+            essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+                .click({ force: true });
+        });
+
+        it('When user clicks on \'Add Table\' button, table with the set properties should be displayed in the response field.', () => {
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .should('be.visible')
+                .within(() => {
+                    cy.get('tr')
+                        .should('have.length', 4);
+                    cy.get('td')
+                        .should('have.length', 9);
+                    cy.get('thead')
+                        .find('th')
+                        .should('have.length', 4);  //To check header row
+                    cy.get('tbody')
+                        .find('tr')
+                        .each(($element) => {
+                            cy.wrap($element)
+                                .within(() => {
+                                    cy.get('th')
+                                        .should('have.length', 1);
+                                    cy.get('td')
+                                        .should('have.length', 3);
+                                });
+                        });
+                });
+        });
+
+        it.skip('When user adds a table to the response field, then the cursor should be focused inside a table cell by default.', () => {
+            //proper class for the cursor is not implemented.
+        });
+
+        it('When cursor is focused is inside a table cell, the Table option from the toolbar should be disabled.', () => {
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .should('have.attr', 'aria-disabled', 'true');
+        });
+
+        it('When user gives input to the table, then the word count should be increased accordingly', () => {
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(1)
+                .type('lorem ipsum');
+            essayResponsePage.responseFieldWordCount()
+                .verifyInnerText('2/10000');
+        });
+
+        it('When user removes the given input in the table, then the word count should be decreased accordingly', () => {   //Failing due to bug https://redmine.zeuslearning.com/issues/525610
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(1)
+                .type('{backspace}'.repeat(13), { delay: 500 })
+            essayResponsePage.responseFieldWordCount()
+                .verifyInnerText('0/10000');
+        });
+
+        it('When user enters text in any cell, the column width of that cell should increase and the width of other columns should decrease.', () => {
+            let cellWidth
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('th')
+                        .eq(1)
+                        .then(($originalCellWidth) => {
+                            cellWidth = $originalCellWidth.width(); //Storing original column width
+                        });
+                    cy.get('th')
+                        .eq(1)
+                        .type('lorem')
+                        .verifyInnerText('lorem')
+                        .then(($modifiedCellWidth) => {
+                            let modifiedCellWidth = $modifiedCellWidth.width();
+                            expect(modifiedCellWidth).to.be.gt(cellWidth);  //Comparing modified and original column width
+                        });
+                    cy.get('th')
+                        .eq(2)
+                        .then(($modifiedCellWidth) => {
+                            let modifiedCellWidth = $modifiedCellWidth.width();
+                            expect(modifiedCellWidth).to.be.lt(cellWidth);  //Comparing new and original width of other columns
+                        });
+                });
+        });
+
+        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.', () => {
+            let cellWidth
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('th')
+                        .eq(1)
+                        .then(($originalCellWidth) => {
+                            cellWidth = $originalCellWidth.width();
+                        });
+                    cy.get('th')
+                        .eq(1)
+                        .type('{backspace}{backspace}{backspace}{backspace}{backspace}')
+                        .then(($modifiedCellWidth) => {
+                            let modifiedCellWidth = $modifiedCellWidth.width();
+                            expect(modifiedCellWidth).to.be.lt(cellWidth);
+                            cellWidth = modifiedCellWidth;
+                        });
+                    cy.get('th')
+                        .eq(1)
+                        .then(($modifiedCellWidth) => {
+                            let modifiedCellWidth = $modifiedCellWidth.width();
+                            expect(modifiedCellWidth).to.be.eq(cellWidth);  //Cell width increases again to match the original cell width
+                        });
+                });
+        });
+
+        it('When user enters multi-line text in any table cell, the height of that cell and its row should increase.', () => {
+            let cellHeight;
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('td')
+                        .eq(1)
+                        .then(($originalCellHeight) => {
+                            cellHeight = $originalCellHeight.height();
+                        });
+                    cy.get('td')
+                        .eq(1)
+                        .type('lo{Enter}rem')
+                        .verifyInnerText('lo\n\n\nrem')
+                        .then(($modifiedCellHeight) => {
+                            let modifiedCellHeight = $modifiedCellHeight.height();
+                            expect(modifiedCellHeight).to.be.gt(cellHeight);
+                        });
+                });
+        });
+
+        it('CSS of the table and text inside table cells.', { tags: 'css' }, () => {
+            cy.log('Pre-step: Adding input to all table cells.');
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('th')
+                        .each(($element) => {
+                            cy.wrap($element)
+                                .type('Header cell');
+                        });
+                    cy.get('td')
+                        .each(($element) => {
+                            cy.wrap($element)
+                                .type('Standard cell');
+                        });
+                });
+            essayResponsePage.previewInputFieldTable()
+                .should('have.attr', 'border', '1')
+                .and('have.css', 'border-color', css.color.secondaryBtnBorder)
+                .within(() => {
+                    cy.get('th')
+                        .each(($element) => {
+                            cy.wrap($element)
+                                .verifyCSS(css.color.whiteText, css.fontSize.default, css.fontWeight.bold)   //Verifying CSS of highlighted cells
+                                .and('have.css', 'background-color', css.color.highlightedTableCell);
+                        });
+                    cy.get('td')
+                        .each(($element) => {
+                            cy.wrap($element)
+                                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular)   //Verifying CSS of standard cells.
+                                .and('have.css', 'background-color', css.color.transparent);
+                        });
+                    cy.get('th')
+                        .eq(0)
+                        .should('have.css', 'border-bottom', `1px solid ${css.color.highlightedTableCellBorder}`)  //Verifying different coloured border for a highlighted cell.
+                        .and('have.css', 'border-right', `1px solid ${css.color.secondaryBtnBorder}`);
+                    cy.get('td')
+                        .last()
+                        .should('have.css', 'border-color', css.color.secondaryBtnBorder);    //Verifying border-color for a standard cell.
+                });
+        });
+
+        it('Accessibility of the table.', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.previewInputFieldTable());
+        });
+
+        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.previewInputFieldTable()
+                .find('td')
+                .last()
+                .type('{rightArrow}{rightArrow}');
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .should('have.attr', 'aria-disabled', 'false');
+        });
+
+        it('When user clicks on Table option in the toolbar, then add table flyout should again appear in its default state.', () => {
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBox()
+                .should('be.visible');
+            essayResponsePage.addTableDialogBoxColumnsInputField()
+                .should('have.value', '3');
+            essayResponsePage.addTableDialogBoxRowsInputField()
+                .should('have.value', '2');
+            essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+                .should('not.be.checked');
+            essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('When user clicks on \'Add Table\' button, then another table should be added in the response field.', () => {
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .eq(1)
+                .should('be.visible')
+                .within(() => {
+                    cy.get('tr')
+                        .should('have.length', 2);
+                    cy.get('td')
+                        .should('have.length', 6);
+                });
+        });
+    });
+
+    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 - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            essayResponsePage.responseField()
+                .type('{selectAll}{backspace}');
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+        });
+
+        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.addTableDialogBoxAddHeaderRowCheckbox()
+                .click({ force: true });
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('thead')
+                        .find('th')
+                        .should('have.length', 3)
+                        .each(($element) => {
+                            expect($element).to.have.css('background-color', css.color.highlightedTableCell);   //To check that header row th cells are highlighted cells
+                        });
+                    cy.get('tbody')
+                        .find('td')
+                        .should('have.length', 3)
+                        .each(($element) => {
+                            expect($element).to.have.css('background-color', css.color.transparent);   //To check that td cells are standard cells
+                        });
+                });
+        });
+
+        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.addTableDialogBoxHighlightFirstColumnCheckbox()
+                .click({ force: true });
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('tr')
+                        .each(($element) => {
+                            cy.wrap($element)
+                                .within(() => {
+                                    cy.get('th')
+                                        .should('have.length', 1)
+                                        .and('have.css', 'background-color', css.color.highlightedTableCell);
+                                    cy.get('td')
+                                        .should('have.length', 2)
+                                        .each(($element) => {
+                                            cy.wrap($element)
+                                                .should('have.css', 'background-color', css.color.transparent);
+                                        });
+                                });
+                        });
+                });
+        });
+
+        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.addTableDialogBoxAddHeaderRowCheckbox()
+                .click({ force: true });
+            essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+                .click({ force: true });
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('thead')
+                        .find('th')
+                        .should('have.length', 3)
+                        .each(($element) => {
+                            expect($element).to.have.css('background-color', css.color.highlightedTableCell);
+                        });
+                    cy.get('tbody')
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', 1)
+                                .and('have.css', 'background-color', css.color.highlightedTableCell);
+                            cy.get('td')
+                                .should('have.length', 2)
+                                .each(($element) => {
+                                    expect($element).to.have.css('background-color', css.color.transparent);
+                                });
+                        });
+                });
+        });
+    });
+});