itemengine-cypress-automation 1.0.51 → 1.0.63

package/cypress/e2e/ILC/Highlight/highlightTextSelectionTypesInHighlightOptionsSection.js

@@ -0,0 +1,375 @@
+import { highlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const paragraphTextArray = ['Horses cannot breat& through their mouth! Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
+const sentenceTextArray = ['Horses cannot breat& through their mouth! ', 'Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
+const wordTextArray = ['Horses', 'cannot', 'breat&', 'through', 'their', 'mouth', 'Cows', 'can', 'sleep', 'standing', 'up', 'Dogs', 'have', 'e#cellent', 'hearing', 'Deers', 'possess', 'nearly', '300', 'degree', 'field', 'of', 'vision'];
+const anySelectionArray = ['Cows can sleep', 'Dogs have e#cellent \'hearing\'', 'nearly, 300 degree field of vision.'];
+
+describe('Create Item page - Highlight: Text selection in Highlight options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Highlight options section: Any', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('By default \'Any\' should be selected in text selection dropdown.', () => {
+            utilities.verifyInnerText(highlightPage.textSelectionDropdown(), 'Any');
+        });
+
+        it('When \'Any\' text selection type is selected, the added input should be displayed in the highlight options section and no options should be displayed', () => {
+            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
+            utilities.verifyElementVisibilityState(highlightPage.highlightOptionsSpans(), 'notExist');
+        });
+
+        it('The highlight count should be displayed as \'0\'.', () => {
+            highlightPage.steps.verifyHighlightCounterTextAndValue(0);
+        });
+
+        it('When user selects any texts, then that text should be highlighted and the highlight count should be increased to 1.', () => {
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[0]);
+            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
+        });
+
+        it('CSS of the response option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.highlightOptionsSpans(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of the response option', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parents('.highlight-tab-wrapper'));
+        });
+
+        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
+            highlightPage.steps.clickOnOptionInHighlightOptionsSection(anySelectionArray[0]);
+            utilities.verifyElementVisibilityState(highlightPage.highlightOptionsSpans(), 'notExist')
+            highlightPage.steps.verifyHighlightCounterTextAndValue(0);
+        });
+
+        it('When user clears all selected options with the \'Clear\' button, then all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            cy.log('Pre-step: Selecting multiple texts to create options');
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[0]);
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[1]);
+            highlightPage.steps.clearSelectedOptionsInHighlightOptionsSection();
+            utilities.verifyElementVisibilityState(highlightPage.highlightOptionsSpans(), 'notExist');
+            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
+        });
+
+        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user selects any text again, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[2]);
+            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
+            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
+        });
+    });
+
+    describe('Highlight options section: Paragraph', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('User should be able to switch to \'Paragraph\' in text selection dropdown.', () => {
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Paragraph');
+        });
+
+        it('When user has switched to \'Paragraph\' text selection type, the previously added input should be divided into options as per \'Paragraph\' text selection type and all the options should be in selected state', () => {
+            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.highlightOptionsSpans(), 3);
+            highlightPage.steps.verifyOptionsInHighlightOptionsSection(paragraphTextArray);
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(paragraphText);
+            });
+        });
+
+        it('The highlight count should be displayed as per the number of \'Paragraph\'.', () => {
+            highlightPage.steps.verifyHighlightCounterTextAndValue(3);
+        });
+
+        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Paragraph', paragraphTextArray[0]);
+            for (let arrayIndex = 1; arrayIndex < paragraphTextArray.length; arrayIndex++) {
+                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(paragraphTextArray[arrayIndex]);
+            }
+            highlightPage.steps.verifyHighlightCounterTextAndValue(2);
+        });
+
+        it('CSS of the response option in selected and deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(paragraphTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(paragraphTextArray[0]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of the response options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parent('[class*="Highlightstyles__HighLightWrapper"] [data-testid="question-instruction-element"]'));
+        });
+
+        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfDeselectedOptionInHighlightOptionsSection(paragraphTextArray[0])
+        });
+
+        //Clear button reset popup verification
+        it('When user clicks on \'Clear button\', Reset popup should be displayed with the text \'Are you sure you want to clear all highlights? This action will not delete template content but clear all highlights.\', Cancel and Confirm button', () => {
+            highlightPage.steps.clickOnClearHighlightButtonInHighlightOptionsSection();
+            highlightPage.steps.verifyResetPopupForClearingOptionSelection();
+        });
+
+        it('CSS of Reset popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.dialogBoxTitle().find('span'), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(highlightPage.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightPage.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(highlightPage.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg
+            });
+        });
+
+        it('Accessibility of Reset popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button of the Reset popup, then the popup should be closed and the earlier state of highlight options should persist', () => {
+            highlightPage.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'notExist');
+            highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(paragraphTextArray[0]);
+            for (let arrayIndex = 1; arrayIndex < paragraphTextArray.length; arrayIndex++) {
+                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(paragraphTextArray[arrayIndex]);
+            }
+        });
+
+        it('When user clicks on \'Confirm\' button of the Reset popup, then the popup should be closed and all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            cy.log('Pre-step: Again clicking on Clear button to open Reset popup');
+            highlightPage.steps.clickOnClearHighlightButtonInHighlightOptionsSection();
+            highlightPage.steps.clickOnAcceptButtonInDialogBox();
+            for (let arrayIndex = 0; arrayIndex < paragraphTextArray.length; arrayIndex++) {
+                highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(paragraphTextArray[arrayIndex]);
+            }
+            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
+        });
+
+        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user click on a deselected option, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Paragraph', paragraphTextArray[0]);
+            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
+            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
+        });
+    });
+
+    describe('Highlight options section: Sentence', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('User should be able to switch to \'Sentence\' in text selection dropdown.', () => {
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Sentence');
+        });
+
+        it('When user has switched to \'Sentence\' text selection type, the previously added input should be divided into options as per \'Sentence\' text selection type and all the options should be in selected state', () => {
+            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.highlightOptionsSpans(), 4);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(0, 2);
+            highlightPage.steps.verifyOptionsInHighlightOptionsSection(sentenceTextArray);
+            sentenceTextArray.forEach((sentenceText) => {
+                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(sentenceText);
+            });
+        });
+
+        it('The highlight count should be displayed as per the number of \'Sentence\'.', () => {
+            highlightPage.steps.verifyHighlightCounterTextAndValue(4);
+        });
+
+        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Sentence', sentenceTextArray[0])
+            for (let arrayIndex = 1; arrayIndex < sentenceTextArray.length; arrayIndex++) {
+                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(sentenceTextArray[arrayIndex]);
+            }
+            highlightPage.steps.verifyHighlightCounterTextAndValue(3);
+        });
+
+        it('CSS of the response option in selected and deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(sentenceTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(sentenceTextArray[0]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of the response options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parent('[class*="Highlightstyles__HighLightWrapper"] [data-testid="question-instruction-element"]'));
+        });
+
+        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfDeselectedOptionInHighlightOptionsSection(sentenceTextArray[0])
+        });
+
+        it('When user clears all selected options with the \'Clear\' button, then all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            highlightPage.steps.clearSelectedOptionsInHighlightOptionsSection();
+            for (let arrayIndex = 0; arrayIndex < sentenceTextArray.length; arrayIndex++) {
+                highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(sentenceTextArray[arrayIndex]);
+            }
+            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
+        });
+
+        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user click on a deselected option, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Sentence', sentenceTextArray[0])
+            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
+            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
+        });
+    });
+
+    describe('Highlight options section: Word', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('User should be able to switch to \'Word\' in text selection dropdown.', () => {
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Word');
+        });
+
+        it('When user has switched to \'Word\' text selection type, the previously added input should be divided into options as per \'Word\' text selection type and all the options should be in selected state', () => {
+            utilities.verifyElementCount(highlightPage.highlightOptionsParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.highlightOptionsSpans(), 23);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(0, 11);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(1, 4);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInHighlightOptionsSection(2, 8);
+            highlightPage.steps.verifyOptionsInHighlightOptionsSection(wordTextArray);
+            wordTextArray.forEach((wordText) => {
+                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(wordText);
+            });
+        });
+
+        it('The highlight count should be displayed as per the number of \'Word\'.', () => {
+            highlightPage.steps.verifyHighlightCounterTextAndValue(23);
+        });
+
+        it('When user clicks on a highlighted option, then the highlighted option should be deselected and the highlight count should reduce by 1.', () => {
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Word', wordTextArray[0])
+            for (let arrayIndex = 1; arrayIndex < wordTextArray.length; arrayIndex++) {
+                highlightPage.steps.verifyOptionIsSelectedInHighlightOptionsSection(wordTextArray[arrayIndex]);
+            }
+            highlightPage.steps.verifyHighlightCounterTextAndValue(22);
+        });
+
+        it('CSS of the response option in selected and deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(wordTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(wordTextArray[0]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of the response options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.highlightOptionsSpans().parent('[class*="Highlightstyles__HighLightWrapper"] [data-testid="question-instruction-element"]'));
+        });
+
+        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfDeselectedOptionInHighlightOptionsSection(wordTextArray[0])
+        });
+
+        it('When user clears all selected options with the \'Clear\' button, then all the selected highlight options should be deselected and the Highlight options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            highlightPage.steps.clearSelectedOptionsInHighlightOptionsSection();
+            for (let arrayIndex = 0; arrayIndex < sentenceTextArray.length; arrayIndex++) {
+                highlightPage.steps.verifyOptionIsNotSelectedInHighlightOptionsSection(wordTextArray[arrayIndex]);
+            }
+            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            highlightPage.steps.verifyErroredStateOfHighlightOptionsSection();
+        });
+
+        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user click on a deselected option, the option should be selected and the error message should disappear and highlight counter should display 1 count', () => {
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Word', wordTextArray[0]);
+            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
+            highlightPage.steps.verifyHighlightCounterTextAndValue(1);
+        });
+    });
+});

