itemengine-cypress-automation 1.0.31 → 1.0.36

package/cypress/e2e/ILC/ListSorting/listSortingClickAndDrop.js

@@ -0,0 +1,456 @@
+import { listSortingPage } from "../../../pages/listSortingPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+let options = ['plant', 'sprout', 'flower', 'seed'];
+
+describe('Create Item page - List sorting: Click and drop cases in Set correct answer and Preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Click and drop cases for Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.barsPreLoaderWait();
+            listSortingPage.steps.addInputToOptionsInputField(options);
+        });
+
+        it('When the user has not selected any option in the \'Source\' section then the options and \'Target\' section options wrapper should be displayed in inactive state', () => {
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperSetCorrectAnswerSection(index);
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperSetCorrectAnswerSection(index);
+            }
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(options);
+        });
+
+        it('CSS of inactive state of options and \'Target\' section options wrapper', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper().find('[class*="DroppableWrapper"]'), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        //Note - a11y covered in Set correct answer section
+
+        it('When the user selects an option, it should get in selected state and all the \'Target\' section options wrapper should get in active state', () => {
+            listSortingPage.steps.selectSourceOptionSetCorrectAnswerSection(0);
+            listSortingPage.steps.verifyActiveStateOfSourceOptionSetCorrectAnswerSection(0);
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyActiveStateOfTargetOptionWrapperSetCorrectAnswerSection(index)
+            }
+            for (let index = 1; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperSetCorrectAnswerSection(index)
+            }
+        });
+
+        it('CSS of active state of options and \'Target\' section options wrapper', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper().find('[class*="DroppableWrapper"]'), {
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionOption().eq(0), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionOption().eq(0).find('[class*="DragIcon"] svg'), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+        });
+
+        it('Accessibility of active state of options and \'Target\' section options wrapper', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.setCorrectAnswerSectionOption().eq(0).parents('.list-sorting-response-container'))
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the \'Target\' section options wrapper should return to the inactive state', () => {
+            listSortingPage.steps.selectSourceOptionSetCorrectAnswerSection(0);
+            listSortingPage.steps.verifyInactiveStateOfSourceOptionSetCorrectAnswerSection(0);
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperSetCorrectAnswerSection(index)
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperSetCorrectAnswerSection(index)
+            }
+        });
+
+        it('When the user moves an option in \'Target\' section, the option should get removed from the \'Source\' section, and the \'Target\' section options wrapper should return to inactive state', () => {
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('seed', 0);
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperSetCorrectAnswerSection(index)
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperSetCorrectAnswerSection(index)
+            }
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['plant', 'sprout', 'flower', '']);
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['seed', '', '', '']);
+        });
+
+        it('When user selects another option from \'Source\' section then the empty \'Source\' section options wrapper and the empty \'Target\' section option wrapper should be displayed in active state', () => {
+            listSortingPage.steps.selectSourceOptionSetCorrectAnswerSection(1);
+            listSortingPage.steps.verifyActiveStateOfSourceOptionSetCorrectAnswerSection(1);
+            for (let index = 1; index < 4; index++) {
+                listSortingPage.steps.verifyActiveStateOfTargetOptionWrapperSetCorrectAnswerSection(index);
+            }
+            listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperSetCorrectAnswerSection(0);
+            for (let index = 0; index < 3; index++) {
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperSetCorrectAnswerSection(index);
+            }
+            listSortingPage.steps.verifyActiveStateOfSourceOptionWrapperSetCorrectAnswerSection(3);
+        });
+
+        it('User should be able to reorder the options within the \'Source\' section', () => {
+            listSortingPage.steps.selectSourceOptionSetCorrectAnswerSection(0);
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['sprout', 'plant', 'flower', '']);
+        });
+
+        it('User should be able to move all options from \'Source\' section to \'Target\' section', () => {
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('sprout', 1);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('plant', 2);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('flower', 3);
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['seed', 'sprout', 'plant', 'flower']);
+        });
+
+        it('When all the options are in \'Target\' section then user should be able to re-order the options in the \'Target\' section', () => {
+            listSortingPage.steps.selectTargetOptionSetCorrectAnswerSection(1);
+            listSortingPage.steps.selectTargetOptionSetCorrectAnswerSection(0);
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['sprout', 'seed', 'plant', 'flower']);
+            utilities.verifyInnerText(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), '');
+        });
+
+        it('CSS of inactive state of options and \'Source\' section options wrapper', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper().find('[class*="DroppableWrapper"]'), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and \'Source\' section options wrapper', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.setCorrectAnswerSectionOption().eq(0).parents('.list-sorting-response-container'))
+        });
+
+        it('When user selects an option then all \'Source\' options wrapper and the selected option should be displayed in active state', () => {
+            listSortingPage.steps.selectTargetOptionSetCorrectAnswerSection(0);
+            listSortingPage.steps.verifyActiveStateOfTargetOptionSetCorrectAnswerSection(0)
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyActiveStateOfSourceOptionWrapperSetCorrectAnswerSection(index)
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperSetCorrectAnswerSection(index)
+            }
+        });
+
+        it('CSS of active state of target options', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionOption().eq(0), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionOption().eq(0).find('[class*="DragIcon"] svg'), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+        });
+
+        it('User should be able to move options from \'Target\' section to \'Source\' section', () => {
+            listSortingPage.steps.clickOnLeftArrowKeySetCorrectAnswerSection();
+            listSortingPage.steps.clickAndDropOptionFromTargetToSourceInSetCorrectAnswerSection('plant', 1);
+            listSortingPage.steps.clickAndDropOptionFromTargetToSourceInSetCorrectAnswerSection('flower', 2);
+            listSortingPage.steps.clickAndDropOptionFromTargetToSourceInSetCorrectAnswerSection('seed', 3);
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['sprout', 'plant', 'flower', 'seed']);
+        });
+    });
+
+    describe('Click and drop cases - Arrow buttons in set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.barsPreLoaderWait();
+            listSortingPage.steps.addInputToOptionsInputField(options)
+        });
+
+        it('When user selects an option from the \'Source\' section then the right arrow button should be displayed in enabled state and left arrow buttons should be displayed in disabled state', () => {
+            listSortingPage.steps.selectSourceOptionSetCorrectAnswerSection(0);
+            listSortingPage.steps.verifyRightArrowEnabledSetCorrectAnswerSection();
+            listSortingPage.steps.verifyLeftArrowDisabledSetCorrectAnswerSection();
+        });
+
+        it('CSS of enabled right arrow button and disabled left arrow button', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionButtonRightArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionButtonLeftArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnDisabled
+            });
+        });
+
+        it('Accessibility enabled right arrow button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.setCorrectAnswerSectionButtonRightArrow().parents('.arrow-icon-container'));
+        });
+
+        it('When user selects the right arrow button then the selected option should move from \'Source\' section to first empty position in \'Target\' section', () => {
+            listSortingPage.steps.clickOnRightArrowKeySetCorrectAnswerSection();
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['plant', '', '', '']);
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['', 'sprout', 'flower', 'seed']);
+        });
+
+        it('When user has moved the option to \'Target\' then the arrow buttons should be displayed in disabled state', () => {
+            listSortingPage.steps.verifyRightArrowDisabledSetCorrectAnswerSection();
+            listSortingPage.steps.verifyLeftArrowDisabledSetCorrectAnswerSection();
+        });
+
+        it('User should be able to move multiple options in the \'Target\' section and they should move to first empty position in \'Target\' section', () => {
+            listSortingPage.steps.selectSourceOptionSetCorrectAnswerSection(2);
+            listSortingPage.steps.clickOnRightArrowKeySetCorrectAnswerSection();
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['plant', 'flower', '', '']);
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['', 'sprout', '', 'seed']);
+        });
+
+        it('When user selects an option from the \'Target\' section then the left arrow button should be displayed in enabled state and right arrow buttons should be displayed in disabled state', () => {
+            listSortingPage.steps.selectTargetOptionSetCorrectAnswerSection(0);
+            listSortingPage.steps.verifyRightArrowDisabledSetCorrectAnswerSection();
+            listSortingPage.steps.verifyLeftArrowEnabledSetCorrectAnswerSection();
+        });
+
+        it('CSS of enabled left arrow button and disabled right arrow button', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionButtonLeftArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(listSortingPage.setCorrectAnswerSectionButtonRightArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnDisabled
+            });
+        });
+
+        it('Accessibility enabled right arrow button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.setCorrectAnswerSectionButtonLeftArrow().parents('.arrow-icon-container'));
+        });
+
+        it('When user selects the left arrow button then the selected option should move from \'Target\' section to first empty position in \'Source\' section', () => {
+            listSortingPage.steps.clickOnLeftArrowKeySetCorrectAnswerSection();
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['', 'flower', '', '']);
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['plant', 'sprout', '', 'seed']);
+        });
+
+        it('User should be able to move multiple options in the \'Source\' section and they should move to first empty position in \'Source\' section', () => {
+            listSortingPage.steps.selectTargetOptionSetCorrectAnswerSection(1);
+            listSortingPage.steps.clickOnLeftArrowKeySetCorrectAnswerSection();
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['plant', 'sprout', 'flower', 'seed']);
+            utilities.verifyInnerText(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), '');
+        });
+    });
+
+    describe('Click and drop cases for Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.barsPreLoaderWait();
+            listSortingPage.steps.addInputToOptionsInputField(options);
+            listSortingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not selected any option in the \'Source\' section then the options and \'Target\' section options wrapper should be displayed in inactive state', () => {
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperPreviewTab(index);
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperPreviewTab(index);
+            }
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(options);
+        });
+
+        it('CSS of inactive state of options and \'Target\' section options wrapper', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.previewTabTargetOptionWrapper().find('[class*="DroppableWrapper"]'), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and \'Target\' section options wrapper', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.previewTabOption().eq(0).parents('[class*="ListSortingResponsestyles__ContextContainer"]'))
+        });
+
+        it('When the user selects an option, it should get in selected state and all the \'Target\' section options wrapper should get in active state', () => {
+            listSortingPage.steps.selectSourceOptionPreviewTab(0);
+            listSortingPage.steps.verifyActiveStateOfSourceOptionPreviewTab(0);
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyActiveStateOfTargetOptionWrapperPreviewTab(index)
+            }
+            for (let index = 1; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperPreviewTab(index)
+            }
+        });
+
+        it('CSS of active state of options and \'Target\' section options wrapper', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.previewTabTargetOptionWrapper().find('[class*="DroppableWrapper"]'), {
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(0), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(0).find('[class*="DragIcon"] svg'), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+        });
+
+        it('Accessibility of active state of options and \'Target\' section options wrapper', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.previewTabOption().eq(0).parents('[class*="ListSortingResponsestyles__ContextContainer"]'))
+        });
+
+
+        it('When the user deselects the option, it should get in deselected state and the \'Target\' section options wrapper should return to the inactive state', () => {
+            listSortingPage.steps.selectSourceOptionPreviewTab(0);
+            listSortingPage.steps.verifyInactiveStateOfSourceOptionPreviewTab(0);
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperPreviewTab(index)
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperPreviewTab(index)
+            }
+        });
+
+        it('When the user moves an option in \'Target\' section, the option should get removed from the \'Source\' section, and the \'Target\' section options wrapper should return to inactive state', () => {
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('seed', 0);
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperPreviewTab(index)
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperPreviewTab(index)
+            }
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(['plant', 'sprout', 'flower', '']);
+            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(['seed', '', '', '']);
+        });
+
+        it('When user selects another option from \'Source\' section then the empty \'Source\' section options wrapper and the empty \'Target\' section option wrapper should be displayed in active state', () => {
+            listSortingPage.steps.selectSourceOptionPreviewTab(1);
+            listSortingPage.steps.verifyActiveStateOfSourceOptionPreviewTab(1);
+            for (let index = 1; index < 4; index++) {
+                listSortingPage.steps.verifyActiveStateOfTargetOptionWrapperPreviewTab(index);
+            }
+            listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperPreviewTab(0);
+            for (let index = 0; index < 3; index++) {
+                listSortingPage.steps.verifyInactiveStateOfSourceOptionWrapperPreviewTab(index);
+            }
+            listSortingPage.steps.verifyActiveStateOfSourceOptionWrapperPreviewTab(3);
+        });
+
+        it('User should be able to reorder the options within the \'Source\' section', () => {
+            listSortingPage.steps.selectSourceOptionPreviewTab(0);
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(['sprout', 'plant', 'flower', '']);
+        });
+
+        it('User should be able to move all options from \'Source\' section to \'Target\' section', () => {
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('sprout', 1);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('plant', 2);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('flower', 3);
+            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(['seed', 'sprout', 'plant', 'flower']);
+        });
+
+        it('When all the options are in \'Target\' section then user should be able to re-order the options in the \'Target\' section', () => {
+            listSortingPage.steps.selectTargetOptionPreviewTab(1);
+            listSortingPage.steps.selectTargetOptionPreviewTab(0);
+            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(['sprout', 'seed', 'plant', 'flower']);
+            utilities.verifyInnerText(listSortingPage.previewTabSourceOptionWrapper(), '');
+        });
+
+
+        it('CSS of inactive state of options and \'Source\' section options wrapper', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.previewTabSourceOptionWrapper().find('[class*="DroppableWrapper"]'), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and \'Source\' section options wrapper', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.previewTabOption().eq(0).parents('[class*="ListSortingResponsestyles__ContextContainer"]'))
+        });
+
+        it('When user selects an option then all \'Source\' options wrapper and the selected option should be displayed in active state', () => {
+            listSortingPage.steps.selectTargetOptionPreviewTab(0);
+            listSortingPage.steps.verifyActiveStateOfTargetOptionPreviewTab(0)
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyActiveStateOfSourceOptionWrapperPreviewTab(index)
+                listSortingPage.steps.verifyInactiveStateOfTargetOptionWrapperPreviewTab(index)
+            }
+        });
+
+        it('CSS of active state of target options', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(0), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(0).find('[class*="DragIcon"] svg'), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+        });
+
+        it('User should be able to move options from \'Target\' section to \'Source\' section', () => {
+            listSortingPage.steps.clickOnLeftArrowKeyPreviewTab();
+            listSortingPage.steps.clickAndDropOptionFromTargetToSourceInPreviewTab('plant', 1);
+            listSortingPage.steps.clickAndDropOptionFromTargetToSourceInPreviewTab('flower', 2);
+            listSortingPage.steps.clickAndDropOptionFromTargetToSourceInPreviewTab('seed', 3);
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(['sprout', 'plant', 'flower', 'seed']);
+        });
+    });
+
+    describe('Click and drop cases - Arrow buttons in Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.barsPreLoaderWait()
+            listSortingPage.steps.addInputToOptionsInputField(options);
+            listSortingPage.steps.switchToPreviewTab()
+        });
+
+        it('When user selects an option from the \'Source\' section then the right arrow button should be displayed in enabled state and left arrow buttons should be displayed in disabled state', () => {
+            listSortingPage.steps.selectSourceOptionPreviewTab(0);
+            listSortingPage.steps.verifyRightArrowEnabledPreviewTab();
+            listSortingPage.steps.verifyLeftArrowDisabledPreviewTab();
+        });
+
+        it('CSS of enabled right arrow button and disabled left arrow button', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.previewTabButtonRightArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(listSortingPage.previewTabButtonLeftArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnDisabled
+            });
+        });
+
+        it('Accessibility enabled right arrow button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.previewTabButtonRightArrow().parents('.arrow-icon-container'));
+        });
+
+        it('When user selects the right arrow button then the selected option should move from \'Source\' section to first empty position in \'Target\' section', () => {
+            listSortingPage.steps.clickOnRightArrowKeyPreviewTab();
+            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(['plant', '', '', '']);
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(['', 'sprout', 'flower', 'seed']);
+        });
+
+        it('When user has moved the option to \'Target\' then the arrow buttons should be displayed in disabled state', () => {
+            listSortingPage.steps.verifyRightArrowDisabledPreviewTab();
+            listSortingPage.steps.verifyLeftArrowDisabledPreviewTab();
+        });
+
+        it('User should be able to move multiple options in the \'Target\' section and they should move to first empty position in \'Target\' section', () => {
+            listSortingPage.steps.selectSourceOptionPreviewTab(2);
+            listSortingPage.steps.clickOnRightArrowKeyPreviewTab();
+            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(['plant', 'flower', '', '']);
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(['', 'sprout', '', 'seed']);
+        });
+
+        it('When user selects an option from the \'Target\' section then the left arrow button should be displayed in enabled state and right arrow buttons should be displayed in disabled state', () => {
+            listSortingPage.steps.selectTargetOptionPreviewTab(0);
+            listSortingPage.steps.verifyRightArrowDisabledPreviewTab();
+            listSortingPage.steps.verifyLeftArrowEnabledPreviewTab();
+        });
+
+        it('CSS of enabled left arrow button and disabled right arrow button', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.previewTabButtonLeftArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(listSortingPage.previewTabButtonRightArrow().find('svg path'), {
+                'stroke': css.color.secondaryBtnDisabled
+            });
+        });
+
+        it('Accessibility enabled right arrow button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.previewTabButtonLeftArrow().parents('.arrow-icon-container'));
+        });
+
+        it('When user selects the left arrow button then the selected option should move from \'Target\' section to first empty position in \'Source\' section', () => {
+            listSortingPage.steps.clickOnLeftArrowKeyPreviewTab();
+            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(['', 'flower', '', '']);
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(['plant', 'sprout', '', 'seed']);
+        });
+
+        it('User should be able to move multiple options in the \'Source\' section and they should move to first empty position in \'Source\' section', () => {
+            listSortingPage.steps.selectTargetOptionPreviewTab(1);
+            listSortingPage.steps.clickOnLeftArrowKeyPreviewTab();
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(['plant', 'sprout', 'flower', 'seed']);
+            utilities.verifyInnerText(listSortingPage.previewTabTargetOptionWrapper(), '');
+        });
+    });
+});