itemengine-cypress-automation 1.0.355 → 1.0.356-capture-image-8b4830c.0

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

@@ -5,9 +5,9 @@ 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',
+    'Stamps', 'Unifix Cube', 'Diagrams', 'Array',
     'Number line', 'Fraction bars', 'Protractor', 'Table', 'Grids',
-    'Equation editor', 'Algebra tiles'
+    'Equation editor', 'Algebra tiles', 'Point eraser', 'Item eraser'
 ];
 const defaultSelectedCanvasTools = ['Text', 'Pen', 'Highlighter', 'Image', 'Shapes', 'Stamps'];
 const canvasControls = ['Move', 'Delete', 'Undo', 'Redo', 'Clear all'];
@@ -36,6 +36,13 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
             utilities.verifyElementVisibilityState(thinkSpherePage.solvePhaseAccordionExpandIcon(), 'exist');
         });
 
+        it('When the user clicks the expanded \'Solve phase\' accordion should be collapsed when collapsed accordion is clicked it should be expanded', () => {
+            thinkSpherePage.steps.clickOnSolvePhaseAccordionIcon();
+            thinkSpherePage.steps.verifySolvePhaseAccordionCollapsed();
+            thinkSpherePage.steps.clickOnSolvePhaseAccordionIcon();
+            thinkSpherePage.steps.verifySolvePhaseAccordionExpanded();
+        });
+
         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');
@@ -61,7 +68,7 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.bold
             });
-            utilities.verifyCSS(thinkSpherePage.customizeToolsAndControlsSvg(), {
+            utilities.verifyCSS(thinkSpherePage.customizeToolsAndControlsPath(), {
                 'fill': css.color.activeButtons
             });
 
@@ -79,7 +86,7 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
             });
             cy.log('CSS of icon of selected toolbar formatting option')
             utilities.verifyCSS(thinkSpherePage.solvePhaseToolsAndControlsOptionsTilesDragItemFlexWrapperSvg(), {
-                'fill': css.color.primaryBtn
+                'fill': 'none'
             });
             cy.log('CSS of drag handle of selected toolbar formatting option')
             utilities.verifyCSS(
@@ -150,6 +157,12 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
             thinkSpherePage.steps.verifyDefaultStamps(defaultSelectedStamps);
         });
 
+        it('Default stamps should have visible tool tips', () => {
+            defaultSelectedStamps.forEach((ele) => {
+                thinkSpherePage.customizeStampCard(ele).verifyTooltip(ele);
+            });
+        });
+
         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');
@@ -192,7 +205,7 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
             thinkSpherePage.steps.clickOnCustomizeCard(0);
         });
 
-        thinkSpherePage.tests.verifyDefaultToolDropdown(canvasTools, defaultTool);
+        thinkSpherePage.tests.verifyDefaultToolDropdown(defaultToolsOptions, defaultTool);
 
         it('By default, Equation Editor categories should not be displayed', () => {
             utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionWrapper(), 'notExist');
@@ -250,7 +263,27 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
                 });
         });
 
-        it('Accessibility of selected and deselected category', { tags: 'a11y' }, () => {
+        it('The edit button should not be displayed for the keypad category button.', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['keyPad'].displayName}`).find(thinkSpherePage.equationEditorSectionCategoriesEditIcon()), 'notExist');
+        });
+
+        it('User should be able to unselect default selected category and should be able to select default unselected category.', () => {
+            thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['keyPad'].displayName}`).click();
+            thinkSpherePage.steps.verifyEquationEditorSectionCategoryNotPressed()
+            thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['setNotation'].displayName}`).click();
+            thinkSpherePage.steps.verifyEquationEditorSectionCategoryIsPressed();
+        });
+
+        it('The \'Equation Editor\' should be displayed along with helper text \'Select the categories to display to the students in the equation editor.\' and \'Create custom category\' button should be displayed', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionTitle(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.equationEditorSectionTitle(), 'Equation editor');
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionHelperText(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.equationEditorSectionHelperText(), 'Select the categories to display to the students in the equation editor.');
+            utilities.verifyElementVisibilityState(thinkSpherePage.createCustomCategoryButton(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.createCustomCategoryButton(), 'Create custom category');
+        });
+
+        it.skip('Accessibility of selected and deselected category', { tags: 'a11y' }, () => {
             cy.checkAccessibility(thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`).parents('[class*="DraggableItemsGrid"]'))
         });
 

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

