itemengine-cypress-automation 1.0.2

package/cypress/pages/passagePage.js

@@ -0,0 +1,426 @@
+import constants from "../fixtures/constants";
+import utilities from "../support/helpers/utilities";
+import { additionalSettingsPanel, ckEditorToolbar, commonComponents, createQuestionBasePage, equationEditorFlyout } from "./components";
+import { dialogBoxBase } from "./dialogBoxBase";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...commonComponents,
+    ...ckEditorToolbar,
+    ...equationEditorFlyout,
+    ...additionalSettingsPanel,
+    //TODO: Need to update selectors https://redmine.zeuslearning.com/issues/518498
+    headingLabel: () => cy.get('.inline-text-property-label').eq(0),
+    headingInputField: () => cy.get('.inline-text-question-prefix-wrapper input').eq(0),
+    contentLabel: () => cy.get('.content-label'),
+    enableMultipageContentLabel: () => cy.get('[data-ngie-testid="enable-multi-page-content-checkbox"] .MuiFormControlLabel-label'),
+    enableMultipageContentLabelCheckbox: () => cy.get('[data-ngie-testid="enable-multi-page-content-checkbox"] input'),
+    bodyLabel: () => cy.get('.additional-settings-label').eq(0),
+    bodyInputField: () => cy.get('[title="Enter body"]'),
+    addPageButton: () => cy.get('.add-option'),
+    deletePageButton: () => cy.get('.icon-Delete'),
+    bodyWrapper: () => cy.get('.edit-mcq-option-wrapper'),
+    bodyNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentDiv"]'),
+    //Preview
+    previewHeadingText: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"] .passage_Heading'),
+    previewTabBody: () => cy.get('.question-text-wrapper'),
+    previousPageButton: () => cy.get('.pagination-button[data-at="previous"]'),
+    nextPageButton: () => cy.get('.pagination-button[data-at="next"]'),
+    noPreviewText: () => cy.get('[class*="PassagePreviewstyles__NoPreview"]'),
+    paginationText: () => cy.get('.pagination-text'),
+    previewWrapper: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"]'),
+    // additionalSettings
+    additionalSettingsFleschKincaidLabel: () => cy.get('.inline-text-property-label').eq(1),
+    additionalSettingsLexileLabel: () => cy.get('.inline-text-property-label').eq(2),
+    additionalSettingsFleschKincaidInputField: () => cy.get('.MuiInputBase-root [aria-label="Flesch-Kincaid"]'),
+    additionalSettingsLexileInputField: () => cy.get('.MuiInputBase-root [aria-label="Lexile"]')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...commonComponents.steps,
+    ...ckEditorToolbar.steps,
+    ...equationEditorFlyout.steps,
+    ...additionalSettingsPanel.steps,
+
+    verifyHeadingPlaceholder: () => {
+        passagePage.headingInputField()
+            .should('have.attr', 'placeholder', 'Enter heading');
+    },
+
+    verifyBodyPlaceholder: () => {
+        passagePage.bodyInputField()
+            .should('have.attr', 'data-cke-editorplaceholder', 'Enter body');
+    },
+
+    addHeadingText: () => {
+        passagePage.headingInputField()
+            .type('Globalization', { delay: 0 })
+            .blur();
+    },
+
+    addInputTextToBodyInputField: (inputTextArray) => {
+        inputTextArray.forEach((inputText, index) => {
+            passagePage.bodyInputField()
+                .eq(index)
+                .type(inputText)
+                .should('have.text', inputText)
+                .blur();
+        });
+    },
+
+    focusInBodyInputField: (index) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .focus();
+    },
+
+    focusInHeadingInputField: () => {
+        passagePage.headingInputField()
+            .focus();
+    },
+
+    focusOutOfBodyInputField: (index) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .blur();
+    },
+
+    focusOutOfHeadingInputField: () => {
+        passagePage.headingInputField()
+            .blur();
+    },
+
+    verifyHeadingInputFieldErrorMessage: () => {
+        passagePage.headingLabel()
+            .parents('.passage')
+            .within(() => {
+                commonComponents.errorMessage()
+                    .eq(0)
+                    .verifyInnerText('Error: Heading is required.');
+            });
+    },
+
+    verifyBodyInputFieldErrorMessage: () => {
+        passagePage.bodyLabel()
+            .parents('.passage')
+            .within(() => {
+                commonComponents.errorMessage()
+                    .eq(1)
+                    .verifyInnerText('Error: Body is required.');
+            });
+    },
+
+    addBoldTextInputToBodyInputField: (index) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .type('This is a bold option')
+            .should('have.text', '​​​​​​​This is a bold option');
+    },
+
+    verifyImageAndAltTextInBodyInputField: (index) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyEquationInBodyInputField: (index) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .find('[data-widget="ngie_equation"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    verifyLinkInBodyInputField: (index) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    verifyBoldTextInBodyInputField: (index) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .find('strong')
+            .should('exist')
+            .should('have.text', '​​​​​​​This is a bold option');
+    },
+
+    verifyTextInBodyInputField: (index, bodyInputText) => {
+        passagePage.bodyInputField()
+            .eq(index)
+            .should('have.text', bodyInputText);
+    },
+
+    addPage: () => {
+        passagePage.addPageButton()
+            .click();
+    },
+
+    deletePage: (index) => {
+        passagePage.deletePageButton()
+            .eq(index)
+            .click();
+    },
+
+    verifyDeletePageButtonDisabled: () => {
+        passagePage.deletePageButton()
+            .should('be.disabled');
+    },
+
+    verifyDragHandleButtonDisabled: () => {
+        commonComponents.dragHandleButton()
+            .parents('[class*="SingleOptionstyle__IconWrapper"]')
+            .should('have.attr', 'draggable', 'false');
+    },
+
+    verifyDeletePageButtonEnabled: () => {
+        passagePage.deletePageButton()
+            .should('be.enabled');
+    },
+
+    verifyDragHandleButtonEnabled: () => {
+        commonComponents.dragHandleButton()
+            .parents('[class*="SingleOptionstyle__IconWrapper"]')
+            .should('have.attr', 'draggable', 'true');
+    },
+
+    verifyBodyContents: (index) => {
+        passagePage.bodyWrapper()
+            .eq(index)
+            .within(() => {
+                passagePage.bodyInputField()
+                    .should('have.attr', 'data-cke-editorplaceholder', 'Enter body');
+                commonComponents.dragHandleButton()
+                    .should('exist');
+                passagePage.deletePageButton()
+                    .should('exist');
+                passagePage.bodyNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    verifyDisabledDeletePageButtonTooltip: () => {
+        passagePage.deletePageButton()
+            .eq(0)
+            .trigger('mouseover', { force: true })
+        commonComponents.tooltipText()
+            .should('have.text', 'Minimum one page is required.');
+        passagePage.deletePageButton()
+            .eq(0)
+            .trigger('mouseout', { force: true });
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    verifyDragHandleButtonTooltip: () => {
+        commonComponents.dragHandleButton()
+            .eq(0)
+            .verifyTooltip('Drag to reorder');
+    },
+
+    verifyDeletePageButtonTooltip: () => {
+        passagePage.deletePageButton()
+            .eq(0)
+            .verifyTooltip('Delete page');
+    },
+
+    verifyBodyPlaceholderTextNotExist: () => {
+        passagePage.bodyInputField()
+            .should('not.have.attr', 'data-cke-editorplaceholder');
+    },
+
+    verifyHeadingPlaceholderTextDisappear: () => {
+        passagePage.headingInputField()
+            .should('not.have.attr', 'placeholder');
+    },
+
+    verifyEnableMultiPageContentCheckboxUnchecked: () => {
+        passagePage.enableMultipageContentLabelCheckbox()
+            .should('not.be.checked');
+    },
+
+    clearBodyInputField: () => {
+        passagePage.bodyInputField()
+            .clear();
+    },
+
+    checkMultipageContentCheckbox: () => {
+        passagePage.enableMultipageContentLabelCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckMultipageContentCheckbox: () => {
+        passagePage.enableMultipageContentLabelCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+    //Preview
+    verifyImageAddedToBodyInPreviewTab: () => {
+        passagePage.previewTabBody()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyEquationAddedToBodyInPreviewTab: () => {
+        passagePage.previewTabBody()
+            .contains(constants.CKEditorInputFieldEnteredEquationText)
+        passagePage.previewTabBody()
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+    },
+
+    verifyLinkAddedToBodyInPreviewTab: () => {
+        passagePage.previewTabBody()
+            .should('have.text', 'lorem')
+            .find('a')
+            .should('have.attr', 'href', `${Cypress.config().baseUrl}`)
+    },
+
+    verifyBoldTextAddedToBodyInPreviewTab: () => {
+        passagePage.previewTabBody()
+            .find('strong')
+            .should('exist')
+            .should('have.text', 'This is a bold option')
+    },
+
+    verifyPreviousPageButtonDisabled: () => {
+        passagePage.previousPageButton()
+            .should('be.disabled');
+    },
+
+    verifyNextPageButtonDisabled: () => {
+        passagePage.nextPageButton()
+            .should('be.disabled');
+    },
+
+    verifyPreviousPageButtonEnabled: () => {
+        passagePage.previousPageButton()
+            .should('be.enabled');
+    },
+
+    verifyNextPageButtonEnabled: () => {
+        passagePage.nextPageButton()
+            .should('be.enabled');
+    },
+
+    navigateToNextPage: () => {
+        passagePage.nextPageButton()
+            .click();
+    },
+
+    navigateToPreviousPage: () => {
+        passagePage.previousPageButton()
+            .click();
+    },
+
+    hoverOnNextPageButton: () => {
+        passagePage.nextPageButton()
+            .realHover()
+    },
+
+    hoverAwayFromNextPageButton: () => {
+        passagePage.nextPageButton()
+            .realHover({ position: 'topLeft' })
+    },
+
+    hoverOnPreviousPageButton: () => {
+        passagePage.previousPageButton()
+            .realHover()
+    },
+
+    hoverAwayFromPreviousPageButton: () => {
+        passagePage.previousPageButton()
+            .realHover({ position: 'topLeft' })
+    },
+
+    // additional settings
+    addAndVerifyTextInFleschKincaidInputField: (text) => {
+        passagePage.additionalSettingsFleschKincaidInputField()
+            .type(text, { delay: 0 })
+            .blur()
+            .should('have.attr', 'value', text);
+    },
+
+    addAndVerifyTextInLexileInputField: (text) => {
+        passagePage.additionalSettingsLexileInputField()
+            .type(text, { delay: 0 })
+            .blur()
+            .should('have.attr', 'value', text);
+    },
+
+    addTextToTeacherGuidelinesInputField: () => {
+        passagePage.additionalSettingsTeacherGuidelinesInputField()
+            .type('Teacher scoring guidelines', { delay: 0 })
+            .blur();
+    },
+
+    /**
+    * @param {number} currentPage shows the current page
+    * @param {number} TotalPages shows the total no of pages
+    * @description this function verifies pagination text displayed in the preview tab
+    */
+    verifyPaginationText: (currentPage, TotalPages) => {
+        passagePage.paginationText()
+            .should('have.text', `${currentPage} of ${TotalPages}`);
+    },
+}
+
+const tests = {
+    ...equationEditorFlyout.tests,
+    ...commonComponents.tests,
+    ...createQuestionBasePage.tests,
+    ...additionalSettingsPanel.tests,
+
+    // header section
+    verifyCancelButton: () => {
+        it('When user has made no edits and clicks on Cancel button, the user should be directed back to the \'Select a Question\' page', () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.questionTypeOptionTitle(), 'visible');
+        });
+
+        it('When user has made some edits/changes and clicks on Cancel button, a popup should be displayed', () => {
+            selectQuestionResourceToolPage.steps.selectResourceType('Passage');
+            utilities.verifyElementVisibilityState(passagePage.headingInputField(), 'visible');
+            passagePage.steps.addHeadingText();
+            createQuestionBasePage.cancelButton()
+                .click();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible')
+        });
+
+        dialogBoxBase.tests.verifyContentsOfLeavePagePopupWithCSSAnda11y();
+
+        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
+            dialogBoxBase.buttonReject()
+                .click();
+            createQuestionBasePage.editTab()
+                .should('have.attr', 'aria-selected', 'true')
+            passagePage.headingInputField()
+                .should('have.attr', 'value', 'Globalization')
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+            dialogBoxBase.buttonAccept()
+                .click();
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.questionTypeOptionTitle(), 'visible');
+        });
+    },
+}
+
+export const passagePage = {
+    ...selectors,
+    steps,
+    tests
+}