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

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

@@ -3,7 +3,7 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
-const planPhaseSectionDescriptionText = "Select and edit sentence starters and strategies for students to use in their planning journal. You can select up to five strategies and five sentence starters.";
+const planPhaseSectionDescriptionText = "Select and edit strategies and sentence starters for students to use in their planning journal. You can select up to five strategies and five sentence starters.";
 const strategiesTextDefault = [
     'Create a model',
     'Look for a pattern',
@@ -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');
@@ -53,6 +75,345 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
             thinkSpherePage.steps.clickOnAccordian('plan');
             thinkSpherePage.steps.verifyAccordianCollapsed('plan', false);
         });
+    });
+
+    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(5)
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample.mp4');
+            cy.wait(10000);
+            thinkSpherePage.videoLinkComponent(5)
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.playerTimer(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.progressBar(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.volumeControlButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.fullScreenButton(), 'visible');
+        });
+
+        it('When the user hovers over the \'Play\' button, a tooltip \'Play\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            thinkSpherePage.playbackPlayButton()
+                .verifyTooltip('Play');
+        });
+
+        it('When the user clicks on \'Play\' button, then user should be able to playback the video. Timer should display the amount of video that has been played and the total video length in (mm:ss)/(mm:ss) format.', () => {
+            thinkSpherePage.steps.startPlayback();
+            thinkSpherePage.steps.waitForPlaybackToBegin();
+            thinkSpherePage.steps.verifyVideoPlaybackTimer('0:03', '00:05');
+        });
+
+        it('When the user hovers over the \'Pause\' button, a tooltip \'Pause\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            thinkSpherePage.playbackPauseButton()
+                .verifyTooltip('Pause');
+        });
+
+        it('When the user hovers over the full screen button, a tooltip \'Full screen\' should be displayed', () => {
+            thinkSpherePage.fullScreenButton()
+                .verifyTooltip('Full screen');
+        });
+
+        it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
+            thinkSpherePage.steps.startPlayback();
+            utilities.verifyCSS(thinkSpherePage.playbackPauseButton().find('rect'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(thinkSpherePage.playbackPauseButton().find('path'), {
+                'stroke': css.color.secondaryBtnActive,
+            });
+            utilities.verifyCSS(thinkSpherePage.playerTimer(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(thinkSpherePage.progressBar().find('.MuiSlider-rail'), {
+                'background-color': css.color.progressBarBackgroundColor,
+            });
+            utilities.verifyCSS(thinkSpherePage.progressBar().find('.MuiSlider-track'), {
+                'background-color': css.color.defaultBackground,
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if playback is initiated', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.playbackPauseButton().parents('[class*="VideoPlayerstyles__VideoPlayerWrapper"]'));
+        });
+
+        it('When the video player is in playback state and the user clicks on \'Pause\' button, then playback should get paused. Progress bar and timer should not update further and the \'Pause\' button should get replaced with \'Play\' button', () => {
+            thinkSpherePage.steps.startPlayback();
+            thinkSpherePage.steps.waitForPlaybackToBegin();
+            thinkSpherePage.steps.verifyVideoPlaybackTimer('0:03', '00:05');
+            thinkSpherePage.steps.pausePlayback();
+            thinkSpherePage.steps.verifyVideoPlaybackTimer('0:03', '00:05');
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackPauseButton(), 'notExist');
+        });
+
+        it('CSS of \'Preview\' section if playback is paused', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.playbackPlayButton().find('rect'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(thinkSpherePage.playbackPlayButton().find('path'), {
+                'stroke': css.color.secondaryBtnActive,
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if if playback is paused', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.playbackPlayButton().parents('[class*="VideoPlayerstyles__VideoPlayerWrapper"]'));
+        });
+
+        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(5)
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.startPlayback();
+            cy.wait(1000);
+            thinkSpherePage.steps.waitForPlaybackToBegin();
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackPlayButton(), 'notExist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackPauseButton(), 'visible');
+        });
+
+        it('When the user seeks the progress bar slider while the video is playing, then the video should continue to play from the position where the slider is seeked', () => {
+            thinkSpherePage.steps.seekProgressBarSliderToCenter();
+            thinkSpherePage.steps.addWaitToPlayVideo(1000);
+            thinkSpherePage.steps.verifyProgressBarSliderPosition(50);
+        });
+
+        it('When the user seeks the progress bar slider while the video is paused, then the video playback should be in paused state and on playing the video, then the video should play from the position where the slider is seeked', () => {
+            thinkSpherePage.steps.pausePlayback();
+            thinkSpherePage.steps.seekProgressBarSliderToCenter();
+            thinkSpherePage.steps.startPlayback();
+            thinkSpherePage.steps.verifyProgressBarSliderPosition(50);
+        });
+
+        it('When the video playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
+            thinkSpherePage.steps.verifyVideoPlaybackTimer('0:05', '00:05');
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackPauseButton(), 'notExist');
+            thinkSpherePage.steps.verifyProgressBarSliderPosition(99);
+        });
+
+        it.skip('CSS of progress bar in hover state', { tags: 'css' }, () => {
+            thinkSpherePage.steps.hoverOnProgressBarSlider();
+            utilities.verifyCSS(thinkSpherePage.progressBarSlider().parents('span[class*="MuiSlider-thumb"]'), {
+                'box-shadow': `${css.color.progressBarSliderHoverBackground} 0px 0px 0px 8px`
+            });
+        });
+
+        it('When the user hovers over \'Volume control\' button, volume control settings should open and by default it should be set to full volume and on hovering away from the button, the volume sliders should disappear', () => {
+            thinkSpherePage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.volumeControlSlider(), 'visible');
+            thinkSpherePage.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(thinkSpherePage.volumeControlSlider(), 'notExist');
+        });
+
+        it.skip('When volume is not set as 0 and user hovers on \'Volume control\' button, then \'Mute\' text should be displayed in a tooltip and on hovering away from the button, the tooltip should disappear', () => {
+            thinkSpherePage.steps.hoverOnMuteUnmuteButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.tooltipText(), 'Mute');
+            utilities.triggerMouseout(thinkSpherePage.volumeControlButton());
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+
+        it.skip('When the user hovers over \'Volume control slider\', then \'Volume control\' text should be displayed in a tooltip and on hovering away from the button, the tooltip should disappear', () => {
+            thinkSpherePage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.tooltipText(), 'Volume control');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(thinkSpherePage.volumeControlSlider(), 'notExist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+
+        it.skip('When volume is not set as 0 and user clicks on volume control button, then the video should be muted and the volume control button should change to a muted state', () => {
+            thinkSpherePage.steps.clickOnVolumeButton();
+            utilities.hoverAwayFromElement();
+            thinkSpherePage.steps.hoverOnVolumeControlButton();
+            thinkSpherePage.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(thinkSpherePage.volumeControlSlider(), 'notExist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.muteVolumeIcon(), 'visible');
+            // thinkSpherePage.steps.focusOutFromVolumeControlButton();
+        });
+
+        it.skip('When the user hovers on muted \'Volume control\' button, \'Unmute\' text should be displayed in tooltip', () => {
+            thinkSpherePage.steps.hoverOnMuteUnmuteButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.tooltipText(), 'Unmute');
+            utilities.triggerMouseout(thinkSpherePage.volumeControlButton());
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+
+        it.skip('When the user clicks on the muted volume control button then the volume setting slider should return to full volume and the volume control button should change to an unmuted state', () => {
+            thinkSpherePage.steps.clickOnVolumeButton();
+            utilities.hoverAwayFromElement();
+            thinkSpherePage.steps.hoverOnVolumeControlButton();
+            thinkSpherePage.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(thinkSpherePage.unmutedVolumeIcon(), 'visible');
+            thinkSpherePage.steps.hoverOnVolumeControlButton();
+        });
+
+        it.skip('CSS of volume control section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 100%, ${css.color.progressBarRemainingFill} 0%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0%, 'auto padding-box border-box`
+            });
+            utilities.verifyCSS(thinkSpherePage.volumeControlButton().find('g path'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+        });
+
+        it.skip('Accessibility of volume control section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.volumeControlSlider());
+            cy.checkAccessibility(thinkSpherePage.playbackPlayButton().parents('.video-preview-popup'));
+        });
+
+        it.skip('When the user drags the volume control all the way down, video should be muted and the button should update to a muted state', () => {
+            thinkSpherePage.steps.hoverOnVolumeControlButton();
+            thinkSpherePage.steps.setVolumeSliderForPlayback(0);
+            thinkSpherePage.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.verifyElementVisibilityState(thinkSpherePage.muteVolumeIcon(), 'visible');
+        });
+
+        it.skip('CSS of volume control section in muted state', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarRemainingFill} -100%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0%, 'auto padding-box border-box`
+            });
+            utilities.verifyCSS(thinkSpherePage.volumeControlButton().find('g g path'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+        });
+
+        it.skip('Accessibility of volume control section in muted state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.volumeControlSlider());
+            cy.checkAccessibility(thinkSpherePage.playbackPlayButton().parents('.video-preview-popup'));;
+        });
+
+        it.skip('User should be able to unmute the video by dragging the volume control higher again', () => {
+            thinkSpherePage.steps.setVolumeSliderForPlayback(99);
+            thinkSpherePage.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.verifyElementVisibilityState(thinkSpherePage.unmutedVolumeIcon(), 'visible');
+        });
+
+        it('When popup is open it should have the title visible and it should contain the title', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.videoPopupTitle(), 'visible');
+            thinkSpherePage.steps.verifyTextIsNotEmpty(thinkSpherePage.videoPopupTitle());
+        });
+
+        it('The play and pause button should be visible in the center of the video', () => {
+            //TODO: the play and pause button should be visible in the center of the video
+        });
+
+        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(5)
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.playbackSpeedButton()
+                .verifyTooltip('Playback speed');
+        });
+
+        it('When the user hovers over the playback speed button, a list of 4 playback speed options - 1x, 1.25x, 1.5x, 2x should be displayed and by default 1x should be in selected state', () => {
+            thinkSpherePage.steps.hoverOnPlaybackSpeedButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.playbackSpeedOptionsList(), 'visible');
+            utilities.verifyElementCount(thinkSpherePage.playbackSpeedOption(), 4);
+            thinkSpherePage.steps.verifyPlaybackSpeedListOptions();
+            //TODO: need to add selected state assertion when https://redmine.zeuslearning.com/issues/540695 gets fixed
+        })
+
+        it.skip('CSS of playback speed options', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.playbackSpeedButton().find('g'), {
+                'stroke': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(thinkSpherePage.playbackSpeedOption().eq(0), {
+                'color': css.color.liText,
+                'background-color': css.color.liTextSelectedBg,
+                'font-size': css.fontSize.small
+            });
+            utilities.verifyCSS(thinkSpherePage.playbackSpeedOption().eq(1), {
+                'color': css.color.liText,
+                'background-color': css.color.transparent,
+                'font-size': css.fontSize.small
+            });
+        });
+
+        it.skip('Accessibility of playback speed options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.playbackSpeedButton().parents('.video-preview-popup'));
+            cy.checkAccessibility(thinkSpherePage.playbackSpeedOptionsList());
+        });
+
+        for (let index = 0; index < playbackSpeedOptions.length; index++) {
+            it.skip(`When the user selects playback speed option ${playbackSpeedOptions[index]}x, the video playback speed should be changed accordingly`, () => {
+                thinkSpherePage.steps.hoverOnPlaybackSpeedButton();
+                thinkSpherePage.steps.selectPlaybackSpeed(playbackSpeedOptions[index])
+                thinkSpherePage.steps.startPlayback();
+                thinkSpherePage.steps.waitForPlaybackToBegin();
+                thinkSpherePage.steps.addWaitToPlayVideo(4000);
+                thinkSpherePage.steps.pausePlayback();
+                thinkSpherePage.steps.verifyPlaybackElapsedTime((1 + (4 * playbackSpeedMultiplier[index])));
+            });
+        }
+
+        it('When the popup close button is clicked the popup should be closed and it should not be visible', () => {
+            thinkSpherePage.videoPopupCloseButton().click();
+            utilities.verifyElementVisibilityState(thinkSpherePage.videoPreviewPopup(), 'notExist');
+        });
+    });
+
+    describe('\'Plan Phase\' Section Sentence starters list component', () => {
+        abortEarlySetup();
+        thinkSpherePage.tests.verifyListSectionContents({
+            optionFieldsCount: 5,
+            optionList: sentenceStartersTextDefault,
+            placeholder: 'Enter sentence starter name',
+            list: 'sentenceStarter',
+        });
+
+        thinkSpherePage.tests.verifyDragHandleTooltip(5);
+
+        it('When the user clicks on the \'Delete\' option button then the respective options input field should get deleted and option numeration should change accordingly', () => {
+            const optionsAfterDeleting = sentenceStartersTextDefault.filter((el) => el !== sentenceStartersTextDefault[4]);
+            thinkSpherePage.steps.deleteOption(9);
+            utilities.verifyElementCount(thinkSpherePage.optionWrapper(), 9);
+            optionsAfterDeleting.forEach((inputFieldText, optionIndex) => {
+                cy.log(optionsAfterDeleting, optionIndex, inputFieldText)
+                utilities.verifyTextContent(utilities.getNthElement(thinkSpherePage.listInputField(), optionIndex + 5), inputFieldText);
+            });
+            thinkSpherePage.steps.addOption('sentenceStarter'),
+            thinkSpherePage.steps.addOptionText('sentenceStarter', 4, sentenceStartersTextDefault[4]);
+        });
     
         it('\'Plan Phase\' Section Description should be displayed', () => {
             utilities.verifyElementVisibilityState(thinkSpherePage.planPhaseSectionDescription(), 'visible');
@@ -89,7 +450,7 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
                 'font-weight': css.fontWeight.semibold,
             });
             utilities.verifyCSS(thinkSpherePage.planStrategyListResetToDefault(), {
-                'color': css.color.primaryBtnBg,
+                'color': css.color.secondaryBtnDisabled,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
             });
@@ -124,7 +485,7 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
                     cy.log(optionsAfterDeleting, optionIndex, inputFieldText)
                     utilities.verifyTextContent(utilities.getNthElement(thinkSpherePage.listInputField(), optionIndex), inputFieldText);
                 });