@@ -0,0 +1,393 @@
+import uuid from 'react-uuid';
+import { thinkSpherePage } from "../../../pages";
+import { browseItemsPage } from "../../../pages/components/browseItemsPage";
+import { commonComponents } from "../../../pages/components/commonComponents";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+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('Student view : ThinkSphere Question - Plan Section', () => {
+    const uuidString = uuid();
+
+    before(() => {
+        cy.loginAs('admin');
+        cy.createThinkSphereItem(uuidString, true);
+        cy.visit('/item-engine/thinksphere/browse-items');
+        browseItemsPage.steps.clickOnActionButton();
+        browseItemsPage.steps.clickOnActionMenuItem(0);
+    });
+
+    describe('\'Question instruction\' section', () => {
+        abortEarlySetup();
+        it('\'Question instruction\' section should be present', () => {
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewTexWrapperVisibility('question instruction text');
+        });
+
+        it('CSS of \'Question instruction\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.questionInstructionPreviewTexWrapper(), {
+                'border-radius': '12px',
+                'background-color': css.color.questionInstructionBG,
+                'padding': '10px 170px 10px 27px',
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('Question instruction image should visibile in the preview', () => {
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewImageWrapperVisibility();
+        });
+
+        it('CSS of question instruction image section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.questionInstructionPreviewImageWrapper(), {
+                'width': '143px',
+                'height': '110px',
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'background-color': css.color.primaryBtn,
+            });
+            utilities.verifyCSS(thinkSpherePage.questionInstructionPreviewImageExpandButton(), {
+                'width': '24px',
+                'height': '24px',
+                'box-shadow': `${css.color.boxShadow} 0px 2px 8px 0px`,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'border-radius': '4px',
+                'background-color': css.color.primaryBtn,
+            });
+        });
+
+        it('When user clicks on expand question instruction image then it should open in the popup', () => {
+            thinkSpherePage.steps.clickOnQuestionInstructionExpandImageButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.dialogBoxRoot(), 'visible');
+            thinkSpherePage.steps.verifyQuestionImagePopup();
+        });
+
+        it('CSS of question instruction image popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.dialogBoxRoot(), {
+                'border-radius': '8px',
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'box-shadow': `${css.color.dialogBoxBoxShadow} 0px 0px 10px 0px`,
+            });
+            utilities.verifyCSS(thinkSpherePage.closeExpandImagePopupButton(), {
+                'background-color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'color': css.color.primaryBtnBorder,            
+            });
+        });
+
+        it('When user clicks on close expand image popup button then it should remove the popup', () => {
+            thinkSpherePage.steps.clickOnCloseExpandImagePopupButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.dialogBoxRoot(), 'notExist');
+        });
+    });
+
+    describe('\'Choose your strategies\' section', () => {
+        abortEarlySetup();
+        it('\'Choose your strategies\' section and title should be present', () => {
+            utilities.verifyInnerText(thinkSpherePage.strategiesPreviewHeader(), 'Choose your strategies');
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategiesPreviewHeader(), 'visible');
+        });
+
+        it('\'Add new strategy\' button should be present', () => {
+            utilities.verifyInnerText(thinkSpherePage.addNewStrategyButton(), 'Add new strategy');
+            utilities.verifyElementVisibilityState(thinkSpherePage.addNewStrategyButton(), 'visible');
+        });
+
+        it('CSS of strategies header and add new strategy button', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.strategiesPreviewHeader(), {
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold,
+                'color': css.color.primaryBtnBorder,
+            });
+            utilities.verifyCSS(thinkSpherePage.addNewStrategyButton(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'padding': '12px 16px',
+                'border-radius': '8px',
+                'box-shadow': `${css.color.boxShadow} 0px 2px 8px 0px`,
+            });
+            utilities.verifyCSS(thinkSpherePage.addNewStrategyTextWrapper(), {
+                'color': css.color.primaryBtnBorder,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+        
+        it('CSS of strategies list', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.strategiesPreviewListLI(), 0), {
+                'padding': '8px 16px 8px 24px',
+                'border': `2px solid ${css.color.transparent}`,
+                'background-color': css.color.progressBarRemainingFill,
+                'border-radius': '12px',
+            });
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), 0), {
+                'color': css.color.primaryBtnBorder,
+                'margin-right': '40px',
+                'font-size': '18px',
+                'font-weight': '600',
+            });
+
+            // css of strategies list on hover
+            utilities.getNthElement(thinkSpherePage.strategiesBoxPreviewTab(), 0)
+                .realHover();
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.strategiesBoxPreviewTab(), 0), {
+                'outline-color': css.color.toggleButtonSelectedBg,
+                'outline-offset': '-1px',
+                'outline-style': 'solid',
+            });
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), 0), {
+                'color': css.color.primaryBtnBg,
+            });
+            utilities.triggerMouseout(utilities.getNthElement(thinkSpherePage.strategiesBoxPreviewTab(), 0));
+        });
+
+        it('When we click add new strategy button a popup should be opened with header \'Add new strategy\', a text input field with label \'Strategy name\', a cancel and a save button', () => {
+            thinkSpherePage.addNewStrategyButton().click();
+            utilities.verifyInnerText(thinkSpherePage.popupTitle(), 'Add new strategy');
+            utilities.verifyElementVisibilityState(thinkSpherePage.popupTitle(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.strategyNameLabel(), 'Strategy name');
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategyNameLabel(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategyNameInputField(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.addStrategyPopupCancelButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.addStrategyPopupSaveButton(), 'visible');
+            thinkSpherePage.addStrategyPopupCancelButton().click();
+        });
+
+        it('Add new strategy popup should close when cancel button is clicked and the number of strategies should be same before opening the popup', () => {
+            thinkSpherePage.steps.verifyAddNewStrategyPopupCloseFunctionality();
+        });
+
+        it('When user adds a new strategy, the popup should close when save button is clicked and the number of strategies should increase by 1 compared to that before opening the popup', () => {
+            thinkSpherePage.steps.verifyAddNewStrategyPopupSaveFunctionality();
+        });
+
+        it('CSS of strategies list in selected state', { tags: 'css' }, () => {
+            thinkSpherePage.steps.clickOnStrategiesPreviewListLI();
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.strategiesPreviewListLI(), 1), {
+                'border': `2px solid ${css.color.toggleButtonSelectedBg}`,
+                'background-color': css.color.transparent,
+            });
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), 1), {
+                'color': css.color.primaryBtnBg,
+            });
+            thinkSpherePage.steps.clickOnStrategiesPreviewListLI();
+        });
+
+        it('Video icon for should present by default besides the strategy name', () => {
+            utilities.verifyElementVisibilityState(utilities.getNthElement(thinkSpherePage.videoIconWrapper(), 0), 'visible');
+        });
+
+        it('When user clicks on video icon then video should be played in the popup', () => {
+            thinkSpherePage.steps.clickOnVideoIcon();
+            utilities.verifyElementVisibilityState(thinkSpherePage.dialogBoxRoot(), 'visible');
+            thinkSpherePage.steps.verifyVideoPopupDialogBox();
+            thinkSpherePage.steps.closeVideoPopup();
+        });
+    });
+
+    describe('\'Planning journal\' Section', () => {
+        abortEarlySetup();
+        it('\'Planning journal\' section should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.PlanningPreviewWrapper(), 'visible');
+        });
+
+        it('\'Planning journal\' section heading should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.planningPreviewHeading(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.planningPreviewHeading(), 'Planning journal');
+        });
+
+        it('\'Sentence starters\' label and dropdown should be displayed', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.chooseStarterLabel(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.chooseStarterDropdown(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.chooseStarterLabel(), 'Sentence starter');
+            thinkSpherePage.steps.verifySentenceStartersDropdown();
+        });
+
+        it('CSS of \'Sentence starter\' dropdown - default state', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.chooseStarterLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(thinkSpherePage.chooseStarterDropdown(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Clicking on \'Sentence starters\' dropdown should open a list', () => {
+            commonComponents.steps.verifyDropdownIsCollapsed();
+            thinkSpherePage.steps.expandChooseStarterDropdown();
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'visible');
+            thinkSpherePage.steps.verifySentenceStartersDropdownOptions(sentenceStartersTextDefault);
+            utilities.pressEscapeKey();
+        });
+
+        it('CSS of Sentence starters dropdown - active state', { tags: 'css' }, () => {
+            thinkSpherePage.steps.expandChooseStarterDropdown();
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.chooseStartersListOptions(), 0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.optionsBg
+            });
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.chooseStartersListOptions(), 1), {
+                'background-color': css.color.transparent
+            });
+            cy.log('Post step: Closing the Sentence starters dropdown');
+            utilities.pressEscapeKey();
+        });
+
+        it('When user clicks on any starter then it should get written in the \'Write your plan\' text input field', () => {
+            thinkSpherePage.steps.verifySentenceStartersDropdownFunctionality();
+        });
+
+        it('\'Planning journal\' write wrapper should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.planningWriteWrapper(), 'visible');
+        });
+
+        it('\'The problem is asking me to\' section should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.problemAskingWrapper(), 'visible');
+        });
+
+        it('\'The problem is asking me to\' subheading should be present', () => {
+            thinkSpherePage.steps.verifyProblemAskingHeading();
+        });
+
+        it('Text area with placeholder \'Enter your text here\' should be present under \'The problem is asking me to\' section', () => {
+            thinkSpherePage.steps.verifyProblemAskingTextArea();
+        });
+
+        it('Mic button should be present under \'The problem is asking me to\' section', () => {
+            thinkSpherePage.steps.verifyProblemAskingMicSection();
+        });
+
+        it('User should be able to write in the \'Enter your text here\' textarea under \'The problem is asking me to\' section', () => {
+            thinkSpherePage.steps.verifyProblemAskingTextAreaFunctionality('This is a test text for the problem.');
+        });
+
+        it('\'Add strategies to plan\' section should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategiesToPlanWrapper(), 'visible');
+        });
+
+        it('\'Add strategies to plan\' subheading should be present', () => {
+            thinkSpherePage.steps.verifyStrategiesToPlanHeading();
+        });
+
+        it('By default the strategy chips should not present under \'Add strategies to plan\' section', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategyChip(), 'notExist');
+        });
+
+        it('\'Write your plan\' section should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.writePlanWrapper(), 'visible');
+        });
+
+        it('\'Write your plan\' subheading should be present', () => {
+            thinkSpherePage.steps.verifyWritePlanHeading();
+        });
+
+        it('Text area with placeholder \'Enter your plan here\' should be present under \'Write your plan\' section', () => {
+            thinkSpherePage.steps.verifyWritePlanTextArea();
+        });
+
+        it('Mic button should be present under \'Write your plan\' section', () => {
+            thinkSpherePage.steps.verifyWritePlanMicSection();
+        });
+
+        it('User should be able to write in the \'Enter your plan here\' textarea under \'Write your plan\' section', () => {
+            thinkSpherePage.steps.verifyWritePlanTextAreaFunctionality('This is a test plan.');
+        });
+
+        it('When user click on strategy list it should display inside \'Add strategies to plan\' wrapper in the form of chip', () => {
+            thinkSpherePage.steps.clickOnStrategiesPreviewListLI();
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategyChipWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategyChip(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.strategyChip(), 'Look for a pattern');
+        });
+        
+        it('CSS of strategy chip when it is not selected', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.strategyChip(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'color': css.color.sectionHeading,
+                'border-radius': '20px',
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('When user click on strategy chip it should get written in the \'Write your plan\' text input field', () => {
+            thinkSpherePage.steps.verifyStrategyChipClickFunctionality();
+        });
+        
+        it('CSS of strategy chip when it is selected and CSS of planning journal section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.strategyChip(), {
+                'background-color': css.color.secondaryBtnBorder,
+                'border': `1px solid ${css.color.primaryBtnBg}`,
+            });
+
+            utilities.verifyCSS(thinkSpherePage.planningPreviewHeading(), {
+                'color': css.color.primaryBtnBorder,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold,
+            });
+            
+            utilities.verifyCSS(thinkSpherePage.planningWriteWrapper(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'border-radius': '12px'
+            });
+
+            utilities.verifyCSS(thinkSpherePage.problemAskingWrapper(), {
+                'padding': '16px 16px 14px',
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`
+            });
+
+            utilities.verifyCSS(thinkSpherePage.strategiesToPlanWrapper(), {
+                'padding': '16px',
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`
+            });
+
+            utilities.verifyCSS(thinkSpherePage.writePlanWrapper(), {
+                'padding': '16px'
+            });
+
+            thinkSpherePage.problemAskingWrapper()
+                .within(() => {
+                    utilities.verifyCSS(thinkSpherePage.subheadingWrapper(), {
+                        'color': css.color.primaryBtnBorder,
+                        'font-size': css.fontSize.normal,
+                        'font-weight': css.fontWeight.bold,
+                    });
+                });
+
+            thinkSpherePage.strategiesToPlanWrapper()
+                .within(() => {
+                    utilities.verifyCSS(thinkSpherePage.subheadingWrapper(), {
+                        'color': css.color.primaryBtnBorder,
+                        'font-size': css.fontSize.normal,
+                        'font-weight': css.fontWeight.bold,
+                    });
+                });
+
+            thinkSpherePage.writePlanWrapper()
+                .within(() => {
+                    utilities.verifyCSS(thinkSpherePage.subheadingWrapper(), {
+                        'color': css.color.primaryBtnBorder,
+                        'font-size': css.fontSize.normal,
+                        'font-weight': css.fontWeight.bold,
+                    });
+                });
+        });
+
+        it('Accessibility of planning journal', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.PlanningPreviewWrapper());
+        });
+    });
+});

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

