itemengine-cypress-automation 1.0.350-feature-thinkSphere-01c175a.0 → 1.0.351-feature-thinkSphere-8768c9c.0

package/cypress/e2e/ILC/BrowseItems/browseReviewItems.js

@@ -0,0 +1,360 @@
+import { browseItemsPage } from '../../../pages/components/browseItemsPage';
+import abortEarlySetup from '../../../support/helpers/abortEarly';
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const tableHeader = ['Question', 'Last updated', 'Created on', 'Tags'];
+const sortEnable = ['have.class', 'have.class', 'have.class', 'not.have.class'];
+const sortDisable = ['not.have.class', 'not.have.class', 'not.have.class', 'not.have.class'];
+const allowedFilterCategories = {
+    'Multiple choice selection': [
+        'multiple selection',
+        'single selection'
+    ],
+    'Fill in the gaps': [
+        'fill in the gaps with text'
+    ],
+    'Constructed response': [
+        'Drawing Response',
+        'short text response'
+    ],
+    'Math response': [
+        'Text Entry Math'
+    ]
+};
+
+describe('Navigate to Think Sphere Browse Review Items page and view the page contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+        cy.deleteThinkSphereItem('~zzz item name');
+        cy.createThinkSphereItem('~zzz item name');
+        browseItemsPage.steps.navigateToReviewItemsPage();
+    });
+
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name');
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' page header section', () => {
+        abortEarlySetup();
+
+        it('\'Browse ThinkSphere Review Items\' page header section present', () => {
+            utilities.verifyElementVisibilityState(browseItemsPage.browseItemPageHeaderActionWrapper(), 'exist')
+            utilities.verifyInnerText(browseItemsPage.browseItemPageHeader(), 'Add \'Check your math\' question');
+            utilities.verifyInnerText(browseItemsPage.buttonCancelCreateQuestion(), 'Cancel');
+            utilities.verifyInnerText(browseItemsPage.buttonCreateItem(), 'Create question');
+        });
+
+        it('When user clicks on \'Browse ThinkSphere Review Items\' create item button, then it should navigate to think sphere create item page', () => {
+            /**@TODO Add check for when user click on browse thinksphere review items create item button */
+        });
+
+        it('CSS of \'Browse ThinkSphere Review Items\' page header section', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.browseItemPageHeaderActionWrapper(), {
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`,
+                'padding': '16px'
+            });
+            utilities.verifyCSS(browseItemsPage.browseItemPageHeader(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(browseItemsPage.buttonCreateItem(), {
+                'background-color': css.color.primaryBtnBg,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(browseItemsPage.createItemButtonTypography(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(browseItemsPage.buttonCancelCreateQuestion(), {
+                'background-color': css.color.transparent,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(browseItemsPage.createQuestionCancelButtonTypography(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+
+            cy.log('CSS of \'Browse ThinkSphere Review Items\' page header section create question button in hover state');
+            browseItemsPage.steps.hoverOnCreateItemButton();
+            utilities.verifyCSS(browseItemsPage.buttonCreateItem(), {
+                'background-color': css.color.buttonHoverColor,
+                'box-shadow': `${css.color.secondaryBtn} 0px 3px 0px 0px`
+            });
+            utilities.verifyCSS(browseItemsPage.createItemButtonTypography(), {
+                'color': css.color.primaryBtn
+            });
+        });
+
+        it('Accessibility of create question button and cancel button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.headerActionButtonWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' list table section columns headers', () => {
+        abortEarlySetup();
+        it('The column headers should be present in the listing table header', () => {
+            browseItemsPage.steps.verifyColumnHeadersInListingTable(tableHeader);
+        });
+
+        it('The column headers should have sort enable', () => {
+            browseItemsPage.steps.verifySortEnableDisableForTableColumnHeader(sortEnable);
+            browseItemsPage.steps.verifyTableSortDescendingByDefault();
+        });
+
+        it('When user clicks on the column name list data should updated in Ascending and in descending order', () => {
+            tableHeader.slice(0, 3).forEach((_, count) => {
+                browseItemsPage.steps.verifySortFunctionalityOnColumnHeaderClick(count);
+            });
+            browseItemsPage.steps.verifySortFunctionalityOnColumnHeaderClick(1);
+        });
+
+        it('When only one search result is present, then column sort should be disabled', () => {
+            /**@TODO Add check for when only one search result is present */
+        });
+
+        it('CSS of \'Browse ThinkSphere Review Items\' list table section', { tags: 'css' }, () => {
+            tableHeader.forEach((_, count) => {
+                utilities.verifyCSS(browseItemsPage.tableColumnHeaderBrowseItemWrapperDiv(count), {
+                    'color': css.color.primaryBtnBorder,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(browseItemsPage.tableColumnHeader(count).parent().parent(), {
+                    'background-color': css.color.optionsBg,
+                });
+            });
+            utilities.verifyCSS(browseItemsPage.iconSortDescending(), {
+                'fill': css.color.primaryBtnBg
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' list table rows section', () => {
+        abortEarlySetup();
+        browseItemsPage.tests.verifyItemListTableRows();
+        /**@TODO Verify item fields after review item creation*/
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' search section', () => {
+        abortEarlySetup();
+        it('Search bar component should be present', () => {
+            browseItemsPage.steps.verifySearchBarComponent();
+            browseItemsPage.steps.verifySearchIcon();
+            browseItemsPage.steps.verifyCloseIcon();
+        });
+
+        it('CSS of search bar component', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.searchBar().parent(), {
+                'background-color': css.color.progressBarRemainingFill,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'border-radius': '50px',
+                'padding': '0px 8px'
+            });
+            utilities.verifyCSS(browseItemsPage.buttonSearchSVG(), {
+                'fill': css.color.primaryBtnBorder,
+                'height': '18px',
+                'width': '18px'
+            });
+        });
+
+        it('When user types title/tags/content in search component and search, then it should search', () => {
+            /**@TODO Add check for when user types title/tags/content in search component and search */
+        });
+
+        it('CSS of search bar in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnSearchBarComponent();
+            utilities.verifyCSS(browseItemsPage.searchBar().parent(), {
+                'background-color': css.color.primaryBtn,
+            });
+        });
+
+        it('Accessibility of search bar component', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.itemListFilterWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' pagination section', () => {
+        abortEarlySetup();
+        it('Pagination section should be present', () => {
+            browseItemsPage.steps.verifyPaginationSection();
+            browseItemsPage.steps.verifyPaginationCount('1 - 20 of');
+            browseItemsPage.steps.verifyItemsOnPage(20);
+        });
+
+        it('CSS of \'Browse ThinkSphere Review Items\' pagination section', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(browseItemsPage.paginationCountText(), 0), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.buttonNext(), {
+                        'box-shadow': `${css.color.secondaryBtnBorder} 0px 5px 0px 0px`,
+                        'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                        'color': css.color.secondaryBtn,
+                        'padding': '7px'
+                    });
+                    utilities.verifyCSS(browseItemsPage.buttonPrevious(), {
+                        'opacity': '0.5',
+                        'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                        'color': css.color.secondaryBtn,
+                        'padding': '7px'
+                    });
+                });
+        });
+
+        it('When user clicks on the next page button, then it should display the next page data', () => {
+            browseItemsPage.steps.clickOnNextPageButton();
+            browseItemsPage.steps.verifyPaginationCount('21 - 40 of');
+            browseItemsPage.steps.clickOnPreviousPageButton();
+            browseItemsPage.steps.verifyPaginationCount('1 - 20 of');
+        });
+
+        it('CSS of pagination section next button in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnNextPageButton();
+            utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.buttonNext(), {
+                        'border-color': css.color.primaryBtnBg,
+                        'box-shadow': `${css.color.primaryBtnBg} 0px 3px 0px 0px`
+                    });
+                });
+        });
+
+        it('Accessibility of pagination block', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.paginationBlock());
+        });
+    });
+
+    describe('Browse Review Items Filter Section', () => {
+        abortEarlySetup();
+        beforeEach(() => {
+            cy.setGraphqlWait();
+        });
+        const categories = Object.keys(allowedFilterCategories);
+        it('Filter button should be displayed with text \'Filter\'', () => {
+            utilities.verifyContainText(browseItemsPage.filterButton(), 'Filter');
+        });
+
+        it('Filter section should be closed by default', () => {
+            utilities.verifyInnerText(browseItemsPage.filterButtonText(), '(show)');
+        });
+
+        it('Filter section should open when filter button is clicked', () => {
+            browseItemsPage.steps.toggleFilterSection();
+            utilities.verifyInnerText(browseItemsPage.filterButtonText(), '(hide)');
+        });
+
+        it('Filter section should have only allowed filter categories and items', () => {
+            utilities.verifyElementCount(browseItemsPage.filterCategories(), categories.length);
+            categories.forEach((category) => {
+                browseItemsPage.steps.clickOnFilterCategory(category);
+                allowedFilterCategories[category].forEach((item) => {
+                    utilities.verifyElementVisibilityState(browseItemsPage.filterItem(item), 'exist');
+                });
+            });
+        });
+
+
+        it('User should be able to apply filters by selecting the checkboxes and filter chips should be displayed', () => {
+            browseItemsPage.steps.clickOnFilterCategoryCheckbox(categories[0]);
+            cy.pageLoadWait();
+            utilities.verifyElementVisibilityState(browseItemsPage.filterSection(), 'exist');
+            utilities.verifyElementVisibilityState(browseItemsPage.filterChip(categories[0]), 'exist');
+            allowedFilterCategories[categories[0]].forEach((item) => {
+                utilities.verifyElementVisibilityState(browseItemsPage.filterChip(item), 'exist');
+            });
+        });
+
+        it('Filter chips should display a \'X\' button to remove the applied filter', () => {
+            utilities.verifyElementVisibilityState(browseItemsPage.filterChipCancelButton(categories[0]), 'exist');
+            allowedFilterCategories[categories[0]].forEach((item) => {
+                utilities.verifyElementVisibilityState(browseItemsPage.filterChipCancelButton(item), 'exist');
+            });
+        });
+
+        it('CSS of filter chips', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.filterChip(categories[0]), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.successBtnBg
+            });
+            allowedFilterCategories[categories[0]].forEach((item) => {
+                utilities.verifyCSS(browseItemsPage.filterChip(item), {
+                    'color': css.color.secondaryBtn,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.successBtnBg
+                });
+            });
+        });
+
+        it('The assessment with the applied filter should get filtered in the details table', () => {
+            /**@TODO Add check for the most recent item created */
+        });
+
+        it('Applied filters should persist after applying sort', () => {
+            /**@TODO Add check for the most recent item created */
+        });
+
+        it('If the user clicks on the \'X\' button it should clear the applied filter chip', () => {
+            browseItemsPage.steps.clickOnFilterChipCancelButton(categories[0]);
+            allowedFilterCategories[categories[0]].forEach((item) => {
+                utilities.verifyElementVisibilityState(browseItemsPage.filterChip(item), 'notExist');
+            });
+            cy.pageLoadWait();
+            utilities.verifyElementVisibilityState(browseItemsPage.filterChip(categories[0]), 'notExist');
+        });
+
+        it('The checkbox for that chip in the filter panel should get unchecked', () => {
+            utilities.verifyElementCheckedNotCheckedState(browseItemsPage.filterCategoryCheckbox(categories[0]), 'notChecked');
+            allowedFilterCategories[categories[0]].forEach((item) => {
+                utilities.verifyElementCheckedNotCheckedState(browseItemsPage.filterItem(item), 'notChecked');
+            });
+        });
+
+        it('CLEAR ALL button should be present beside the Applied Filters text', () => {
+            browseItemsPage.steps.clickOnFilterCategoryCheckbox(categories[0]);
+            cy.pageLoadWait();
+            utilities.verifyElementVisibilityState(browseItemsPage.filterChipClearAll(), 'exist');
+        });
+
+        it('If a user clicks on CLEAR ALL button, it should clear all the applied filters', () => {
+            browseItemsPage.steps.clickOnFilterChipClearAll();
+            cy.pageLoadWait();
+            utilities.verifyElementVisibilityState(browseItemsPage.filterChip(categories[0]), 'notExist');
+            allowedFilterCategories[categories[0]].forEach((item) => {
+                utilities.verifyElementVisibilityState(browseItemsPage.filterChip(item), 'notExist');
+            });
+        });
+
+        it('The items should get updated in the listing table', () => {
+            /**@TODO Add check for the most recent item created */
+        });
+
+        it('The applied filter options should get cleared from the filter panel', () => {
+            utilities.verifyElementCheckedNotCheckedState(browseItemsPage.filterCategoryCheckbox(categories[0]), 'notChecked');
+            allowedFilterCategories[categories[0]].forEach((item) => {
+                utilities.verifyElementCheckedNotCheckedState(browseItemsPage.filterItem(item), 'notChecked');
+            });
+        });
+
+        it('CSS of Filter section', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.filterButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of Filter section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.filterSection());
+        });
+    });
+});