itemengine-cypress-automation 1.0.90 → 1.0.92

package/cypress/e2e/ILC/ReadingRuler/readingRulerPreviewTab.js

@@ -0,0 +1,257 @@
+import { readingRulerPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Reading ruler: Preview Tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Conditional checkboxes\'- Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        it('When \'Display button to student\' checkbox is checked by default, then reading ruler button should be displayed in Preview tab', () => {
+            readingRulerPage.steps.verifyDisplayButtonToStudentCheckboxIsChecked();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRulerButton(), 'visible')
+        });
+
+        it('When user unchecks the \'Display button to student\' checkbox then reading ruler button should not be displayed in Preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.uncheckDisplayButtonToStudentCheckbox();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRulerButton(), 'notExist')
+        });
+
+        it('Accessibility of preview tab when reading ruler button is not displayed', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.previewWrapper());
+        });
+
+        it('When \'Allow student to resize\' checkbox is checked by default and user selects \'Drag handle\' ruler style then the resize buttons on the reading ruler should be displayed in enabled state in Preview tab', () => {
+            cy.log('Switching to Edit Tab');
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.checkDisplayButtonToStudentCheckbox();
+            readingRulerPage.steps.verifyAllowStudentToResizeCheckboxIsChecked();
+            readingRulerPage.steps.selectRulerStyle('Drag handle');
+            cy.log('Switching to Preview Tab');
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.clickOnReadingRulerButton();
+            readingRulerPage.steps.verifyResizeButtonsEnabled();
+        });
+
+        // Failing due to https://redmine.zeuslearning.com/issues/528044
+        it('Accessbility of reading ruler and reading ruler button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.readingRulerButton());
+            cy.checkAccessibility(readingRulerPage.readingRuler());
+        });
+
+        it('When user unchecks the \'Allow student to resize\' checkbox then the resize buttons on the reading ruler should be displayed in disabled state in Preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.uncheckAllowStudentToResizeCheckbox();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.clickOnReadingRulerButton();
+            readingRulerPage.steps.verifyResizeButtonDisabled();
+        });
+
+        // Failing due to https://redmine.zeuslearning.com/issues/528044
+        it('Accessbility of reading ruler when \'Allow student to resize\' checkbox is unchecked', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.readingRuler());
+        });
+
+        it('When user checks the \'Visible on landing\' checkbox then switches to Preview tab, reading ruler button should be in selected state and reading ruler should be displayed in the preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.checkVisibleOnLandingCheckbox();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.verifySelectedStateOfReadingRulerButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRuler(), 'visible');
+        });
+
+        it('When user clicks on the \'Close\' button on the reading ruler then the reading ruler should close and reading ruler button should be in unselected state in the Preview tab', () => {
+            readingRulerPage.steps.clickOnCloseButtonInReadingRuler();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRuler(), 'notExist');
+            readingRulerPage.steps.verifyUnselectedStateOfReadingRulerButton();
+        });
+
+        it('When user unchecks the \'Visible on landing\' checkbox then the reading ruler should not be visible and reading ruler button should be in unselected state in the Preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.uncheckVisibleOnLandingCheckbox();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.verifyUnselectedStateOfReadingRulerButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRuler(), 'notExist');
+        });
+    });
+
+    describe('Preview Tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        it('When \'Display button to student\' and \'Allow student to resize\' checkbox are checked and user selects \'Drag handle\' ruler style and when user switches to preview tab, reading ruler button should be displayed in unselected state', () => {
+            readingRulerPage.steps.verifyDisplayButtonToStudentCheckboxIsChecked();
+            readingRulerPage.steps.verifyAllowStudentToResizeCheckboxIsChecked();
+            readingRulerPage.steps.selectRulerStyle('Drag handle');
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRulerButton(), 'visible');
+            readingRulerPage.steps.verifyUnselectedStateOfReadingRulerButton();
+        });
+
+        it('CSS of active and default state of \'ReadingRuler\' button in Preview tab', { tags: 'css' }, () => {
+            readingRulerPage.steps.hoverOnReadingRulerButton();
+            utilities.verifyCSS(readingRulerPage.readingRulerButton(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.figActiveComponentBg
+            });
+            readingRulerPage.steps.hoverAwayFromReadingRulerButton();
+            utilities.verifyCSS(readingRulerPage.readingRulerButton(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('When user clicks on the reading ruler button, reading ruler should be displayed in Preview Tab and reading ruler button should be in selected state', () => {
+            readingRulerPage.steps.clickOnReadingRulerButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRuler(), 'visible');
+            readingRulerPage.steps.verifySelectedStateOfReadingRulerButton();
+        });
+
+        it('Drag handle button, resize buttons, and close button should be visible and displayed in enabled state in Preview tab ', () => {
+            const buttons = [readingRulerPage.dragButton, readingRulerPage.topResizeButton, readingRulerPage.bottomResizeButton, readingRulerPage.closeButton, readingRulerPage.resizeButton]
+            buttons.forEach(button => {
+                utilities.verifyElementVisibilityState(button(), 'visible');
+            });
+            readingRulerPage.steps.verifyResizeButtonsEnabled();
+            readingRulerPage.steps.verifyCloseButtonEnabled();
+            readingRulerPage.steps.verifyDragButtonEnabled();
+        });
+
+        it('CSS of Drag handle button, resize buttons, and close button in default state', { tags: 'css' }, () => {
+            const buttons = [readingRulerPage.dragButton, readingRulerPage.topResizeButton, readingRulerPage.bottomResizeButton, readingRulerPage.closeButton, readingRulerPage.resizeButton]
+            buttons.forEach(button => {
+                utilities.verifyCSS(button(), {
+                    'color': css.color.primaryBtn,
+                    'font-weight': css.fontWeight.medium
+                });
+            });
+        });
+
+        it('CSS of Drag handle button, resize buttons, and close button in hover state', { tags: 'css' }, () => {
+            const buttons = [readingRulerPage.dragButton, readingRulerPage.topResizeButton, readingRulerPage.bottomResizeButton, readingRulerPage.closeButton, readingRulerPage.resizeButton]
+            buttons.forEach(button => {
+                button()
+                    .realHover()
+                utilities.verifyCSS(button(), {
+                    'background-color': css.color.activeButtons
+                });
+            });
+        });
+
+        it('When user deselects the reading ruler button then the button should be displayed in unselected state and the reading ruler should not display in Preview tab', () => {
+            readingRulerPage.steps.clickOnReadingRulerButton();
+            readingRulerPage.steps.verifyUnselectedStateOfReadingRulerButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.readingRuler(), 'notExist');
+        });
+    });
+
+    describe('Opacity section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+            cy.log('Checking visible on landing checkbox')
+            readingRulerPage.steps.checkVisibleOnLandingCheckbox();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+        });
+
+        it('When the opacity value is set to 80 percent by default then the opacity of the ruler should be set to 88 percent in the preview tab', () => {
+            readingRulerPage.steps.verifyReadingRulerOpacityInPreviewTab(0.8);
+        });
+
+        it('When the user changes the opacity value from the opacity slider in the edit tab then the opacity of ruler should also change accordingly in the preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.clickOnOpacitySlider();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.verifyReadingRulerOpacityInPreviewTab(0.5);
+        });
+
+        it('When the user changes the opacity value from the opacity input field in the edit tab then the opacity of ruler should also change accordingly in the preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.addInputToOpacityInputField(30);
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.verifyReadingRulerOpacityInPreviewTab(0.3);
+        });
+    });
+
+    describe('Color section- Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+            cy.log('Checking visible on landing checkbox')
+            readingRulerPage.steps.checkVisibleOnLandingCheckbox();
+        });
+
+        it('When \'Grey\' is the selected color in the color section by default then the color of the ruler should be set to grey in the preview tab', () => {
+            readingRulerPage.steps.verifyColorBlockSelectedState(0);
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.verifyReadingRulerColorInPreviewTab(0);
+        });
+
+        it('When the user changes the color of the ruler in the edit tab then the color of the ruler should also change accordingly in the preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.selectColorBlock(1);
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.verifyReadingRulerColorInPreviewTab(1);
+        });
+    });
+
+    describe('Default number of lines section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+            cy.log('Checking visible on landing checkbox');
+            readingRulerPage.steps.selectRulerStyle('Drag handle');
+            readingRulerPage.steps.checkVisibleOnLandingCheckbox();
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default number of lines value is set to 4 by default and user has selected \'Drag handle\' in ruler style section then the height and size of the ruler should be set to 168px and 68px respectively in the preview tab', () => {
+            readingRulerPage.steps.verifyHeightAndSizeOfReadingRuler(208, 108);
+        });
+
+        it('When user changes the value of default number of lines value in the edit tab then the height and size of ruler should also change accordingly in the preview tab', () => {
+            cy.log('Switching to Edit Tab')
+            readingRulerPage.steps.switchToEditTab();
+            readingRulerPage.steps.addInputToDefaultNumberOfLinesInputField('5');
+            cy.log('Switching to Preview Tab')
+            readingRulerPage.steps.switchToPreviewTab();
+            readingRulerPage.steps.verifyHeightAndSizeOfReadingRuler(230, 130);
+        });
+    });
+});

package/cypress/e2e/ILC/ReadingRuler/readingrulerPreviewContents.smoke.js

@@ -0,0 +1,68 @@
+import { readingRulerPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+describe('Preview tab contents for all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to reading ruler resource type');
+                        readingRulerPage.steps.navigateToCreateResource('reading ruler');
+                        readingRulerPage.steps.checkVisibleOnLandingCheckbox();
+                        readingRulerPage.steps.selectColorBlock(2);
+                        readingRulerPage.steps.addInputToOpacityInputField(30);
+                        readingRulerPage.steps.addInputToDefaultNumberOfLinesInputField(5);
+                        readingRulerPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        readingRulerPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    readingRulerPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'exist');
+                }
+            });
+
+            it('\'Reading ruler\' should be displayed with \'30 percent\' opacity and in \'Blue\' color', () => {
+                readingRulerPage.steps.verifyReadingRulerExistInPreviewTab();
+                readingRulerPage.steps.verifyReadingRulerOpacityInPreviewTab('0.3');
+                readingRulerPage.steps.verifyReadingRulerColorInPreviewTab(2);
+                readingRulerPage.steps.verifyHeightAndSizeOfReadingRuler(510, 130);
+            });
+        });
+    });
+});