@@ -0,0 +1,141 @@
+import uuid from 'react-uuid';
+import { thinkSpherePage } from "../../../pages";
+import { browseItemsPage } from "../../../pages/components/browseItemsPage";
+import { commonComponents } from "../../../pages/components/commonComponents";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Student view : ThinkSphere Question - Review Section', () => {
+    const uuidString = uuid();
+
+    before(() => {
+        cy.loginAs('admin');
+        cy.createThinkSphereItem(uuidString, true);
+        thinkSpherePage.steps.visitThinksphereBrowseItemsPage();
+        browseItemsPage.steps.clickOnItemReferenceId(uuidString);
+        browseItemsPage.steps.clickOnAddReviewItem();
+        thinkSpherePage.steps.createReviewQuestion();
+        thinkSpherePage.steps.visitThinksphereBrowseItemsPage();
+        browseItemsPage.steps.clickOnActionButton();
+        browseItemsPage.steps.clickOnActionMenuItem(0);
+        thinkSpherePage.steps.clickOnReviewTab();
+    });
+
+    describe('\'Question instruction\' section', () => {
+        abortEarlySetup();
+        it('\'Question instruction\' section should be present', () => {
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewTexWrapperVisibility('question instruction text');
+        });
+
+        it('CSS of \'Question instruction\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.questionInstructionPreviewTexWrapper(), {
+                'border-radius': '12px',
+                'background-color': css.color.questionInstructionBG,
+                'padding': '10px 170px 10px 27px',
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('Question instruction image should visibile in the preview', () => {
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewImageWrapperVisibility();
+        });
+
+        it('CSS of question instruction image section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.questionInstructionPreviewImageWrapper(), {
+                'width': '143px',
+                'height': '110px',
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'background-color': css.color.primaryBtn,
+            });
+            utilities.verifyCSS(thinkSpherePage.questionInstructionPreviewImageExpandButton(), {
+                'width': '24px',
+                'height': '24px',
+                'box-shadow': `${css.color.boxShadow} 0px 2px 8px 0px`,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'border-radius': '4px',
+                'background-color': css.color.primaryBtn,
+            });
+        });
+
+        it('When user clicks on expand question instruction image then it should open in the popup', () => {
+            thinkSpherePage.steps.clickOnQuestionInstructionExpandImageButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.dialogBoxRoot(), 'visible');
+            thinkSpherePage.steps.verifyQuestionImagePopup();
+        });
+
+        it('CSS of question instruction image popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.dialogBoxRoot(), {
+                'border-radius': '8px',
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'box-shadow': `${css.color.dialogBoxBoxShadow} 0px 0px 10px 0px`,
+            });
+            utilities.verifyCSS(thinkSpherePage.closeExpandImagePopupButton(), {
+                'background-color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'color': css.color.primaryBtnBorder,            
+            });
+        });
+
+        it('When user clicks on close expand image popup button then it should remove the popup', () => {
+            thinkSpherePage.steps.clickOnCloseExpandImagePopupButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.dialogBoxRoot(), 'notExist');
+        });
+    });
+
+    describe('\'Check your math\' section', () => {
+        abortEarlySetup();
+        it('\'Check your math\' section header should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.checkYourMathHeading(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.checkYourMathHeading(), 'Check your math');
+        });
+
+        it('CSS of \'Check your math\' section header', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.checkYourMathHeading(), {
+                'color': css.color.primaryBtnBorder,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold,
+            });
+        });
+        
+        it('\'The problem is asking me to\' section header should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.problemAskingToMeTextWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.problemAskingToMeTextWrapper(), 'The problem is asking me to...');
+        });
+
+        it('Review question should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.reviewQuestionWrapper(), 'visible');
+        });
+
+        it('CSS of \'The problem is asking me to\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.problemAskingToMeTextWrapper(), {
+                'color': css.color.primaryBtnBorder,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(thinkSpherePage.reviewComponentWrapper(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'border-radius': '12px'
+            });
+        });
+
+        it('When User type in the \'The problem is asking me to\' in the plan tab, then it should render in the \'The problem is asking me to\' in the review tab', () => {
+            thinkSpherePage.steps.clickOnPlanTab();
+            thinkSpherePage.steps.verifyProblemAskingTextAreaFunctionality('This is a test text for the problem.');
+            thinkSpherePage.steps.clickOnReviewTab();
+            utilities.verifyElementVisibilityState(thinkSpherePage.problemStatementWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.problemStatementWrapper(), 'This is a test text for the problem.');
+        });
+
+        it('CSS of \'The problem is asking me to\' section statement', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.problemStatementWrapper(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+    });
+});