itemengine-cypress-automation 1.0.30 → 1.0.31

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

@@ -0,0 +1,569 @@
+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('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    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', () => {
+
+        });
+    });
+
+    describe('Row - 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('\'Row\' label should be displayed', () => {
+            dragAndDropIntoCategoriesPage.rowLabel()
+                .verifyInnerText('Row')
+                .should('be.visible');
+        });
+
+        it('By default, 1 empty \'Row\' input field with \'Enter Row title\' placeholder text, numeration and disabled \'Delete row\' icon button should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowInputFields(1);
+            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfRowInputField(0);
+            dragAndDropIntoCategoriesPage.steps.verifyDisabledDeleteRowButton(0);
+        });
+
+        it('The user should be able to enter text in the \'Row\' input field and when the user enters text in the input field, the placeholder should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyPlaceholderTextInRowInputField(0);
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowInputField(0, 'Row 1');
+            dragAndDropIntoCategoriesPage.steps.verifyPlaceholderTextNotExistInRowInputField(0);
+        });
+
+        it('CSS of \'Row\' section', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.rowLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .should('have.css', 'opacity', '0.5')
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                    dragAndDropIntoCategoriesPage.rowInputField()
+                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                });
+            dragAndDropIntoCategoriesPage.addRowButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
+        });
+
+        it('When the user hovers disabled \'Delete row\' icon button of the row input field, \'Minimum one row is required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete row\' icon button', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDisabledRowInputFieldTooltip();
+        });
+
+        it('CSS of disabled \'Delete row\' tooltip', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseover', { force: true });
+                });
+            dragAndDropIntoCategoriesPage.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.normal, css.fontWeight.regular);
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseout', { force: true });
+                });
+            dragAndDropIntoCategoriesPage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('Accessibility of disabled \'Delete row\' tooltip', { tags: 'a11y' }, () => {
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseover', { force: true });
+                });
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.tooltipText());
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseout', { force: true });
+                });
+            dragAndDropIntoCategoriesPage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('\'Add row\' button should be present', () => {
+            dragAndDropIntoCategoriesPage.addRowButton()
+                .verifyInnerText('Add row')
+                .should('be.visible');
+        });
+
+        it('When user adds a row using the \'Add row\' button then added row input field should be empty and displayed with \'Enter Row title\' placeholder text, option numeration and delete button', () => {
+            dragAndDropIntoCategoriesPage.steps.addRow();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowInputFields(2);
+            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfRowInputField(1);
+            dragAndDropIntoCategoriesPage.steps.verifyEnabledDeleteRowButton(1);
+            dragAndDropIntoCategoriesPage.steps.verifyNumerationOfRowInputFields();
+        });
+
+        it('When the user focuses in and out of the \'Row\' input field, no error message should appear', () => {
+            dragAndDropIntoCategoriesPage.steps.focusInAndFocusOutOfRowInputField(1)
+            dragAndDropIntoCategoriesPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When more than 1 row input fields are present, the \'Delete row\' icon buttons of the row input field should get enabled', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyEnabledDeleteRowButton(0);
+            dragAndDropIntoCategoriesPage.steps.verifyEnabledDeleteRowButton(1);
+        });
+
+        it('CSS of enabled \'Delete row\' icon button', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .eq(0)
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .should('have.css', 'opacity', '1')
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                });
+        });
+
+        it('Accessibility of enabled \'Delete row\' icon button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.rowInputField().parents('[class*="OptionsComponentstyles__TitleWrapper"]'));
+        });
+
+        it('When the user hovers over the enabled \'Delete row\' icon button, then \'Delete row\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete row\' icon button', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyEnabledDeleteRowInputFieldTooltip(0);
+        });
+
+        it('CSS of enabled \'Delete row\' tooltip', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .eq(0)
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseover');
+                });
+            dragAndDropIntoCategoriesPage.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.normal, css.fontWeight.regular);
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .eq(0)
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseout');
+                });
+            dragAndDropIntoCategoriesPage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('Accessibility of enabled \'Delete row\' tooltip', { tags: 'a11y' }, () => {
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .eq(0)
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseover');
+                });
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.tooltipText());
+            dragAndDropIntoCategoriesPage.rowInputField()
+                .eq(0)
+                .parents('[class*="OptionsComponentstyles__TitleWrapper"]')
+                .within(() => {
+                    dragAndDropIntoCategoriesPage.deleteButton()
+                        .trigger('mouseout');
+                });
+            dragAndDropIntoCategoriesPage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('When user clicks on the \'Delete row\' icon button then the respective row input field should get deleted, option numeration should change accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.deleteRowInputField(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowInputFields(1);
+            dragAndDropIntoCategoriesPage.steps.verifyNumerationOfRowInputFields();
+        });
+
+        it('When only one row input field is present, the \'Delete row\' icon button should get disabled', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDisabledDeleteRowButton(0);
+        });
+    });
+
+    describe('Row - 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, one row with no row title should be displayed in the \'Set correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowsInSetCorrectAnswerSection(1);
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionRowTitle()
+                .should('not.exist');
+        });
+
+        it('When the user adds a row title, a row title should be displayed in the \'Set correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowInputField(0, 'Row 1');
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleInSetCorrectAnswerSection(0, 'Row 1');
+        });
+
+        it('CSS of \'Row\' in the \'Set correct answer\' section', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionRowTitle()
+                .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 user adds a row using the \'Add row\' button then added row should be displayed with a blank row title in the \'Set correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.addRow();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowsInSetCorrectAnswerSection(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowTitlesInSetCorrectAnswerSection(2);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleInSetCorrectAnswerSection(1, '');
+        });
+
+        it('When the user deletes a row, the respective row should get removed from the \'Set correct answer\' section and the titles of other rows should not get affected', () => {
+            cy.log('Entering text in 2nd row input field')
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowInputField(1, 'Row 2');
+            dragAndDropIntoCategoriesPage.steps.deleteRowInputField(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowsInSetCorrectAnswerSection(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowTitlesInSetCorrectAnswerSection(1);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleInSetCorrectAnswerSection(0, 'Row 2');
+        });
+    });
+
+    describe('Row - 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();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not added any row title, no row title should be displayed in the \'Preview\' tab', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowsInPreviewTab(1);
+            dragAndDropIntoCategoriesPage.previewTabRowTitle()
+                .should('not.exist');
+        });
+
+        it('When the user adds a row title, a row title should be displayed in the \'Preview\' tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowInputField(0, 'Row 1');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleInPreviewTab(0, 'Row 1');
+        });
+
+        it('CSS of \'Row\' in the \'Preview\' tab', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabRowTitle()
+                .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 user adds a row using the \'Add row\' button then added row should be displayed with a blank row title in the \'Preview\' tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addRow();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowsInPreviewTab(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowTitlesInPreviewTab(2);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleInPreviewTab(1, '');
+        });
+
+        it('When the user deletes a row, the respective row should get removed from the \'Preview\' tab and the titles of other rows should not get affected', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            cy.log('Entering text in 2nd row input field')
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowInputField(1, 'Row 2');
+            dragAndDropIntoCategoriesPage.steps.deleteRowInputField(0);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowsInPreviewTab(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCountOfRowTitlesInPreviewTab(1);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleInPreviewTab(0, 'Row 2');
+        });
+    });
+});