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

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

@@ -0,0 +1,367 @@
+import { browseItemsPage } from '../../../pages/components/browseItemsPage';
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+import { common } from '../../../pages/common';
+const tableHeader = ['ThinkSphere Item'];
+const sortDisable = ['not.have.class'];
+const sortOptions = ['Item', 'Last updated', 'Created on'];
+
+describe('Navigate to Think Sphere Browse Items page and view the page contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+        cy.deleteThinkSphereItem('~zzz item name');
+        cy.createThinkSphereItem('~zzz item name');
+        cy.visit('/item-engine/thinksphere/browse-items');
+        cy.interceptGraphql('getItems');
+    });
+
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name');
+    });
+
+    describe('\'Browse ThinkSphere Items\' page desktop and mobile view icons section', () => {
+        abortEarlySetup();
+        it('Desktop icon should be present on the page and should be in selected state', () => {
+            browseItemsPage.steps.verifyDesktopIcon();
+        });
+
+        browseItemsPage.tests.verifyDesktopIconSelected(true);
+
+        it('CSS of \'Browse ThinkSphere Items\' desktop icon', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.buttonDesktopViewToggle().find('svg'), {
+                'fill': css.color.optionColor,
+                'height': '20px',
+                'width': '20px'
+            });
+        });
+
+        it('Mobile icon should be present on the page and should be in selected state', () => {
+            browseItemsPage.steps.verifyMobileIcon();
+        });
+
+        browseItemsPage.tests.verifyMobileIconSelected(false);
+
+        it('CSS of \'Browse ThinkSphere Items\' mobile icon', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.buttonMobileViewToggle().find('svg'), {
+                'fill': css.color.optionColor,
+                'height': '20px',
+                'width': '20px'
+            });
+        });
+
+        it('When user hover on the desktop and mobile icon tooltip should be visible', () => {
+            browseItemsPage.steps.triggerMouseOverOnViewModeIcon('desktop');
+            browseItemsPage.steps.verifyTooltipPresent();
+            browseItemsPage.steps.verifyTooltipText('Desktop View');
+            browseItemsPage.steps.triggerMouseOutOnViewModeIcon('desktop');
+            browseItemsPage.steps.triggerMouseOverOnViewModeIcon('mobile');
+            browseItemsPage.steps.verifyTooltipPresent();
+            browseItemsPage.steps.verifyTooltipText('Mobile View');
+            browseItemsPage.steps.triggerMouseOutOnViewModeIcon('mobile');
+        });
+
+        it('CSS of desktop and mobile view mode icon tooltip', { tags: 'css' }, () => {
+            browseItemsPage.steps.triggerMouseOverOnViewModeIcon('desktop');
+            utilities.verifyCSS(browseItemsPage.tooltipText(), {
+                'background-color': css.color.sectionHeading,
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            browseItemsPage.steps.triggerMouseOutOnViewModeIcon('desktop');
+
+            cy.log('CSS of desktop and mobile view mode icon in hover state');
+            browseItemsPage.steps.hoverOnViewModeButton('desktop');
+            utilities.verifyCSS(browseItemsPage.buttonDesktopViewToggle(), {
+                'background-color': css.color.tableRowHoverColor,
+            });
+            browseItemsPage.steps.hoverOnViewModeButton('mobile');
+            utilities.verifyCSS(browseItemsPage.buttonMobileViewToggle(), {
+                'background-color': css.color.tableRowHoverColor,
+            });
+        });
+
+        it('When user click on the mobile view icon then it should get selected and main wrapper width should change', () => {
+            browseItemsPage.steps.clickOnViewModeIcon('mobile');
+            browseItemsPage.steps.verifyMainWrapperWidth('320px');
+        });
+
+        browseItemsPage.tests.verifyMobileIconSelected(true);
+        browseItemsPage.tests.verifyDesktopIconSelected(false);
+    });
+
+    describe('\'Browse ThinkSphere Items\' list page wrapper section', () => {
+        abortEarlySetup();
+        it('If the user clicks on the \'Browse ThinkSphere Items\' option from the menu bar, user should be navigated to the Think Sphere Browse Items page', () => {
+            browseItemsPage.steps.clickOnBrowseThinkSphereItemsMenuBarOption();
+            browseItemsPage.steps.verifyPageUrl('/item-engine/thinksphere/browse-items');
+            browseItemsPage.steps.verifyBrowseThinkSphereItemsMenuBarOptionSelected();
+        });
+
+        it('\'Browse ThinkSphere Items\' Item list page wrapper section should present', () => {
+            browseItemsPage.steps.verifyBrowseItemsPageWrapperSection();
+        });
+
+        it('CSS of \'Browse ThinkSphere Items\' option', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.browseThinksphereItemsMenuBarOption(), {
+                'color': css.color.codeBlockText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.medium
+            });
+            utilities.verifyCSS(browseItemsPage.browseItemPageWrapper(), {
+                'background-color': css.color.primaryBtn,
+                'border-radius': '4px',
+                'border': `1px solid ${css.color.borderColor}`,
+                'padding-bottom': '16px'
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere Items\' page header section', () => {
+        abortEarlySetup();
+        it('\'Browse ThinkSphere Items\' page header section present', () => {
+            utilities.verifyElementVisibilityState(browseItemsPage.browseItemPageHeaderActionWrapper(), 'exist')
+            utilities.verifyInnerText(browseItemsPage.browseItemPageHeader(), 'Browse ThinkSphere items');
+            utilities.verifyInnerText(browseItemsPage.createItemButtonTypography(), 'Create item');
+        });
+
+        it('When user click on \'Browse ThinkSphere Items\' create item button, then it should navigate to think sphere create item page', () => {
+            browseItemsPage.steps.clickOnCreateItemButton();
+            browseItemsPage.steps.verifyPageUrl('/item-engine/thinksphere/create-item');
+            browseItemsPage.steps.clickWindowsBack();
+            cy.interceptGraphql('getItems');
+            cy.wait(2000);
+        });
+
+        it('CSS of \'Browse ThinkSphere Items\' page header section', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.browseItemPageHeaderActionWrapper(), {
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`,
+                'padding': '16px 0px'
+            });
+            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
+            });
+
+            cy.log('CSS of \'Browse ThinkSphere Items\' page header section create 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 item button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.headerActionButtonWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere 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 disable', () => {
+            browseItemsPage.steps.verifySortEnableDisableForTableColumnHeader(sortDisable);
+        });
+
+        it('When only one search result is present, then column sort should be disabled', () => {
+            browseItemsPage.steps.addTextInSearchBar('~zzz item name');
+            browseItemsPage.steps.clickOnSearchIcon();
+            browseItemsPage.steps.verifyPaginationCount('1 - 1 of');
+            browseItemsPage.steps.verifyMobileViewSortDropdownEnableDisableState(false);
+            browseItemsPage.steps.clearSearchBar();
+        });
+
+        it('CSS of \'Browse ThinkSphere 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,
+                });
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere Items\' list table rows section', () => {
+        abortEarlySetup();
+        browseItemsPage.tests.verifyItemListTableRows();
+        browseItemsPage.tests.verifyItemReferenceId('~zzz item name', true);
+        browseItemsPage.tests.verifyQuestionInstruction('question instruction text');
+    });
+
+    describe('\'Browse ThinkSphere Items\' sort dropdown section', () => {
+        abortEarlySetup();
+        it('Sort dropdown should be present on the page', () => {
+            browseItemsPage.steps.verifySortDropdown();
+            browseItemsPage.steps.verifySortDropdownLabel('Sort by: Last updated');
+            browseItemsPage.steps.verifySortDescendingIcon();
+        });
+
+        it('When user click on sort dropdown, then sort options should be display', () => {
+            browseItemsPage.steps.clickOnSortDropdown();
+            browseItemsPage.steps.verifySortDropdownOptions(sortOptions);
+        });
+
+        it('When user click on \'ngie-popover-container\', then it should close sort options menu', () => {
+            browseItemsPage.steps.clickOnNgiePopoverContainer();
+            utilities.verifyElementVisibilityState(browseItemsPage.mobileViewSortbyDropdownOptionsList(), 'notExist');
+        });
+
+        it('When user click on each sort dropdown option, then items should sort Ascending and in descending order', () => {
+            sortOptions.forEach((_, count) => {
+                browseItemsPage.steps.clickOnSortDropdown();
+                browseItemsPage.steps.clickOnSortOption(count);
+                browseItemsPage.steps.clickOnSortDropdown();
+                browseItemsPage.steps.sortDropdownOptionSelected(count);
+                browseItemsPage.steps.clickOnNgiePopoverContainer();
+            });
+            browseItemsPage.steps.clickOnSortDropdown();
+            browseItemsPage.steps.clickOnSortOption(1);
+            browseItemsPage.steps.clickOnMobileViewSortAscendingIcon();
+        });
+
+        it('CSS of \'Browse ThinkSphere Items\' sort dropdown section', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdown(), {
+                'border': `1px solid ${css.color.liTextSelectedBg}`,
+                'box-shadow': `${css.color.liTextSelectedBg} 0px 5px 0px 0px`,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdownLabelWrapper(), {
+                'color': css.color.highlightedTableCell,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdownLabel(), {
+                'color': css.color.highlightedTableCell,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+
+            cy.log('CSS of \'Browse ThinkSphere Items\' sort dropdown section in hover state');
+            browseItemsPage.steps.hoverOnSortDropdown();
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdown(), {
+                'border': `1px solid ${css.color.primaryBtnBg}`,
+                'box-shadow': `${css.color.primaryBtnBg} 0px 3px 0px 0px`
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere 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 type title/tags/content in search component and search, then it should search', () => {
+            browseItemsPage.steps.addTextInSearchBar('~zzz');
+            browseItemsPage.steps.clickOnSearchIcon();
+            browseItemsPage.steps.verifyPaginationCount('1 - 1 of');
+        });
+        
+        browseItemsPage.tests.verifyItemReferenceId('~zzz item name', true);
+        
+        it('User should be able to clear the searchbar',()=>{
+            browseItemsPage.steps.clearSearchBar();
+        });
+
+        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 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 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 click on the next page button, then it should display the next page data', () => {
+            browseItemsPage.steps.clickOnNextPageButton();
+            browseItemsPage.steps.verifyPaginationCount('21 - 40 of');
+        });
+
+        it('When user click on the prev page button, then it should display the prev page data', () => {
+            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`
+                    });
+                });
+        });
+    });
+});

