itemengine-cypress-automation 1.0.51 → 1.0.63

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

@@ -0,0 +1,341 @@
+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 types in Set correct answer section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Set Correct answer 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('When \'Any\' text selection type is selected, then no options should be provided in set correct answer section', () => {
+            utilities.verifyElementCount(highlightPage.setCorrectAnswerParagraphs(), 3);
+            utilities.verifyElementVisibilityState(highlightPage.setCorrectAnswerSpans(), 'notExist');
+        });
+
+        it('When user selects text in highlight options section, then that text should be provided as option in set correct answer section', () => {
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[0]);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection([anySelectionArray[0]]);
+        });
+
+        it('When user deselects the option in highlight options section, then that text should not provided as option in set correct answer section', () => {
+            highlightPage.steps.clickOnOptionInHighlightOptionsSection(anySelectionArray[0]);
+            utilities.verifyElementVisibilityState(highlightPage.setCorrectAnswerOption(), 'notExist');
+        });
+
+        it('When the user hovers over the provided option in set correct answer section, then that option should be displayed in hover state', () => {
+            cy.log('Pre-step: Select an option in highlight options section');
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[0]);
+            highlightPage.steps.verifyHoverStateOfDeselectedOptionInSetCorrectAnswerSection(anySelectionArray[0]);
+        });
+
+        it('When user clicks on the provided option in set correct answer section, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(anySelectionArray[0]);
+        });
+
+        it('When user clicks on the selected option, the option should then be deselected state', () => {
+            highlightPage.steps.deselectOptionInSetCorrectAnswerSection(anySelectionArray[0]);
+        });
+
+        it('When all options are deselected, then error message \'Error: Please set a correct answer.\' should be displayed', () => {
+            utilities.verifyInnerText(highlightPage.setCorrectAnswerErrorMessage(), 'Error: Please set a correct answer.');
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            highlightPage.setCorrectAnswerErrorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.setCorrectAnswerErrorMessage());
+        });
+
+        it('When user clicks on a deselected option, then it should be selected and error message should disappear', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(anySelectionArray[0]);
+        });
+
+        it('CSS of the option in selected and deselected state in set correct answer section', { tags: 'css' }, () => {
+            cy.log('Pre-step: Adding option in highlight options section');
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[2]);
+            utilities.verifyCSS(highlightPage.setCorrectAnswerOption().contains(anySelectionArray[0]), {
+                '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.setCorrectAnswerOption().contains(anySelectionArray[2]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of response options in set correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.setCorrectAnswerOption().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+
+    describe('Set Correct answer 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}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Paragraph');
+        });
+
+        it('When \'Paragraph\' text selection type is selected, then the options should be provided as per the number of \'Paragraph\' in set correct answer section', () => {
+            utilities.verifyElementCount(highlightPage.setCorrectAnswerParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.setCorrectAnswerSpans(), 3);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(paragraphTextArray);
+        });
+
+        it('By default, all the options in set correct answer section should be in deselected state', () => {
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(paragraphText);
+            })
+        });
+
+        it('When user deselects the option in highlight options section, then that text should not provided as option in set correct answer section', () => {
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Paragraph', paragraphTextArray[0]);
+            let setCorrectAnswerOptionArray = paragraphTextArray.slice(1);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(setCorrectAnswerOptionArray);
+        });
+
+        it('When the user hovers over the provided option in set correct answer section, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfDeselectedOptionInSetCorrectAnswerSection(paragraphTextArray[1]);
+        });
+
+        it('When user clicks on the provided option in set correct answer section, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(paragraphTextArray[1]);
+        });
+
+        it('When user clicks on the selected option, the option should then be in deselected state', () => {
+            highlightPage.steps.deselectOptionInSetCorrectAnswerSection(paragraphTextArray[1]);
+        });
+
+        it('When all options are deselected, then error message \'Error: Please set a correct answer.\' should be displayed', () => {
+            utilities.verifyInnerText(highlightPage.setCorrectAnswerErrorMessage(), 'Error: Please set a correct answer.');
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            highlightPage.setCorrectAnswerErrorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.setCorrectAnswerErrorMessage());
+        });
+
+        it('When user clicks on a deselected option, then it should be selected and error message should disappear', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(paragraphTextArray[2]);
+        });
+
+        it('CSS of the option in selected and deselected state in set correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.setCorrectAnswerOption().contains(paragraphTextArray[2]), {
+                '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.setCorrectAnswerOption().contains(paragraphTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of response options in set correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.setCorrectAnswerOption().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+
+    describe('Set Correct answer 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}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Sentence');
+        });
+
+        it('When \'Sentence\' text selection type is selected, then the options should be provided as per the number of \'Sentence\' in set correct answer section', () => {
+            utilities.verifyElementCount(highlightPage.setCorrectAnswerParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.setCorrectAnswerSpans(), 4);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInSetCorrectAnswerSection(0, 2);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(sentenceTextArray);
+        });
+
+        it('By default, all the options in set correct answer section should be in deselected state', () => {
+            sentenceTextArray.forEach((sentenceText) => {
+                highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(sentenceText);
+            });
+        });
+
+        it('When user deselects the option in highlight options section, then that text should not be provided as option in set correct answer section', () => {
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Sentence', sentenceTextArray[0]);
+            let setCorrectAnswerOptionArray = sentenceTextArray.slice(1);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(setCorrectAnswerOptionArray);
+        });
+
+        it('When the user hovers over the provided option in set correct answer section, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfDeselectedOptionInSetCorrectAnswerSection(sentenceTextArray[1]);
+        });
+
+        it('When user clicks on the provided option in set correct answer section, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(sentenceTextArray[1]);
+        });
+
+        it('When user clicks on the selected option, the option should then be deselected state', () => {
+            highlightPage.steps.deselectOptionInSetCorrectAnswerSection(sentenceTextArray[1]);
+        });
+
+        it('When all options are deselected, then error message \'Error: Please set a correct answer.\' should be displayed', () => {
+            utilities.verifyInnerText(highlightPage.setCorrectAnswerErrorMessage(), 'Error: Please set a correct answer.');
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            highlightPage.setCorrectAnswerErrorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.setCorrectAnswerErrorMessage());
+        });
+
+        it('When user clicks on a deselected option, then it should be selected and error message should disappear', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(sentenceTextArray[2]);
+        });
+
+        it('CSS of the option in selected and deselected state in set correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.setCorrectAnswerOption().contains(sentenceTextArray[2]), {
+                '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.setCorrectAnswerOption().contains(sentenceTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of response options in set correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.setCorrectAnswerOption().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+
+    describe('Set Correct answer 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}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Word');
+        });
+
+        it('When \'Sentence\' text selection type is selected, then the options should be provided as per the number of \'Word\' in set correct answer section', () => {
+            utilities.verifyElementCount(highlightPage.setCorrectAnswerParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.setCorrectAnswerSpans(), 23);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInSetCorrectAnswerSection(0, 11);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInSetCorrectAnswerSection(1, 4);
+            highlightPage.steps.verifyNumberOfOptionsInsideAParagraphInSetCorrectAnswerSection(2, 8);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(wordTextArray);
+        });
+
+        it('By default, all the options in set correct answer section should be in deselected state', () => {
+            wordTextArray.forEach((wordText) => {
+                highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(wordText);
+            });
+        });
+
+        it('When user deselects the option in highlight options section, then that text should not be provided as option in set correct answer section', () => {
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Word', wordTextArray[0]);
+            let setCorrectAnswerOptionArray = wordTextArray.slice(1);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(setCorrectAnswerOptionArray);
+        });
+
+        it('When the user hovers over the provided option in set correct answer section, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfDeselectedOptionInSetCorrectAnswerSection(wordTextArray[1]);
+        });
+
+        it('When user clicks on the provided option in set correct answer section, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(wordTextArray[1]);
+        });
+
+        it('When user clicks on the selected option, the option should then be deselected state', () => {
+            highlightPage.steps.deselectOptionInSetCorrectAnswerSection(wordTextArray[1]);
+        });
+
+        it('When all options are deselected, then error message \'Error: Please set a correct answer.\' should be displayed', () => {
+            utilities.verifyInnerText(highlightPage.setCorrectAnswerErrorMessage(), 'Error: Please set a correct answer.');
+        });
+
+        highlightPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user clicks on a deselected option, then it should be selected and error message should disappear', () => {
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(wordTextArray[2]);
+        });
+
+        it('CSS of the option in selected and deselected state in set correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.setCorrectAnswerOption().contains(wordTextArray[2]), {
+                '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.setCorrectAnswerOption().contains(wordTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of response options in set correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.setCorrectAnswerOption().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+});