itemengine-cypress-automation 1.0.39 → 1.0.42

package/cypress/e2e/ILC/DragAndDropIntoCategories/dragAndDropIntoCategoriesAdditionalSettingsRowProperties.js

@@ -0,0 +1,372 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page: Drag and drop into categories: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: \'Row title width (px)\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowInputField(0, 'Can fly');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row title width (px)\' label and input field should be displayed. By default, the \'Row title width\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowTitleWidthLabel(), 'Row title width (px)');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowTitleWidthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowTitleWidthInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue('');
+        });
+
+        it('CSS of \'Row title width (px)\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowTitleWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowTitleWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+
+        it('The user should only be able to enter only numeric value in the \'Row title width\' input field', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField('a!1b#c4d0');
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(140);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(140);
+        });
+    });
+
+    //https://redmine.zeuslearning.com/issues/547937
+    describe('Additional settings: \'Row title width (px)\' - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not set any value in the \'Row title width\' input field, the width of the row title should be 64px by default', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(64);
+        });
+
+        it('When the user enters a numeric value in the \'Row title width\' input field, the row title width should get updated accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(100);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(100);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(100);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the row title width should change to 400px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(400);
+        });
+
+        it('When user clears the \'Row title width\' input field, the row title width should change back to the default value', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(64);
+        });
+
+        it('When the users adds a value less than 64, the entered value should automatically update to 64 and the row title width should change to 64px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(50);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(64);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(64);
+        });
+    });
+
+    describe('Additional settings: \'Row title width (px)\' - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not set any value in the \'Row title width\' input field, the width of the row title should be 64px by default in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(64);
+        });
+
+        it('When the user enters a numeric value in the \'Row title width\' input field, the row title width should get updated accordingly in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(100);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(100);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(100);
+        });
+
+        it('When user clears the \'Row title width\' input field, the row title width should change back to the default value in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(64);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the row title width should change to 400px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(400);
+        });
+
+        it('When the users adds a value less than 64, the entered value should automatically update to 64 and the row title width should change to 64px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(50);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(64);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(64);
+        });
+    });
+
+    describe('Additional settings: \'Row minimum height (px)\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row minimum height (px)\' label and input field should be displayed. By default, the \'Row minimum height\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'Row minimum height (px)');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue('');
+        });
+
+        it('CSS of \'Row minimum height (px)\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowMinHeightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+
+        it('The user should only be able to enter only numeric value in the \'Row minimum height\' input field', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField('a!1b#c4d0');
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(140);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(140);
+        });
+    });
+
+    describe('Additional settings: \'Row minimum height (px)\' - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row minimum height (px)\' label and input field should be displayed. By default, the \'Row minimum height\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'Row minimum height (px)');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue('');
+        });
+
+        it('When the user has not set any value in the \'Row minimum height\' input field, the minimum row height should be 100px by default', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(100);
+        });
+
+        it('When the user enters a numeric value in the \'Row minimum height\' input field, the minimum row height should get updated accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(200);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(200);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(200);
+        });
+
+        it('When user clears the \'Row minimum height\' input field, the minimum row height should change back to the default value', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(100);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the minimum row height should change to 400px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(400);
+        });
+
+        it('When the users adds a value less than 50, the entered value should automatically update to 50 and the minimum row height should change to 50px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(40);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(50);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(50);
+        });
+    });
+
+    describe('Additional settings: \'Row minimum height (px)\' - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the user has not set any value in the \'Row minimum height\' input field, the minimum row height should be 100px by default in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(100);
+        });
+
+        it('When the user enters a numeric value in the \'Row minimum height\' input field, the minimum row height should get updated accordingly in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(200);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(200);
+        });
+
+        it('When user clears the \'Row minimum height\' input field, the minimum row height should change back to the default value in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(100);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the minimum row height should change to 400px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(400);
+        });
+
+        it('When the users adds a value less than 50, the entered value should automatically update to 50 and the minimum row height should change to 50px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(40);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(50);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(50);
+        });
+    });
+
+    describe('Additional settings: \'Row heading\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row heading\' label and input field should be displayed. By default, the \'Row heading\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowHeadingLabel(), 'Row heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowHeadingInputFieldValue('');
+        });
+
+        it('CSS of \'Row heading\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: \'Row heading\' - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not entered any value in the \'Row heading\' input field, Row heading should not be displayed', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the user enters text in the \'Row heading\' input field, a Row heading should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowHeadingInputField('Row heading');
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'Row heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'visible');
+        });
+
+        it('When user clears the \'Row heading\' input field, the Row heading should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowHeadingInputField();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Row heading\' - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not entered any value in the \'Row heading\' input field, Row heading should not be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'notExist');
+        });
+
+        it('When the user enters text in the \'Row heading\' input field, a Row heading should be displayed in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowHeadingInputField('Row heading');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'Row heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'visible');
+        });
+
+        it('When user clears the \'Row heading\' input field, the Row heading should disappear from the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowHeadingInputField();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'notExist');
+        });
+    });
+});