itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.189

package/cypress/e2e/ILC/EditTabSettingPage/itemPreviewSettingsTabFunctionality.js

@@ -16,15 +16,19 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
         });
 
-        it('When user checks \'Enable side by side panels\' checkbox and clicks on \'Apply changes\', then two panels should be displayed in \'Edit tab\'', () => {
+        it('When user checks \'Enable side by side panels\' checkbox and clicks on \'Apply changes\', then two panels should be displayed in \'Edit tab\' and when user switches to preview tab \'Preview not available\' should be displayed', () => {
             itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyPanelCount(2);
             itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton(0);
             itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(itemPreviewSettingsPage.noPreviewText(), 'Preview not available');
+            utilities.verifyElementCount(itemPreviewSettingsPage.noPreviewText(), 2);
         });
 
         it('User should be able to add questions or resource and tools in both the panels', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnAddQuestion(0);
             itemPreviewSettingsPage.steps.selectQuestionType('short text response');
             itemPreviewSettingsPage.steps.createBasicShortTextResponseQuestion('shortTextResponseHeading', 2, 'Answer');
@@ -33,31 +37,54 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.createBasicContentBlockResourceAndTool('Heading', 'Content heading');
         });
 
-        it('When user has added question in the left panel, then it should be displayed in the left panel ', () => {
+        it('When user has added question in the left panel, then it should be displayed in the left panel within half of the container width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'shortTextResponseHeading', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'shortTextResponseHeading', panel: 0 })
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
         });
 
-        it('When user has added resource and tool in the right panel, then it should be displayed in the right panel', () => {
+        it('When user has added resource and tool in the right panel, then it should be displayed in the right panel within half of the container width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 0, questionTitle: 'Content blocks', questionInstructions: 'Content heading', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Content heading', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
         });
 
-        it('When user unchecks \'Enable side by side panels\' checkbox, then only one panel should be displayed and and added questions or resource and tools should be displayed inline', () => {
+        it('When user unchecks \'Enable side by side panels\' checkbox, then only one panel should be displayed and and added questions or resource and tools should be displayed inline in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.uncheckEnableSideBySidePanelsCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyQuestionsCount(2);
             itemPreviewSettingsPage.steps.verifyPanelCount(1);
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'shortTextResponseHeading', panel: 0 });
-            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Content heading', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Content heading', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'shortTextResponseHeading', panel: 0 })
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Content heading', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
-        it('When user checks \'Enable side by side panels\' checkbox again, then \'Edit tab\' should be displayed with two panels, the left panel should be prefilled with added questions and resource tools and right panel should have \'Add question\' and \'Add resource and tool\' buttons', () => {
+        it('When user checks \'Enable side by side panels\' checkbox again, then \'Edit tab\' should be displayed with two panels, the left panel should be prefilled with added questions and resource tools and right panel should have \'Add question\' and \'Add resource and tool\' buttons in edit tab and \'No preview\' should be displayed in the right panel', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyPanelCount(2);
             itemPreviewSettingsPage.steps.verifyQuestionsExistInLeftPanel();
             itemPreviewSettingsPage.steps.verifyQuestionsDoNotExistInRightPanel();
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'shortTextResponseHeading', panel: 0 })
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Content heading', panel: 0 });
+            utilities.verifyInnerText(itemPreviewSettingsPage.noPreviewText(), 'Preview not available');
+            utilities.verifyElementCount(itemPreviewSettingsPage.noPreviewText(), 1);
         });
 
         it('Accessibility of panels', { tags: 'a11y' }, () => {
@@ -244,25 +271,38 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.selectQuestionType('short text response');
             itemPreviewSettingsPage.steps.createBasicShortTextResponseQuestion('ShortText', '2', 'Answer');
             itemPreviewSettingsPage.steps.navigateToSection2();
-            itemPreviewSettingsPage.steps.clickOnAddQuestion();
+            itemPreviewSettingsPage.steps.clickOnAddResource();
             itemPreviewSettingsPage.steps.selectResourceType('content blocks');
             itemPreviewSettingsPage.steps.createBasicContentBlockResourceAndTool('Global', 'Warming');
         });
 
-        it('When user has added question in section 1 then, it should be displayed in the section 1 ', () => {
+        it('When user has added question in section 1 then, it should be displayed in the section 1 and the width should be equal to item width in edit tab and preview tab', () => {
             itemPreviewSettingsPage.steps.navigateToSection1();
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'ShortText', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortText', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
-        it('When user has added resource and tool in section 2 then, it should be displayed in the section 2', () => {
+        it('When user has added resource and tool in section 2 then, it should be displayed in the section 2 and the width should be equal to item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 0, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
             itemPreviewSettingsPage.steps.navigateToSection2();
-            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
         it('When the user has checked \'Enable sections\' then on switching to \'Edit tab\', section navigation orientation should be \'Horizontal\', section navigation style should be \'Underlined\' and section navigation alignment should be \'Left aligned\' by default', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.verifyHorizontalNavigationOrientation();
             itemPreviewSettingsPage.steps.verifyUnderlinedNavigationStyle(4);
             itemPreviewSettingsPage.steps.verifyLeftAlignedNavigationAlignment();
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
         it('When user selects \'Separated using dividers\' navigation style and \'Horizontal\' navigation orientation is active selection, then vertical line should be displayed between the section titles', () => {
@@ -270,6 +310,7 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.selectSeparatedUsingDividersNavigationStyle();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifySeparatedUsingDividersNavigationStyle('horizontal');
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
         it('When user selects \'Numbered\' navigation style, then numbers should be displayed with section titles', () => {
@@ -277,6 +318,7 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.selectNumberedNavigationStyle();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyNumberedSectionNavigationStyle();
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
         it('When user selects \'Center aligned\' navigation alignment, then section titles should be center aligned', () => {
@@ -284,6 +326,7 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.selectCenterAlignedNavigationAlignment();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyCenterAlignedNavigationAlignment();
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
         it('When user selects \'Right aligned\' navigation alignment, then section titles should be right aligned', () => {
@@ -291,16 +334,26 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.selectRightAlignedNavigationAlignment();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyRightAlignedNavigationAlignment();
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
         });
 
-        it('When user selects \'Vertical\' navigation orientation, then vertically oriented sections should be displayed', () => {
+        it('When user selects \'Vertical\' navigation orientation, then vertically oriented sections should be displayed and the width should be equal to item width in edit tab and preview tab', () => {
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.selectVerticalNavigationOrientation();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyVerticalNavigationOrientation();
+            itemPreviewSettingsPage.steps.verifyPanelWidthAndSectionWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortText', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthAndSectionWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthAndSectionWidthEqualToItemWidth();
         });
 
         it('When \'Numbered\' navigation style is the active selection, then numbers should be displayed with the section titles', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.verifyNumberedSectionNavigationStyle();
         });
 
@@ -318,15 +371,21 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.verifySeparatedUsingDividersNavigationStyle('vertical');
         });
 
-        it('When user checks \'Enable side by side panels\' checkbox and \'Left panel\' is active selection for \'Enable sections in\', then \'Edit tab\' should have two panels and \'Left panel\' should have two sections', () => {
+        it('When user checks \'Enable side by side panels\' checkbox and \'Left panel\' is active selection for \'Enable sections in\', then \'Edit tab\' should have two panels and \'Left panel\' should have two sections and on switching to preview tab the added question and resource should be displayed in respective panels', () => {
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyPanelCount(2);
             itemPreviewSettingsPage.steps.verifyTwoSectionsExist(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortText', panel: 0 });
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Warming', panel: 0 });
         });
 
         it('When user checks \'Right panel\' checkbox in \'Enable sections in\', then right panel should have two sections in it', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.checkRightPanelCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
@@ -341,50 +400,79 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.createBasicContentBlockResourceAndTool('Heading', 'Body');
             itemPreviewSettingsPage.steps.navigateToSection2(1);
             itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton(1);
-            itemPreviewSettingsPage.steps.clickOnAddResource(1);
+            itemPreviewSettingsPage.steps.clickOnAddQuestion(1);
             itemPreviewSettingsPage.steps.selectQuestionType('short text response');
             itemPreviewSettingsPage.steps.createBasicShortTextResponseQuestion('ShortTextResponse', '2', 'Result');
         });
 
-        it('When user has added question in section 1 then, it should be displayed in the section 1 ', () => {
-            itemPreviewSettingsPage.steps.navigateToSection1();
+        it('When user has added question in section 1 then, it should be displayed in the section 1 and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.navigateToSection1(1);
             itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 0, questionTitle: 'Content blocks', questionInstructions: 'Body', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1(1);
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Body', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
         });
 
-        it('When user has added resource and tool in section 2 then, it should be displayed in the section 2', () => {
-            itemPreviewSettingsPage.steps.navigateToSection2();
-            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Short text response', questionInstructions: 'ShortTextResponse', panel: 1 });
+        it('When user has added resource and tool in section 2 then, it should be displayed in the section 2 and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.navigateToSection2(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection2(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
         });
 
-        it('When user unchecks \'Left panel\' checkbox, then section titles should disappear and questions in \'Left panel\' should be displayed inline', () => {
+        it('When user unchecks \'Left panel\' checkbox, then section titles should disappear and questions in \'Left panel\' should be displayed inline and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.uncheckLeftPanelCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(0);
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'ShortText', panel: 0 });
-            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortText', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
         });
 
-        it('When user checks \'Left panel\' checkbox, then \'Section 1\' should be prefilled with questions and both sections should have \'Add question\' & \'Add resource and tool\' buttons', () => {
+        it('When user checks \'Left panel\' checkbox, then \'Section 1\' should be prefilled with questions and both sections should have \'Add question\' & \'Add resource and tool\' buttons and on switching to preview tab the added question and resource and tool should be displayed', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.checkLeftPanelCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifyTwoSectionsExist(0);
-            itemPreviewSettingsPage.steps.navigateToSection1(0);
+            itemPreviewSettingsPage.steps.navigateToSection1();
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'ShortText', panel: 0 });
-            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortText', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Warming', panel: 0 });
         });
 
-        it('When user unchecks \'Right panel\' checkbox, then in \'Right panel\' section titles should disappear and questions should be displayed inline', () => {
+        it('When user unchecks \'Right panel\' checkbox, then in \'Right panel\' section titles should disappear and questions should be displayed inline and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.uncheckRightPanelCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(1);
             itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 0, questionTitle: 'Content blocks', questionInstructions: 'Body', panel: 1 });
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Short text response', questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Body', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
         });
 
-        it('When user checks \'Right panel\' checkbox, then in \'Right panel\' \'Section 1\' should be prefilled with questions and both sections should have \'Add question\' & \'Add resource and tool\' buttons', () => {
+        it('When user checks \'Right panel\' checkbox, then in \'Right panel\' \'Section 1\' should be prefilled with questions and both sections should have \'Add question\' & \'Add resource and tool\' buttons in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.checkRightPanelCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
@@ -392,19 +480,320 @@ describe('Item preview: Settings tab - functionality', () => {
             itemPreviewSettingsPage.steps.navigateToSection1(1);
             itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 0, questionTitle: 'Content blocks', questionInstructions: 'Body', panel: 1 });
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Short text response', questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionInstructions: 'Body', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
         });
 
-        //Failing due to https://redmine.zeuslearning.com/issues/555337
-        it('When user unchecks \'Enable sections\' checkbox, then section titles should disappear and \'Left panel\' and \'Right panel\' should have prefilled questions', () => {
+        it('When user unchecks \'Enable sections\' checkbox, then section titles should disappear and \'Left panel\' and \'Right panel\' should have prefilled questions and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
             itemPreviewSettingsPage.steps.clickOnSettingsButton();
             itemPreviewSettingsPage.steps.uncheckEnableSectionsCheckbox();
             itemPreviewSettingsPage.steps.clickApplyChanges();
             itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(0);
             itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(1);
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Short text response', questionInstructions: 'ShortText', panel: 0 });
-            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 1, questionTitle: 'Content blocks', questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
             itemPreviewSettingsPage.steps.verifyContentBlockContentsPreview({ questionIndex: 0, questionTitle: 'Content blocks', questionInstructions: 'Body', panel: 1 });
             itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Short text response', questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'ShortText', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'Warming', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.verifyContentBlockContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Body', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'ShortTextResponse', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+        });
+    });
+
+    describe('Functionality for \'Enable side by side panels\' section for canvas questions', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user checks \'Enable side by side panels\' checkbox and clicks on \'Apply changes\', then two panels should be displayed in \'Edit tab\' and on switching to preview tab \'Preview not available\; should be displayed', () => {
+            itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyPanelCount(2);
+            itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton(0);
+            itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(itemPreviewSettingsPage.noPreviewText(), 'Preview not available');
+            utilities.verifyElementCount(itemPreviewSettingsPage.noPreviewText(), 2);
+        });
+
+        it('User should be able to add canvas question to both the panels', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnAddQuestion(0);
+            itemPreviewSettingsPage.steps.selectQuestionType('Graphing');
+            itemPreviewSettingsPage.steps.createBasicGraphingResponseQuestion('Graphing question', 2);
+            itemPreviewSettingsPage.steps.clickOnAddQuestion(1);
+            itemPreviewSettingsPage.steps.selectQuestionType('Drawing Response');
+            itemPreviewSettingsPage.steps.createBasicDrawingResponseQuestion('Drawing question', 2);
+        });
+
+        it('When user has added canvas question in the left panel, then it should be displayed in the left panel within half of the container width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 })
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+        });
+
+        it('When user has added canvas question in the right panel, then it should be displayed in the right panel within half of the container width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+        });
+
+        it('When user unchecks \'Enable side by side panels\' checkbox, then only one panel should be displayed and and added questions should be displayed inline in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.uncheckEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyQuestionsCount(2);
+            itemPreviewSettingsPage.steps.verifyPanelCount(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+        });
+
+        it('When user checks \'Enable side by side panels\' checkbox again, then \'Edit tab\' should be displayed with two panels, the left panel should be prefilled with added questions right panel should have \'Add question\' and \'Add resource and tool\' buttons and \'No preview\' should be displayed in the right panel', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyPanelCount(2);
+            itemPreviewSettingsPage.steps.verifyQuestionsExistInLeftPanel();
+            itemPreviewSettingsPage.steps.verifyQuestionsDoNotExistInRightPanel();
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'Drawing question', panel: 0 });
+            utilities.verifyInnerText(itemPreviewSettingsPage.noPreviewText(), 'Preview not available');
+            utilities.verifyElementCount(itemPreviewSettingsPage.noPreviewText(), 1);
+        });
+    });
+
+    describe('Functionality of \'Sections\' section for canvas questions', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user checks \'Enable sections\' checkbox, then two sections should be displayed in \'Edit tab\' and both sections should have \'Add question\' and \'Add resource and tool\' buttons', () => {
+            itemPreviewSettingsPage.steps.checkEnableSectionsCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyTwoSectionsExist();
+            itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton();
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton();
+        });
+
+        it('User should be able to add canvas questions in both sections', () => {
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.clickOnAddQuestion();
+            itemPreviewSettingsPage.steps.selectQuestionType('Graphing');
+            itemPreviewSettingsPage.steps.createBasicGraphingResponseQuestion('Graphing question', 2);
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.clickOnAddQuestion();
+            itemPreviewSettingsPage.steps.selectQuestionType('Drawing Response');
+            itemPreviewSettingsPage.steps.createBasicDrawingResponseQuestion('Drawing question', 2);
+        });
+
+        it('When user has added question in section 1 then, it should be displayed in the section 1 and the width should be equal to item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+        });
+
+        it('When user has added question in section 2 then, it should be displayed in the section 2 and the width should be equal to item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthEqualToItemWidth();
+        });
+
+        it('When user selects \'Vertical\' navigation orientation, then vertically oriented sections should be displayed in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.selectVerticalNavigationOrientation();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyVerticalNavigationOrientation();
+            itemPreviewSettingsPage.steps.verifyPanelWidthAndSectionWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthAndSectionWidthEqualToItemWidth();
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthAndSectionWidthEqualToItemWidth();
+        });
+
+        it('When user checks \'Enable side by side panels\' checkbox and \'Left panel\' is active selection for \'Enable sections in\', then \'Edit tab\' should have two panels and \'Left panel\' should have two sections and the width should be half of item width and on switching to preview tab the added questions should be displayed', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyPanelCount(2);
+            itemPreviewSettingsPage.steps.verifyTwoSectionsExist(0);
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.navigateToSection2();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Drawing question', panel: 0 });
+        });
+
+        it('When user checks \'Right panel\' checkbox in \'Enable sections in\', then right panel should have two sections in it', () => {
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.checkRightPanelCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyPanelCount(2);
+            itemPreviewSettingsPage.steps.verifyTwoSectionsExist(1);
+        });
+
+        it('User should be able to add questions in both sections of \'Right panel\'', () => {
+            itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton(1);
+            itemPreviewSettingsPage.steps.clickOnAddQuestion(1);
+            itemPreviewSettingsPage.steps.selectQuestionType('Drawing Response');
+            itemPreviewSettingsPage.steps.createBasicDrawingResponseQuestion('Drawing question', 2);
+            itemPreviewSettingsPage.steps.navigateToSection2(1);
+            itemPreviewSettingsPage.steps.verifyAddQuestionAndAddResourceButton(1);
+            itemPreviewSettingsPage.steps.clickOnAddQuestion(1);
+            itemPreviewSettingsPage.steps.selectQuestionType('Graphing');
+            itemPreviewSettingsPage.steps.createBasicGraphingResponseQuestion('Graphing question', 2);
+        });
+
+        it('When user has added question in section 1 then, it should be displayed in the section 1 and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.navigateToSection1(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+        });
+
+        it('When user has added question in section 2 then, it should be displayed in the section 2 and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.navigateToSection2(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection2(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+        });
+
+        it('When user unchecks \'Left panel\' checkbox, then section titles should disappear and questions in \'Left panel\' should be displayed inline and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.uncheckLeftPanelCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(0);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+        });
+
+        it('When user checks \'Left panel\' checkbox, then \'Section 1\' should be prefilled with questions and both sections should have \'Add question\' & \'Add resource and tool\' buttons in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.checkLeftPanelCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyTwoSectionsExist(0);
+            itemPreviewSettingsPage.steps.navigateToSection1(0);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 0 });
+        });
+
+        it('When user unchecks \'Right panel\' checkbox, then in \'Right panel\' section titles should disappear and questions should be displayed inline and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.uncheckRightPanelCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+        });
+
+        it('When user checks \'Right panel\' checkbox, then in \'Right panel\' \'Section 1\' should be prefilled with questions and both sections should have \'Add question\' & \'Add resource and tool\' buttons and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.checkRightPanelCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifyTwoSectionsExist(1);
+            itemPreviewSettingsPage.steps.navigateToSection1(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.navigateToSection1(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+        });
+
+        it('When user unchecks \'Enable sections\' checkbox, then section titles should disappear and \'Left panel\' and \'Right panel\' should have prefilled questions and the width should be half of item width in edit tab and preview tab', () => {
+            itemPreviewSettingsPage.steps.switchToEditTab();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+            itemPreviewSettingsPage.steps.uncheckEnableSectionsCheckbox();
+            itemPreviewSettingsPage.steps.clickApplyChanges();
+            itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(0);
+            itemPreviewSettingsPage.steps.verifySectionsLabelsNotExist(1);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 0, questionTitle: 'Drawing response', questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreview({ questionIndex: 1, questionTitle: 'Graphing', questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
+            itemPreviewSettingsPage.steps.switchToPreviewTab();
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Graphing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'Drawing question', panel: 0 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(0);
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 0, questionInstructions: 'Drawing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyBasicQuestionContentsPreviewPreviewTab({ questionIndex: 1, questionInstructions: 'Graphing question', panel: 1 });
+            itemPreviewSettingsPage.steps.verifyPanelWidthIsHalfOfItemWidth(1);
         });
     });
 });