itemengine-cypress-automation 1.0.389-graphAndCharts-04d27f6.0 → 1.0.390-IEI-6314-testScriptForTextEntryMathValidations-dcad527.0

package/cypress/e2e/ILC/ThinkSphere/editThinkSphereQuestion.smoke.js

@@ -1,6 +1,8 @@
 import { thinkSpherePage } from '../../../pages/thinkSpherePage';
+import { browseItemsPage } from "../../../pages/components/browseItemsPage";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
 
 const editedStrategies = [
     'Edited strategy 1',
@@ -60,11 +62,15 @@ const editedFontSize = 'Normal';
 describe('Edit Question and edit item', () => {
     before(() => {
         cy.loginAs('admin');
-        cy.deleteThinkSphereItem('~zzz item name');
-        cy.createThinkSphereItem('~zzz item name');
+        cy.deleteThinkSphereItem('~zzz item name test test test');
+        cy.createThinkSphereItem('~zzz item name test test test', true);
         thinkSpherePage.steps.visitThinksphereBrowseItemsPage();
     });
 
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name test test test');
+    });
+
     describe('Edit question', () => {
         abortEarlySetup();
         it('When user edits the question instructions, then the changes should be saved successfully and edited question instruction should get displayed in preview side', () => {
@@ -72,66 +78,23 @@ describe('Edit Question and edit item', () => {
             thinkSpherePage.steps.clearQuestionInstructionsInputField();
             thinkSpherePage.steps.addTextInQuestionInstructionsInputField('Edit question instructions');
             thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
-            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'visible');
-            utilities.verifyInnerText(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'Edit question instructions');
+            thinkSpherePage.steps.switchToPreviewTab();
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewTexWrapperVisibility('Edit question instructions');
         });
 
         it('When user edits the question instructions image, then the changes should be saved successfully and edited question instruction image should get displayed in preview side', () => {
+            thinkSpherePage.steps.switchToEditTab();
             thinkSpherePage.steps.clickOnEditQuestionIcon();
-            cy.wait(1000);
             thinkSpherePage.steps.uploadFile('uploads/image.png');
             thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
-            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageWrapper(), 'visible');
-            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageExpandButton(), 'visible');
+            thinkSpherePage.steps.switchToPreviewTab();
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewImageWrapperVisibility();
         });
 
-        it('When user edits the strategies and sentence starers, then the changes should be saved successfully and edited strategies and sentence starers should get displayed in preview side', () => {
-            thinkSpherePage.steps.clickOnEditQuestionIcon();
-            editedStrategies.forEach((strategy, index) => {
-                thinkSpherePage.steps.addOptionText('strategy', index, strategy);
-            });
-            cy.wait(2000);
-            editedSentenceStarters.forEach((sentenceStarter, index) => {
-                thinkSpherePage.steps.addOptionText('sentenceStarter', index, sentenceStarter);
-            });
-            cy.wait(2000);
-            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
-            editedStrategies.forEach((label, index) => {
-                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), index), label);
-            });
-            thinkSpherePage.steps.expandChooseStarterDropdown();
-            editedSentenceStarters.forEach((label, index) => {
-                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
-            });
-            utilities.clickOnBody();
-        });
-        
-        it('When user select unselect the strategies and sentence starers, then the changes should be saved successfully and selected strategies and sentence starers should get displayed in preview side', () => {
-            thinkSpherePage.steps.clickOnEditQuestionIcon();
-            editedStrategies.forEach((strategy, index) => {
-                if(!selectStrategies.includes(strategy)){
-                    thinkSpherePage.steps.selectOption('strategy', index);
-                }
-            });
-            cy.wait(2000);
-            editedSentenceStarters.forEach((sentenceStarter, index) => {
-                if(!selectSentenceStarters.includes(sentenceStarter)){
-                    thinkSpherePage.steps.selectOption('sentenceStarter', index);
-                }
-            });
-            cy.wait(2000);
-            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
-            selectStrategies.forEach((label, index) => {
-                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), index), label);
-            });
-            thinkSpherePage.steps.expandChooseStarterDropdown();
-            selectSentenceStarters.forEach((label, index) => {
-                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
-            });
-            utilities.clickOnBody();
-        });
+        thinkSpherePage.tests.verifyStrategiesAndSentenceStartersSection({editedStrategies, editedSentenceStarters, selectStrategies, selectSentenceStarters});
 
         it('When user updates the solve phase toolbar options and controls, then it should get updated successfully', () => {
+            thinkSpherePage.steps.switchToEditTab();
             thinkSpherePage.steps.clickOnEditQuestionIcon();
             thinkSpherePage.steps.expandCustomizeToolsAndControls();
             thinkSpherePage.steps.selectTools(newSelectedToolbarOptions, 0);
@@ -151,9 +114,9 @@ describe('Edit Question and edit item', () => {
             thinkSpherePage.steps.clickOnImageRadioButton();
             thinkSpherePage.steps.uploadWhiteBoardImage('uploads/highlightImage.jpg');
             thinkSpherePage.steps.addInputToOpacityInputField(whiteBoardImageOpacity);
-            thinkSpherePage.imageAlternativeTextInputField().type(alternateTextForImage);
-            cy.wait(2000);
+            thinkSpherePage.steps.addImageAlternativeTextInputFieldText(alternateTextForImage);
             thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            thinkSpherePage.steps.switchToPreviewTab();
         });
 
         it('When user updates solve phase data, then updated solve phase data should reflect to user when revisit to edit the question', () => {
@@ -180,6 +143,134 @@ describe('Edit Question and edit item', () => {
             thinkSpherePage.steps.clickOnEditThinkSphereItem();
             thinkSpherePage.steps.expandAdditionalSettings();
             utilities.verifyInnerText(thinkSpherePage.fontSizeDropdown(), editedFontSize);
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+        });
+    });
+
+    describe('Edit review question', () => {
+        abortEarlySetup();
+        before(() => {
+            browseItemsPage.steps.clickOnAddReviewItem();
+            thinkSpherePage.steps.createReviewQuestion();
+            thinkSpherePage.steps.switchToPreviewTab();
+            thinkSpherePage.steps.clickOnReviewTab();
+        });
+
+        it('\'Question instruction\' section should be present', () => {
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewTexWrapperVisibility('Edit question instructions');
+        });
+
+        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.heading,
+                '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');
+        });
+
+        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,
+            });
+        });
+
+        it('When switch to grading view then it should show the correct answer for review question', () => {
+            thinkSpherePage.steps.switchToGradingView();
+            thinkSpherePage.steps.verifyCorrectAnswerLabel();
+            thinkSpherePage.steps.switchToStudentView();
         });
     });
 });

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

