itemengine-cypress-automation 1.0.574-IEI-7071-main-96a7dd4.0 → 1.0.574-IEI-7065-Improve-test-coverage-for-essay-response-1a8de95.0

package/cypress/e2e/ILC/EssayResponse/additionalSettings.js

@@ -72,12 +72,18 @@ describe('Create item - Essay response - Additional settings - Student response
             essayResponsePage.steps.verifyPlaceholderTextPreviewTab('Lorem Ipsum');
         });
 
-        it('When the user starts typing in the response field in the preview tab, then the placeholder text should disappear', () => {
+        it('The user should be able to add \'Placeholder text\' and the \'Placeholder text\' added by the user should be displayed in the response field in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyPlaceholderTextPreviewTab('Lorem Ipsum');
+        });
+
+        it('When the user starts typing in the response field in the item preview, then the placeholder text should disappear', () => {
             essayResponsePage.steps.enterTextInResponseField('dolor sit amet');
             essayResponsePage.steps.verifyPlaceholderTextNotPresentInPreviewTab();
         });
 
-        it('When the user clears the entered text in the response field, then the placeholder text should appear again', () => {
+        it('When the user clears the entered text in the response field, then the placeholder text should appear again in item preview', () => {
             essayResponsePage.steps.clearResponseField();
             essayResponsePage.steps.focusOutOfResponseField();
             essayResponsePage.steps.verifyPlaceholderTextPreviewTab('Lorem Ipsum');

package/cypress/e2e/ILC/EssayResponse/additionalSettingsBasic.js

@@ -57,6 +57,21 @@ describe('Essay response - Additional settings', () => {
                 essayResponsePage.steps.switchToEditTab();
             });
         });
+
+        it('Verify \'Tiny\' font size option functionality again after saving the question', () => {
+            essayResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown('Tiny');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyCSS(essayResponsePage.questionInstructionsText(), {
+                'font-size': fontSizes['Tiny']
+            });
+            utilities.verifyCSS(essayResponsePage.previewTabToolbarOption(), {
+                'font-size': fontSizes['Tiny']
+            });
+            utilities.verifyCSS(essayResponsePage.responseField(), {
+                'font-size': fontSizes['Tiny']
+            });
+        });
     });
 
     describe('Additional settings: Accessibility section', () => {

package/cypress/e2e/ILC/EssayResponse/createCustomCategory.smoke.js

@@ -382,12 +382,25 @@ describe('Create question page - Essay Response: Create custom category', () =>
                 equationEditorFlyout.steps.verifyCategoryIsNotDisplayedInEquationEditorPreviewTab('Custom category without characters');
             });
 
+            it('The category with no added characters should not be displayed in the preview tab equation editor in item preview', () => {
+                essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                equationEditorFlyout.steps.clickOnEquationEditorButtonNext();
+                equationEditorFlyout.steps.verifyCategoryIsNotDisplayedInEquationEditorPreviewTab('Custom category without characters');
+                essayResponsePage.steps.switchToEditTab();
+                essayResponsePage.steps.clickOnEditQuestionButton();
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+            });
+
             it('The category with only category name should be displayed in the preview tab equation editor', () => {
                 equationEditorFlyout.steps.clickOnEquationEditorButtonNext();
                 equationEditorFlyout.steps.verifyCategoryInEquationEditorPreviewTab('Custom category with name.', '');
             });
 
             it('The category with category name and icon should be displayed in the preview tab equation editor', () => {
+                equationEditorFlyout.steps.clickOnEquationEditorButtonNext();
                 equationEditorFlyout.steps.verifyCategoryInEquationEditorPreviewTab('Custom category with name and icon.', '#');
             });
 

package/cypress/e2e/ILC/EssayResponse/editTabBasicSections.js

@@ -1,6 +1,7 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { essayResponsePage } from "../../../pages";
 import utilities from "../../../support/helpers/utilities";
+import { essayResponseCommonComponents } from "../../../pages/components/essayResponseCommonComponents";
 const css = Cypress.env('css');
 
 describe('Create question page - Essay Response: Question Instructions, Set limit', () => {
@@ -238,11 +239,34 @@ describe('Create question page - Essay Response: Question Instructions, Set limi
             essayResponsePage.steps.verifyWordLimitInPreviewTab(1000);
         });
 
-        it('When the user updates the maximum word limit input field value then updated maximum word limit value should be displayed in the preview tab', () => {
+        it('When user switched to the preview tab then \'Maximum 1000 words\' should be displayed in the preview tab in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.responseFieldWordCount(), 'visible');
+            essayResponsePage.steps.verifyWordLimitInPreviewTab(1000);
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
+        it('When the user unchecked the \'Always show maximum limit\' checkbox then no message should be displayed at the bottom of the response field in the question preview.', () => {
+            essayResponsePage.steps.uncheckAlwaysShowMaximumLimitCheckbox();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
+        });
+
+        it('When the user unchecked the \'Always show maximum limit\' checkbox then no message should be displayed at the bottom of the response field in the item preview.', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
             essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
+        it('When the user updates the maximum word limit input field value then updated maximum word limit value should be displayed in the preview tab', () => {
+            essayResponsePage.steps.checkAlwaysShowMaximumLimitCheckbox();
             essayResponsePage.steps.setMaximumLimit(5);
             essayResponsePage.steps.switchToPreviewTab();
-            essayResponsePage.steps.verifyWordLimitInPreviewTab(5);
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'visible');
         });
 
         it('When the user updates the minimum word limit input field value and checks the \'Always show minimum limit\' checkbox then \'Minimum value - Maximum value words required\' should be displayed in the preview tab', () => {
@@ -253,7 +277,16 @@ describe('Create question page - Essay Response: Question Instructions, Set limi
             essayResponsePage.steps.verifyWordLimitInPreviewTab(5, 3);
         });
 
+        it('When the user updates the minimum word limit input field value and checks the \'Always show minimum limit\' checkbox then \'Minimum value - Maximum value words required\' should be displayed in the preview tab in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyWordLimitInPreviewTab(5, 3);
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
         it('User should able to enter text in the response field', () => {
+            essayResponsePage.steps.switchToPreviewTab();
             essayResponsePage.steps.enterTextInResponseField('Lorem Ipsum');
         });
 
@@ -263,10 +296,22 @@ describe('Create question page - Essay Response: Question Instructions, Set limi
             essayResponsePage.steps.verifyLimitReachedWarningMessage('Maximum 5 words have been entered.')
         });
 
+        it('When the user reaches the word limit, then the warning message \'Maximum 5 words have been entered\' should be displayed in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum dolor sit amet');
+            essayResponsePage.steps.verifyResponseFieldInput('Lorem Ipsum dolor sit amet')
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Maximum 5 words have been entered.')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum dolor sit amet');
+        });
+
         it('CSS of \'word limit reached\' warning message and container', { tags: 'css' }, () => {
             utilities.verifyCSS(essayResponsePage.limitReachedWarningMessage(), {
                 'color': css.color.warningMessage,
-                'font-size': css.fontSize.normal,
+                'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
             });
             utilities.verifyCSS(essayResponsePage.limitReachedWarningMessageContainer().find('svg'), {
@@ -298,11 +343,45 @@ describe('Create question page - Essay Response: Question Instructions, Set limi
             essayResponsePage.steps.verifyLimitReachedWarningMessage('Minimum 3 words are required.');
         });
 
+        it('When the user enters the word less than the minimum word limit value set by the user and focus out of response field, then the warning message \'Minimum 3 words are required\' should be displayed in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.clearResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.focusOutOfResponseField();
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Minimum 3 words are required.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+        });
+
         it('When the user enters the word greater than the minimum word limit value set by the user, then the warning message should disappear', () => {
             essayResponsePage.steps.enterInputInResponseField(' dolor sit');
             essayResponsePage.steps.verifyResponseFieldInput('Lorem Ipsum dolor sit');
             essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
         });
+
+        it("When the user unchecks both 'Always show maximum limit' and 'Always show minimum limit' checkboxes then no limit message should be displayed in preview and item preview", () => {
+            // Ensure we are on edit tab and both checkboxes are currently checked from prior tests
+            essayResponsePage.steps.switchToEditTab();
+            // Uncheck maximum limit checkbox using existing step
+            essayResponsePage.steps.uncheckAlwaysShowMaximumLimitCheckbox();
+            // Uncheck minimum limit checkbox directly (no dedicated step defined yet)
+            essayResponsePage.alwaysShowMinLimitCheckBox()
+                .click()
+                .should('not.be.checked');
+            // Preview tab should not show limit banner
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
+            // Item preview validation
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
+            // Return to edit state for subsequent tests (if any added later)
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
     });
 
     describe('Essay response: Set limit section: Character, None: Edit tab functionality', () => {
@@ -333,7 +412,43 @@ describe('Create question page - Essay Response: Question Instructions, Set limi
             essayResponsePage.steps.verifyCharacterLimitInPreviewTab(10, 6);
         });
 
+        it('When user switched to the preview tab then \'Maximum 20000 characters\' should be displayed in the preview tab in item preview', () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.setMaximumLimit(20000);
+            essayResponsePage.steps.unCheckAlwaysShowMinimumLimitCheckbox();
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyCharacterLimitInPreviewTab(20000);
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
+        it('When the user unchecked the \'Always show maximum limit\' checkbox then no message should be displayed at the bottom of the response field in the question preview for characters.', () => {
+            essayResponsePage.steps.uncheckAlwaysShowMaximumLimitCheckbox();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
+        });
+
+        it('When the user unchecked the \'Always show maximum limit\' checkbox then no message should be displayed at the bottom of the response field in the item preview for characters.', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
+        it('When the user updates the maximum character limit input field value then updated maximum character limit value should be displayed in the preview tab in item preview', () => {
+            essayResponsePage.steps.checkAlwaysShowMaximumLimitCheckbox();
+            essayResponsePage.steps.setMaximumLimit(10);
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyCharacterLimitInPreviewTab(10);
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
         it('User should able to enter characters in the response field', () => {
+            essayResponsePage.steps.switchToPreviewTab();
             essayResponsePage.steps.enterTextInResponseField('Lorem');
         });
 
@@ -343,8 +458,19 @@ describe('Create question page - Essay Response: Question Instructions, Set limi
             essayResponsePage.steps.verifyLimitReachedWarningMessage('Maximum 10 characters have been entered.')
         });
 
+        it('When the user reaches the character limit, then the warning message \'Maximum 10 characters have been entered\' should be displayed in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Loremdolar');
+            essayResponsePage.steps.verifyResponseFieldInput('Loremdolar');
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Maximum 10 characters have been entered.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
         it('When the user removes/deletes some characters, the warning message should disappear', () => {
-            essayResponsePage.steps.enterInputInResponseField('{backspace}');
+            essayResponsePage.steps.enterInputInResponseField('Loremdola');
             essayResponsePage.steps.verifyResponseFieldInput('Loremdola');
             essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
         });
@@ -357,12 +483,36 @@ describe('Create question page - Essay Response: Question Instructions, Set limi
             essayResponsePage.steps.verifyLimitReachedWarningMessage('Minimum 6 characters are required.');
         });
 
+        it('When the user enters the character less than the minimum character limit value set by the user and focus out of response field, then the warning message \'Minimum 6 characters are required\' should be displayed in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.clearResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Lore');
+            essayResponsePage.steps.focusOutOfResponseField();
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Minimum 6 characters are required.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
         it('When the user enters the character greater than the minimum character limt value set by the user, then the warning message should disappear', () => {
-            essayResponsePage.steps.enterInputInResponseField('mdola');
+            essayResponsePage.steps.enterInputInResponseField('Loremdola');
             essayResponsePage.steps.verifyResponseFieldInput('Loremdola');
             essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
         });
 
+        it("When the user unchecks both 'Always show maximum limit' and 'Always show minimum limit' checkboxes then no character limit message should be displayed in preview and item preview", () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.uncheckAlwaysShowMaximumLimitCheckbox();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.wordCharacterLimitWrapper(), 'notExist');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
         it('When the user selects \'None\' radio button then maximum and minimum limits should not be displayed in the preview tab and when user types anything in the response field then error message should not be displayed', () => {
             essayResponsePage.steps.switchToEditTab();
             essayResponsePage.steps.checkNoneRadioButton();

package/cypress/e2e/ILC/EssayResponse/essayResponseCustomizeFormattingOptions2.js

@@ -25,7 +25,7 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert/Remove Bulleted List');
 
         //Comment: Here we are unable to verify the bullet point marker that appears since it is displayed using ::marker
-        it('When the user selects the \'Bulleted list\' toolbar option in an empty response field, then a bulleted list with \'1 bullet point\' should be displayed in the response field and when the user enters text, then that text should appear as a bulleted list', () => {
+        it('When the user selects the \'Bulleted list\' toolbar option in an empty response field, then a bulleted list with \'1 bullet point\' should be displayed in the response field and when the user enters text, then that text should appear as a bulleted list in question preview', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
             essayResponsePage.steps.verifyResponseFieldHTML('<ul><li><br></li></ul>');
@@ -33,6 +33,19 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<ul><li>Lorem Ipsum</li></ul>');
         });
 
+        it('When the user selects the \'Bulleted list\' toolbar option in an empty response field, then a bulleted list with \'1 bullet point\' should be displayed in the response field and when the user enters text, then that text should appear as a bulleted list in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ul><li><br></li></ul>');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ul><li>Lorem Ipsum</li></ul>');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
         it('When the user presses the \'Enter\' key, another bullet point should appear below the first point and user should be able to enter text to the 2nd list item', () => {
             essayResponsePage.steps.enterInputInResponseField('{enter}');
             essayResponsePage.steps.verifyListItemLengthInResponseField(2);
@@ -57,7 +70,7 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert/Remove Numbered List');
 
         //Comment: Here we are unable to verify the number of the list item that appears since it is displayed using ::marker
-        it('When the user selects the \'Numbered list\' toolbar option in an empty response field, then a numbered list with \'1. list item\' should be displayed in the response field and when the user enters text, then that text should appear as a numbered list', () => {
+        it('When the user selects the \'Numbered list\' toolbar option in an empty response field, then a numbered list with \'1. list item\' should be displayed in the response field and when the user enters text, then that text should appear as a numbered list in question preview', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
             essayResponsePage.steps.verifyResponseFieldHTML('<ol><li><br></li></ol>');
@@ -65,6 +78,18 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<ol><li>Lorem Ipsum</li></ol>');
         });
 
+        it('When the user selects the \'Numbered list\' toolbar option in an empty response field, then a numbered list with \'1. list item\' should be displayed in the response field and when the user enters text, then that text should appear as a numbered list in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ol><li><br></li></ol>');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ol><li>Lorem Ipsum</li></ol>');
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
         it('When the user presses the \'Enter\' key, \'2. list item\' should appear below the first list item and user should be able to enter text to the 2nd list item', () => {
             essayResponsePage.steps.enterInputInResponseField('{enter}');
             essayResponsePage.steps.verifyListItemLengthInResponseField(2);
@@ -228,6 +253,64 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Align Right');
     });
 
+    describe('Align left, Center, Align right, Justify formatting options - Item preview', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Align Left', 'Align Center', 'Align Right', 'Align Justify']);
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user focuses in the response field, then none of the options should be displayed in selected state and the text in the response field should be displayed as normal text without any alignment in item preview', () => {
+            essayResponsePage.steps.focusInResponseField();
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Left');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Center');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Right');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Justify');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+        });
+
+        it('When the user selects the \'Center\' toolbar option, then text in the response field should get aligned to the center and \'Align left\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Center');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: center;\">Lorem Ipsum</p>')
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Left')
+        });
+
+        it('When the user selects the \'Align Left\' toolbar option, then text in the response field should get aligned to the left and \'Center\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Left');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style="text-align: left;">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Center')
+        });
+
+        it('When the user selects the \'Align Right\' toolbar option, then text in the response field should get aligned to the right and \'Align left\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Right');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: right;\">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Left')
+        });
+
+        it('When the user deselects \'Align Right\' toolbar option, then the text in the response field should be displayed as normal text without any alignment in item preview', () => {
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Align Right');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+        });
+
+        it('When the user selects the \'Justify\' toolbar option, then text in the response field should get justified alignment and \'Align right\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Justify');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style="text-align: justify;">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Right')
+        });
+
+        it('When the user switches to the next line, \'Justify\' toolbar option  should persist in item preview', () => {
+            essayResponsePage.steps.enterInputInResponseField('{enter}');
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Align Justify'), 'visible');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Align Right');
+    });
+
     describe('Increase indent, Decrease indent formatting options - Preview tab', () => {
         abortEarlySetup();
         before(() => {
@@ -242,15 +325,29 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Decrease Indent')
         });
 
-        it('When the user selects the \'Increase indent\' toolbar option, then indentation of text in the response field should increase and the \'Decrease indent\' toolbar option should get enabled', () => {
+        it('When the user selects the \'Increase indent\' toolbar option, then indentation of text in the response field should increase and the \'Decrease indent\' toolbar option should get enabled in question preview', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
             essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"margin-left: 40px;\">Lorem Ipsum</p>');
             essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Decrease Indent')
         });
 
+        it('When the user selects the \'Increase indent\' toolbar option, then indentation of text in the response field should increase and the \'Decrease indent\' toolbar option should get enabled in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"margin-left: 40px;\">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Decrease Indent')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+        });
+
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Increase Indent');
 
-        it('When the user selects the \'Decrease indent\' toolbar option, then the indentation of text in the response field should decrease', () => {
+        it('When the user selects the \'Decrease indent\' toolbar option, then the indentation of text in the response field should decrease in question', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
@@ -259,6 +356,22 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
+        it('When the user selects the \'Decrease indent\' toolbar option, then the indentation of text in the response field should decrease in question', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"margin-left: 40px;\">Lorem Ipsum</p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Decrease Indent');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Decrease Indent');
+        });
+
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Decrease Indent');
     });
 });

package/cypress/e2e/ILC/EssayResponse/essayResponseCustomizeFormattingOptions3.js

@@ -33,6 +33,31 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert Horizontal Line');
     });
 
+    describe('Horizontal line formatting option - Item preview', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Insert Horizontal Line']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+        });
+
+        it('When the user selects the \'Insert horizontal line\' toolbar option, a horizontal line should be inserted below from where the cursor is pointing in the response field, the \'Insert horizontal line\' toolbar option should not stay in selected state in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Horizontal Line');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p><hr><p><br></p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Insert Horizontal Line')
+        });
+
+        it('When the user hits \'backspace\', then the horizontal line should get removed in item preview', () => {
+            essayResponsePage.steps.enterInputInResponseField('{backspace}')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p><p><br></p>');
+        });
+    });
+
     describe('Blockquote formatting option - Preview tab', () => {
         abortEarlySetup();
         before(() => {
@@ -49,6 +74,20 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p></blockquote>')
         });
 
+        it('When the user selects the \'Blockquote\' toolbar option, then the text in the response field should appear as a block quote in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Block Quote');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p></blockquote>');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Block Quote');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p></blockquote>')
+        });
+
         it('When the user presses the \'Enter\' key and switches to a new line, then the \'Blockquote\' toolbar option should be in selected state and the block quote formatting should persist and user should be able to enter text in the next line', () => {
             essayResponsePage.steps.enterInputInResponseField('{enter}dolor sit amet');
             essayResponsePage.steps.verifyPreviewTabToolbarOptionSelected('Block Quote')
@@ -85,6 +124,25 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Bold (Ctrl+B)');
         });
 
