itemengine-cypress-automation 1.0.348 → 1.0.350-feature-thinkSphere-01c175a.0

package/cypress/e2e/ILC/ThinkSphere/planPhase.js

@@ -0,0 +1,216 @@
+import { thinkSpherePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const planPhaseSectionDescriptionText = "Select and edit sentence starters and strategies for students to use in their planning journal. You can select up to five strategies and five sentence starters.";
+const strategiesTextDefault = [
+    'Create a model',
+    'Look for a pattern',
+    'Guess, check, and revise',
+    'Try with friendlier numbers',
+    'Show with an equation'
+];
+const sentenceStartersTextDefault = [
+    'The strategy I’m going to use is',
+    'First, I will',
+    'Secondly, I will',
+    'I will check my work by',
+    'If my strategy is not working, I will'
+];
+describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+    describe('Create item : ThinkSphere Question - Plan Phases Section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+        });
+        
+        it('\'Plan Phase\' Section should be present', () => {
+            utilities.verifyInnerText(thinkSpherePage.planPhaseAccordianLabel(), 'Plan');
+        });
+    
+        it('\'Plan Phase\' Section accordian should be expanded initially', () => {
+            thinkSpherePage.steps.verifyAccordianCollapsed('plan', false);
+            thinkSpherePage.steps.clickOnAccordian('plan');
+        });
+    
+        it('Verify CSS of \'Plan Phase\' Section accordian collapsed state', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.planPhaseAccordian(), {
+                'padding': '17px 0px 17px 12px',
+                'background-color': css.color.primaryBtn,
+            });
+            utilities.verifyCSS(thinkSpherePage.planPhaseAccordian().parent(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'border-radius': '12px'
+            });
+        });
+        
+        it('When the user click on \'Plan Phase\' Section accordion, then \'Plan Phase\' Section should be in expanded state', () => {
+            thinkSpherePage.steps.clickOnAccordian('plan');
+            thinkSpherePage.steps.verifyAccordianCollapsed('plan', false);
+        });
+    
+        it('\'Plan Phase\' Section Description should be displayed', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.planPhaseSectionDescription(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.planPhaseSectionDescription(), planPhaseSectionDescriptionText);
+        });
+    
+        it('\'Plan Phase\' Section Strategies list component should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.planStrategySection(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.planStrategyListHeader(), 'Strategies');
+            utilities.verifyElementVisibilityState(thinkSpherePage.planStrategyListResetToDefault(), 'visible');
+        });
+        
+        it('\'Plan Phase\' Section Sentence starters list component should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.planSentenceStarterSection(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.planSentenceStarterListHeader(), 'Sentence starters');
+            utilities.verifyElementVisibilityState(thinkSpherePage.planSentenceStarterListResetToDefault(), 'visible');
+        });
+    
+        
+        it('Verify CSS of \'Plan Phase\' Section accordian expanded state', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.planPhaseAccordian(), {
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`,
+            });
+            utilities.verifyCSS(thinkSpherePage.planPhaseSectionDescription(), {
+                    'color': css.color.helperText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular,
+                    'margin-bottom': '16px',
+                },
+            );
+            utilities.verifyCSS(thinkSpherePage.planStrategyListHeader(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(thinkSpherePage.planStrategyListResetToDefault(), {
+                'color': css.color.primaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(thinkSpherePage.planSentenceStarterListHeader(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(thinkSpherePage.planSentenceStarterListResetToDefault(), {
+                'color': css.color.primaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+    
+        describe('\'Plan Phase\' Section Strategies list component', () => {
+            abortEarlySetup();
+            thinkSpherePage.tests.verifyListSectionContents({
+                optionFieldsCount: 5,
+                optionList: strategiesTextDefault,
+                placeholder: 'Enter strategy name',
+                list: 'strategy',
+            });
+    
+            thinkSpherePage.tests.verifyDragHandleTooltip(0);
+    
+            it('When the user clicks on the \'Delete\' option button then the respective options input field should get deleted and option numeration should change accordingly', () => {
+                const optionsAfterDeleting = strategiesTextDefault.filter((el) => el !== strategiesTextDefault[4]);
+                thinkSpherePage.steps.deleteOption(4);
+                utilities.verifyElementCount(thinkSpherePage.optionWrapper(), 9);
+                optionsAfterDeleting.forEach((inputFieldText, optionIndex) => {
+                    cy.log(optionsAfterDeleting, optionIndex, inputFieldText)
+                    utilities.verifyTextContent(utilities.getNthElement(thinkSpherePage.listInputField(), optionIndex), inputFieldText);
+                });
+                thinkSpherePage.steps.addOption('strategy'),
+                thinkSpherePage.steps.addOptionText('strategy', 4, strategiesTextDefault[4]);
+            });
+    
+            it('When only one option is present, the delete button should be in disabled state', () => {
+                cy.log('Deleting one more option')
+                const optionsToBeDeleted = strategiesTextDefault.filter((el) => el !== strategiesTextDefault[0]);
+                
+                optionsToBeDeleted.forEach(() => { thinkSpherePage.steps.deleteOption(1) });
+                thinkSpherePage.steps.verifyDeleteOptionButtonDisabledState('strategy');
+                optionsToBeDeleted.forEach(() => { thinkSpherePage.steps.addOption('strategy') });
+                strategiesTextDefault.forEach((inputFieldText, optionIndex) => {
+                    thinkSpherePage.steps.addOptionText('strategy', optionIndex, inputFieldText);
+                });
+            });
+    
+            thinkSpherePage.tests.verifyDisabledDeleteButtonTooltip(0, 'Minimum one option is required');
+    
+            thinkSpherePage.tests.verifyAddOptionFunctionality('strategy', strategiesTextDefault);
+    
+            thinkSpherePage.tests.verifyEnabledDeleteButtonAndTooltip('strategy', 0);
+            
+            thinkSpherePage.tests.verifyOptionsCheckboxComponent('strategy');
+            
+            thinkSpherePage.tests.verifyOptionsInput('strategy');
+    
+            thinkSpherePage.tests.verifyAtleastOneOptionIsRequired('strategy', strategiesTextDefault, 'Minimum one option is required');
+    
+            thinkSpherePage.tests.verifyResetToDefaultFunctionality(strategiesTextDefault, 'strategy');
+    
+            thinkSpherePage.tests.verifyVideoLinkComponent();
+    
+            it('Accessibility of \'Plan Phase\' Section Strategies list component', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(thinkSpherePage.planStrategySection());
+            });
+        });
+    
+        describe('\'Plan Phase\' Section Sentence starters list component', () => {
+            abortEarlySetup();
+            thinkSpherePage.tests.verifyListSectionContents({
+                optionFieldsCount: 5,
+                optionList: sentenceStartersTextDefault,
+                placeholder: 'Enter sentence starter name',
+                list: 'sentenceStarter',
+            });
+    
+            thinkSpherePage.tests.verifyDragHandleTooltip(5);
+    
+            it('When the user clicks on the \'Delete\' option button then the respective options input field should get deleted and option numeration should change accordingly', () => {
+                const optionsAfterDeleting = sentenceStartersTextDefault.filter((el) => el !== sentenceStartersTextDefault[4]);
+                thinkSpherePage.steps.deleteOption(9);
+                utilities.verifyElementCount(thinkSpherePage.optionWrapper(), 9);
+                optionsAfterDeleting.forEach((inputFieldText, optionIndex) => {
+                    cy.log(optionsAfterDeleting, optionIndex, inputFieldText)
+                    utilities.verifyTextContent(utilities.getNthElement(thinkSpherePage.listInputField(), optionIndex + 5), inputFieldText);
+                });
+                thinkSpherePage.steps.addOption('sentenceStarter'),
+                thinkSpherePage.steps.addOptionText('sentenceStarter', 4, sentenceStartersTextDefault[4]);
+            });
+    
+            it('When only one option is present, the delete button should be in disabled state', () => {
+                cy.log('Deleting one more option')
+                const optionsToBeDeleted = sentenceStartersTextDefault.filter((el) => el !== sentenceStartersTextDefault[0]);
+                
+                optionsToBeDeleted.forEach(() => { thinkSpherePage.steps.deleteOption(6) });
+                thinkSpherePage.steps.verifyDeleteOptionButtonDisabledState('sentenceStarter');
+                optionsToBeDeleted.forEach(() => { thinkSpherePage.steps.addOption('sentenceStarter') });
+                strategiesTextDefault.forEach((inputFieldText, optionIndex) => {
+                    thinkSpherePage.steps.addOptionText('sentenceStarter', optionIndex, inputFieldText);
+                });
+            });
+    
+            thinkSpherePage.tests.verifyDisabledDeleteButtonTooltip(5, 'Minimum one option is required');
+    
+            thinkSpherePage.tests.verifyAddOptionFunctionality('sentenceStarter', sentenceStartersTextDefault);
+    
+            thinkSpherePage.tests.verifyEnabledDeleteButtonAndTooltip('sentenceStarter', 5);
+            
+            thinkSpherePage.tests.verifyOptionsCheckboxComponent('sentenceStarter');
+            
+            thinkSpherePage.tests.verifyOptionsInput('sentenceStarter');
+    
+            thinkSpherePage.tests.verifyAtleastOneOptionIsRequired('sentenceStarter', sentenceStartersTextDefault, 'Minimum one option is required');
+    
+            it('Accessibility of \'Plan Phase\' Section Sentence starters list component', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(thinkSpherePage.planSentenceStarterSection());
+            });
+        });
+    });
+})

package/cypress/e2e/ILC/ThinkSphere/solvePhase.js

@@ -0,0 +1,263 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { thinkSpherePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const canvasTools = [
+    'Text', 'Pen', 'Highlighter', 'Image', 'Shapes',
+    'Stamps', 'Number bond', 'Unifix Cube', 'Diagrams', 'Array',
+    'Number line', 'Fraction bars', 'Protractor', 'Table', 'Grids',
+    'Equation editor', 'Algebra tiles'
+];
+const defaultSelectedCanvasTools = ['Text', 'Pen', 'Highlighter', 'Image', 'Shapes', 'Stamps'];
+const canvasControls = ['Move', 'Delete', 'Undo', 'Redo', 'Clear all'];
+const defaultSelectedCanvasControls = ['Move', 'Delete', 'Undo', 'Redo', 'Clear all'];
+const defaultTool = 'Pen';
+const defaultSelectedCategories = ['Numpad', 'Keypad', 'Intermediate', 'Primary', 'General', 'Common', 'Algebra', 'Geo', 'Compare', 'Matrices'];
+const defaultSelectedStamps = ['Stamp 1', 'Stamp 2', 'Stamp 3', 'Stamp 4', 'Stamp 5', 'Stamp 6', 'Stamp 7', 'Stamp 8', 'Stamp 9', 'Stamp 10', 'Stamp 11', 'Stamp 12', 'Stamp 13'];
+const defaultToolsOptions = ['Text', 'Pen', 'Highlighter'];
+
+
+describe('ThinkSphere Question - Solve Phases Section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Create item : ThinkSphere Question - Solve Phases Section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.loginAs('admin');
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default \'Solve phase\' accordion should be expanded', () => {
+            utilities.verifyInnerText(thinkSpherePage.solvePhaseAccordionLabel(), 'Solve');
+            utilities.verifyElementVisibilityState(thinkSpherePage.solvePhaseAccordionExpandIcon(), 'exist');
+        });
+
+        it('By default \'Customize toolbar options and controls\' accordion should be collapsed and by clicking on the \'Customize toolbar options and controls\' accordion, user should be able to expand the accordion', () => {
+            utilities.verifyInnerText(thinkSpherePage.customizeToolsAndControlsLabel(), 'Customize toolbar options and controls');
+            utilities.verifyElementVisibilityState(thinkSpherePage.customizeToolsAndControlsIcon(), 'exist');
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+        });
+
+        it('Accessibility of \'Solve phase\' accordion and contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.solvePhaseAccordionContentWrapper());
+        });
+
+        it('CSS of \'Solve phase\' accordion and contents', { tags: 'css' }, () => {
+            cy.log('CSS of accordion label and chevron icon')
+            utilities.verifyCSS(thinkSpherePage.solvePhaseAccordionLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(thinkSpherePage.solvePhaseAccordionSvg(), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(thinkSpherePage.customizeToolsAndControlsLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(thinkSpherePage.customizeToolsAndControlsSvg(), {
+                'fill': css.color.activeButtons
+            });
+
+            cy.log('CSS of selected toolbar formatting option')
+            utilities.verifyCSS(thinkSpherePage.solveToolsAndControlsOptionsTiles('Text'), {
+                'background-color': css.color.primaryBtnBg
+            });
+            cy.log('CSS of tick icon of selected toolbar formatting option')
+            utilities.verifyCSS(thinkSpherePage.solvePhaseToolsAndControlsOptionsTilesFeatherCheckIcon(), {
+                'fill': css.color.activeButtons
+            });
+            cy.log('CSS of background of tick icon of selected toolbar formatting option')
+            utilities.verifyCSS(thinkSpherePage.solvePhaseToolsAndControlsOptionsTilesRectangle(), {
+                'fill': css.color.defaultBackground
+            });
+            cy.log('CSS of icon of selected toolbar formatting option')
+            utilities.verifyCSS(thinkSpherePage.solvePhaseToolsAndControlsOptionsTilesDragItemFlexWrapperSvg(), {
+                'fill': css.color.primaryBtn
+            });
+            cy.log('CSS of drag handle of selected toolbar formatting option')
+            utilities.verifyCSS(
+                utilities.getNthElement(thinkSpherePage.solvePhaseToolsAndControlsOptionsTilesTextDragIconSvgPath(), 1),
+                {
+                    'color': css.color.activeButtons
+                },
+            );
+            cy.log('CSS of unselected toolbar formatting option')
+            utilities.verifyCSS(thinkSpherePage.solveToolsAndControlsOptionsTiles('Array'), {
+                'background-color': css.color.secondaryBtnBg
+            });
+            cy.log('CSS of drag handle of unselected toolbar formatting option')
+            utilities.verifyCSS(
+                utilities.getNthElement(thinkSpherePage.solvePhaseToolsAndControlsOptionsTilesArrayDragIconSvgPath(), 1),
+                {
+                    'fill': css.color.secondaryBtn
+                },
+            );
+        });
+
+        it('When \'Solve phase\' accordion is in expanded state, then all the tool options should be displayed along with drag handle.', () => {
+            thinkSpherePage.steps.verifyToolsAndControlsOptions(canvasTools);
+        });
+
+        it(`When the \'Solve phase\' accordion is in expanded state, then the following tools should be in selected state by default - ${defaultSelectedCanvasTools}. All the other options should be in unselected state.`, () => {
+            defaultSelectedCanvasTools.forEach(tool => {
+                thinkSpherePage.steps.verifyOptionIsSelected(tool);
+            });
+            canvasTools.filter(tool => !defaultSelectedCanvasTools.includes(tool)).forEach(tool => {
+                thinkSpherePage.steps.verifyOptionIsNotSelected(tool);
+            });
+        });
+
+        it('User should be able to unselect any default selected tool and should be able to select any default unselected tool.', () => {
+            thinkSpherePage.steps.deselectOptionFromToolsAndControls('Text');
+            thinkSpherePage.steps.verifyOptionIsNotSelected('Text');
+            thinkSpherePage.steps.selectOptionFromToolsAndControls('Array');
+            thinkSpherePage.steps.verifyOptionIsSelected('Array');
+        });
+
+        it('When \'Solve phase\' accordion is in expanded state, then all the control options should be displayed along with drag handle.', () => {
+            thinkSpherePage.steps.verifyToolsAndControlsOptions(canvasControls);
+        });
+
+        it(`When the \'Solve phase\' accordion is in expanded state, then the following controls should be in selected state by default - ${defaultSelectedCanvasControls}. All the other options should be in unselected state.`, () => {
+            defaultSelectedCanvasControls.forEach(control => {
+                thinkSpherePage.steps.verifyOptionIsSelected(control);
+            });
+            canvasControls.filter(control => !defaultSelectedCanvasControls.includes(control)).forEach(control => {
+                thinkSpherePage.steps.verifyOptionIsNotSelected(control);
+            });
+        });
+
+        it('User should be able to unselect any default selected control.', () => {
+            thinkSpherePage.steps.deselectOptionFromToolsAndControls('Move');
+            thinkSpherePage.steps.verifyOptionIsNotSelected('Move');
+        });
+
+        thinkSpherePage.tests.verifyDefaultToolDropdown(defaultToolsOptions, defaultTool);
+
+        it('\'Customize stamps\' component should be present inside \'Customize toolbar options and controls\' accordion of solve phase', () => {
+            thinkSpherePage.steps.verifyCustomizeStampsComponent();
+            utilities.verifyInnerText(thinkSpherePage.customizeStampHeading(), 'Customize stamp');
+        });
+
+        it('Default stamps should be displayed and selected by default in the \'Customize stamps\' component', () => {
+            thinkSpherePage.steps.verifyDefaultStamps(defaultSelectedStamps);
+        });
+
+        it('When user select deselect stamps tool from tools section, then customize stamps section should be visible and hide respectively', () => {
+            thinkSpherePage.steps.clickOnStampsTool();
+            utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampComponent(), 'notExist');
+            thinkSpherePage.steps.clickOnStampsTool();
+            utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampComponent(), 'visible');
+        });
+
+        it('CSS of \'Customize stamps\' component', { tags: 'css' }, () => {
+            thinkSpherePage.customizeStampComponent()
+                .within(() => {
+                    utilities.verifyCSS(thinkSpherePage.customizeStampHeading(), {
+                        'color': css.color.sectionHeading,
+                        'font-size': css.fontSize.normal,
+                        'font-weight': css.fontWeight.semibold,
+                        'padding-bottom': '8px'
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.customizeStampCard(), 0), {
+                        'width': '80px',
+                        'height': '80px',
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.primaryBtn,
+                        'border-radius': '8px',
+                    });
+                });
+        });
+
+        it('User should be able to select and unselect any stamp from the \'Customize stamps\' component', () => {
+            thinkSpherePage.steps.verifySelectAndUnselectStamps();
+        });
+
+        it('CSS of  unselected \'Customize stamp\' card component', { tags: 'css' }, () => {
+            thinkSpherePage.steps.clickOnCustomizeCard(0);
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.customizeStampCard(), 0), {
+                'width': '80px',
+                'height': '80px',
+                'border': `1px solid ${css.color.secondaryBtnDisabled}`,
+                'background-color': css.color.primaryBtn,
+                'border-radius': '8px',
+            });
+            thinkSpherePage.steps.clickOnCustomizeCard(0);
+        });
+
+        thinkSpherePage.tests.verifyDefaultToolDropdown(canvasTools, defaultTool);
+
+        it('By default, Equation Editor categories should not be displayed', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionWrapper(), 'notExist');
+        });
+
+        it('When clicking the Equation Editor Tool, Equation Editor categories should be displayed', () => {
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionWrapper(), 'exist');
+        });
+
+        it(`By default, ${defaultSelectedCategories.toString()} should be selected`, () => {
+            defaultSelectedCategories.forEach((category) => {
+                thinkSpherePage.steps.verifySelectedCategoryInEquationEditorSectionEditTab(category);
+            });
+        });
+
+        it('CSS of selected and deselected category', { tags: 'css' }, () => {
+            cy.log('CSS of selected category')
+
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.equationEditorSectionCategories(), 0), {
+                'background-color': css.color.activeButtons
+            });
+
+            utilities.getNthElement(thinkSpherePage.equationEditorSectionCategories(), 0)
+                .within(() => {
+                    utilities.verifyCSS(thinkSpherePage.equationEditorSectionCategoryLabel(), {
+                        'color': css.color.primaryBtn,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(thinkSpherePage.equationEditorSectionTickIcon(), {
+                        'fill': css.color.activeButtons
+                    });
+                    utilities.verifyCSS(thinkSpherePage.equationEditorSectionCategoriesDragIcon(), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+
+            cy.log('CSS of deselected category')
+
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.equationEditorSectionCategories(), 12), {
+                'background-color': css.color.primaryBtn
+            });
+
+            utilities.getNthElement(thinkSpherePage.equationEditorSectionCategories(), 12)
+                .within(() => {
+                    utilities.verifyCSS(thinkSpherePage.equationEditorSectionCategoryLabel(), {
+                        'color': css.color.secondaryBtn,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(thinkSpherePage.equationEditorSectionCategoriesDragIcon(), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+        });
+
+        it('Accessibility of selected and deselected category', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`).parents('[class*="DraggableItemsGrid"]'))
+        });
+
+        it('When user add question image then it should replicate at customize stamps first card and it should be unselected', () => {
+            thinkSpherePage.steps.uploadFile('uploads/highlightImage.jpg');
+            cy.wait(5000);
+            thinkSpherePage.steps.verifyQuestionImageCustomStamp();
+        });
+    });
+})

package/cypress/fixtures/theme/ilc.json

@@ -1,5 +1,6 @@
 {
     "color": {
+        "boxShadow": "rgba(82, 0, 255, 0.1)",
         "primaryBtn": "rgb(255, 255, 255)",
         "primaryBtnBg": "rgb(82, 0, 255)",
         "primaryBtnBorder": "rgb(0, 0, 124)",
@@ -157,7 +158,15 @@
         "newFontColor": "rgb(128, 25, 0)",
         "newResponseFieldColor": "rgb(119, 60, 60)",
         "blackText": "rgb(0, 0, 0)",
-        "blackTextBoxText":"rgba(0, 0, 0, 0.38)"
+        "blackTextBoxText":"rgba(0, 0, 0, 0.38)",
+        "whiteColor": "rgba(255, 255, 255, 1)",
+        "phasesSectionBorderColor": "rgba(186, 201, 255, 1)",
+        "optionColor": "rgb(13, 71, 161)",
+        "borderColor": "rgb(205, 205, 206)",
+        "buttonHoverColor": "rgb(68, 0, 211)",
+        "tableRowHoverColor": "rgba(0, 0, 0, 0.04)",
+        "dialogBoxBoxShadow": "rgba(0, 0, 0, 0.25)",
+        "desktopMobileViewtoggleButtonSelectedBg": "rgb(227, 242, 253)"
     },
     "fontSize": {
         "extraSmall": "10px",

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -59,29 +59,7 @@ const steps = {
 }
 
 const tests = {
-    verifyBackgroundImageSectionContentWithCSSAndA11y: (questionType = null) => {
-        it('\'Background image\' label should be visible', () => {
-            if (questionType === 'graphing') {
-                utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background');
-            } else {
-                utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background image');
-            }
-        });
-
-        it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
-            utilities.verifyInnerText(backgroundImageUploadComponent.uploadLabel(), 'Upload');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadLabel(), 'visible');
-            utilities.verifyInnerText(backgroundImageUploadComponent.chooseFileButton(), 'Choose file');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.chooseFileButton(), 'visible');
-        });
-
-        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
-            utilities.verifyInnerText(backgroundImageUploadComponent.fileNameLabel(), 'File name');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.fileNameLabel(), 'visible');
-            utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
-            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.noFileChosenLabel(), 'visible');
-        });
-
+    verifyCSSAndA11yBeforeUpload: () => {
         it('CSS of upload section', { tags: 'css' }, () => {
             utilities.verifyCSS(backgroundImageUploadComponent.uploadLabel(), {
                 'color': css.color.labels,
@@ -109,12 +87,14 @@ const tests = {
         it('Accessibility of  Upload section before uploading image', { tags: 'a11y' }, () => {
             cy.checkAccessibility(backgroundImageUploadComponent.uploadLabel().parents('.edit-question-edit-tab-wrapper'));
         });
+    },
 
+    verifyImageUploadFunctionality: (questionType = null) => {
         it('When the user adds the image file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded and uploaded image should be displayed', () => {
             backgroundImageUploadComponent.steps.uploadFile('highlightImage.jpg');
             utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'visible');
             backgroundImageUploadComponent.steps.verifyFileNameLabel('highlightImage.jpg');
-            if (questionType !== 'graphing' && questionType !== 'grid fill' && questionType !== 'image highlight') {
+            if (!['graphing', 'grid fill', 'image highlight', 'thinkSphere'].includes(questionType)) {
                 imageCanvasComponent.steps.verifyImageIsUploaded();
             }
         });
@@ -129,6 +109,34 @@ const tests = {
         });
     },
 
+    verifyBackgroundImageSectionContentWithCSSAndA11y: (questionType = null) => {
+        it('\'Background image\' label should be visible', () => {
+            if (questionType === 'graphing') {
+                utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background');
+            } else {
+                utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background image');
+            }
+        });
+
+        it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.chooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.chooseFileButton(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.fileNameLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.noFileChosenLabel(), 'visible');
+        });
+
+        tests.verifyCSSAndA11yBeforeUpload();
+
+        tests.verifyImageUploadFunctionality(questionType);
+    },
+
     verifyDeleteImagePopupContentAndFunctionality: () => {
         it('When the user hovers on \'Delete\' button, \'Delete image\' text should be displayed in tooltip', () => {
             backgroundImageUploadComponent.deleteImageIcon()