itemengine-cypress-automation 1.0.381-PR-fixes-1c28a3d.0 → 1.0.381-regressionFixes10June-8dc1710.0

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

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

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

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

package/cypress/e2e/ILC/ToolAudioPlayerNew/headerSection.js

@@ -1,9 +1,12 @@
-import { audioPlayerPage, dialogBoxBase, selectQuestionResourceToolPage } from "../../../pages";
+import { audioPlayerPage, dialogBoxBase, selectQuestionResourceToolPage, itemPreviewPage } from "../../../pages";
+import { browseItemsPage } from "../../../pages/components";
 import utilities from "../../../support/helpers/utilities";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import constants from "../../../fixtures/constants";
 const css = Cypress.env('css');
 
+var itemReferenceID = "";
+
 describe('Create question page - Audio player: Header section and saving resource tool', () => {
     before(() => {
         cy.loginAs('admin');
@@ -99,7 +102,7 @@ describe('Create question page - Audio player: Header section and saving resourc
         });
 
         describe('Validation error messages', () => {
-            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton(['Please upload a file']);
 
             it('Validation error message(s) should be displayed below required input field(s)', () => {
                 utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'visible');
@@ -122,4 +125,89 @@ describe('Create question page - Audio player: Header section and saving resourc
             audioPlayerPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
         });
     });
+
+    describe('Saving a question with incomplete authoring', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('User should be able to save the resource with incomplete authoring and display a snackbar with the text "Saved successfully!" when the Save button is clicked', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton(['Please add a source URL']);
+            audioPlayerPage.steps.saveAQuestionWithIncompleteAuthoring();
+        });
+        audioPlayerPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+    });
+
+    describe('User should be able to edit incomplete authored resource', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.saveAQuestionWithIncompleteAuthoring();
+            audioPlayerPage.steps.editItem();
+        });
+
+        it('Warning icons should be displayed on the required input fields', () => {
+            audioPlayerPage.steps.verifyWarningIconOnRequiredFields([
+                'Please add a source URL',
+            ]);
+        });
+
+        it('When required input fields are filled then warning icons should disappear', () => {
+            audioPlayerPage.steps.uploadAudioFile('uploads/sample.mp3');
+            audioPlayerPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('Clicking on Save button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+            audioPlayerPage.steps.saveAQuestionAndVerifySnackbar();
+        });
+
+        it('Warning icon should not be visible', () => {
+            audioPlayerPage.steps.verifyWarningIconNotExist();
+        });
+    });
+
+    describe('User should be able to edit incomplete authored resource when add audio URL is selected', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.saveAQuestionWithIncompleteAuthoring();
+            audioPlayerPage.steps.editItem();
+        });
+
+        it('Warning icons should be displayed on the required input fields', () => {
+            audioPlayerPage.steps.selectAddAudioURLRadioButton();
+            audioPlayerPage.steps.verifyWarningIconOnRequiredFields([
+                'Please add a source URL',
+            ]);
+        });
+
+        it('When required input fields are filled then warning icons should disappear', () => {
+            audioPlayerPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+            audioPlayerPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('Clicking on Save button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+            audioPlayerPage.steps.saveAQuestionAndVerifySnackbar();
+        });
+
+        it('Warning icon should not be visible', () => {
+            audioPlayerPage.steps.verifyWarningIconNotExist();
+        });
+    });
+
+    describe('Save as you go - Browse item page contents', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.saveAQuestionWithIncompleteAuthoring();
+            utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+            itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+            browseItemsPage.steps.navigateToBrowseItemsPage();
+        });
+
+        it('When user saves an incompletely authored resource then a warning icon should be visible in browse items page', () => {
+            browseItemsPage.steps.verifyWarningIconInBrowseItemPage(`${itemReferenceID}`);
+        });
+    });
 });