+        it('When the user selects the \'Code inline\' toolbar option, then the text entered in the response field should appear as a highlighted inline code text, the word count should also update and all the toolbar formatting options should be in enabled state in item preview', () => {
+            cy.log('Saving question to switch to item preview context.');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
+            essayResponsePage.steps.enterInputInResponseField('console.log()')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>​​​​​​​console.log()</code><br></p>');
+            essayResponsePage.steps.verifyWordCount('1');
+            //Just checking if Bold option is disabled or not, no need to check for all toolbar options
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Bold (Ctrl+B)');
+            cy.log('Returning to edit mode.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
+            essayResponsePage.steps.enterInputInResponseField('console.log()')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>​​​​​​​console.log()</code><br></p>');
+        });
+
         //Comment: exceptional assertion of font size since in code inline font size is 14.4px
         it('CSS of \'highlighted inline code text\'', { tags: 'css' }, () => {
             utilities.verifyCSS(essayResponsePage.responseField().find('code'), {
@@ -203,6 +261,27 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
+        it('When the user applies Bold, Italic, Underline, Strikethrough and removes formatting in item preview, text should revert to default format', () => {
+            cy.log('Saving question to switch to item preview context.');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab(); // item preview
+            // Recreate initial content
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Strikethrough');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><s><u><em><strong>Lorem Ipsum</strong></em></u></s></p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+            cy.log('Returning to edit mode.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+        });
+
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Remove Format');
 
         it('When the user has selected text in the response field and applies text formatting options - Superscript, Subscript and clicks on the \'Remove format\' toolbar option, then all the text formatting should get removed and the text should be displayed in default format', () => {
@@ -215,18 +294,36 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
         });
 
+        it('When the user applies Superscript & Subscript and removes formatting in item preview, text should revert to default format', () => {
+            cy.log('Saving question to switch to item preview context for superscript/subscript removal.');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Superscript');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><sub><sup>​​​​​​​Lorem Ipsum</sup></sub><br></p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
+            cy.log('Returning to edit mode after item preview test.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+        });
+
         it('When the user has selected text in the response field and applies text formatting option - Align right/Center/Justify  and clicks on the \'Remove format\' toolbar option, then all the text formatting should get removed and the text should be displayed in default format', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Align Right');
-            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: right;\">Lorem Ipsum<br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: right;\">Lorem Ipsum</p>');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format')
-            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
         it('When the user has selected text in the response field and applies text formatting option - Code inline and clicks on the \'Remove format\' toolbar option, then all the text formatting should get removed and the text should be displayed in default format', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>Lorem Ipsum</code><br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>Lorem Ipsum</code></p>');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format')
-            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
     });