itemengine-cypress-automation 1.0.387-IEI-5793-1ae20b6.0 → 1.0.387-IEI-6273-6d750cf.0

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

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

@@ -0,0 +1,65 @@
+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";
+import { editSectionWhiteBoardToolButtons, whiteBoardTools } from '../../../fixtures/thinkSphereWhiteboardTools';
+const css = Cypress.env('css');
+
+describe('Grading view : ThinkSphere Question - Solve Section', () => {
+    before(() => {
+        cy.loginAs('admin');
+        thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+        cy.barsPreLoaderWait();
+        thinkSpherePage.steps.switchToEditTab();
+        thinkSpherePage.steps.addTextInQuestionInstructionsInputField('question instruction text');
+        thinkSpherePage.steps.clickOnSolvePhaseAccordionIcon();
+        thinkSpherePage.steps.expandCustomizeToolsAndControls();
+        editSectionWhiteBoardToolButtons.forEach((toolName) => {
+            thinkSpherePage.steps.selectOptionFromToolsAndControls(toolName);
+        })
+        thinkSpherePage.steps.clickOnSaveButton();
+        cy.visit('/item-engine/thinksphere/browse-items');
+        browseItemsPage.steps.clickOnActionButton();
+        browseItemsPage.steps.clickOnActionMenuItem(0);
+        thinkSpherePage.steps.clickOnSolveTab();
+        thinkSpherePage.steps.submitResponseAndGotoGradingView();
+        thinkSpherePage.steps.clickOnSolveTab();
+    });
+
+    describe('\'Question instruction\' section', () => {
+        abortEarlySetup();
+        it('\'Question instruction\' section should be present', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'question instruction text');
+        });
+
+    });
+
+    describe('Whiteboard and its sections should be present', () => {
+        abortEarlySetup();
+        thinkSpherePage.tests.verifyWhiteBoardAndSections();
+    });
+
+    describe('Whiteboard tools and sub tools should be present', () => {
+        abortEarlySetup();
+        const allToolIds = whiteBoardTools.map(tool => tool.dataTestId);
+        const defaultToolIds = whiteBoardTools.filter(tool => tool.isDefault).map(tool => tool.dataTestId);
+        thinkSpherePage.tests.verifyDisabledWhiteboardTools(defaultToolIds, allToolIds);
+    });
+
+    describe('Verify the Your plan Button', () => {
+        abortEarlySetup();
+        it('Your Plan button should be visible and display the correct disabled styles', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.yourPlanButton(), 'visible');
+            utilities.verifyCSS(thinkSpherePage.yourPlanButton(), {
+                'background-color' : css.color.boxShadow,
+                'color': css.color.primaryBtnDisabled,
+            });
+        });
+
+        it('Your Plan button should have disabled attribute', () => {
+            thinkSpherePage.steps.verifyYourPlanButtonInDisableState();
+        });
+    });
+});

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

@@ -18,6 +18,28 @@ const sentenceStartersTextDefault = [
     'I will check my work by',
     'If my strategy is not working, I will'
 ];
+const preAuthoredStrategyVideos = [
+    {
+        displayName: 'Create_a_model',
+        duration: '00:24',
+    },
+    {
+        displayName: 'Look_for_a_pattern',
+        duration: '00:18',
+    },
+    {
+        displayName: 'Guess_check_and_revise',
+        duration: '00:17',
+    },
+    {
+        displayName: 'Try_with_friendlier_numbers',
+        duration: '00:26',
+    },
+    {
+        displayName: 'Show_with_an_equation',
+        duration: '00:22',
+    }
+];
 describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
     before(() => {
         cy.loginAs('admin');
@@ -55,19 +77,37 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
         });
     });
 
