itemengine-cypress-automation 1.0.372-mcq-flakiness-22ad93f.0 → 1.0.373-IEI-5907-b092308.0

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

@@ -0,0 +1,291 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { thinkSpherePage } from "../../../pages";
+import { editCategoryFlyout } from "../../../pages/components/editCategoryFlyout";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const defaultSelectedCategories = ['numPad', 'keyPad', 'intermediate', 'primary', 'general', 'common', 'algebra', 'geo', 'compare', 'matrices', 'setNotation', 'delimiters', 'trig', 'measurement', 'calculus', 'otherSymbols', 'greekSymbols'];
+
+describe('Create question page - Essay Response: Edit category', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit category flyout contents', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+        });
+
+        it('When user clicks on the Edit category icon below the categories in the Equation Editor section the Edit category flyout should open', () => {
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'visible');
+        });
+
+        it('Title of the flyout should be \'Edit category\'', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBoxTitle(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.dialogBoxTitle(), 'Edit category');
+        });
+
+        it('\'Select the symbols to display to the students.\' help text should be displayed below the title', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.selectSymbolsToDisplayLabel(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.selectSymbolsToDisplayLabel(), 'Select the symbols to display to the students.');
+        });
+
+        it('The name of the category should be displayed in the flyout with a checked checkbox', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.categoryLabel(), 'visible');
+            utilities.verifyInnerText(editCategoryFlyout.categoryLabel(), `${equationEditorCategoriesAndSymbols['general'].displayName}`);
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+            thinkSpherePage.steps.cancelCustomCategory();
+        });
+
+        defaultSelectedCategories.forEach((key) => {
+            if (key === 'numPad') {
+                it(`All the ${equationEditorCategoriesAndSymbols['numPad'].displayName} characters should be displayed and should be in selected state except the last three ones also each one should have necessary tooltips`, () => {
+                    const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['numPad'].symbols);
+                    const selectedSymbolsArray = symbolsArray.slice(0, 10);
+                    const unselectedSymbolsArray = symbolsArray.slice(-3);
+                    editCategoryFlyout.steps.openEditCategoryFlyout(key);
+                    thinkSpherePage.steps.verifyCategoryCharactersAndSelectedState(selectedSymbolsArray);
+                    thinkSpherePage.steps.verifyCategoryCharactersAndUnSelectedState(unselectedSymbolsArray);
+                    thinkSpherePage.steps.cancelCustomCategory();
+                });
+            } else if (key !== 'keyPad') {
+                it(`All the ${equationEditorCategoriesAndSymbols[key]?.displayName} characters should be displayed and should be in selected state also each one should have necessary tooltips`, () => {
+                    const symbolsArray = Object.values(equationEditorCategoriesAndSymbols[key]?.symbols);
+                    editCategoryFlyout.steps.openEditCategoryFlyout(key);
+                    thinkSpherePage.steps.verifyCategoryCharactersAndSelectedState(symbolsArray);
+                    editCategoryFlyout.steps.verifyCategoryCharactersDragIcon();
+                    thinkSpherePage.steps.cancelCustomCategory();
+                });
+            }
+        })
+
+        it(`All the ${equationEditorCategoriesAndSymbols['numPad'].displayName} characters should be displayed and should be in selected state except the last three ones`, () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['numPad'].symbols);
+            const selectedSymbolsArray = symbolsArray.slice(0, -3);
+            const unselectedSymbolsArray = symbolsArray.slice(-3);
+            editCategoryFlyout.steps.verifyCategoryCharactersAndSelectedState(selectedSymbolsArray);
+            editCategoryFlyout.steps.verifyCategoryCharactersDragIcon();
+            thinkSpherePage.steps.verifyCategoryCharactersAndUnSelectedState(unselectedSymbolsArray);
+        });
+
+        it('Reset button should be displayed in the flyout', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.buttonReset(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.buttonReset(), 'Reset');
+            utilities.verifyElementVisibilityState(editCategoryFlyout.resetIcon(), 'exist');
+        });
+
+        it('\'Save\' button should be displayed in the flyout', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.buttonSave(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.buttonSave(), 'Save');
+        });
+
+        it('CSS of Edit category flyout components', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCheckbox().parents('.MuiCheckbox-root').find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(editCategoryFlyout.selectSymbolsToDisplayLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterDragIcon(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterDragIcon().eq(0).find('path').eq(1), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterTickIcon().eq(0).find('path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(thinkSpherePage.buttonSave(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(thinkSpherePage.buttonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of Edit category flyout components', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.dialogBox());
+        });
+
+        it('\'Cancel\' button should be displayed and on clicking it the flyout should close', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.buttonCancel(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.buttonCancel(), 'Cancel');
+            thinkSpherePage.steps.cancelCustomCategory();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+        });
+    });
+
+    describe('Category checkbox validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+        });
+
+        it('When user deselects any one character by clicking on it then the category checkbox should be in partially checked state', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel);
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsPartiallyChecked();
+        });
+
+        it('When user clicks on the partially checked category checkbox then all the characters should be selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsPartiallyChecked();
+            editCategoryFlyout.steps.checkCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user clicks on checked category checkbox then all the characters should get de-selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked()
+            editCategoryFlyout.steps.uncheckCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersNotSelected()
+        });
+
+        it('CSS of de-selected character', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('.drag-icon-button-custom-format'), {
+                'background-color': css.color.defaultBackgrounds
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('.drag-icon-button-custom-format path').eq(1), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+        });
+
+        it('Accessibility of de-selected character', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.categoryCharacters(0).parents('[class*="DragItemstyles__ItemContainer"]'))
+        });
+
+        it('When user clicks on the unchecked category checkbox then all the characters should get selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsUnchecked()
+            editCategoryFlyout.steps.checkCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user clicks on all the selected characters then the category checkbox should get unchecked', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+            editCategoryFlyout.steps.deselectCategoryCharacter('QuestionMark selected');
+            editCategoryFlyout.steps.deselectCategoryCharacters(equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel);
+            editCategoryFlyout.steps.deselectCategoryCharacters(equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel);
+            editCategoryFlyout.steps.deselectCategoryCharacters('colon');
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsUnchecked();
+        });
+
+        it('When user clicks on all the de-selected characters the category checkbox should get checked', () => {
+            editCategoryFlyout.steps.selectCategoryCharactersUsingIndex(0);
+            editCategoryFlyout.steps.selectCategoryCharacters('Dollar');
+            editCategoryFlyout.steps.selectCategoryCharacters('Cents');
+            editCategoryFlyout.steps.selectCategoryCharacters('Colon');
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+        });
+    });
+
+    describe('\'Reset\' button validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+        });
+
+        it('When user opens the Edit category flyout then the Reset button should be disabled by default', () => {
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset());
+        });
+
+        it('When user de-selects any character by clicking on it then the Reset button should get enabled', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            utilities.verifyElementNotDisabled(editCategoryFlyout.buttonReset());
+        });
+
+        it('CSS of enabled Reset button', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.buttonReset(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of enabled Reset button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.buttonReset());
+        })
+
+        it('When user clicks on the Reset button the changes should be reverted and the all the character should be selected again', () => {
+            editCategoryFlyout.steps.reset();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user de-selects characters and re-selects them then the Reset button should be disabled', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`)
+            editCategoryFlyout.steps.selectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`)
+            editCategoryFlyout.steps.selectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`)
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset())
+        });
+
+        it('When user edits and saves the category then on opening the same Edit category flyout the \'Reset\' button should be disabled and the previously Saved changes should be displayed', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`);
+            thinkSpherePage.steps.saveCustomCategory();
+            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', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+            editCategoryFlyout.steps.openEditCategoryFlyout()
+        });
+
+        it('When user edits a category and clicks on Cancel button then the flyout should close and the changes should not be saved', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`);
+            thinkSpherePage.steps.cancelCustomCategory();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+            editCategoryFlyout.steps.openEditCategoryFlyout()
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+        
+    });
+});

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());
+        });
+    });
+
+});