itemengine-cypress-automation 1.0.379-highlight-flakiness-r2-fba67fd.0 → 1.0.380-IEI-5863-5864-97d3f1f.0

package/cypress/pages/thinkSpherePage.js

@@ -1,15 +1,19 @@
 import utilities from "../support/helpers/utilities";
 import { browseItemsPage } from "../pages/components/browseItemsPage";
+import { editCategoryFlyout } from "../pages/components/editCategoryFlyout";
 import { dialogBoxBase } from "../pages/dialogBoxBase";
-import { backgroundImageUploadComponent, createQuestionBasePage, scoringSectionBaseEditTab, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, questionInstructionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, essayResponseCommonComponents, equationEditorSectionCommonComponent, equationEditorFlyout } from "./components"
+import { backgroundImageUploadComponent, createQuestionBasePage, scoringSectionBaseEditTab, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, questionInstructionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, essayResponseCommonComponents, equationEditorSectionCommonComponent, equationEditorFlyout, createCustomCategoryFlyout } from "./components"
 import { drawingResponsePage } from "./drawingResponsePage";
 import { optionsWrapperComponent } from "../pages/components/optionsWrapperComponent";
 import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 import { videoResponsePage } from "./videoResponsePage";
 import { singleSelectionPage } from "./singleSelectionPage";