+    describe('\'Plan Phase\' Section Strategies list component - Pre-authored Videos', () => {
+        abortEarlySetup();
+        it('Strategies list options should have Pre-authored Videos', () => {
+            thinkSpherePage.steps.verifyPreAuthoredVideoTitles(preAuthoredStrategyVideos.map(video => video.displayName));
+        })
+        it('When the user clicks on the video, the respective video should play', () => {
+            thinkSpherePage.steps.verifyPreAuthoredVideos(preAuthoredStrategyVideos);
+        });
+    });
+
     describe('\'Plan Phase\' Video Preview Component', () => {
         const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
         const playbackSpeedMultiplier = [1, 1.25, 1.5, 2];
+        before(()=>{
+            thinkSpherePage.steps.addOption('strategy');
+            thinkSpherePage.steps.addOptionText('strategy', 5, "Custom strategy");
+        })
+
+        after(() => {
+            thinkSpherePage.steps.deleteOption(5);
+        })
 
         it('When the video is uploaded it should display the video and its buttons correctly', () => {
-            thinkSpherePage.videoLinkComponent()
+            thinkSpherePage.videoLinkComponent(5)
                 .within(() => {
                     thinkSpherePage.uploadVideoLinkButton()
                         .click();
                 });
             thinkSpherePage.steps.uploadVideoFile('uploads/sample.mp4');
             cy.wait(10000);
-            thinkSpherePage.videoLinkComponent()
+            thinkSpherePage.videoLinkComponent(5)
                 .within(() => {
                     thinkSpherePage.uploadVideoLinkButton()
                         .click();
@@ -151,7 +191,7 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
 
         it('When video player is in paused state and user clicks on \'Play\' button, then playback should get resumed and \'Play\' button should get replaced with \'Pause\' button.', () => {
             thinkSpherePage.videoPopupCloseButton().click();
-            thinkSpherePage.videoLinkComponent()
+            thinkSpherePage.videoLinkComponent(5)
                 .within(() => {
                     thinkSpherePage.uploadVideoLinkButton()
                         .click();
@@ -296,7 +336,7 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
 
         it('When the user hovers over the playback speed button, a tooltip \'Playback speed\' should be displayed and on hovering away from the button, the tooltip should disappear', () => {
             thinkSpherePage.videoPopupCloseButton().click();
-            thinkSpherePage.videoLinkComponent()
+            thinkSpherePage.videoLinkComponent(5)
                 .within(() => {
                     thinkSpherePage.uploadVideoLinkButton()
                         .click();
@@ -496,7 +536,7 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
     
             thinkSpherePage.tests.verifyResetToDefaultFunctionality(strategiesTextDefault, 'strategy');
     
-            thinkSpherePage.tests.verifyVideoLinkComponent();
+            thinkSpherePage.tests.verifyVideoLinkComponent(5);
     
             it('Accessibility of \'Plan Phase\' Section Strategies list component', { tags: 'a11y' }, () => {
                 cy.checkAccessibility(thinkSpherePage.planStrategySection());

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

@@ -24,11 +24,14 @@ describe('Preview question : ThinkSphere Question - Plan Section - preview tab',
         thinkSpherePage.steps.switchToPreviewTab();
     });
 
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name');
+    });
+
     describe('\'Question instruction\' section', () => {
         abortEarlySetup();
         it('\'Question instruction\' section should be present', () => {
-            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'visible');
-            utilities.verifyInnerText(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'question instruction text');
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewTexWrapperVisibility('question instruction text');
         });
 
         it('CSS of \'Question instruction\' section', { tags: 'css' }, () => {
@@ -46,8 +49,7 @@ describe('Preview question : ThinkSphere Question - Plan Section - preview tab',
             cy.wait(1000);
             thinkSpherePage.steps.uploadFile('uploads/image.png');
             thinkSpherePage.steps.switchToPreviewTab();
-            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageWrapper(), 'visible');
-            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageExpandButton(), 'visible');
+            thinkSpherePage.steps.verifyQuestionInstructionPreviewImageWrapperVisibility();
         });
 
         it('CSS of question instruction image section', { tags: 'css' }, () => {
@@ -279,7 +281,7 @@ describe('Preview question : ThinkSphere Question - Plan Section - preview tab',
 
         it('\'Planning journal\' section heading should be present', () => {
             utilities.verifyElementVisibilityState(thinkSpherePage.planningPreviewHeading(), 'visible');
-            utilities.verifyInnerText(thinkSpherePage.planningPreviewHeading(), 'Planing journal');
+            utilities.verifyInnerText(thinkSpherePage.planningPreviewHeading(), 'Planning journal');
         });
 
         it('\'Sentence starters\' label and dropdown should be displayed', () => {
@@ -473,14 +475,12 @@ describe('Preview question : ThinkSphere Question - Plan Section - preview tab',
                 });
         });
         
-        it('CSS of strategy chip when it is selected', { tags: 'css' }, () => {
+        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}`,
             });
-        });
 
-        it('CSS of planning journal section', { tags: 'css' }, () => {
             utilities.verifyCSS(thinkSpherePage.planningPreviewHeading(), {
                 'color': css.color.primaryBtnBorder,
                 'font-size': css.fontSize.heading,

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