-                thinkSpherePage.steps.addOption('strategy'),
+                thinkSpherePage.steps.addOption('strategy');
                 thinkSpherePage.steps.addOptionText('strategy', 4, strategiesTextDefault[4]);
             });
     
@@ -151,10 +512,31 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
             thinkSpherePage.tests.verifyOptionsInput('strategy');
     
             thinkSpherePage.tests.verifyAtleastOneOptionIsRequired('strategy', strategiesTextDefault, 'Minimum one option is required');
+
+            it('The author should be able to add up to 15 strategies using the \'Add strategy\' button and newly added option\'s checkbox should be unchecked by default', () => {
+                for (let index = 0; index < 10; index++) {
+                    thinkSpherePage.steps.addOption('strategy');
+                }
+                thinkSpherePage.tests.verifyListSectionContents({
+                    optionFieldsCount: 15,
+                    optionList: [...strategiesTextDefault, ...Array(10).fill('')],
+                    placeholder: 'Enter strategy name',
+                    list: 'strategy',
+                });
+                thinkSpherePage.steps.verifyTypeCheckBoxStrategy();
+                thinkSpherePage.steps.verifyStrategyCheckBoxNotChecked();
+            });
+
+            it('When 5 strategies are checked, further checkboxes should have tool tip \'Only 5 strategies can be selected\'', () => {
+                for(let i = 1; i < 5; i++) {
+                    thinkSpherePage.steps.selectOption('strategy', i)
+                }
+                utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5).verifyTooltip('Only 5 strategies can be selected')
+            });
     
             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());
