itemengine-cypress-automation 1.0.78 → 1.0.80

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

@@ -1,750 +0,0 @@
-import { fillInTheGapsDropdownPage } from "../../../pages/fillInTheGapsDropdownPage";
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-const css = Cypress.env('css');
-
-let optionsForResponse1 = ['changing', 'progressively', 'healthy', 'new'];
-
-describe('Fill In the Gaps - Dropdown: Additional settings - Advanced settings for all response areas and Response accordion', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    describe('Additional Settings: Advanced settings for all response areas', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyAdvanceSettingsForAllResponsesLabelAndCSS();
-
-        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
-    });
-
-    describe('Additional Settings: Placeholder text', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1)
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyPlaceholderTextLabelInputFieldAndCSS()
-
-        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
-
-        //Placeholder test cases for Set correct answer section response dropdown
-        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the set correct answer response dropown', () => {
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the set correct answer response dropdown', () => {
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .type('Lorem Ipsum')
-                .should('have.value', 'Lorem Ipsum');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyInnerText('Lorem Ipsum')
-                        .should('be.visible');
-                });
-        });
-
-        it('CSS of \'Placeholder text\'', { tags: 'css' }, () => {
-            fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                .verifyCSS(css.color.placeholderText, css.fontSize.normal, css.fontWeight.regular);
-        });
-
-        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection());
-        });
-
-        it('When the user sets an answer using the response dropdown, then the placeholder text should disappear in \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'changing')
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        it('When the user removes the added \'Placeholder text\' then the placeholder text should not be displayed in \'Set correct answer\' section', () => {
-            cy.log('Clearing the placeholder text')
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        //Placeholder test cases for Preview tab response dropdown
-        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab response dropdown', () => {
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab response dropdown', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .type('Lorem Ipsum')
-                .should('have.value', 'Lorem Ipsum');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyInnerText('Lorem Ipsum')
-                        .should('be.visible');
-                });
-        });
-
-        it('CSS of \'Placeholder text\'', { tags: 'css' }, () => {
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyCSS(css.color.placeholderText, css.fontSize.normal, css.fontWeight.regular);
-                });
-        });
-
-        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper())
-        });
-
-        it('When the user sets an answer using the response dropdown, then the placeholder text should disappear in the preview tab', () => {
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'changing')
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        it('When the user removes the added \'Placeholder text\' then the placeholder text should not be displayed in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            cy.log('Clearing the placeholder text and switching to Preview tab')
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-    });
-
-    describe('Additional Settings: Height and Width', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1)
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyHeightAndWidthLabelInputFieldWithCSSAnda11y()
-
-        //Height and width test cases for set correct answer section  response dropdowns
-        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response dropdown should be (200x34)px in \'Set correct answer\' section response dropdown', () => {
-            fillInTheGapsDropdownPage.heightInputField()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.widthInputField()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .should('have.attr', 'height', '34px')
-                .and('have.attr', 'width', '200px');
-        });
-
-        it('When the user adds \'Height\' for the response dropdown then the height of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.heightInputField()
-                .type('100')
-                .should('have.value', '100');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .should('have.attr', 'height', '100px');
-        });
-
-        it('When the user adds \'Width\' for the response dropdown then the Width of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.heightInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.widthInputField()
-                .type('100')
-                .should('have.value', '100');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .should('have.attr', 'width', '100px');
-        });
-
-        it('When the user enters a value below 80px in the \'Width\' input field then the width of the input field should remain 80px in set correct answer section', () => {
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .type('50')
-                .should('have.value', '50');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .should('have.attr', 'width', '80px');
-        });
-
-        it('When the user enters a value above 400px in the \'Width\' input field then the width of the input field should remain 400px in set correct answer section', () => {
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .type('500')
-                .should('have.value', '500');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .should('have.attr', 'width', '400px');
-        });
-
-        //Height and width test cases for preview tab response dropdowns
-        //TODO: We will need to revisit below case as it will fail for mobile view
-        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response dropdown should be (200x34)px for the preview tab', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .should('have.attr', 'height', '34px')
-                .and('have.attr', 'width', '200px');
-        });
-
-        it('When the user adds \'Height\' for the response dropdown then the height of the response dropdown should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.heightInputField()
-                .type('100')
-                .should('have.value', '100');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .should('have.attr', 'height', '100px');
-        });
-
-        it('When the user adds \'Width\' for the response dropdown then the response dropdowns should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.widthInputField()
-                .type('100')
-                .should('have.value', '100');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .should('have.attr', 'width', '100px');
-        });
-
-        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab  response dropdowns', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .type('50')
-                .should('have.value', '50');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .should('have.attr', 'width', '80px');
-        });
-
-        it('When the user enters a value above 400px in the \'Width\' input field then the input field should remain 400px for preview tab repsonse field', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .type('500')
-                .should('have.value', '500');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .should('have.attr', 'width', '400px');
-        });
-    });
-
-    describe('Additional Settings : Response accordion', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y();
-    });
-
-    describe('Response Accordions: ARIA label', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-            fillInTheGapsDropdownPage.steps.expandResponseAccordion(0);
-            fillInTheGapsDropdownPage.steps.expandResponseAccordion(1);
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyDefaultStateOfAriaLabelInputFieldInResponseAccordionAndCSS();
-
-        //Note: a11y covered in Additional Settings: Response accordion
-
-        //ARIA label test cases for set correct answer section
-        it('When the user has not set \'ARIA label\' input field then the default \'ARIA label\' should be present for the \'Set correct answer\' section response dropdown', () => {
-            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
-                });
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('ARIA label');
-
-        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response dropdown in \'Set correct answer\' section and for the other response dropdown, value of the aria-label should remain the same', () => {
-            fillInTheGapsDropdownPage.steps.setAriaLabelInResponseAccordion(0, 'Custom ARIA label');
-            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                .eq(0)
-                .should('have.attr', 'aria-label', `Custom ARIA label`);
-            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                .eq(1)
-                .should('have.attr', 'aria-label', `Add answer for response 2`);
-        });
-
-        //https://redmine.zeuslearning.com/issues/529768
-        fillInTheGapsDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('ARIA label');
-
-        fillInTheGapsDropdownPage.tests.verifyCustomLabelOnResponseAccordionCSS();
-
-        it('Accessibility of dropdown in set correct answer section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection())
-            cy.checkAccessibility(fillInTheGapsDropdownPage.responseAccordionCustomLabel())
-        });
-
-        it('When the user clears the set value in the ARIA label input field, then the default ARIA label should be present for the response dropdown in the \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.ariaLabelInputField()
-                        .clear()
-                        .should('have.value', '');
-                });
-            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
-                });
-        });
-
-        //ARIA label test cases for preview tab
-        it('When the user has not set \'ARIA label\' input field then in the preview tab default \'ARIA label\' should be present for the response dropdown in the preview tab', () => {
-            cy.log('Pre step: Switch to Preview tab')
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdown()
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
-                });
-        });
-
-        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response dropdown in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria label');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdown()
-                .eq(0)
-                .should('have.attr', 'aria-label', 'Custom Aria label');
-            fillInTheGapsDropdownPage.previewTabResponseDropdown()
-                .eq(1)
-                .should('have.attr', 'aria-label', `Add answer for response 2`);
-        });
-
-        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection());
-        });
-
-        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response dropdown in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.ariaLabelInputField()
-                        .clear()
-                        .should('have.value', '');
-                });
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdown()
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
-                });
-        });
-    });
-
-    describe('Response Accordions: Placeholder text', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-            fillInTheGapsDropdownPage.steps.expandResponseAccordion(0)
-            fillInTheGapsDropdownPage.steps.expandResponseAccordion(1)
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyDefaultStateOfPlaceholderTextInputFieldInResponseAccordionAndCSS();
-
-        //Note: a11y covered in Additional Settings: Response accordion
-
-        //Placeholder test cases for Set correct answer section
-        it('When the user has not set Placeholder text in the Response accordion then placeholder should not be displayed in set correct answer section', () => {
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                                .should('not.exist');
-                        });
-                });
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Placeholder text');
-
-        it('When the user has set a Placeholder text in either response accordion then a placeholder text should be displayed for the respective response in set correct answer section', () => {
-            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyInnerText('Lorem Ipsum')
-                        .should('be.visible');
-                });
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Placeholder text');
-
-        it('When the user removes the Placeholder text from the individual responses the Placeholders should get updated accordingly in Set correct answer section', () => {
-            fillInTheGapsDropdownPage.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.placeholderTextInputField()
-                        .clear()
-                        .should('have.value', '');
-                });
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        it('When the user has set placeholder text in the individual response areas, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .type('Global placeholder')
-                .should('have.value', 'Global placeholder');
-            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyInnerText('Lorem Ipsum')
-                        .should('be.visible');
-                });
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(1)
-                .verifyInnerText('Global placeholder\n​\n​')
-                .should('be.visible');
-        });
-
-        it('Accessibility of \'Placeholder text\' in set correct answer section', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection());
-        });
-
-        it('When the user selects an option from the response dropdown, then the placeholder text should disappear from the response dropdown from the set correct answer section', () => {
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        //TODO: need to add or update above case for query: https://redmine.zeuslearning.com/issues/529774
-
-        //Placeholder test cases for preview tab
-        it('When the user has not set Placeholder text in the Response accordion then placeholder should not be displayed in preview tab response dropdowns', () => {
-            cy.log('Pre step: Clearing the set Placeholder text')
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.placeholderTextInputField()
-                        .clear()
-                        .should('have.value', '');
-                });
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                                .should('not.exist');
-                        });
-                });
-        });
-
-        it('When the user has set a Placeholder text in either individual response accordion a placeholder text should be displayed for the respective response in preview tab', () => {
-            fillInTheGapsDropdownPage.steps.switchToEditTab()
-            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyInnerText('Lorem Ipsum')
-                        .should('be.visible');
-                });
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(1)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        it('When the user removes the Placeholder text from individual responses the Placeholders should get updated accordingly for both the responses in preview tab', () => {
-            fillInTheGapsDropdownPage.steps.switchToEditTab()
-            fillInTheGapsDropdownPage.responseAccordionWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.placeholderTextInputField()
-                        .clear()
-                        .should('have.value', '');
-                });
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        it('When the user has set placeholder text in the individual response area, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in the preview tab response dropdowns', () => {
-            fillInTheGapsDropdownPage.steps.switchToEditTab()
-            fillInTheGapsDropdownPage.placeholderTextInputField()
-                .type('Global placeholder')
-                .should('have.value', 'Global placeholder');
-            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyInnerText('Lorem Ipsum')
-                        .should('be.visible');
-                });
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(1)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .verifyInnerText('Global placeholder');
-                });
-        });
-
-        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper());
-        });
-
-        it('When the user selects an option from the response dropdown, then the placeholder text should disappear', () => {
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'new')
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .within(() => {
-                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
-                        .should('not.exist');
-                });
-        });
-
-        //TODO: need to add or update above case for query: https://redmine.zeuslearning.com/issues/529774
-    });
-
-    describe('Response Accordions: Height and Width', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-            fillInTheGapsDropdownPage.steps.expandResponseAccordion(0);
-            fillInTheGapsDropdownPage.steps.expandResponseAccordion(1);
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyDefaultStateOfHeightAndWidthInputFieldInResponseAccordionAndCSS();
-
-        //Note: a11y covered in Additional Settings: Response accordion
-
-        //Height and width test cases for Set correct answer section
-        //TODO: We will need to revisit below case as it will fail for mobile view
-        it('When the user has not set \'Height\' and \'Width\' for response dropdowns then the default dimension of the response dropdown in \'Set correct answer\' section response dropdowns should be (200x34)px', () => {
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .should('have.attr', 'height', '34px')
-                .and('have.attr', 'width', '200px');
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
-
-        it('When the user has set \'Height\' for the response dropdown then the height of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '100');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .should('have.attr', 'height', '100px');
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
-
-        it('When the user has set \'Width\' for the response dropdown then the Width of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '100');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .should('have.attr', 'width', '100px');
-        });
-
-        it('When the user enters a value below 80px in the \'Width\' input field then the width of the input field should remain 80px in set correct answer section', () => {
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '60');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .should('have.attr', 'width', '80px');
-        });
-
-        it('When the user enters a value above 400px in the \'Width\' input field then the width of the input field should remain 400px in set correct answer section', () => {
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '600');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .should('have.attr', 'width', '400px');
-        });
-
-        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .type('250')
-                .should('have.value', '250');
-            fillInTheGapsDropdownPage.heightInputField()
-                .clear()
-                .type('180')
-                .should('have.value', '180');
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '175');
-            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '120');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(0)
-                .should('have.attr', 'width', '175px')
-                .and('have.attr', 'height', '120px');
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .eq(1)
-                .should('have.attr', 'width', '250px')
-                .and('have.attr', 'height', '180px')
-        });
-
-        //Height and width test cases for preview tab
-        //TODO: We will need to revisit below case as it will fail for mobile view
-        it('When the user has not set \'Height\' and \'Width\' for the response accordion then the default dimension of the response dropdown in the preview tab response dropdown should be (200x34)px', () => {
-            cy.log('Pre step: clearing the set values of height and width to bring back the dimensions of the response dropdown to default dimensions')
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.heightInputField()
-                .clear()
-                .should('have.value', '');
-            fillInTheGapsDropdownPage.responseAccordionWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsDropdownPage.heightInputField()
-                                .clear()
-                                .should('have.value', '');
-                            fillInTheGapsDropdownPage.widthInputField()
-                                .clear()
-                                .should('have.value', '');
-                        });
-                })
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .should('have.attr', 'height', '34px')
-                        .and('have.attr', 'width', '200px');
-                });
-        });
-
-        it('When the user has set \'Height\' for the response field then the height of the preview tab response dropdown should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '100');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .should('have.attr', 'height', '100px');
-        });
-
-        it('When the user has set \'Width\' for the response dropdown then the width of the preview tab response dropdown should get updated accordingly in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '100');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .should('have.attr', 'width', '100px');
-        });
-
-        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the preview tab', () => {
-            cy.log('Pre step: Switch to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.widthInputField()
-                .clear()
-                .type('250')
-                .should('have.value', '250');
-            fillInTheGapsDropdownPage.heightInputField()
-                .clear()
-                .type('180')
-                .should('have.value', '180');
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '175');
-            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '120');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .should('have.attr', 'width', '175px')
-                .and('have.attr', 'height', '120px');
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(1)
-                .should('have.attr', 'width', '250px')
-                .and('have.attr', 'height', '180px')
-        });
-
-        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab  response dropdowns', () => {
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '50');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .should('have.attr', 'width', '80px');
-        });
-
-        it('When the user enters a value above 400px in the \'Width\' input field then the input field should remain 400px for preview tab repsonse field', () => {
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '500');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                .eq(0)
-                .should('have.attr', 'width', '400px');
-        });
-    });
-});