itemengine-cypress-automation 1.0.27 → 1.0.28

package/cypress/e2e/ILC/FillInTheGapsDropdown/fillInTheGapsDropdownEditTabBasicSection.js

@@ -0,0 +1,591 @@
+import { fillInTheGapsDropdownPage } from "../../../pages/fillInTheGapsDropdownPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+let optionsForResponse1 = ['changing', 'progressively', 'healthy', 'new'];
+
+describe('Create Item page - Fill in the gaps - text: Question Insructions, Question , Set Correct Answer, Alternate Correct Answer', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps - dropdown question type');
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps - dropdown question type');
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Question input field', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Question\' label and input field should be displayed and should be prefilled with the text- \"Sample \'Lorem Ipsum\' text along with a response token with text \'Response\'"', () => {
+            fillInTheGapsDropdownPage.questionLabel()
+                .verifyInnerText('Question');
+            fillInTheGapsDropdownPage.questionInputField()
+                .should('have.text', 'Lorem ipsum dolor sit amet, 1Responsecloseonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus.');
+            fillInTheGapsDropdownPage.responseToken()
+                .should('have.length', 1);
+            fillInTheGapsDropdownPage.responseToken()
+                .find('content')
+                .should('have.text', 'Response');
+        });
+
+        it('The response token should be displayed with a numeric count along with a close button in the question input field', () => {
+            fillInTheGapsDropdownPage.steps.verifyResponseTokenIndexAndCloseButton(0)
+        });
+
+        it('CSS of Question input field contents', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.questionInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            fillInTheGapsDropdownPage.responseToken()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular)
+            fillInTheGapsDropdownPage.responseTokenCloseButton()
+                .should('have.css', 'border', `1px solid ${css.color.activeButtons}`);
+        });
+
+        it('When the user switches to the Preview tab, the sample \'Lorem Ipsum\' text along with a response dropdown should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabQuestionContainer()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n​\n​\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus.');
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .should('have.length', 1)
+                .and('be.visible');
+        });
+
+        it('When the user edits text in the question input field then the updated question should be displayed in the preview tab', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.questionInputField()
+                .click()
+                .type(' Lorem Ipsum')
+                .should('have.text', 'Lorem ipsum dolor sit amet, 1Responsecloseonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus. Lorem Ipsum')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabQuestionContainer()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n​\n​\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus. Lorem Ipsum');
+        });
+
+        it('When the user focuses in the question input field, the CKEditor toolbar should be displayed with a \'+Response\' button and when the user clicks on \'+Response\' button, a response token in the question input field, a response dropdown along with \'Response #\' label in the \'Set correct answer\' section, a \'Response #\' accordion in the additional settings accordion and a new response dropdown the \'Preview tab\' should get added', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.questionInputField()
+                .click();
+            fillInTheGapsDropdownPage.ckEditorAddResponseButton()
+                .should('be.visible');
+            fillInTheGapsDropdownPage.ckEditorAddResponseButton()
+                .click();
+            cy.log('Checking if 2nd response token gets added in the question input field with \'2\' count and a close icon')
+            fillInTheGapsDropdownPage.steps.verifyResponseTokenIndexAndCloseButton(1)
+            cy.log('Checking if Options for response 2 is added below the question instructions')
+            fillInTheGapsDropdownPage.optionsLabel()
+                .eq(1)
+                .verifyInnerText('Options for response 2');
+            fillInTheGapsDropdownPage.steps.verifyOptionsForResponseContents(1)
+            cy.log('Checking if 2nd dropdown gets added in the set correct answer section with \'Response 2\' label')
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .eq(1)
+                .should('have.class', 'Mui-disabled')
+                .should('be.visible');
+            fillInTheGapsDropdownPage.setCorrectAnswerResponseFieldLabel()
+                .eq(1)
+                .verifyInnerText('Response 2')
+                .and('be.visible');
+            cy.log('Checking if 2nd response accordion gets added in the additional settings panel with \'Response 2\' label')
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsDropdownPage.additionalSettingsResponseAccordion()
+                .eq(1)
+                .verifyInnerText('Response 2')
+                .and('be.visible');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .should('have.length', 2)
+                .and('be.visible');
+            fillInTheGapsDropdownPage.previewTabQuestionContainer()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n​\n​\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus. Lorem Ipsum\n​\n​');
+        });
+
+        it('When the user clicks on the \'close\' button present on a response token, the response token in the question input field should get removed and the count of the response tokens present in the question input field should get updated accordingly, Options for \'Response #\', response dropdown along with \'Response #\' label in the \'Set correct answer\' section, \'Response #\' accordion in the additional settings accordion and the respective response dropdown in the \'Preview tab\' should also get removed', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.deleteAResponseToken(1);
+            cy.log('Checking if 2nd response token gets removed from the question input field and the numeric counts get updated')
+            fillInTheGapsDropdownPage.responseToken()
+                .eq(1)
+                .should('not.exist');
+            fillInTheGapsDropdownPage.steps.verifyResponseTokenIndexAndCloseButton(0)
+            cy.log('Checking the Options for response 2 container and it\'s label does not exist')
+            fillInTheGapsDropdownPage.optionsSectionWrapper()
+                .eq(1)
+                .should('not.exist');
+            fillInTheGapsDropdownPage.optionsLabel()
+                .contains('Options for response 2')
+                .should('not.exist');
+            cy.log('Checking the Options for response 2 dropdown and it\'s label does not exist')
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .eq(1)
+                .should('not.exist');
+            fillInTheGapsDropdownPage.setCorrectAnswerResponseFieldLabel()
+                .contains('Response 2')
+                .should('not.exist');
+            cy.log('Checking the Options for response 2 accordion does not exist')
+            fillInTheGapsDropdownPage.additionalSettingsResponseAccordion()
+                .contains('Response 2')
+                .should('not.exist');
+            cy.log('Switching to Preview tab and checking only 1 dropdown should exist')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .should('have.length', 1)
+                .and('be.visible');
+            fillInTheGapsDropdownPage.previewTabQuestionContainer()
+                .verifyInnerText('Lorem ipsum dolor sit amet, \n​\n​\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus. Lorem Ipsum');
+        });
+
+        it('When the user removes all response tokens from the question input field, an error message \'Error: Minimum one response token is required.\' should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.deleteAResponseToken(0);
+            fillInTheGapsDropdownPage.errorMessage()
+                .verifyInnerText('Error: Minimum one response token is required.')
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyCSSAnda11yOfErrorMessage()
+
+        fillInTheGapsDropdownPage.tests.addTokenAndVerifyMinimumOneTokenRequiredErrorMessageNotExist()
+
+        fillInTheGapsDropdownPage.tests.verifyQuestionInputFieldPlaceholderText();
+    });
+
+    describe('Options for response', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Options for response 1\' label should be displayed', () => {
+            fillInTheGapsDropdownPage.optionsLabel()
+                .should('have.text', 'Options for response 1');
+        });
+
+        it('By default, 4 \'Options\' input fields should be displayed with placeholder text and Drag handle and Delete option icon buttons should be displayed besides each input field', () => {
+            fillInTheGapsDropdownPage.steps.verifyOptionsForResponseContents(0)
+        });
+
+        it('When user hovers over the drag handle of the options then \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.dragHandleButton()
+                        .trigger('mouseover');
+                });
+            fillInTheGapsDropdownPage.tooltipText()
+                .should('have.text', 'Drag to reorder');
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.dragHandleButton()
+                        .trigger('mouseout');
+                });
+            fillInTheGapsDropdownPage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('When user hovers over the enabled delete icon of the options then \'Delete option\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the delete icon', () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .trigger('mouseover');
+                });
+            fillInTheGapsDropdownPage.tooltipText()
+                .verifyInnerText('Delete option');
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .trigger('mouseout');
+                });
+            fillInTheGapsDropdownPage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            fillInTheGapsDropdownPage.addOptionButton()
+                .should('have.text', 'Add option')
+                .and('be.visible');
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.optionsLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.dragHandleButton()
+                        .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.regular);
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                    fillInTheGapsDropdownPage.optionsForResponseInputField()
+                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                });
+            fillInTheGapsDropdownPage.addOptionButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed and option numeration should increment', () => {
+            fillInTheGapsDropdownPage.addOptionButton()
+                .click();
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(4)
+                .within(() => {
+                    fillInTheGapsDropdownPage.optionsForResponseInputField()
+                        .should('have.attr', 'placeholder', 'Enter option');
+                    fillInTheGapsDropdownPage.dragHandleButton()
+                        .should('exist');
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .should('be.visible');
+                    fillInTheGapsDropdownPage.optionNumeration()
+                        .should('have.text', 5)
+                });
+        });
+
+        it('When user clicks on the \'Delete\' option button then the respective options input field should get deleted and option numeration should change accordingly', () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(2)
+                .within(() => {
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .click();
+                });
+            fillInTheGapsDropdownPage.steps.verifyOptionsForResponseContents(0)
+        });
+
+        it('When number of options are less than 3, the Delete option icon buttons should be displayed in disabled state', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDropdownPage.optionWrapper()
+                    .eq(index)
+                    .within(() => {
+                        fillInTheGapsDropdownPage.deleteButton()
+                            .click();
+                    });
+            }
+            fillInTheGapsDropdownPage.deleteButton()
+                .should('be.disabled')
+        });
+
+        it('When user hovers over the disabled \'Delete\' icon buttons of the options then \'Minimum two options are required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .trigger('mouseover', { force: true });
+                });
+            fillInTheGapsDropdownPage.tooltipText()
+                .verifyInnerText('Minimum two options are required');
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .trigger('mouseout', { force: true });
+                });
+            fillInTheGapsDropdownPage.tooltipText()
+                .should('not.exist');
+        });
+        it('CSS of disabled delete icon', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.deleteButton()
+                .eq(0)
+                .should('have.css', 'opacity', '0.5')
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+        });
+
+        it('Accessibility of disabled delete icon', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.deleteButton());
+        });
+
+        //Note: a11y covered in header section
+
+        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.optionsForResponseInputField()
+                        .click()
+                        .blur();
+                    fillInTheGapsDropdownPage.optionIsRequiredErrorMessage()
+                        .should('have.text', 'Error: Option is required.');
+                });
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.optionIsRequiredErrorMessage()
+                        .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.optionIsRequiredErrorMessage())
+        });
+
+        it('When user enters text in options input field then the error message \'Error: Option is required.\' should disappear', () => {
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, ['changing']);
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.optionIsRequiredErrorMessage()
+                        .should('not.exist');
+                });
+            cy.log('Post step: Clear the added text in the input field')
+            fillInTheGapsDropdownPage.optionsForResponseInputField()
+                .eq(0)
+                .clear();
+        });
+    });
+
+    describe('Options cases in Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user has not entered text in the options input field then the response dropdowns should be disabled and the user should not be able to expand the dropdown in the \'Set Correct Answer\'', () => {
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .should('have.class', 'Mui-disabled');
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .click();
+            fillInTheGapsDropdownPage.dropdownList()
+                .should('not.exist');
+        });
+
+        it('When the user has not added any options, on hovering over the dropdown, a tooltip \'Please add options\' should be displayed and on focusing away from the dropdown, the tooltip should disappear', () => {
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .verifyTooltip('Please add options');
+        });
+
+        it('CSS of set correct answer section disabled response dropdown', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .should('have.css', 'opacity', '1')
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+        });
+
+        it('Accessibility of set correct answer section disabled response dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection());
+        });
+
+        it('When user enters a text in options input field then the entered options should be displayed in response dropdown of \'Set Correct Answer\' section', () => {
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+        });
+
+        //https://redmine.zeuslearning.com/issues/541369
+        it('CSS of set correct answer section response dropdown in active state', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.responseDropdownOptions()
+                .eq(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of set correct answer section response dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.dropdownList())
+            cy.log('Post step: Collapsing the response dropdown')
+        });
+
+        it('When user deletes an option then the deleted option input field and response dropdown in \'Set Correct Answer\' section should not be displayed', () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(3)
+                .within(() => {
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .click();
+                });
+            cy.log('Checking the deleted input field should not exist in the dropdown')
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .click();
+            fillInTheGapsDropdownPage.responseDropdownOptions()
+                .contains(`${optionsForResponse1[3]}`)
+                .should('not.exist');
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1.slice(0, 3));
+            cy.log('Post step: Collapsing the response dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed along with the added option in the \'Set Correct Answer\' section response dropdown', () => {
+            fillInTheGapsDropdownPage.addOptionButton()
+                .click();
+            cy.log('Checking the added input field should be displayed')
+            fillInTheGapsDropdownPage.optionsForResponseInputField()
+                .eq(3)
+                .should('exist')
+                .type(`${optionsForResponse1[3]}`)
+            cy.log('Checking the added option should be displayed in the dropdown')
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+            cy.log('Closing the dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it('When the user has added two same options in the options section, only one occurrence of that option should be listed in the dropdown', () => {
+            fillInTheGapsDropdownPage.optionsForResponseInputField()
+                .eq(3)
+                .clear()
+                .type(`${optionsForResponse1[1]}`);
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1.slice(0, 3))
+            fillInTheGapsDropdownPage.responseDropdownOptions()
+                .should('have.length', 3);
+            cy.log('Post step: Collapsing the response dropdown')
+            cy.get('body')
+                .click();
+        });
+    });
+
+    describe('Options cases in Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user has not entered text in the options input field then the response dropdowns should be disabled in the \'Preview\' tab', () => {
+            cy.log('Switching to preview tab to check disabled dropdown option')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .should('have.class', 'Mui-disabled');
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        it('CSS of disabled preview tab response dropdown', { tags: 'css' }, () => {
+            cy.log('Switching to preview tab to check disabled dropdown css')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .should('have.css', 'opacity', '1')
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        it('Accessibility of preview tab disabled response dropdown', { tags: 'a11y' }, () => {
+            cy.log('Switching to preview tab to check disabled dropdown a11y')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabResponseDropdown());
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        it('When user enters a text in options input field then the entered options should be displayed in response dropdown of \'Preview\' tab', () => {
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            cy.log('Switching to preview tab to check Preview tab response dropdown options')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+            cy.log('selecting an option to collapse the response dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromResponseDropdown('new');
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        //https://redmine.zeuslearning.com/issues/541369
+        it('CSS of preview tab response dropdown in active state', { tags: 'css' }, () => {
+            cy.log('Switching to preview tab to check Preview tab response dropdown options css')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .click();
+            fillInTheGapsDropdownPage.responseDropdownOptions()
+                .eq(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.transparent);
+            cy.log('selecting an option to collapse the response dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromResponseDropdown('new');
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        it('Accessibility of preview tab response dropdown in active state', { tags: 'a11y' }, () => {
+            cy.log('Switching to preview tab to check Preview tab response dropdown options a11y')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .click();
+            cy.checkAccessibility(fillInTheGapsDropdownPage.dropdownList())
+            cy.log('selecting an option to collapse the response dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromResponseDropdown('new');
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        it('When user deletes an option then the deleted option input field and response dropdown in \'Preview\' tab section should not be displayed', () => {
+            fillInTheGapsDropdownPage.optionWrapper()
+                .eq(3)
+                .within(() => {
+                    fillInTheGapsDropdownPage.deleteButton()
+                        .click();
+                });
+            cy.log('Checking the deleted input field should not exist in the dropdown')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .click();
+            fillInTheGapsDropdownPage.responseDropdownOptions()
+                .contains(`${optionsForResponse1[3]}`)
+                .should('not.exist');
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1.slice(0, 3));
+            cy.log('selecting an option to collapse the response dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromResponseDropdown('changing');
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option should be displayed in the \'Preview\' tab response dropdown', () => {
+            fillInTheGapsDropdownPage.addOptionButton()
+                .click();
+            fillInTheGapsDropdownPage.optionsForResponseInputField()
+                .eq(3)
+                .type(`${optionsForResponse1[3]}`);
+            cy.log('Checking the added option should be displayed in the dropdown')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+            cy.log('selecting an option to collapse the response dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromResponseDropdown('changing');
+            cy.log('Post step: Switching back to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+        });
+
+        it('When the user has added two same options in the options section, only one occurence of that option should be listed in the dropdown', () => {
+            fillInTheGapsDropdownPage.optionsForResponseInputField()
+                .eq(3)
+                .clear()
+                .type(`${optionsForResponse1[1]}`);
+            cy.log('Switching to preview tab to check Preview tab response dropdown options')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1.slice(0, 3))
+            fillInTheGapsDropdownPage.responseDropdownOptions()
+                .should('have.length', 3);
+        });
+    });
+});