itemengine-cypress-automation 1.0.105 → 1.0.106

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

@@ -0,0 +1,246 @@
+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 - Preview tab', () => {
+   before(() => {
+      cy.loginAs('admin');
+   });
+
+   describe('Passage content - Preview tab', () => {
+      abortEarlySetup();
+      before(() => {
+         cy.log('Navigating to passage resource type');
+         passagePage.steps.navigateToCreateResource('passage');
+         passagePage.steps.addHeadingText();
+         passagePage.steps.addInputTextToBodyInputField(['It simply means the act of being globalized']);
+         cy.log('Switching to Preview Tab')
+         createQuestionBasePage.steps.switchToPreviewTab();
+      });
+
+      it('When user adds text to the Heading and Body input field then the added text should be displayed in the \'Preview tab\' section', () => {
+         utilities.verifyInnerText(passagePage.previewHeadingText(), 'Globalization');
+         utilities.verifyInnerText(passagePage.previewTabBody(), 'It simply means the act of being globalized');
+      });
+
+      // Failing due to https://redmine.zeuslearning.com/issues/540708
+      it('CSS of Heading and Body text in \'Preview\' tab', { tags: 'css' }, () => {
+         utilities.verifyCSS(passagePage.previewHeadingText(), {
+            'color': css.color.questionHeading,
+            'font-size': css.fontSize.huge,
+            'font-weight': css.fontWeight.regular
+         });
+         utilities.verifyCSS(passagePage.previewTabBody(), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+      });
+
+      it('Accessbility of default passage Preview Tab', { tags: 'a11y' }, () => {
+         cy.checkAccessibility(passagePage.previewWrapper());
+      });
+   });
+
+   describe('Multi-page content with single page - Preview tab', () => {
+      abortEarlySetup();
+      before(() => {
+         cy.log('Navigating to passage resource type');
+         passagePage.steps.navigateToCreateResource('passage');
+         passagePage.steps.addHeadingText();
+         cy.log('Checking Multipage content checkbox')
+         passagePage.steps.checkMultipageContentCheckbox();
+         utilities.verifyElementVisibilityState(passagePage.bodyInputField(), 'exist');
+         passagePage.steps.addInputTextToBodyInputField(['It simply means the act of being globalized']);
+         cy.log('Switching to Preview Tab')
+         createQuestionBasePage.steps.switchToPreviewTab();
+      });
+
+      it('When user adds text to the Heading and Body input field then the added text should be displayed in the \'Preview tab\' section', () => {
+         utilities.verifyInnerText(passagePage.previewHeadingText(), 'Globalization');
+         utilities.verifyInnerText(passagePage.previewTabBody(), 'It simply means the act of being globalized');
+      });
+
+      it('Two chevron icons \'Previous\' and \'Next\' should be displayed in disabled state', () => {
+         passagePage.steps.verifyPreviousPageButtonDisabled();
+         passagePage.steps.verifyNextPageButtonDisabled();
+      });
+
+      it('\'Pagination\' text should be displayed', () => {
+         passagePage.steps.verifyPaginationText(1, 1);
+      });
+
+      it('CSS of disabled Previous and Next button', { tags: 'css' }, () => {
+         utilities.verifyCSS(passagePage.previousPageButton(), {
+            'opacity': '0.5'
+         });
+         utilities.verifyCSS(passagePage.previousPageButton().find('svg path'), {
+            'fill': css.color.secondaryBtnDisabled
+         });
+         utilities.verifyCSS(passagePage.nextPageButton(), {
+            'opacity': '0.5'
+         });
+         utilities.verifyCSS(passagePage.nextPageButton().find('svg path'), {
+            'fill': css.color.secondaryBtnDisabled
+         });
+      });
+
+      it('Accessbility of disabled \'Previous\' and \'Next\' button', { tags: 'a11y' }, () => {
+         cy.checkAccessibility(passagePage.previousPageButton());
+         cy.checkAccessibility(passagePage.nextPageButton());
+      });
+   });
+
+   describe('Multi-page content with multiple pages - Preview tab', () => {
+      abortEarlySetup();
+      before(() => {
+         cy.log('Navigating to passage resource type');
+         passagePage.steps.navigateToCreateResource('passage');
+         passagePage.steps.addHeadingText();
+         cy.log('Checking Multipage content checkbox')
+         passagePage.steps.checkMultipageContentCheckbox();
+         utilities.verifyElementVisibilityState(passagePage.bodyInputField(), 'exist');
+         cy.log('Add Image to Body input field')
+         passagePage.steps.focusInBodyInputField(0);
+         passagePage.steps.selectImageOptionFromCKEditorToolbar();
+         passagePage.steps.addImageToInputField();
+         cy.log('Add Equation to Body input field')
+         passagePage.steps.addPage();
+         passagePage.steps.focusInBodyInputField(1);
+         passagePage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+         passagePage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+         cy.log('Add Link to Body input field')
+         passagePage.steps.addPage();
+         passagePage.steps.focusInBodyInputField(2);
+         passagePage.steps.selectLinkOptionFromCKEditorToolbar();
+         passagePage.steps.addLinkToInputField();
+         cy.log('Add Bold text to Body input field')
+         passagePage.steps.addPage();
+         passagePage.steps.focusInBodyInputField(3);
+         passagePage.steps.selectBoldOptionFromCKEditorToolbar();
+         passagePage.steps.addBoldTextInputToBodyInputField(3);
+         createQuestionBasePage.steps.switchToPreviewTab();
+      });
+
+      it('When the user is on the first page, the next button should be enabled and the previous button should be disabled', () => {
+         passagePage.steps.verifyNextPageButtonEnabled();
+         passagePage.steps.verifyPreviousPageButtonDisabled();
+      });
+
+      it('When user adds an image, equation, text and link to the Body input they should be displayed in the \'Preview tab\' and when user navigates through the pages the Pagination text should change accordingly', () => {
+         passagePage.steps.verifyImageAddedToBodyInPreviewTab();
+         passagePage.steps.verifyPaginationText(1, 4);
+         cy.log('Switching to second page')
+         passagePage.steps.navigateToNextPage();
+         passagePage.steps.verifyEquationAddedToBodyInPreviewTab();
+         passagePage.steps.verifyPaginationText(2, 4);
+         cy.log('Switching to third page')
+         passagePage.steps.navigateToNextPage();
+         passagePage.steps.verifyLinkAddedToBodyInPreviewTab();
+         passagePage.steps.verifyPaginationText(3, 4);
+         cy.log('Switching to fourth page')
+         passagePage.steps.navigateToNextPage();
+         passagePage.steps.verifyBoldTextAddedToBodyInPreviewTab();
+         passagePage.steps.verifyPaginationText(4, 4);
+      });
+
+      it('When the user is on the last page, the previous button should be enabled and the next button should be disabled', () => {
+         passagePage.steps.verifyPreviousPageButtonEnabled();
+         passagePage.steps.verifyNextPageButtonDisabled();
+      });
+
+      it('When the user is on the intermediate page then the \'Previous\' and \'Next\' button should be in enabled state', () => {
+         cy.log('Switching to third page')
+         passagePage.steps.navigateToPreviousPage();
+         passagePage.steps.verifyPreviousPageButtonEnabled();
+         passagePage.steps.verifyNextPageButtonEnabled();
+      });
+
+      it('When the user hovers over the enabled \'Previous\' icon button then, \'Previous page\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Previous\' icon button', () => {
+         passagePage.previousPageButton()
+            .verifyTooltip('Previous Page');
+      });
+
+      it('When the user hovers over the enabled \'Next\' icon button then, \'Next page\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Next\' icon button', () => {
+         passagePage.nextPageButton()
+            .verifyTooltip('Next Page');
+      });
+
+      it('CSS of default and active state of next and previous buttons in Preview tab', { tags: 'css' }, () => {
+         passagePage.steps.hoverOnNextPageButton()
+         utilities.verifyCSS(passagePage.nextPageButton(), {
+            'border': `1px solid ${css.color.activeButtons}`,
+         });
+         utilities.verifyCSS(passagePage.nextPageButton().find('svg path'), {
+            'fill': css.color.nextPreviousButtonFill,
+         });
+         passagePage.steps.hoverAwayFromNextPageButton()
+         utilities.verifyCSS(passagePage.nextPageButton(), {
+            'border': `1px solid ${css.color.secondaryBtnBorder}`,
+         });
+         passagePage.steps.hoverOnPreviousPageButton()
+         utilities.verifyCSS(passagePage.previousPageButton(), {
+            'border': `1px solid ${css.color.activeButtons}`,
+         });
+         utilities.verifyCSS(passagePage.previousPageButton().find('svg path'), {
+            'fill': css.color.nextPreviousButtonFill,
+         });
+         passagePage.steps.hoverAwayFromPreviousPageButton();
+         utilities.verifyCSS(passagePage.previousPageButton(), {
+            'border': `1px solid ${css.color.secondaryBtnBorder}`,
+         });
+      });
+
+      //Failing due to https://redmine.zeuslearning.com/issues/537907
+      it('CSS of \'Preview Tab\' when image, equation, text and link are added', { tags: 'css' }, () => {
+         cy.log('Switching to first page')
+         passagePage.steps.navigateToPreviousPage();
+         passagePage.steps.navigateToPreviousPage();
+         utilities.verifyCSS(passagePage.previewTabBody().find('img'), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         cy.log('Switching to second page')
+         passagePage.steps.navigateToNextPage();
+         utilities.verifyCSS(passagePage.previewTabBody(), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         cy.log('Switching to third page')
+         passagePage.steps.navigateToNextPage();
+         utilities.verifyCSS(passagePage.previewTabBody().find('a'), {
+            'color': css.color.linkText,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         cy.log('Switching to fourth page')
+         passagePage.steps.navigateToNextPage();
+         utilities.verifyCSS(passagePage.previewTabBody(), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular
+         });
+         cy.log('Switching back to third page')
+         passagePage.steps.navigateToPreviousPage();
+      });
+
+      it('Accessibility of \'Preview tab\' when image, equation and link are added', { tags: 'a11y' }, () => {
+         cy.log('Switching to fourth page')
+         passagePage.steps.navigateToNextPage();
+         cy.checkAccessibility(passagePage.previewWrapper());
+         cy.log('Switching to third page')
+         passagePage.steps.navigateToPreviousPage();
+         cy.checkAccessibility(passagePage.previewWrapper());
+         cy.log('Switching to second page')
+         passagePage.steps.navigateToPreviousPage();
+         cy.checkAccessibility(passagePage.previewWrapper());
+         cy.log('Switching to first page')
+         passagePage.steps.navigateToPreviousPage();
+         cy.checkAccessibility(passagePage.previewWrapper());
+      });
+   });
+});

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

@@ -3,12 +3,77 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
+const rulerStyles = ['Line focus', 'Overlay mask', 'Drag handle'];
+const colors = ['Grey', 'Black', 'Blue', 'Green', 'Red'];
+const colorValues = ['rgb(112, 112, 112)', 'rgb(26, 26, 26)', 'rgb(0, 134, 153)', 'rgb(0, 159, 106)', 'rgb(153, 29, 0)'];
+const labels = [readingRulerPage.displayButtonToStudentLabel, readingRulerPage.allowStudentToResizeLabel, readingRulerPage.visibleOnLandingLabel];
+
 describe('Create Item page - Reading ruler: Edit Tab', () => {
     before(() => {
         cy.loginAs('admin');
     });
+
+    describe('Ruler style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        it('\'Ruler style\' label should be displayed', () => {
+            utilities.verifyInnerText(readingRulerPage.rulerStyleLabel(), 'Ruler style');
+            utilities.verifyElementVisibilityState(readingRulerPage.rulerStyleLabel(), 'visible');
+        });
+
+        it(`Three ruler styles ${rulerStyles} should be displayed with their labels and icons`, () => {
+            rulerStyles.forEach((styleName, styleIndex) => {
+                readingRulerPage.steps.verifyRulerStyleButton(styleName, styleIndex);
+            });
+        });
+
+        it('\'Line focus\' should be selected ruler style by default', () => {
+            readingRulerPage.steps.verifyRulerStyleSelectedState('Line focus');
+        });
+
+        it('CSS of Ruler style section', { tags: 'css' }, () => {
+            utilities.verifyCSS(readingRulerPage.rulerStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(utilities.getNthElement(readingRulerPage.rulerStyleButtonLabel(), 0), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(utilities.getNthElement(readingRulerPage.rulerStyleButton(), 0), {
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(readingRulerPage.rulerStyleButton().find('[class*="RulerStyleIconLabelWrapper"]'), 0), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(utilities.getNthElement(readingRulerPage.rulerStyleButtonLabel(), 1), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(utilities.getNthElement(readingRulerPage.rulerStyleButton().find('[class*="RulerStyleIconLabelWrapper"]'), 1), {
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of Ruler style section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.rulerStyleLabel().parents('[class*="RulerStyle"]'));
+        });
+
+        it('When the user selects any other \'Ruler style\' option then it should be displayed in selected state', () => {
+            readingRulerPage.steps.selectRulerStyle('Overlay mask');
+            readingRulerPage.steps.verifyRulerStyleSelectedState('Overlay mask');
+        });
+    });
+
     //TODO: update below to lower case after https://redmine.zeuslearning.com/issues/542832 gets resolved
-    describe('\'Conditional checkboxes\', \'Color\', \'Default number of lines\' section -Edit Tab', () => {
+    describe('\'Conditional checkboxes\', \'Default number of lines\' section -Edit Tab', () => {
         abortEarlySetup();
         before(() => {
             cy.log('Navigating to \'Reading ruler\' resource tool');
@@ -35,7 +100,6 @@ describe('Create Item page - Reading ruler: Edit Tab', () => {
 
         //Failing due to https://redmine.zeuslearning.com/issues/541620
         it('CSS of \'Conditional checkboxes\' label in Edit tab', { tags: 'css' }, () => {
-            const labels = [readingRulerPage.displayButtonToStudentLabel, readingRulerPage.allowStudentToResizeLabel, readingRulerPage.visibleOnLandingLabel]
             labels.forEach(label => {
                 utilities.verifyCSS(label(), {
                     'color': css.color.labelText,
@@ -45,18 +109,57 @@ describe('Create Item page - Reading ruler: Edit Tab', () => {
             });
         });
 
+        it('\'Default number of lines\' label and input field should be displayed and by default the input field should be prefilled with value 4', () => {
+            utilities.verifyInnerText(readingRulerPage.defaultNumberOfLinesLabel(), 'Default number of lines'
+            );
+            utilities.verifyElementVisibilityState(readingRulerPage.defaultNumberOfLinesLabel(), 'visible');
+            readingRulerPage.steps.verifyDefaultNumberOfLinesInputFieldValue('4');
+            utilities.verifyElementVisibilityState(readingRulerPage.defaultNumberOfLinesInputField(), 'visible');
+        });
+
+        it('User should able to update value in \'Default number of lines\' input field', () => {
+            readingRulerPage.steps.addInputToDefaultNumberOfLinesInputField('2')
+            readingRulerPage.steps.verifyDefaultNumberOfLinesInputFieldValue('2');
+        });
+
+        it('CSS of \'Default number of lines\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(readingRulerPage.defaultNumberOfLinesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(readingRulerPage.defaultNumberOfLinesInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Default number of lines\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.defaultNumberOfLinesInputField());
+        });
+    });
+
+    describe('Color - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
         it('\'Color\' label should be displayed', () => {
             utilities.verifyInnerText(readingRulerPage.colorLabel(), 'Color');
             utilities.verifyElementVisibilityState(readingRulerPage.colorLabel(), 'visible');
         });
 
-        it('Five solid colors with the label \'Grey\',  \'Black\', \'Blue\',\'Green\' and \'Red\' respectively should be displayed ', () => {
-            const colors = ['Gray', 'Black', 'Blue', 'Green', 'Red'];
-            const colorValues = ['rgb(112, 112, 112)', 'rgb(26, 26, 26)', 'rgb(0, 134, 153)', 'rgb(0, 159, 106)', 'rgb(153, 29, 0)'];
+        it('Five solid colors with the label \'Grey\',  \'Black\', \'Blue\',\'Green\' and \'Red\' respectively and custom color block should be displayed ', () => {
             utilities.verifyElementCount(readingRulerPage.colorBlock(), 5);
             colors.forEach((color, blockIndex) => {
                 readingRulerPage.steps.verifyColorBlock(blockIndex, color, colorValues[blockIndex]);
             });
+            utilities.verifyElementVisibilityState(readingRulerPage.customColorWrapper(), 'visible');
+            utilities.verifyInnerText(readingRulerPage.customLabel(), 'Custom');
+            utilities.verifyElementVisibilityState(readingRulerPage.customLabel(), 'visible');
         });
 
         it('\'Grey\' color radio button should be preselected by default.', () => {
@@ -70,16 +173,12 @@ describe('Create Item page - Reading ruler: Edit Tab', () => {
                 'font-weight': css.fontWeight.semibold
             });
             utilities.verifyCSS(readingRulerPage.colorBlockLabel(), {
-                'color': css.color.labelText,
+                'color': css.color.codeBlockText,
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.regular
             });
         });
 
-        it('Accessibility of edit tab when \'Display button to student\' and \'Allow student to resize\' checkbox are checked', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(readingRulerPage.displayButtonToStudentCheckbox().parents('.ngie-checkbox-form-group'));
-        });
-
         it('When the user selects a color block from the \'Color\' section then the selected color should change and the selected icon should be displayed on the newly selected color', () => {
             readingRulerPage.steps.selectColorBlock(2);
             readingRulerPage.steps.verifyColorBlockSelectedState(2);
@@ -87,37 +186,43 @@ describe('Create Item page - Reading ruler: Edit Tab', () => {
         });
 
         it('Accessibility of newly selected color', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(readingRulerPage.colorBlock().parents('[aria-label="color"]'));
+            cy.checkAccessibility(readingRulerPage.colorBlock().parents('[class*="ColorPalleteWrapper"]'));
         });
 
-        it('\'Default number of lines\' label and input field should be displayed and by default the input field should be prefilled with value 4', () => {
-            utilities.verifyInnerText(readingRulerPage.defaultNumberOfLinesLabel(), 'Default number of lines'
-            );
-            utilities.verifyElementVisibilityState(readingRulerPage.defaultNumberOfLinesLabel(), 'visible');
-            readingRulerPage.steps.verifyDefaultNumberOfLinesInputFieldValue('4');
-            utilities.verifyElementVisibilityState(readingRulerPage.defaultNumberOfLinesInputField(), 'visible');
+        it('When user clicks on custom color block then select color popup should appear', () => {
+            readingRulerPage.steps.clickOnCustomColorBlock();
+            readingRulerPage.steps.verifyColorPopupIsDisplayed();
         });
 
-        it('User should able to update value in \'Default number of lines\' input field', () => {
-            readingRulerPage.steps.addInputToDefaultNumberOfLinesInputField('2')
-            readingRulerPage.steps.verifyDefaultNumberOfLinesInputFieldValue('2');
+        readingRulerPage.tests.verifyColorPopupSelectColorTitle();
+
+        readingRulerPage.tests.verifySaturationAndOpacityGradientPalette('rgb(255, 255, 255)');
+
+        readingRulerPage.tests.verifyColorHuePaletteAndHexInputField('rgb(255, 0, 0)', '#ffffff');
+
+        it('When the user has modified the selected color in the color popup and clicks on \'Ok\' button, then the popup should close and the modifications in the color popup should persist. Color block should change to the new selected color and it should be in unselected state', () => {
+            readingRulerPage.steps.addInputToHexInputField('#ff0000');
+            readingRulerPage.steps.clickOnOpacityGradientHuePalette();
+            readingRulerPage.steps.verifyOpacityGradientPaletteColor('rgba(255, 0, 0, 0.5)');
+            readingRulerPage.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.dialogBoxContent(), 'notExist');
+            readingRulerPage.steps.verifyCustomColor('#ff0000', 'rgba(255, 0, 0, 0.5)');
+            readingRulerPage.steps.verifyColorBlockUnSelectedState(5);
         });
 
-        it('CSS of \'Default number of lines\' Section in Edit tab', { tags: 'css' }, () => {
-            utilities.verifyCSS(readingRulerPage.defaultNumberOfLinesLabel(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(readingRulerPage.defaultNumberOfLinesInputField(), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close and it should be in unselected state and the modifications in the color popup should not persist. Color block should not change and it should be in unselected state', () => {
+            readingRulerPage.steps.clickOnCustomBlockEditIcon();
+            readingRulerPage.steps.addInputToHexInputField('#00002E');
+            readingRulerPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.dialogBoxContent(), 'notExist');
+            readingRulerPage.steps.verifyCustomColor('#ff0000', 'rgba(255, 0, 0, 0.5)');
+            readingRulerPage.steps.verifyColorBlockUnSelectedState(5);
         });
 
-        it('Accessibility of \'Default number of lines\' input field', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(readingRulerPage.defaultNumberOfLinesInputField());
+        it('When user has modified custom color in color popup and selects it then custom color should be in selected state', () => {
+            utilities.verifyElementVisibilityState(utilities.getNthElement(readingRulerPage.colorBlock(), 5), 'visible');
+            readingRulerPage.steps.selectColorBlock(5);
+            readingRulerPage.steps.verifyColorBlockSelectedState(5);
         });
     });
 

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

@@ -1,5 +1,6 @@
 import { readingRulerPage } from "../../../pages";
 import { commonComponents } from "../../../pages/components";
+import utilities from "../../../support/helpers/utilities";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 
 describe('Create question page - Reading ruler: Header section and saving resource tool', () => {
@@ -34,22 +35,45 @@ describe('Create question page - Reading ruler: Header section and saving resour
             readingRulerPage.steps.navigateToCreateResource('reading ruler');
         });
 
-        readingRulerPage.tests.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', () => {
+            readingRulerPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(readingRulerPage.questionTypeOptionTitle(), 'visible');
+        });
+
+        it('When user has made some edits/changes and clicks on Cancel button, a popup should be displayed', () => {
+            readingRulerPage.steps.selectResourceType('reading ruler');
+            readingRulerPage.steps.addInputToOpacityInputField(30);
+            readingRulerPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(readingRulerPage.dialogBox(), 'visible');
+        });
+
+        readingRulerPage.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`, () => {
+            readingRulerPage.steps.clickOnRejectButtonInDialogBox();
+            readingRulerPage.steps.verifyEditTabSelectedState();
+            readingRulerPage.steps.verifyOpacityInputFieldValue(30);
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            readingRulerPage.steps.clickOnCancelButton();
+            readingRulerPage.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(readingRulerPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(readingRulerPage.questionTypeOptionTitle(), 'visible');
+        });
     });
 
-    //TODO: Need to update cases after https://redmine.zeuslearning.com/issues/542818
     describe('Save button', () => {
         abortEarlySetup();
         before(() => {
             cy.log('Navigating to Reading ruler resource tool');
             readingRulerPage.steps.navigateToCreateResource('reading ruler');
         });
-        commonComponents.tests.verifyCreateItemWrapperContentsA11y();
-
-        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', () => {
+        it('When user clicks on Save button, then the resource tool should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
             readingRulerPage.steps.saveAQuestionAndVerifySnackbar();
         });
 
         readingRulerPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
-    });
+   });
 });