@@ -207,6 +589,29 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
             thinkSpherePage.tests.verifyOptionsInput('sentenceStarter');
     
             thinkSpherePage.tests.verifyAtleastOneOptionIsRequired('sentenceStarter', sentenceStartersTextDefault, 'Minimum one option is required');
+
+            it('The author should be able to add up to 15 sentence starters using the \'Add sentence starters\' button and newly added option\'s checkbox should be unchecked by default', () => {
+                for (let index = 0; index < 10; index++) {
+                    thinkSpherePage.steps.addOption('sentenceStarter');
+                }
+                thinkSpherePage.tests.verifyListSectionContents({
+                    optionFieldsCount: 15,
+                    optionList: [...sentenceStartersTextDefault, ...Array(10).fill('')],
+                    placeholder: 'Enter sentence starter name',
+                    list: 'sentenceStarter',
+                });
+                thinkSpherePage.steps.verifyTypeCheckBoxSentenceStarter();
+                thinkSpherePage.steps.verifySentenceStrategyCheckBoxNotChecked();
+            });
+
+            it('When 5 sentence starters are checked, further checkboxes should have tool tip \'Only 5 sentence starters can be selected\'', () => {
+                for(let i = 1; i < 5; i++) {
+                    thinkSpherePage.steps.selectOption(sentenceStartersTextDefault, i)
+                }
+                utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5).verifyTooltip('Only 5 sentence starters can be selected')
+            });
+
+            thinkSpherePage.tests.verifyResetToDefaultFunctionality(sentenceStartersTextDefault, 'sentenceStarter');
     
             it('Accessibility of \'Plan Phase\' Section Sentence starters list component', { tags: 'a11y' }, () => {
                 cy.checkAccessibility(thinkSpherePage.planSentenceStarterSection());