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

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

@@ -0,0 +1,541 @@
+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('Preview question : ThinkSphere Question - Plan Section - preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+        cy.deleteThinkSphereItem('~zzz item name');
+        cy.createThinkSphereItem('~zzz item name');
+        cy.visit('/item-engine/thinksphere/browse-items');
+        browseItemsPage.steps.clickOnItemReferenceId('~zzz item name');
+        thinkSpherePage.steps.clickOnEditQuestionIcon();
+        thinkSpherePage.steps.switchToPreviewTab();
+    });
+
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name');
+    });
+
+    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 10px 10px 27px',
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('When user add question instruction image then, it should visibile in the preview', () => {
+            thinkSpherePage.steps.switchToEditTab();
+            cy.wait(1000);
+            thinkSpherePage.steps.uploadFile('uploads/image.png');
+            thinkSpherePage.steps.switchToPreviewTab();
+            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.dialogBoxRoot()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionImagePopup(), 'visible');
+                    utilities.verifyElementVisibilityState(thinkSpherePage.closeExpandImagePopupButton(), 'visible');
+                });
+        });
+
+        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('Number of strategies in preview tab should be same as that in edit tab', () => {
+            let editTabCount, previewTabCount;
+            thinkSpherePage.steps.switchToEditTab();
+            thinkSpherePage.strategiesInputBoxEditTab()
+                .its('length')
+                .then((count) => {
+                    editTabCount = count;
+                    cy.log('Edit Tab Count:', editTabCount);
+                });
+            thinkSpherePage.steps.switchToPreviewTab();
+            thinkSpherePage.strategiesBoxPreviewTab()
+                .its('length')
+                .then((count) => {
+                    previewTabCount = count;
+                    cy.log('Preview Tab Count:', previewTabCount);
+                    expect(previewTabCount).to.equal(editTabCount);
+                });
+        });
+        
+        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.getNthElement(thinkSpherePage.strategiesBoxPreviewTab(), 0)
+                .trigger('mouseout');
+        });
+
+        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', () => {
+            let countBeforeOpeningPopup, countAfterClosingPopup;
+            cy.get(thinkSpherePage.strategiesBoxPreviewTab())
+                .its('length')
+                .then((count) => {
+                    countBeforeOpeningPopup = count;
+                    cy.log('Count before opening popup:', countBeforeOpeningPopup);
+            });
+            thinkSpherePage.addNewStrategyButton().click();
+            thinkSpherePage.addStrategyPopupCancelButton().click();
+            cy.get(thinkSpherePage.strategiesBoxPreviewTab())
+                .its('length')
+                .then((count) => {
+                    countAfterClosingPopup = count;
+                    cy.log('Count after closing popup:', countAfterClosingPopup);
+                    expect(countAfterClosingPopup).to.equal(countBeforeOpeningPopup);
+            });
+        });
+
+        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', () => {
+            let countBeforeOpeningPopup, countAfterClosingPopup;
+            thinkSpherePage.strategiesBoxPreviewTab()
+                .its('length')
+                .then((count) => {
+                    countBeforeOpeningPopup = count;
+                    cy.log('Count before opening popup:', countBeforeOpeningPopup);
+            });
+            thinkSpherePage.addNewStrategyButton().click();
+            thinkSpherePage.strategyNameInputField().type('Test Strategy');
+            thinkSpherePage.addStrategyPopupSaveButton().click();
+            thinkSpherePage.strategiesBoxPreviewTab()
+                .its('length')
+                .then((count) => {
+                    countAfterClosingPopup = count;
+                    cy.log('Count after closing popup:', countAfterClosingPopup);
+                    expect(countAfterClosingPopup).to.equal(countBeforeOpeningPopup + 1);
+            });
+        });
+
+        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 not present by default besides the strategy name', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.videoIconWrapper(), 'notExist');
+        });
+
+        it('When user uploads a video inside strategy then video icon should be visible besides the strategy name', () => {
+            thinkSpherePage.steps.switchToEditTab();
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample2MB.mp4');
+            cy.interceptGraphql('getFileScanStatus');
+            cy.wait(5000);
+            thinkSpherePage.steps.switchToPreviewTab();
+            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.dialogBoxRoot()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.dialogBoxTitle(), 'visible');
+                    utilities.verifyInnerText(thinkSpherePage.dialogBoxTitle(), 'Sample2mb.mp4');
+                    utilities.verifyElementVisibilityState(thinkSpherePage.buttonClose(), 'visible');
+                });
+            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.chooseStarterTextIconWrapper()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.starterIocn(), 'visible');
+                    utilities.verifyInnerText(thinkSpherePage.starterTextWrapper(), 'Starters');
+                });
+            thinkSpherePage.chooseStarterDropdown()
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        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');
+            sentenceStartersTextDefault.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
+            });
+            utilities.clickOnBody();
+        });
+
+        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.dropdownDefaultBG
+            });
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.chooseStartersListOptions(), 1), {
+                'background-color': css.color.transparent
+            });
+            cy.log('Post step: Closing the Sentence starters dropdown');
+            utilities.clickOnBody();
+        });
+
+        it('When user clicks on any starter then it should get written in the \'Write your plan\' text input field', () => {
+            thinkSpherePage.writePlanWrapper()
+                .within(() => {
+                    thinkSpherePage.contentEditableDiv().clear();
+                });
+            thinkSpherePage.steps.expandChooseStarterDropdown();
+            utilities.getNthElement(thinkSpherePage.chooseStartersListOptions(), 1).click();
+            thinkSpherePage.writePlanWrapper()
+                .within(() => {
+                    thinkSpherePage.contentEditableDiv().should('have.value', 'First, I will ');
+                    thinkSpherePage.contentEditableDiv().clear();
+                });
+        });
+
+        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.problemAskingWrapper()
+                .within(() => {
+                    utilities.verifyInnerText(thinkSpherePage.subheadingWrapper(), 'The problem is asking me to');
+                    utilities.verifyElementVisibilityState(thinkSpherePage.subheadingWrapper(), 'visible');
+                });
+        });
+
+        it('Text area with placeholder \'Enter your text here\' should be present under \'The problem is asking me to\' section', () => {
+            thinkSpherePage.problemAskingWrapper()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.contentEditableDiv(), 'visible');
+                    utilities.verifyElementAttribute(thinkSpherePage.contentEditableDiv(), 'placeholder', 'Enter your text here');
+                });
+        });
+
+        it('Mic button should be present under \'The problem is asking me to\' section', () => {
+            thinkSpherePage.problemAskingWrapper()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.micIconWrapper(), 'visible');
+                    utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'role', 'button');
+                    utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'aria-label', 'Mic button');
+                });
+        });
+
+        it('User should be able to write in the \'Enter your text here\' textarea under \'The problem is asking me to\' section', () => {
+            const textToEnter = 'This is a test text for the problem.';
+            thinkSpherePage.problemAskingWrapper()
+                .within(() => {
+                    thinkSpherePage.contentEditableDiv().type(textToEnter);
+                    thinkSpherePage.contentEditableDiv().should('have.value', textToEnter);
+                });
+        });
+
+        it('\'Add strategies to plan\' section should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.strategiesToPlanWrapper(), 'visible');
+        });
+
+        it('\'Add strategies to plan\' subheading should be present', () => {
+            thinkSpherePage.strategiesToPlanWrapper()
+                .within(() => {
+                    utilities.verifyInnerText(thinkSpherePage.subheadingWrapper(), 'Add strategies to plan');
+                    utilities.verifyElementVisibilityState(thinkSpherePage.subheadingWrapper(), 'visible');
+                });
+        });
+
+        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.writePlanWrapper()
+                .within(() => {
+                    utilities.verifyInnerText(thinkSpherePage.subheadingWrapper(), 'Write your plan');
+                    utilities.verifyElementVisibilityState(thinkSpherePage.subheadingWrapper(), 'visible');
+                });
+        });
+
+        it('Text area with placeholder \'Enter your plan here\' should be present under \'Write your plan\' section', () => {
+            thinkSpherePage.writePlanWrapper()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.contentEditableDiv(), 'visible');
+                    utilities.verifyElementAttribute(thinkSpherePage.contentEditableDiv(), 'placeholder', 'Enter your plan here');
+                });
+        });
+
+        it('Mic button should be present under \'Write your plan\' section', () => {
+            thinkSpherePage.writePlanWrapper()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.micIconWrapper(), 'visible');
+                    utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'role', 'button');
+                    utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'aria-label', 'Mic button');
+                });
+        });
+
+        it('User should be able to write in the \'Enter your plan here\' textarea under \'Write your plan\' section', () => {
+            const planTextToEnter = 'This is a test plan.';
+            thinkSpherePage.writePlanWrapper()
+                .within(() => {
+                    thinkSpherePage.contentEditableDiv().type(planTextToEnter);
+                    thinkSpherePage.contentEditableDiv().should('have.value', planTextToEnter);
+                    thinkSpherePage.contentEditableDiv().clear();
+                });
+        });
+
+        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.writePlanWrapper()
+                .within(() => {
+                    thinkSpherePage.contentEditableDiv().clear();
+                });
+            thinkSpherePage.strategyChip().click();
+            thinkSpherePage.writePlanWrapper()
+                .within(() => {
+                    thinkSpherePage.contentEditableDiv().should('have.value', 'look for a pattern ');
+                });
+        });
+        
+        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/previewTabReviewSection.js

@@ -0,0 +1,97 @@
+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('Preview question : ThinkSphere Question - Plan Section - preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+        cy.deleteThinkSphereItem('~zzz item name review test');
+        cy.createThinkSphereItem('~zzz item name review test', true);
+        cy.visit('/item-engine/thinksphere/browse-items');
+        browseItemsPage.steps.clickOnItemReferenceId('~zzz item name review test');
+        browseItemsPage.steps.clickOnAddReviewItem();
+        thinkSpherePage.steps.createReviewQuestion();
+        thinkSpherePage.steps.clickOnEditQuestionIcon();
+        thinkSpherePage.steps.switchToPreviewTab();
+        thinkSpherePage.steps.clickOnReviewTab();
+    });
+
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name review test');
+    });
+
+    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');
+        });
+    });
+});