itemengine-cypress-automation 1.0.18 → 1.0.20

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

@@ -0,0 +1,351 @@
+import { multipleSelectionGridPage } from "../../../pages/multipleSelectionGridPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+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', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Grid style contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`\'Grid style\' label and dropdown should be displayed and by default, ${gridStyleDropdownOptions[1]} option should be selected in the dropdown`, () => {
+            multipleSelectionGridPage.gridStyleLabel()
+                .verifyInnerText('Grid style')
+                .should('be.visible');
+            multipleSelectionGridPage.gridStyleDropdown()
+                .verifyInnerText(`${gridStyleDropdownOptions[1]}`)
+                .should('be.visible');
+        });
+
+        it('CSS of Grid style section', { tags: 'css' }, () => {
+            multipleSelectionGridPage.gridStyleLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.gridStyleDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it(`When user clicks on the Grid style dropdown a list of 5 options - ${gridStyleDropdownOptions} should be displayed`, () => {
+            multipleSelectionGridPage.steps.expandGridStyleDropdown();
+            multipleSelectionGridPage.steps.verifyGridStyleDropdownOptions(gridStyleDropdownOptions);
+        });
+
+        it('CSS of Grid style dropdown in active state', { tags: 'css' }, () => {
+            multipleSelectionGridPage.gridStyleDropdownOptions()
+                .eq(1)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            multipleSelectionGridPage.gridStyleDropdownOptions()
+                .eq(0)
+                .should('have.css', 'background-color', css.color.transparent);
+            cy.log('Selecting a dropdown option to close the dropdown')
+            multipleSelectionGridPage.gridStyleDropdownOptions()
+                .eq(1)
+                .click();
+        });
+
+        it('Accessibility of Grid style dropdown in active state', { tags: 'a11y' }, () => {
+            multipleSelectionGridPage.steps.expandGridStyleDropdown();
+            cy.checkAccessibility(multipleSelectionGridPage.dropdownList());
+        });
+    });
+
+    //Note: This needs to be checked manually during full execution, added this to the Manual sheet 
+    describe.skip('Additional settings: Grid style set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`By default when ${gridStyleDropdownOptions[1]} option is selected then row dividers should be displayed in the set correct answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[0]} option then only table borders should be displayed in the set correct answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[2]} option then table borders should not be displayed in the set correct answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[3]} option then the options should not be displayed in the table header and should be displayed inline with the question stems without row dividers in the set correct answer table`, () => {
+
+        });
+
+
+        it(`When user selects ${gridStyleDropdownOptions[4]} option then the options should not be displayed in the table header and should be displayed inline with the question stems with row dividers in the set correct answer table`, () => {
+
+        });
+    });
+
+    describe.skip('Additional settings: Grid style preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`By default when ${gridStyleDropdownOptions[1]} option is selected then row dividers should be displayed in the preview tab answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[0]} option then only table borders should be displayed in the preview tab answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[2]} option then table borders should not be displayed in the preview tab answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[3]} option then the options should not be displayed in the table header and should be displayed inline with the question stems without row dividers in the preview tab answer table`, () => {
+
+        });
+
+
+        it(`When user selects ${gridStyleDropdownOptions[4]} option then the options should not be displayed in the table header and should be displayed inline with the question stems with row dividers in the preview tab answer table`, () => {
+
+        });
+    });
+
+    describe('Additional settings: Title for options contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Title for options\' label and input field should be displayed and by default, the input field should be empty', () => {
+            multipleSelectionGridPage.titleForOptionsLabel()
+                .verifyInnerText('Title for options')
+                .should('be.visible');
+            multipleSelectionGridPage.titleForOptionsInputField()
+                .should('have.text', '');
+        });
+
+        it('CSS of Title for options label and input field', { tags: 'css' }, () => {
+            multipleSelectionGridPage.titleForOptionsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.titleForOptionsInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Title for options set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('By default, only options should be displayed in the header of the set correct answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInSetCorrectAnswerTable(options)
+            multipleSelectionGridPage.setCorrectAnswerTableOptionsTitle()
+                .should('not.exist');
+        });
+
+        it('When user enters any text in the Title for options then that title should be displayed along with the options in the header section of the set correct answer table', () => {
+            multipleSelectionGridPage.steps.addInputToTitleForOptionsInputField('Choose the correct option')
+            multipleSelectionGridPage.setCorrectAnswerTableOptionsTitle()
+                .verifyInnerText('Choose the correct option');
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInSetCorrectAnswerTable(options)
+        });
+    });
+
+    describe('Additional settings: Title for options preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.switchToPreviewTab()
+        });
+
+        it('By default, only options should be displayed in the header of the preview tab answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInPreviewTabAnswerTable(options)
+            multipleSelectionGridPage.previewTabAnswerTableOptionsTitle()
+                .should('not.exist');
+        });
+
+        it('When user enters any text in the Title for options then that title should be displayed along with the options in the header section of the preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToTitleForOptionsInputField('Choose the correct option');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.previewTabAnswerTableOptionsTitle()
+                .verifyInnerText('Choose the correct option');
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInPreviewTabAnswerTable(options);
+        });
+    });
+
+    describe('Additional settings: Question stem width and Option width contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Question stem width\' and \'Option width\' labels and input fields should be displayed and by default, the input fields should be empty', () => {
+            multipleSelectionGridPage.questionStemWidthLabel()
+                .verifyInnerText('Question stem width')
+                .should('be.visible');
+            multipleSelectionGridPage.questionStemWidthInputField()
+                .should('have.text', '');
+            multipleSelectionGridPage.optionsWidthLabel()
+                .verifyInnerText('Option width')
+                .should('be.visible');
+            multipleSelectionGridPage.optionWidthInputField()
+                .should('have.text', '');
+        });
+
+        it('CSS of \'Question stem width\' and \'Option width\' section', { tags: 'css' }, () => {
+            multipleSelectionGridPage.questionStemWidthLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.questionStemWidthInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            multipleSelectionGridPage.optionsWidthLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.optionWidthInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+    });
+
+    describe('Additional settings: Question stem width and Option width set correct section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the input field of \'Question stem width\' kept empty, the question stem should have min and max width 140px and 380px respectively in set correct answer table', () => {
+            multipleSelectionGridPage.questionStemWidthInputField()
+                .should('have.text', '');
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInSetCorrectAnswerTable('140', '380');
+        });
+
+        it('When user enters value for \'Question stem width\', the width should get updated accordingly in set correct answer table', () => {
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('200');
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInSetCorrectAnswerTable('200', '200');
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('700');
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInSetCorrectAnswerTable('500', '500');
+        });
+
+        it('When the input field of \'Option width\' kept empty, the question stem should have width 128px in set correct answer table', () => {
+            multipleSelectionGridPage.optionWidthInputField()
+                .should('have.text', '');
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInSetCorrectAnswerTable('128');
+        });
+
+        it('When user enters value for \'Option width\', the width should get updated accordingly in set correct answer table', () => {
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('250');
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInSetCorrectAnswerTable('250')
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('950');
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInSetCorrectAnswerTable('500')
+        });
+    });
+
+    describe('Additional settings: Question stem width and Option width set correct section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+        });
+
+        it('When the input field of \'Question stem width\' kept empty, the question stem should have min and max width 140px and 380px respectively in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInPreviewTabAnswerTable('140', '380');
+        });
+
+        it('When user enters value for \'Question stem width\', the width should get updated accordingly in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('200');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInPreviewTabAnswerTable('200', '200');
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('700');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInPreviewTabAnswerTable('500', '500');
+        });
+
+        it('When the input field of \'Option width\' kept empty, the question stem should have width 128px in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInPreviewTabAnswerTable('128')
+        });
+
+        it('When user enters value for \'Option width\', the width should get updated accordingly in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('250');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInPreviewTabAnswerTable('250')
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('950');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInPreviewTabAnswerTable('500')
+        });
+    });
+});