itemengine-cypress-automation 1.0.39 → 1.0.40

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');
+        });
+    });
+});

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

@@ -0,0 +1,275 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create Item page - Drag and drop into categories: Question instructions, Category, Row', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Category - Basic', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Category\' label should be displayed', () => {
+            dragAndDropIntoCategoriesPage.categoryLabel()
+                .verifyInnerText('Category')
+                .should('be.visible');
+        });
+
+        it('By default, 2 \'Category\' input fields with prefilled text \'Category #\' should be displayed and numeration, \'Delete category\' icon buttons should be displayed besides each input field', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryInputFields(2);
+            for (let categoryIndex = 0; categoryIndex < 2; categoryIndex++) {
+                dragAndDropIntoCategoriesPage.categoryInputField()
+                    .eq(categoryIndex)
+                    .should('have.text', `Category ${categoryIndex + 1}`);
+            };
+            dragAndDropIntoCategoriesPage.steps.verifyNumerationOfCategoryInputFields();
+            dragAndDropIntoCategoriesPage.steps.verifyDeleteCategoryButton(0);
+            dragAndDropIntoCategoriesPage.steps.verifyDeleteCategoryButton(1);
+        });
+
+        it('When the user clears a \'Category\' input field, \'Enter category title\' placeholder text should be displayed and when the user enters text in the input field, the placeholder should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.verifyPlaceholderTextInCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.enterTextInCategoryInputField(0, 'Category 1');
+            dragAndDropIntoCategoriesPage.steps.verifyPlaceholderTextNotExistInCategoryInputField(0);
+        });
+
+        it('CSS of Category section', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.categoryLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            dragAndDropIntoCategoriesPage.categoryInputField()
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .eq(0)
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                    dragAndDropIntoCategoriesPage.categoryInputField()
+                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                });
+            dragAndDropIntoCategoriesPage.addCategoryButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
+        });
+
+        it('\'Add category\' button should be present', () => {
+            dragAndDropIntoCategoriesPage.addCategoryButton()
+                .verifyInnerText('Add category')
+                .should('be.visible');
+        });
+
+        it('When user adds a category using the \'Add category\' button then added category input field should be displayed with \'Enter category title\' placeholder text, option numeration and delete button', () => {
+            dragAndDropIntoCategoriesPage.steps.addCategory();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryInputFields(3);
+            dragAndDropIntoCategoriesPage.steps.verifyPlaceholderTextInCategoryInputField(2);
+            dragAndDropIntoCategoriesPage.steps.verifyNumerationOfCategoryInputFields();
+            dragAndDropIntoCategoriesPage.steps.verifyDeleteCategoryButton(2);
+        });
+
+        it('When the user focuses in and out of the \'Category\' input field, no error message should appear', () => {
+            dragAndDropIntoCategoriesPage.steps.focusInAndFocusOutOfCategoryInputField(2);
+            dragAndDropIntoCategoriesPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user hovers the delete button of the category input field, \'Delete category\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDeleteCategoryTooltip(0);
+        });
+
+        it('When user clicks on the \'Delete category\' button then the respective options input field should get deleted, option numeration should change accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.verifyNumerationOfCategoryInputFields();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryInputFields(2);
+        });
+
+        it('The user should be able to delete all category input fields and only \'Category\' label and \'Add category\' button should be present', () => {
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.categoryInputField()
+                .should('not.exist');
+            dragAndDropIntoCategoriesPage.categoryLabel()
+                .should('be.visible');
+            dragAndDropIntoCategoriesPage.addCategoryButton()
+                .should('be.visible');
+        });
+    });
+
+    describe('Category - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, two categories should be present with category titles \'Category #\' in the \'Set correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInSetCorrectAnswerSection(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInSetCorrectAnswerSection(2);
+            for (let categoryIndex = 0; categoryIndex < 2; categoryIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInSetCorrectAnswerSection(categoryIndex, `Category ${categoryIndex + 1}`);
+            };
+        });
+
+        it('When the user clears a \'Category\' input field, the category title should appear as blank and on entering the text again, the category title should update accordingly in the \'Set correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInSetCorrectAnswerSection(0, '');
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInSetCorrectAnswerSection(2);
+            dragAndDropIntoCategoriesPage.steps.enterTextInCategoryInputField(0, 'Category 1');
+            dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInSetCorrectAnswerSection(0, 'Category 1');
+        });
+
+        it('CSS of Category in the \'Set correct answer\' section', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryTitle()
+                .should('have.css', 'background-color', css.color.titleContainerBg)
+                .and('have.css', 'border', `1px solid ${css.color.titleContainerBorder}`)
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.normal, css.fontWeight.semibold);
+        });
+
+        it('When the user adds a category using the \'Add category\' button then added category should be displayed with a blank category title in the \'Set correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.addCategory();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInSetCorrectAnswerSection(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInSetCorrectAnswerSection(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInSetCorrectAnswerSection(2, '');
+        });
+
+        it('When the user deletes a category, the respective category should get removed from the \'Set correct answer\' section and the titles of other categories should not get affected', () => {
+            cy.log('Pre step: Setting title for newly added category')
+            dragAndDropIntoCategoriesPage.steps.enterTextInCategoryInputField(2, 'Category 3');
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInSetCorrectAnswerSection(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInSetCorrectAnswerSection(2);
+            for (let categoryIndex = 0; categoryIndex < 2; categoryIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInSetCorrectAnswerSection(categoryIndex, `Category ${categoryIndex + 1}`);
+            };
+        });
+
+        it('When the user deletes all categories, all the category titles should get removed and only one empty container should be displayed in the \'Set correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryTitle()
+                .should('not.exist');
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInSetCorrectAnswerSection(1);
+        });
+
+        //need to add cases of scroll buttons appearing when more than 5 categories are added after this query gets resolved https://redmine.zeuslearning.com/issues/532267
+        //minimum width 110ox for a category height 100px
+        //TODO: the below case will be different for desktop and mobile view
+        it.skip('When the user adds more than __ categories, the categories should become scrollable and next and previous buttons with label \'Displaying # of #\' should appear in the \'Set correct answer\' section', () => {
+
+        });
+
+        it.skip('CSS of scrollable buttons and label', { tags: 'css' }, () => {
+
+        });
+
+        it.skip('Accessibility of scrollable buttons and label', { tags: 'css' }, () => {
+
+        });
+
+        it.skip('The user should be able to scroll across the categories using next and previous buttons', () => {
+
+        });
+
+        it.skip('When the user deletes some categories, the scroll buttons should disappear and all the categories should be visible in the \'Set correct answer\' section', () => {
+
+        });
+    });
+
+    describe('Category - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, two categories should be present with category titles \'Category #\' in the \'Preview\' tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInPreviewTab(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInPreviewTab(2);
+            for (let categoryIndex = 0; categoryIndex < 2; categoryIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInPreviewTab(categoryIndex, `Category ${categoryIndex + 1}`);
+            };
+        });
+
+        it('When the user clears a \'Category\' input field, the category title should appear as blank and on entering the text again, the category title should update accordingly in the \'Preview\' tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInPreviewTab(0, '');
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInPreviewTab(2);
+
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInCategoryInputField(0, 'Category 1');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInPreviewTab(0, 'Category 1');
+        });
+
+        it('CSS of Category in the \'Preview\' tab', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabCategoryTitle()
+                .should('have.css', 'background-color', css.color.titleContainerBg)
+                .and('have.css', 'border', `1px solid ${css.color.titleContainerBorder}`)
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.normal, css.fontWeight.semibold);
+        });
+
+        it('When the user adds a category using the \'Add category\' button then added category should be displayed with a blank category title in the \'Preview\' tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addCategory();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInPreviewTab(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInPreviewTab(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInPreviewTab(2, '');
+        });
+
+        it('When the user deletes a category, the category should get removed from the \'Set correct answer\' section and the titles of other categories should not get affected', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            cy.log('Pre step: Setting title for newly added category')
+            dragAndDropIntoCategoriesPage.steps.enterTextInCategoryInputField(2, 'Category 3');
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(2);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoryTitlesInPreviewTab(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInPreviewTab(2);
+            for (let categoryIndex = 0; categoryIndex < 2; categoryIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifyCategoryTitleInPreviewTab(categoryIndex, `Category ${categoryIndex + 1}`);
+            };
+        });
+
+        it('When the user deletes all categories, all the category titles should get removed and only one empty container should be displayed in the \'Preview\' tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.deleteCategoryInputField(0);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.previewTabCategoryTitle()
+                .should('not.exist');
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfCategoriesInPreviewTab(1);
+        });
+
+        //need to add cases of scroll buttons appearing when more than 5 categories are added after this query gets resolved https://redmine.zeuslearning.com/issues/532267
+
+        //TODO: the below case will be different for desktop and mobile view
+        it('When the user adds more than __ categories, the categories should become scrollable and next and previous buttons with label \'Displaying # of #\' should appear in the \'Preview\' tab', () => {
+
+        });
+
+        it('CSS of scrollable buttons and label', { tags: 'css' }, () => {
+
+        });
+
+        it('Accessibility of scrollable buttons and label', { tags: 'css' }, () => {
+
+        });
+
+        it('The user should be able to scroll across the categories using next and previous buttons', () => {
+
+        });
+
+        it('When the user deletes some categories, the scroll buttons should disappear and all the categories should be visible in the \'Preview\' tab', () => {
+
+        });
+    });
+});