@@ -265,6 +265,8 @@ describe('Create question page - Essay Response: Edit category', () => {
             utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
             editCategoryFlyout.steps.openEditCategoryFlyout();
             utilities.verifyElementDisabled(editCategoryFlyout.buttonReset());
+            editCategoryFlyout.steps.verifyCategoryCharacterNotSelected(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`)
+        });
     });
 
     describe('Save a edited category', () => {

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

@@ -0,0 +1,334 @@
+import uuid from 'react-uuid';
+import { thinkSpherePage } from "../../../pages";
+import { browseItemsPage } from "../../../pages/components/browseItemsPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Grading 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);
+        thinkSpherePage.steps.clickOnStrategiesPreviewListLI();
+        thinkSpherePage.steps.stepsBeforeGradingView();
+    });
+
+    describe('\'Question instruction\' section', () => {
+        abortEarlySetup();
+        it('\'Question instruction\' section should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.questionInstructionPreviewTexWrapper(), '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 visible 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('Accessibility of question instruction image popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.dialogBoxRoot());
+            cy.checkAccessibility(thinkSpherePage.closeExpandImagePopupButton());
+        });
+
+        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.strategyTextDisabled,
+                'margin-right': '40px',
+                'font-size': '18px',
+                'font-weight': '600',
+            });
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), 1), {
+                'color': css.color.primaryBtnBg,
+                'font-size': '18px',
+                'font-weight': '600',
+            });
+        });
+
+        it('When the user clicks on add new strategy button in grading view, no popup should be displayed and the button should not be accessible with keyboard', () => {
+            thinkSpherePage.steps.verifyAddStrategiesButtonDisabled()
+        });
+
+        it('Strategies list buttons should be in disabled state', () => {
+            thinkSpherePage.steps.verifyStrategiesListButtonDisabled()
+        });
+        
+        it('CSS of strategies list in selected state', { tags: 'css' }, () => {
+            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,
+            });
+        });
+
+        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 and the dropdown should be disabled', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.chooseStarterLabel(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.chooseStarterDropdown(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.chooseStarterLabel(), 'Sentence starter');
+        });
+
+        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('\'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 and it should be disabled', () => {
+            thinkSpherePage.steps.verifyProblemAskingMicSection(true);
+        });
+
+        it('User should not be able to write in the \'Enter your text here\' textarea under \'The problem is asking me to\' section', () => {
+            thinkSpherePage.steps.verifyDisabledProblemTextContainer('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('\'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(true);
+        });
+
+        it('User should not be able to write in the \'Enter your plan here\' textarea under \'Write your plan\' section', () => {
+            thinkSpherePage.steps.verifyDisabledWriteYourPlanTextContainer('First, I will look for a pattern ');
+        });
+
+        it('The strategy chip selected by the student should display inside \'Add strategies to plan\' wrapper in the form of chip', () => {
+            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.primaryBtnBg}`,
+                'color': css.color.sectionHeading,
+                'border-radius': '20px',
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBorder,
+            });
+        });
+
+        it('The user should not be able to click on strategy chip', () => {
+            thinkSpherePage.steps.verifyDisabledStrategyChip();
+        });
+
+        it('CSS of planning journal section', { tags: 'css' }, () => {
+            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.secondaryBtnBorderDisabled}`,
+                'border-radius': '12px'
+            });
+
+            utilities.verifyCSS(thinkSpherePage.problemAskingWrapper(), {
+                'padding': '16px 16px 14px',
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorderDisabled}`
+            });
+
+            utilities.verifyCSS(thinkSpherePage.strategiesToPlanWrapper(), {
+                'padding': '16px',
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorderDisabled}`
+            });
+
+            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());
+        });
+    });
+
+});