itemengine-cypress-automation 1.0.105 → 1.0.107

package/cypress/e2e/ILC/Passage/multipageContentEditTab.js

@@ -0,0 +1,242 @@
+import { passagePage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Passage: Heading Section, Content section, Body section', () => {
+   before(() => {
+      cy.loginAs('admin');
+   });
+
+   describe('Enable multi-page content-Edit tab', () => {
+      abortEarlySetup();
+      before(() => {
+         cy.log('Navigating to passage resource type');
+         passagePage.steps.navigateToCreateResource('passage');
+      });
+
+      it('\'Content\' label should be displayed', () => {
+         utilities.verifyTextContent(passagePage.contentLabel(), 'Content');
+         utilities.verifyElementVisibilityState(passagePage.contentLabel(), 'visible');
+      });
+
+      it('\'Enable multi-page content\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+         utilities.verifyTextContent(passagePage.enableMultipageContentLabel(), 'Enable multi-page content');
+         utilities.verifyElementVisibilityState(passagePage.enableMultipageContentLabel(), 'visible');
+         passagePage.steps.verifyEnableMultiPageContentCheckboxUnchecked();
+      });
+
+      it('When the user checks the \'Enable multi-page content\' checkbox then 1 \'Body\' input fields should be displayed with placeholder text and numeration, Drag handle and Delete option icon buttons should be displayed besides body input field', () => {
+         passagePage.steps.checkMultipageContentCheckbox();
+         utilities.verifyElementVisibilityState(passagePage.bodyInputField(), 'exist');
+         passagePage.steps.verifyBodyContents(0)
+         utilities.verifyElementCount(passagePage.bodyInputField(), 1);
+      });
+
+      it('CSS of Checked Multi-page checkbox', { tags: 'css' }, () => {
+         utilities.verifyCSS(passagePage.enableMultipageContentLabelCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+            'fill': css.color.activeButtons
+         });
+      });
+
+      it('Accessbility of checked Multi-page checkbox', { tags: 'a11y' }, () => {
+         cy.checkAccessibility(passagePage.enableMultipageContentLabelCheckbox().parents('[data-ngie-testid="enable-multi-page-content-checkbox"]'));
+      });
+
+      it('When body input fields are less than 2 then drag handle and Delete page button should be in disabled state', () => {
+         passagePage.steps.verifyDeletePageButtonDisabled();
+         passagePage.steps.verifyDragHandleButtonDisabled();
+      });
+
+      it('CSS of disabled delete and Drag handle button', { tags: 'css' }, () => {
+         passagePage.deletePageButton()
+            .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+         utilities.verifyCSS(passagePage.deletePageButton(), {
+            'opacity': '0.5'
+         })
+         utilities.verifyCSS(passagePage.dragHandleButton(), {
+            'opacity': '0.5'
+         });
+      });
+
+      it('Accessbility of disabled delete and Drag handle button', { tags: 'a11y' }, () => {
+         cy.checkAccessibility(passagePage.deletePageButton());
+         cy.checkAccessibility(passagePage.dragHandleButton());
+      });
+
+      it('When the user hovers over the disabled \'Delete\' icon buttons then, \'Minimum one page is required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+         passagePage.steps.verifyDisabledDeletePageButtonTooltip();
+      });
+
+      it('\'Add page\' button should be present', () => {
+         utilities.verifyTextContent(passagePage.addPageButton(), 'Add page');
+         utilities.verifyElementVisibilityState(passagePage.addPageButton(), 'visible');
+      });
+
+      it('When user adds a page using the \'Add page\' button then added page should be displayed with drag handle, placeholder text, body numeration and delete button', () => {
+         passagePage.steps.addPage();
+         for (let index = 0; index < 2; index++) {
+            passagePage.steps.verifyBodyContents(index)
+         }
+         utilities.verifyElementCount(passagePage.bodyInputField(), 2);
+      });
+
+      it('When body input fields are more than one then drag handle and Delete page button should be in displayed in enabled state', () => {
+         passagePage.steps.verifyDeletePageButtonEnabled();
+         passagePage.steps.verifyDragHandleButtonEnabled();
+      });
+
+      it('CSS of Body input field', { tags: 'css' }, () => {
+         utilities.verifyCSS(passagePage.dragHandleButton().eq(0), {
+            'color': css.color.secondaryBtnActive,
+            'font-size': css.fontSize.normal,
+            'font-weight': css.fontWeight.regular
+         });
+         utilities.verifyCSS(passagePage.deletePageButton().eq(0), {
+            'opacity': '1'
+         });
+         utilities.verifyCSS(passagePage.bodyInputField(), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         utilities.verifyCSS(passagePage.bodyNumeration().eq(0), {
+            'color': css.color.labels,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.semibold
+         });
+         utilities.verifyCSS(passagePage.addPageButton(), {
+            'color': css.color.secondaryBtnActive,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.medium
+         });
+      });
+
+      it('When the user hovers over the drag handle of the body field, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+         passagePage.steps.verifyDragHandleButtonTooltip();
+      });
+
+      it('When the user hovers over the enabled \'Delete\' icon buttons then, \'Delete page\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+         passagePage.steps.verifyDeletePageButtonTooltip();
+      });
+
+      it('When user clicks on the \'Delete\' page button then the respective body input field should get deleted, body numeration should change accordingly', () => {
+         passagePage.steps.deletePage(0);
+         passagePage.steps.verifyDeletePageButtonDisabled();
+         passagePage.steps.verifyBodyContents(0)
+         utilities.verifyElementCount(passagePage.bodyInputField(), 1);
+      });
+
+      it('When user focus in and out of any of the \'Body\' input field without typing anything, an error message \'Error: Body is required.\' should be displayed', () => {
+         passagePage.steps.focusInBodyInputField(0);
+         passagePage.steps.focusOutOfBodyInputField(0);
+         utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Body is required.');
+      });
+
+      it('When user enters text in body input field the error message should disappear', () => {
+         passagePage.steps.addInputTextToBodyInputField(['It simply means the act of being globalized']);
+         utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+      });
+
+      it('When user enters text in Body input field, the placeholder text should disappear ', () => {
+         passagePage.steps.verifyBodyPlaceholderTextNotExist();
+      });
+
+      it('When user adds an image to the body input field then it should be displayed in the body input field', () => {
+         cy.log('Clear Body field')
+         passagePage.steps.clearBodyInputField();
+         passagePage.steps.focusInBodyInputField(0);
+         passagePage.steps.selectImageOptionFromCKEditorToolbar();
+         passagePage.steps.addImageToInputField();
+         passagePage.steps.verifyImageAndAltTextInBodyInputField(0);
+      });
+
+      it('When user adds an equation to the body input field then it should be displayed in the body input field', () => {
+         cy.log('Add page');
+         passagePage.steps.addPage();
+         passagePage.steps.focusInBodyInputField(1);
+         passagePage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+         passagePage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+         passagePage.steps.verifyEquationInBodyInputField(1);
+      });
+
+      it('When user adds a link to the body input field then it should be displayed in the body input field', () => {
+         cy.log('Add page');
+         passagePage.steps.addPage();
+         passagePage.steps.focusInBodyInputField(2);
+         passagePage.steps.selectLinkOptionFromCKEditorToolbar();
+         passagePage.steps.addLinkToInputField();
+         passagePage.steps.verifyLinkInBodyInputField(2);
+      });
+
+      it('When user adds  bold text to the body input field then it should be displayed in the body input field', () => {
+         cy.log('Add page');
+         passagePage.steps.addPage();
+         passagePage.steps.focusInBodyInputField(3);
+         passagePage.steps.selectBoldOptionFromCKEditorToolbar();
+         passagePage.steps.addBoldTextInputToBodyInputField(3);
+         passagePage.steps.verifyBoldTextInBodyInputField(3);
+      });
+
+      it('CSS of \'Body\' input field when image, equation, text and link are added', { tags: 'css' }, () => {
+         utilities.verifyCSS(passagePage.bodyInputField().eq(0).find('img'), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         utilities.verifyCSS(passagePage.bodyInputField().eq(1), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         utilities.verifyCSS(passagePage.bodyInputField().eq(2).find('a'), {
+            'color': css.color.linkText,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         utilities.verifyCSS(passagePage.bodyInputField().eq(3), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+      });
+
+      it('Accessbility of\' Body input\' field when image, equation, text and link are added', { tags: 'a11y' }, () => {
+         cy.checkAccessibility(passagePage.bodyWrapper().parents('[data-rbd-droppable-id="assessment-option-item-options"]'));
+      });
+   });
+
+   describe('Enable multi-page content: Check & Uncheck functionality-Edit tab', () => {
+      abortEarlySetup();
+      before(() => {
+         cy.log('Navigating to passage resource type');
+         passagePage.steps.navigateToCreateResource('passage');
+         cy.log('check the \'Enable multi-page content\' checkbox');
+         passagePage.steps.checkMultipageContentCheckbox();
+         utilities.verifyElementVisibilityState(passagePage.bodyInputField(), 'exist');
+         cy.log('Add 1 page to body input field');
+         passagePage.steps.addPage();
+      });
+
+      it('When user adds text input to all the \'Body \' input fields then the added text should be displayed in input fields', () => {
+         passagePage.steps.focusInBodyInputField(0);
+         passagePage.steps.addInputTextToBodyInputField(['It simply means the act of being globalized', 'Globalization is a serious issue']);
+      });
+
+      it('When user unchecks the \'Enable multi-page content\' checkbox then all the input fields should be combined and displayed in a single \'Body\' input field', () => {
+         passagePage.steps.uncheckMultipageContentCheckbox();
+         passagePage.steps.verifyTextInBodyInputField(0, 'It simply means the act of being globalizedGlobalization is a serious issue');
+      });
+
+      it('\'Body\' input field should be displayed without numeration, Drag handle and Delete option icon ', () => {
+         utilities.verifyElementVisibilityState(passagePage.bodyWrapper(), 'notExist');
+      });
+
+      it('When user checks the \'Enable multi-page content\' checkbox again then the added content should be displayed in a single body field', () => {
+         passagePage.steps.checkMultipageContentCheckbox();
+         passagePage.steps.verifyTextInBodyInputField(0, 'It simply means the act of being globalizedGlobalization is a serious issue');
+      });
+   });
+});
+

package/cypress/e2e/ILC/Passage/passageAdditionalSettings.js

@@ -0,0 +1,99 @@
+import { passagePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Passage: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        passagePage.tests.verifyAdditonalSettingsAccordionProperties();
+
+    });
+
+    describe('Additional settings details section-Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+            cy.log('Expanding additional settings accordion');
+            passagePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Details\' label should be displayed', () => {
+            utilities.verifyInnerText(passagePage.additionalSettingsDetailsLabel(), 'Details');
+            utilities.verifyElementVisibilityState(passagePage.additionalSettingsDetailsLabel(), 'visible');
+        });
+
+        it('\'Flesch-Kincaid\' label and input field should be displayed and user should be able to enter text in input field', () => {
+            utilities.verifyInnerText(passagePage.additionalSettingsFleschKincaidLabel(), 'Flesch-Kincaid');
+            utilities.verifyElementVisibilityState(passagePage.additionalSettingsFleschKincaidLabel(), 'visible');
+            passagePage.steps.addAndVerifyTextInFleschKincaidInputField('Average');
+            utilities.verifyElementVisibilityState(passagePage.additionalSettingsFleschKincaidInputField(), 'visible');
+        });
+
+        it('\'Lexile\' label and input field should be displayed and user should be able to enter text in input field', () => {
+            utilities.verifyInnerText(passagePage.additionalSettingsLexileLabel(), 'Lexile');
+            utilities.verifyElementVisibilityState(passagePage.additionalSettingsLexileLabel(), 'visible');
+            passagePage.steps.addAndVerifyTextInLexileInputField('Grade Band');
+            utilities.verifyElementVisibilityState(passagePage.additionalSettingsLexileInputField(), 'visible');
+        });
+
+        it('\'Teacher scoring guidelines\' label and input field should be displayed and user should be able to enter \'Teacher scoring guidelines\'', () => {
+            utilities.verifyInnerText(passagePage.additionalSettingsTeacherGuidelinesLabel(), 'Teacher scoring guidelines');
+            utilities.verifyElementVisibilityState(passagePage.additionalSettingsTeacherGuidelinesLabel(), 'visible');
+            passagePage.steps.addTextToTeacherGuidelinesInputField();
+            utilities.verifyElementVisibilityState(passagePage.additionalSettingsTeacherGuidelinesInputField(), 'visible');
+            utilities.verifyInnerText(passagePage.additionalSettingsTeacherGuidelinesInputField(), 'Teacher scoring guidelines');
+        });
+
+        it('CSS of \'Details\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(passagePage.additionalSettingsDetailsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(passagePage.additionalSettingsFleschKincaidLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(passagePage.additionalSettingsLexileLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(passagePage.additionalSettingsTeacherGuidelinesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('CSS of added text in input field of the Details Section', { tags: 'css' }, () => {
+            utilities.verifyCSS(passagePage.additionalSettingsFleschKincaidInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(passagePage.additionalSettingsLexileInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(passagePage.additionalSettingsTeacherGuidelinesInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/Passage/passageEditTab.js

@@ -0,0 +1,241 @@
+import { passagePage } from "../../../pages";
+import { commonComponents, createQuestionBasePage } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Passage: Heading Section, Content section, Body section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Heading section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        it('\'Heading\' label should be displayed', () => {
+            utilities.verifyInnerText(passagePage.headingLabel(), 'Heading');
+            utilities.verifyElementVisibilityState(passagePage.headingLabel(), 'visible');
+        });
+
+        it('\'Heading\' input fields should be displayed with placeholder text by default', () => {
+            passagePage.steps.verifyHeadingPlaceholder();
+        });
+
+        it('CSS of Heading Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(passagePage.headingLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessbility of default passage edit page', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(passagePage.headingLabel().parents('.resource-and-tool-tablist-wrapper'))
+        });
+
+        it('When user focus in and out of any of the \'Heading\' input field without typing anything, an error message should be thrown', () => {
+            passagePage.steps.focusInHeadingInputField();
+            passagePage.steps.focusOutOfHeadingInputField();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Heading is required.')
+        });
+
+        passagePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user enters text in Heading input field the \'Error: Heading is required.\' error message should disappear.', () => {
+            passagePage.steps.addHeadingText();
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist')
+        });
+
+        // Failing due to https://redmine.zeuslearning.com/issues/539634
+        it('When user enters text in Heading input field, the placeholder text should disappear ', () => {
+            passagePage.steps.verifyHeadingPlaceholderTextDisappear();
+        });
+    });
+
+    describe('Content section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        it('\'Content\' label should be displayed', () => {
+            utilities.verifyInnerText(passagePage.contentLabel(), 'Content');
+            utilities.verifyElementVisibilityState(passagePage.contentLabel(), 'visible');
+        });
+
+        it('CSS of Content Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(passagePage.contentLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(passagePage.enableMultipageContentLabelCheckbox().parents('[data-ngie-testid="enable-multi-page-content-checkbox"]').find('svg path'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('\'Enable multi-page content\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(passagePage.enableMultipageContentLabel(), 'Enable multi-page content');
+            utilities.verifyElementVisibilityState(passagePage.enableMultipageContentLabel(), 'visible');
+            passagePage.steps.verifyEnableMultiPageContentCheckboxUnchecked();
+        });
+    });
+
+    describe('Body section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        it('\'Body\' label should be displayed', () => {
+            utilities.verifyInnerText(passagePage.bodyLabel(), 'Body');
+            utilities.verifyElementVisibilityState(passagePage.bodyLabel(), 'visible');
+        });
+
+        it('By default, \'Body\' input fields should be displayed with placeholder text', () => {
+            passagePage.steps.verifyBodyPlaceholder();
+        });
+
+        it('CSS of Body Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(passagePage.bodyLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(passagePage.bodyInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When user focus in and out of any of the \'Body\' input field without typing anything, an error message \'Error: Body is required.\' should be displayed', () => {
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.focusOutOfBodyInputField(0);
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Body is required.');
+        });
+
+        passagePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user enters text in body input field the error message should disappear', () => {
+            passagePage.steps.addInputTextToBodyInputField(['It simply means the act of being globalized']);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+        });
+
+        it('When user enters text in Body input field, the placeholder text should disappear', () => {
+            passagePage.steps.verifyBodyPlaceholderTextNotExist();
+        });
+
+        it('When user adds an image to the body input field then it should be displayed in the body input field', () => {
+            passagePage.steps.clearBodyInputField();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectImageOptionFromCKEditorToolbar();
+            passagePage.steps.addImageToInputField();
+            passagePage.steps.verifyImageAndAltTextInBodyInputField(0);
+        });
+
+        it('When user adds an equation to the body input field then it should be displayed in the body input field', () => {
+            passagePage.steps.clearBodyInputField();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            passagePage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            passagePage.steps.verifyEquationInBodyInputField(0);
+        });
+
+        it('When user adds a link to the body input field then it should be displayed in the body input field', () => {
+            passagePage.steps.clearBodyInputField();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectLinkOptionFromCKEditorToolbar();
+            passagePage.steps.addLinkToInputField();
+            passagePage.steps.verifyLinkInBodyInputField(0);
+        });
+
+        it('When user adds  bold text to the body input field then it should be displayed in the body input field', () => {
+            passagePage.steps.clearBodyInputField();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectBoldOptionFromCKEditorToolbar();
+            passagePage.steps.addBoldTextInputToBodyInputField(0);
+            passagePage.steps.verifyBoldTextInBodyInputField(0);
+        });
+    });
+
+    describe('Heading section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        it('When user has not entered any text in \'Heading\' and \'Body\' field then \'Preview not available\' text should display in Preview Tab', () => {
+            cy.log('Switching to Preview Tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(passagePage.noPreviewText(), 'Preview not available')
+        });
+
+        it('When user adds text to the Heading input field then the added text should be displayed in the \'Preview tab\' section', () => {
+            cy.log('Switching to Edit Tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            passagePage.steps.addHeadingText()
+            cy.log('Switching to Preview Tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(passagePage.previewHeadingText(), 'Globalization')
+        });
+    });
+
+    describe('Body section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        it('When user adds an image to the body input it should be displayed in the \'Preview tab\'', () => {
+            cy.log('Switching to Edit Tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectImageOptionFromCKEditorToolbar();
+            passagePage.steps.addImageToInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            passagePage.steps.verifyImageAddedToBodyInPreviewTab(0);
+        });
+
+        it('When user adds an equation to the body input it should be displayed in the \'Preview tab\'', () => {
+            cy.log('Switching to Edit Tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            passagePage.steps.clearBodyInputField();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            passagePage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            passagePage.steps.verifyEquationAddedToBodyInPreviewTab(0);
+        });
+
+        it('When user adds a Bold text to the body input it should be displayed in the \'Preview tab\'', () => {
+            cy.log('Switching to Edit Tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            passagePage.steps.clearBodyInputField();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectBoldOptionFromCKEditorToolbar();
+            passagePage.steps.addBoldTextInputToBodyInputField(0);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            passagePage.steps.verifyBoldTextAddedToBodyInPreviewTab(0);
+        });
+
+        it('When user adds a link to the body input it should be displayed in the \'Preview tab\'', () => {
+            cy.log('Switching to Edit Tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            passagePage.steps.clearBodyInputField();
+            passagePage.steps.focusInBodyInputField(0);
+            passagePage.steps.selectLinkOptionFromCKEditorToolbar();
+            passagePage.steps.addLinkToInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            passagePage.steps.verifyLinkAddedToBodyInPreviewTab(0);
+        });
+    });
+});

package/cypress/e2e/ILC/Passage/passageHeaderSection.js

@@ -0,0 +1,73 @@
+import { dialogBoxBase, passagePage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create question page - Passage: Header section and saving resource tool', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        passagePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Passage');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        passagePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        passagePage.tests.verifyCancelButton();
+    });
+
+    describe('Save button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to passage resource type');
+            passagePage.steps.navigateToCreateResource('passage');
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                passagePage.steps.verifyHeadingInputFieldErrorMessage();
+                passagePage.steps.verifyBodyInputFieldErrorMessage();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                passagePage.steps.addHeadingText();
+                passagePage.steps.addInputTextToBodyInputField(['It simply means the act of being globalized']);
+                utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+            });
+
+            passagePage.tests.verifyCreateItemWrapperContentsA11y();
+        });
+
+        describe('Saving a resource tool', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save button the resource tool should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                passagePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+
+            passagePage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        });
+    });
+});