+import { essayResponsePage } from "./essayResponsePage";
+import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
 const css = Cypress.env('css');
 
 const selectors = {
+    ...essayResponsePage,
     ...backgroundImageUploadComponent,
     ...questionInstructionsComponent,
     ...commonComponents,
@@ -24,6 +28,10 @@ const selectors = {
     ...browseItemsPage,
     ...videoResponsePage,
     ...dialogBoxBase,
+    ...editCategoryFlyout,
+    ...createCustomCategoryFlyout,
+    ...createQuestionBasePage,
+    
     editQuestionPencil: () => cy.get('[class*="Widgetstyles__HeaderContainer"] button.icon-pencil'),
     widgetHeaderQuestionTitle: () => cy.get('[class*="Widgetstyles__HeaderContainer"] [class*="Widgetstyles__QuestionTypeText"]'),
     imageUploadSection: () => cy.get('[class*="TabsComponentstyles__ImageUploadComponentWrapper"]'),
@@ -103,6 +111,7 @@ const selectors = {
     addCheckMathQuestionButton: () => cy.get('.ngie-btn-typography').contains(`Add 'Check your math' question`),
     firstAvailableItemLink: () => utilities.getNthElement(cy.get('.browse-item-styled-link'), 0),
     saveButton: () => cy.get('.ngie-btn-typography').contains('save',{matchCase: false}),
+    cancelButton: () => cy.get('.ngie-btn-typography').contains('cancel',{matchCase: false}),
     AddCheckMathQuestionHeader: () => cy.get('.browse-title-wrapper').contains(`Add 'Check your math' question`),
     singleOptionTextFieldWrapper: () => cy.get('[class*="SingleOptionstyle__TextFieldWrapper"]'),
     customizeStampComponent: () => cy.get('[class*="CustomizeStampstyles__CustomizeStampWrapper"]'),
@@ -127,7 +136,7 @@ const selectors = {
     imageUploadSectionQuestionImageCrossIcon: () => thinkSpherePage.imageUploadSection().find('div[class*="QuestionImageComponentstyle__CrossIcon"]'),
     imageRadioButtonParentSvg: () => thinkSpherePage.imageRadioButton().parent().find('svg'),
     solvePhaseAccordionSvg: () => thinkSpherePage.solvePhaseAccordion().find('svg'),
-    customizeToolsAndControlsSvg: () => thinkSpherePage.customizeToolsAndControls().find('svg'),
+    customizeToolsAndControlsPath: () => thinkSpherePage.customizeToolsAndControls().find('path'),
     solvePhaseToolsAndControlsOptionsTilesFeatherCheckIcon: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('[data-name="Icon feather-check"]'),
     solvePhaseToolsAndControlsOptionsTilesRectangle: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('[data-name*="Rectangle"]'),
     solvePhaseToolsAndControlsOptionsTilesDragItemFlexWrapperSvg: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('.drag-item-flex-wrapper svg'),
@@ -181,9 +190,32 @@ const selectors = {
     gridItemsWrapper: (number) => cy.get('[class*="DragAndDropGridstyles__GridItemsWrapper"]').eq(number),
     dragButton: (number) => cy.get('[type="button"]').eq(number),
     customizeStampsButton: (customizeStampPosition) => cy.get(`button[aria-label="Stamp ${customizeStampPosition}"]`),
+    buttonSave: () => cy.get('.action-btn-wrapper button').eq(1),
+    buttonCancel: () => cy.get('.action-btn-wrapper button').eq(0),
+    nextGenThinkSphereCreateItemWrapper: () => cy.get('#nextgen-thinkshpere-create-item'),
+    equationEditorSectionTitle: () => cy.get('.equation-editor-text-title'),
+    referenceIdWrapper: () => cy.get('.edit-item-reference-id-wrapper'),
+    editBoxWrapper: () => cy.get('.edit-box-wrapper'),
+    editBoxText: () => cy.get('.edit-box-text'),
+    editBoxTextInput: () => thinkSpherePage.editBoxWrapper().find('input'),
+    editIconPencil: () => cy.get('.icon-pencil'),
+    thinkSphereQuestionHeader: () => cy.get('.edit-question-header-title'),
+    filterSectionQuestionTypesAccordion: () => cy.get('.filter-section-expansion-panel-summary-root'),
+    filterSectionQuestionAccordion: () => cy.get('.expansion-item-expansion-panel-summary-content'),
+    checkBox: () => cy.get('.MuiCheckbox-root'),
+    browseItemQuestionItem: () => cy.get('.browse-item-question-item'),
+    ErrorMessageContainer: () => cy.get('.ErrorMessageContainer'),
+    categoriesDropDown: () => cy.get('.dropdown-form-control[label="Categories"]'),
+    categoriesDropDownLabelText: () => cy.get('.dropdown-label-text'),
+    categoriesDropDownMenuItem: () => cy.get('.dropdown-menu-item .dropdown-label-text'),
+    categoriesDropDownParent: () => cy.get('.drop-down-parent'),
+    cardWrapper: () => cy.get('.card-wrapper'),
+    cardLabel: () => cy.get('.widget-card-label'),
+    thinkSphereQuestionInstructionCKEditor: () => cy.get('div.cke_editable[contenteditable="true"]'),
 };
 
 const steps = {
+    ...essayResponsePage.steps,
     ...backgroundImageUploadComponent.steps,
     ...questionInstructionsComponent.steps,
     ...scoringSectionBaseEditTab.steps,
@@ -200,6 +232,7 @@ const steps = {
     ...browseItemsPage.steps,
     ...videoResponsePage.steps,
     ...createQuestionBasePage.steps,
+    ...createCustomCategoryFlyout.steps,
 
     /**
      * Navigates to the ThinkSphere create question page.
@@ -271,12 +304,24 @@ const steps = {
         cy.wait('@setItem');
     },
 
+    clickOnCancelButton: () => {
+        cy.interceptGraphql('setItem');
+        thinkSpherePage.cancelButton()
+            .click();
+    },
+
     clickOnSwapButton: () => {
         thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon()
             .click();
         cy.wait(2000);
     },
 
+    clickOnEditButton: () => {
+        thinkSpherePage.ThinkSphereMathQuestionHeaderPencilIcon()
+            .click();
+        cy.wait(2000);
+    },
+
     clickOnDeleteButton: () => {
         thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon()
             .click();
@@ -543,7 +588,8 @@ const steps = {
                 .click();
         } else {
             thinkSpherePage.planSentenceStarterAddItemButton()
-                .click();
+                .click()
+                .trigger('mouseout', { force: true });
         }
     },
 
@@ -855,9 +901,213 @@ const steps = {
     verifyCustomizeStampSelectedUnselected: (selected, customizeStampPosition) => {
         utilities.verifyElementAttribute(thinkSpherePage.customizeStampsButton(customizeStampPosition), 'aria-checked', selected ? 'true' : 'false');
     },
+
+    saveCustomCategory: () => {
+        thinkSpherePage.buttonSave()
+            .click();
+    },
+
+    cancelCustomCategory: () => {
+        thinkSpherePage.buttonCancel()
+            .click();
+    },
+
+    createCustomCategoryWithMultipleCategoryCharacters: () => {
+        cy.log('Creating a custom category by selecting \'Keypad\' category, partially selecting \'Basic\' and \'Greek\' categories')
+        createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['primary'].displayName}`);
+        cy.wait(2000);
+        createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['matrices'].displayName}`);
+        createCustomCategoryFlyout.steps.expandCategoryAccordion(`Greek Symbols`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.gamma.ariaLabel}`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.delta.ariaLabel}`);
+        createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name.');
+        thinkSpherePage.steps.saveCustomCategory();
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+    },
+
+    createCustomCategoryWithNameAndIcon: () => {
+        cy.log('Creating a category by selecting \'Arrows\' category')
+        createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['geo'].displayName}`);
+        createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name and icon.');
+        createCustomCategoryFlyout.steps.addInputToCategoryIconInputField('#');
+        thinkSpherePage.steps.saveCustomCategory();
+    },
+
+    verifyCategoryCharactersAndUnSelectedState: (arrayOfSymbolsAriaLabel) => {
+        thinkSpherePage.categoryCharacters()
+        .then(($symbols) => {
+            for (let index = 10; index < $symbols.length - 1; index++) {
+                editCategoryFlyout.categoryCharacters()
+                .eq(index)
+                .should('not.have.class', 'Mui-selected')
+                .invoke('attr', 'aria-label')
+                .then((ariaLabel) => {
+                    const tooltipText = ariaLabel.split(' ').slice(0, -1).join(' ');
+                    editCategoryFlyout.categoryCharacters()
+                        .eq(index)
+                        .verifyTooltip(tooltipText);
+                });
+            }
+        });
+    },
+
+    verifyCategoryCharactersAndSelectedState: (arrayOfSymbolsAriaLabel) => {
+        editCategoryFlyout.categoryCharacters()
+            .then(($symbols) => {
+                for (let index = 0; index < arrayOfSymbolsAriaLabel.length - 1; index++) {
+                    editCategoryFlyout.categoryCharacters()
+                    .eq(index)
+                    .should('have.class', 'Mui-selected')
+                    .invoke('attr', 'aria-label')
+                    .then((ariaLabel) => {
+                        const tooltipText = ariaLabel.split(' ').slice(0, -1).join(' ');
+                        editCategoryFlyout.categoryCharacters()
+                            .eq(index)
+                            .verifyTooltip(tooltipText);
+                    });
+                }
+            });
+    },
+
+    expandDropdown: () => {
+        thinkSpherePage.categoriesDropDownParent()
+            .click();
+    },
+
+    verifyDropdownOptions: (dropDownListArray) => {
+        thinkSpherePage.categoriesDropDownMenuItem().should('have.length', dropDownListArray.length).each(($item) => {
+        cy.wrap($item)
+            .invoke('text')
+            .then((text) => {
+                const trimmedText = text.trim();
+                expect(dropDownListArray).to.include(trimmedText);
+            });
+        });
+    },
+
+    clickOnDropDownCategory: (index) => {
+        thinkSpherePage.categoriesDropDownMenuItem().eq(index).click();
+    },
+
+    clickOnQuestionTypesAccordion: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion()
+        .click()
+    },
+
+    typeInSearchBar: (input) => {
+        thinkSpherePage.searchBar()
+        .clear()
+        .type(input)
+        .should('have.value', input);
+    },
+
+    searchInSearchBar: (input) => {
+        thinkSpherePage.searchBar()
+        .clear()
+        .type(input)
+        .should('have.value', input)
+        .type('{enter}');
+    },
+
+    clickOnSolvePhaseAccordionIcon: (element) => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon()
+            .click();
+    },
+
+    verifyElementDoesNotHaveExpandedClass: (element) => {
+        element.should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyElementDoesNotHaveCheckedClass: (element) => {
+        element.should('not.have.class', 'Mui-checked');
+    },
+
+    verifyThinkSphereSearchBarPlaceholder: () => {
+        thinkSpherePage.searchBar().should('have.attr', 'placeholder', 'Search by title, tags and content');
+    },
+
+    verifyReviewItemSearchBarPlaceholder: () => {
+        thinkSpherePage.searchBar().should('have.attr', 'placeholder', 'Search by question type');
+    },
+
+    verifyEquationEditorSectionCategoryNotPressed: () => {
+        thinkSpherePage.equationEditorSectionCategories().eq(1).should('have.attr', 'data-aria-pressed', 'false');
+    },
+
+    verifyEquationEditorSectionCategoryIsPressed: () => {
+        thinkSpherePage.equationEditorSectionCategories().eq(10).should('have.attr', 'data-aria-pressed', 'true');
+    },
+
+    verifyTypeCheckBoxStrategy: () => {
+        utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5)
+            .find('input').should('have.attr', 'type', 'checkbox');
+    },
+
+    verifyTypeCheckBoxSentenceStarter: () => {
+        utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5)
+            .find('input').should('have.attr', 'type', 'checkbox');
+    },
+
+    verifyStrategyCheckBoxNotChecked: () => {
+        utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5)
+            .find('input').should('not.have.attr', 'checked');
+    },
+
+    verifySentenceStrategyCheckBoxNotChecked: () => {
+        utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5)
+            .find('input').should('not.have.attr', 'checked');
+    },
+
+    verifyTextIsNotEmpty: (element) => {
+        element.invoke('text')
+        .should('not.be.empty');
+    },
+
+    verifyLength: (element, length) => {
+        element.should('have.length', length);
+    },
+
+    verifyFilterSectionExpanded: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion().should('have.class', 'Mui-expanded');
+    },
+
+    verifyFilterSectionCollapsed: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion().should('not.have.class', 'Mui-expanded');
+    },
+
+    verifySolvePhaseAccordionExpanded: () => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon().should('have.class', 'Mui-expanded');
+    },
+
+    verifySolvePhaseAccordionCollapsed: () => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon().should('not.have.class', 'Mui-expanded');
+    },
+
+    addQuestionInstructionInnerHTML: (innerHTML) => {
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .invoke('html', innerHTML);
+    },
+
+    verifyQuestionInstructionIncreasedHeightAndScrollBar: () => {
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .invoke('height') // Get the height of the element
+            .should('be.gt', 198);
+
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .should(($el) => {
+                const scrollWidth = $el[0].scrollWidth;
+                const clientWidth = $el[0].clientWidth;
+
+                // Assert that horizontal scroll is present
+                expect(scrollWidth).to.be.greaterThan(clientWidth);
+            });
+    },
 };
 
 const tests = {
+    ...essayResponsePage.tests,
     ...createQuestionBasePage.tests,
     ...backgroundImageUploadComponent.tests,
     ...questionInstructionsComponent.tests,
@@ -869,6 +1119,7 @@ const tests = {
     ...studentViewSettingsLabelComponent.tests,
     ...defaultToolDropdown.tests,
     ...optionsWrapperComponent.tests,
+    ...equationEditorFlyout.tests,
 
     /**
      * Verifies the ThinkSphere cancel button functionality.
@@ -1362,9 +1613,12 @@ const tests = {
             it('When user clicks on \'Reset to default\' button then the sentence starter list should be reset to default', () => {
                 thinkSpherePage.planSentenceStarterListResetToDefault()
                     .click();
-                optionList.forEach((option, index) => {
-                    thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter sentence starter name');
-                });
+                thinkSpherePage.planSentenceStarterSection()
+                .within(() => {
+                    optionList.forEach((option, index) => {
+                        thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter sentence starter name');
+                    });
+                })
             });
         }
     },
@@ -1550,6 +1804,67 @@ const tests = {
             cy.checkAccessibility(thinkSpherePage.singleOptionTextFieldWrapper());
         });
     },
+
+    verifyErrorMessageCSSAndA11y: () => {
+        it('CSS of error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(commonComponents.errorMessage(), {
+                'color': css.color.errorText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.nextGenThinkSphereCreateItemWrapper());
+        });
+    },
+
+    verifyQuestionAccordion: () => {
+        it('Author should be able to expand and collapse the question accordion by clicking on the expand icon', () => {
+            thinkSpherePage.filterSectionQuestionAccordion().each(($accordion) => {
+                cy.wrap($accordion).find('.expansion-item-icon-wrapper').click();
+                cy.wrap($accordion).should('have.class', 'Mui-expanded');
+            });
+
+            thinkSpherePage.filterSectionQuestionAccordion().each(($accordion) => {
+                cy.wrap($accordion).find('.expansion-item-icon-wrapper').click();
+                cy.wrap($accordion).should('not.have.class', 'Mui-expanded');
+            });
+        });
+    },
+
+    verifyCreateItemHeaderSection: () => {
+        it('The page displays a unique Reference ID at the top left corner in the format "Ref ID:"', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.referenceIdWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.referenceIdWrapper().children('div').first(), 'Ref ID:\u00A0');
+            const initialRefId = thinkSpherePage.referenceIdWrapper().children('div').eq(1).invoke('text');
+            initialRefId.then((refId) => {
+                expect(refId).to.be.a('string').and.not.be.empty;
+                cy.reload();
+                thinkSpherePage.referenceIdWrapper().children('div').eq(1).invoke('text').should((newRefId) => {
+                    expect(newRefId).to.be.a('string').and.not.be.empty;
+                    expect(newRefId).to.not.equal(refId);
+                });
+            });
+        });
+
+        it('Edit text box and edit icon pencil should exist, and on clicking the edit input field with placeholder \'Enter title\ should allow the user to add title' , () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.editBoxTextInput(), 'visible');
+            thinkSpherePage.editBoxTextInput().blur();
+            utilities.verifyElementVisibilityState(thinkSpherePage.editIconPencil(), 'visible');
+            thinkSpherePage.editIconPencil().click();
+            thinkSpherePage.editBoxTextInput().should('have.attr', 'placeholder', 'Enter title');
+            thinkSpherePage.editBoxTextInput().type('Test Title');
+            thinkSpherePage.editBoxTextInput().blur();
+            utilities.verifyInnerText(thinkSpherePage.editBoxText(),'Test Title');
+        });
+    },
+
+    verifyDefaultTab: () => {
+        it('By default edit tab should be selected', () => {
+            thinkSpherePage.editTab().should('have.class', 'Mui-selected');
+        });
+    },
 };
 
 export const thinkSpherePage = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.379-highlight-flakiness-r2-fba67fd.0",
+  "version": "1.0.380-IEI-5863-5864-97d3f1f.0",
   "description": "",
   "main": "index.js",
   "scripts": {