package/cypress/e2e/ILC/MultipleSelectionGrid/multipleSelectionGridAdditionalSettingsBasic.js

@@ -5,12 +5,7 @@ const css = Cypress.env('css');
 const questionStems = ['Bat', 'Ostrich', 'Platypus', 'Eagle'];
 const options = ['Is mammal', 'Lays eggs', 'Can fly'];
 
-const gridStyleDropdownOptions = ['With border', 'Row dividers', 'No border', 'Inline', 'Inline - row dividers'];
-const questionStemNumerationOptions = ['None', 'Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
 const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
-const numbers = ['1', '2', '3', '4'];
-const lowercase = ['a', 'b', 'c', 'd'];
-const uppercase = ['A', 'B', 'C', 'D'];
 const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
 
 describe('Create Item page - Multiple Selection Grid: Additional settings', () => {
@@ -28,6 +23,17 @@ describe('Create Item page - Multiple Selection Grid: Additional settings', () =
         multipleSelectionGridPage.tests.verifyAdditonalSettingsAccordionProperties();
     });
 
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        multipleSelectionGridPage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
+    });
+
     describe('Additional settings: Font size contents', () => {
         abortEarlySetup();
         before(() => {

package/cypress/e2e/ILC/MultipleSelectionGrid/{multipleSelectionGridQuestionStemAdditionalSettings.js → multipleSelectionGridAdditionalSettingsQuestionStem.js}

@@ -15,17 +15,6 @@ describe('Create Item page - Multiple Selection Grid: Additional settings', () =
         cy.loginAs('admin');
     });
 
-    describe('Additional settings: Student response area and layout', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-            multipleSelectionGridPage.steps.expandAdditonalSettings();
-        });
-
-        multipleSelectionGridPage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
-    });
-
     describe('Additional settings: Question stem numeration contents', () => {
         abortEarlySetup();
         before(() => {