package/cypress/support/commands.js

@@ -9,6 +9,10 @@ import { apiKey, browser, serverUrl } from '../e2e/applitools.config';
 import * as applitoolsConfig from '../e2e/applitools.config';
 import '@applitools/eyes-cypress/commands';
 
+export var itemReferenceIds = [];
+export var questionAndResourceReferenceIds = [];
+export var createdAndUpdatedAtDate = [];
+
 const randomUser = (j, username, i) => ({
     id: uuidv4(),
     role: j,
@@ -129,6 +133,8 @@ Cypress.Commands.add('interceptGraphql', (operationName) => {
             req.alias = `${operationName}`;
         }
     });
+    cy.get('[class*="GlobalLoaderstyles__GlobalLoaderWrapper"]')
+        .should('not.be.visible');
 });
 
 Cypress.Commands.add('fill', { prevSubject: 'element' }, ($subj, text) => {
@@ -136,10 +142,9 @@ Cypress.Commands.add('fill', { prevSubject: 'element' }, ($subj, text) => {
     return cy.wrap($subj).type('{enter}');
 });
 
-// Cypress.Commands.add('addContext', (context) => {
-//     cy.once('test:after:run', (test) => addContext({ test }, context));
-// });
-
+Cypress.Commands.add('addContext', (context) => {
+    cy.once('test:after:run', (test) => addContext({ test }, context));
+});
 
 Cypress.Commands.add('getIframeBody', () => {
     cy.on('uncaught:exception', () => {

package/cypress/support/e2e.js

@@ -4,6 +4,7 @@ import 'cypress-axe';
 import './helpers/cypressUtilities';
 import './helpers/accessibility';
 import './helpers/selectText';
+import './helpers/createItem';
 
 let windowConsoleError;