itemengine-cypress-automation 1.0.143-migrationScripts-d059d60.0 → 1.0.144-21MatchRepoUpdate-0ab2c79.0

package/cypress/e2e/ILC/FillInTheGapsTextNew/additionalSettingsBasic.js

@@ -0,0 +1,93 @@
+import { fillInTheGapsTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+
+describe('Fill In the gaps with text - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${fontSizes[option]} accordingly`, () => {
+                fillInTheGapsTextPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(fillInTheGapsTextPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(fillInTheGapsTextPage.questionInstructionsText(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsTextPage.steps.switchToGradingView();
+                utilities.verifyCSS(fillInTheGapsTextPage.correctAnswersLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsTextPage.correctAnswerResponseNumeration().find('.response-input-adornment'), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsTextPage.correctAnswerResponse(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsTextPage.correctIncorrectStatusMessageText(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsTextPage.steps.switchToStudentView();
+                fillInTheGapsTextPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditionalSettingsAccessibilitySection();
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyDetailsSection();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsTextNew/additionalSettingsForAnswerInputFields.js

@@ -0,0 +1,215 @@
+import { fillInTheGapsTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const enumerationOptions = {
+    'Numerical': ['1', '2'],
+    'Alphabet (uppercase)': ['A', 'B'],
+    'Alphabet (lowercase)': ['a', 'b'],
+    'Roman numeral (uppercase)': ['I', 'II'],
+    'Roman numeral (lowercase)': ['i', 'ii'],
+};
+const css = Cypress.env('css');
+
+describe('Fill In the gaps with text - Additional settings : Placeholder text, Grading view, ARIA label for text containers', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Placeholder text - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyPlaceholderTextSectionContents('text containers');
+
+        it('When the user checks the "Customize placeholder text for individual text containers" checkbox, "Placeholder text for text containers" label and two input fields for individual text containers should be displayed', () => {
+            fillInTheGapsTextPage.steps.checkCustomizePlaceholderTextCheckbox();
+            utilities.verifyElementCount(fillInTheGapsTextPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsTextPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsTextPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+
+        it('When the users adds a new text container, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsTextPage.steps.addResponseArea();
+            utilities.verifyElementCount(fillInTheGapsTextPage.individualPlaceholderTextInputField(), 3);
+            fillInTheGapsTextPage.steps.verifyIndividualPlaceholderTextInputFields(2);
+        });
+
+        it('When the user deletes any text container, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsTextPage.steps.deleteAResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsTextPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsTextPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsTextPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+    });
+
+    describe('Additional Settings: Placeholder text - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsTextPage.tests.verifyPlaceholderTextPreviewTabFunctionality();
+
+        fillInTheGapsTextPage.tests.verifyIndividualPlaceholderTextPreviewTabFunctionality();
+    });
+
+    describe('Additional Settings: Grading view - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyGradingViewEnumerationSectionContents('Text container');
+
+        it('When the user selects "Without enumeration" radio button, the identifiers section should disappear', () => {
+            fillInTheGapsTextPage.steps.selectEnumerationType('without enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.identifiersLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.numericalToggleButton(), 'notExist');
+        });
+
+        it('When the user selects "With enumeration" radio button again, the identifiers section should appear again', () => {
+            fillInTheGapsTextPage.steps.selectEnumerationType('with enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.identifiersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.numericalToggleButton(), 'visible');
+        })
+    });
+
+    describe('Additional settings: Grading view - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" toggle button is selected in the text container identifiers section, then on switching to the preview tab text container numeration should not be displayed`, () => {
+                fillInTheGapsTextPage.steps.selectIdentifierToggleButton(option);
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                fillInTheGapsTextPage.steps.verifyResponseAreaNumerationNotExists();
+            });
+
+            it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the text containers', () => {
+                fillInTheGapsTextPage.steps.checkAnswer();
+                fillInTheGapsTextPage.steps.verifyResponseAreaNumerationNotExists();
+            });
+
+            it(`When the user switches to the "Grading view", then the "${option}" numeration should be displayed in the answer input fields as well as correct answer options in the correct answer section`, () => {
+                fillInTheGapsTextPage.steps.switchToGradingView();
+                fillInTheGapsTextPage.steps.verifyAnswerInputFieldEnumeration(enumerationOptions[option]);
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesEnumeration(enumerationOptions[option]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsTextPage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects "without enumeration" radio button, then in the "Grading view", numeration should not be displayed for answer input fields and in the correct answer section, the entire question preview should be displayed with correct answers', () => {
+            fillInTheGapsTextPage.steps.selectEnumerationType('without enumeration');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.switchToGradingView();
+            utilities.verifyInnerText(fillInTheGapsTextPage.correctAnswerSectionWithoutEnumerationWrapper(), 'Lorem ipsum dolor sit amet, \n​\nonsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n​\ntempus tellus dapibus.');
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesWithoutEnumeration(['Flower', 'Leaf']);
+            fillInTheGapsTextPage.steps.verifyResponseAreaNumerationNotExists();
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.correctAnswerResponseNumeration(), 'notExist');
+        });
+
+        it('CSS of correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsTextPage.correctAnswerSectionWithoutEnumerationWrapper().find('.preview-question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsTextPage.correctAnswerSectionWithoutEnumerationWrapper()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsTextPage.correctAnswerResponseWrapperWithoutEnumeration(), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(fillInTheGapsTextPage.correctAnswerResponseWrapperWithoutEnumeration().parents('.response-input-field'), {
+                        'border': `1px solid ${css.color.correctAnswer}`
+                    });
+                })
+        });
+
+        it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.correctAnswerSectionWithoutEnumerationWrapper().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Additional settings: ARIA label for text containers - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAriaLabelSectionContents('text containers');
+
+        it('When the users adds a new text container, the count of the aria label text input fields should update accordingly', () => {
+            fillInTheGapsTextPage.steps.addResponseArea();
+            utilities.verifyElementCount(fillInTheGapsTextPage.ariaLabelInputField(), 3);
+            fillInTheGapsTextPage.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any text container, the count of the aria label texts input fields should update accordingly', () => {
+            fillInTheGapsTextPage.steps.deleteAResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsTextPage.ariaLabelInputField(), 2);
+            fillInTheGapsTextPage.steps.verifyAriaLabelTextInputFields(0);
+            fillInTheGapsTextPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it('When the user sets aria label, then in the answer input fields of the specify correct answer section, the aria labels should not change', () => {
+            fillInTheGapsTextPage.steps.enterTextInAriaLabelInputField(0, 'Add answer for response 1');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelSpecifyCorrectAnswerSection(0, 'Add answer');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelSpecifyCorrectAnswerSection(1, 'Add answer');
+        });
+    });
+
+    describe('Additional settings: ARIA label for text containers - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the answer input fields in the preview tab', () => {
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+
+        it('When the user has set \'ARIA label\', then it should be present for the answer input fields in the preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(0, 'Correct response 1');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.answerInputFieldPreviewTab().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default aria labels should be present for the answer input fields in the preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.clearTextInAriaLabelInputField(0);
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsTextNew/editTabBasicSection.js

@@ -79,7 +79,7 @@ describe('Create item page - Fill in the gaps with text: Question instructions,
             utilities.verifyElementCount(fillInTheGapsTextPage.answerInputFieldSpecifyCorrectAnswerSection(), 3);
             utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsTextPage.responseAccordionLabel(), 2), 'Response 3');
             fillInTheGapsTextPage.steps.expandAdditonalSettings();
-            utilities.verifyElementCount(fillInTheGapsTextPage.enterAriaLabelInputField(), 3);
+            utilities.verifyElementCount(fillInTheGapsTextPage.ariaLabelInputField(), 3);
         });
 
         it('When the user clicks on the \'close\' button present on a response area, the response area in the question input field should get removed and the count of the response areas present in the question input field should get updated accordingly, response field along with \'Response #\' label in the \'specify correct answer\' section, \'Response #\' accordion in the additional settings accordion and the respective response field in the \'Preview tab\' should also get removed', () => {

package/cypress/e2e/ILC/FillInTheGapsTextNew/textContainerSettings.js

@@ -0,0 +1,219 @@
+import { dialogBoxBase, fillInTheGapsTextPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps with text: Text container settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Text container settings - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user clicks on a Text container settings button, then Text container settings popup should be displayed with the title \'Text container settings\'', () => {
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxTitle(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Text container settings');
+        });
+
+        it('\'Width (px)\', \'Height (px)\' labels and input fields with default values should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsTextPage.responseAreaSettingsWidthLabel(), 'Width (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.responseAreaSettingsWidthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.responseAreaSettingsWidthInputField(), 'visible');
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(120);
+            utilities.verifyInnerText(fillInTheGapsTextPage.responseAreaSettingsHeightLabel(), 'Height (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.responseAreaSettingsHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.responseAreaSettingsHeightInputField(), 'visible');
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(32);
+        });
+
+        it('The minimum allowed value for \'Width (px)\' and \'Height (px)\' input fields should be \'80\' and \'32\' respectively', () => {
+            fillInTheGapsTextPage.steps.verifyMinimumValueOfWidthAndHeightInputFields();
+        });
+
+        it('When user gives an input lower than \'80\' in \'Width (px)\' input field, then the input field value should be automatically set to 80', () => {
+            fillInTheGapsTextPage.steps.addInputToWidthInputField(50);
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(80);
+        });
+
+        it('When user gives an input lower than \'32\' in \'Height (px)\' input field, then the input field value should be automatically set to 32', () => {
+            fillInTheGapsTextPage.steps.addInputToHeightInputField(30);
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(32);
+        });
+
+        it('\'Set for all text containers\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyInnerText(fillInTheGapsTextPage.setForAllTextContainersLabel(), 'Set for all text containers');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.setForAllTextContainersLabel(), 'visible');
+            fillInTheGapsTextPage.steps.verifySetForAllTextContainersCheckboxChecked();
+        });
+
+        it('\'OK\' and \'Cancel\' button should be displayed in the popup', () => {
+            utilities.verifyInnerText(fillInTheGapsTextPage.responseAreaSettingsCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.responseAreaSettingsCancelButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsTextPage.responseAreaSettingsOkButton(), 'OK');
+            utilities.verifyElementVisibilityState(fillInTheGapsTextPage.responseAreaSettingsOkButton(), 'visible');
+        });
+
+        it('When user updates any value and clicks on \'Cancel\' button, then the Text container settings popup should close and the updated values should not be saved', () => {
+            fillInTheGapsTextPage.steps.addInputToWidthInputField(150);
+            fillInTheGapsTextPage.steps.addInputToHeightInputField(120);
+            fillInTheGapsTextPage.steps.uncheckSetForAllTextContainersCheckbox();
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            cy.log('Reopening Text container settings popup and verifying changes not retained');
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(120);
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(32);
+            fillInTheGapsTextPage.steps.verifySetForAllTextContainersCheckboxChecked();
+        });
+
+        it('When user updates any value and clicks on \'OK\' button, then the Text container settings popup should close and the updated values should be saved', () => {
+            fillInTheGapsTextPage.steps.addInputToWidthInputField(150);
+            fillInTheGapsTextPage.steps.addInputToHeightInputField(120);
+            fillInTheGapsTextPage.steps.uncheckSetForAllTextContainersCheckbox();
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            cy.log('Reopening Text container settings popup and verifying changes are retained');
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(150);
+            fillInTheGapsTextPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(120);
+            fillInTheGapsTextPage.steps.verifySetForAllTextContainersCheckboxUnchecked();
+        });
+
+        it('CSS of text container settings popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseAreaSettingsWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseAreaSettingsHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseAreaSettingsWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseAreaSettingsHeightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.setForAllTextContainersLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseAreaSettingsCancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseAreaSettingsOkButton(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of text container settings popup', { tags: 'css' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+    });
+
+    describe('Text container settings - Width and Height input field functionality in Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+        });
+
+        it('When \'Set for all text containers\' checkbox is checked, user updates the width input field value and clicks on OK, then width of all response areas in question input field should be updated', () => {
+            fillInTheGapsTextPage.steps.addInputToWidthInputField(120);
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsTextPage.steps.verifyResponseAreaWidth(0, '120px');
+            fillInTheGapsTextPage.steps.verifyResponseAreaWidth(1, '120px');
+        });
+
+        it('When \'Set for all text containers\' checkbox is unchecked, user updates the width input field value and clicks on OK, then width of that particular response area in question input field should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all text containers\' checkbox')
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsTextPage.steps.uncheckSetForAllTextContainersCheckbox();
+            fillInTheGapsTextPage.steps.addInputToWidthInputField(180);
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsTextPage.steps.verifyResponseAreaWidth(0, '180px');
+            fillInTheGapsTextPage.steps.verifyResponseAreaWidth(1, '120px');
+        });
+
+        it('When \'Set for all text containers\' checkbox is checked, user updates the height input field value and clicks on OK, then height of all response areas in question input field should be updated', () => {
+            cy.log('Pre-step: Check \'Set for all text containers\' checkbox')
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsTextPage.steps.checkSetForAllTextContainersCheckbox();
+            fillInTheGapsTextPage.steps.addInputToHeightInputField(100);
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsTextPage.steps.verifyResponseAreaHeight(0, '100px');
+            fillInTheGapsTextPage.steps.verifyResponseAreaHeight(1, '100px');
+        });
+
+        it('When \'Set for all text containers\' checkbox is unchecked, user updates the height input field value and clicks on OK, then height of that particular response area in question input field should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all text containers\' checkbox')
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsTextPage.steps.uncheckSetForAllTextContainersCheckbox();
+            fillInTheGapsTextPage.steps.addInputToHeightInputField(125);
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsTextPage.steps.verifyResponseAreaHeight(0, '125px');
+            fillInTheGapsTextPage.steps.verifyResponseAreaHeight(1, '100px');
+        });
+    });
+
+    describe('Text container settings - Width and Height input field functionality in Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+        });
+
+        it('When \'Set for all text containers\' checkbox is checked, user updates the width and height input field value and clicks on OK, then dimensions of all answer input fields in preview tab should be updated', () => {
+            fillInTheGapsTextPage.steps.addInputToWidthInputField(120);
+            fillInTheGapsTextPage.steps.addInputToHeightInputField(150);
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldWidthPreviewTab(0, '120px');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldHeightPreviewTab(0, '150px');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldWidthPreviewTab(1, '120px');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldHeightPreviewTab(1, '150px');
+        });
+
+        it('When \'Set for all text containers\' checkbox is unchecked, user updates the width and height input field value and clicks on OK, then dimensions of that particular answer input field in in preview tab should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all text containers\' checkbox')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsTextPage.steps.uncheckSetForAllTextContainersCheckbox();
+            fillInTheGapsTextPage.steps.addInputToWidthInputField(180);
+            fillInTheGapsTextPage.steps.addInputToHeightInputField(130);
+            fillInTheGapsTextPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldWidthPreviewTab(0, '180px');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldHeightPreviewTab(0, '130px');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldWidthPreviewTab(1, '120px');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldHeightPreviewTab(1, '150px');
+        });
+    });
+});

package/cypress/e2e/ILC/GeoGebraTools/3DGraphingCalculatorEditTabBasicSection.js

@@ -0,0 +1,96 @@
+import { geoGebraToolsPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create Item page - GeoGebra : 3D graphing calculator', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('3D graphing calculator: Header section', () => {
+        abortEarlySetup();
+        before(() => {
+            geoGebraToolsPage.steps.navigateToCreateResource('3D graphing calculator');
+        });
+
+        geoGebraToolsPage.tests.verifyCreateQuestionPageQuestionTypeHeader('GeoGebra 3D graphing calculator');
+    });
+
+    describe('3D graphing calculator: Edit tab basic section content', () => {
+        abortEarlySetup();
+        before(() => {
+            geoGebraToolsPage.steps.navigateToCreateResource('3D graphing calculator');
+        });
+
+        geoGebraToolsPage.tests.verifyEditTabContents('3D graphing calculator');
+    });
+
+    describe('3D graphing calculator: Edit tab basic section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            geoGebraToolsPage.steps.navigateToCreateResource('3D graphing calculator');
+            geoGebraToolsPage.steps.switchToPreviewTab();
+        });
+
+        it('When user switches to preview tab, the \'3D graphing calculator\' should be displayed with \'Width (px)\' and \'Height (px)\' as 600px by 450 px respectively and the \'Show GeoGebra\' button should not be displayed', () => {
+            geoGebraToolsPage.steps.verifyGeoGebraToolIsVisible();
+            utilities.verifyElementVisibilityState(geoGebraToolsPage.geoGebraKeyBoardPreviewTab(), 'exist');
+            geoGebraToolsPage.steps.verifyWidthAndHeightOfGeoGebraTool(600, 450);
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolVisibilityButtonDoesNotExist();
+            geoGebraToolsPage.steps.verifyGeoGebraToolIsVisible();
+            utilities.verifyElementVisibilityState(geoGebraToolsPage.geoGebraKeyBoardPreviewTab(), 'visible');
+            utilities.verifyElementVisibilityState(geoGebraToolsPage.geoGebraToolCloseButtonPreviewTab(), 'notExist');
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolDragHandleIsVisible();
+        });
+
+        it('When the user updates the \'Width (px)\' and \'Height (px)\' in the input field the dimensions of the calculator should change accordingly', () => {
+            geoGebraToolsPage.steps.switchToEditTab();
+            geoGebraToolsPage.steps.enterInputInWidthInputField('450');
+            geoGebraToolsPage.steps.enterInputInHeightInputField('325');
+            geoGebraToolsPage.steps.switchToPreviewTab();
+            geoGebraToolsPage.steps.verifyWidthAndHeightOfGeoGebraTool(450, 325);
+        });
+
+        it('When the user checks the \'Add show/hide button\' checkbox, then \'Show GeoGebra 3D graphing calculator\' button should be displayed and the 3D graphing calculator should not be displayed', () => {
+            geoGebraToolsPage.steps.switchToEditTab();
+            geoGebraToolsPage.steps.checkAddShowHideButtonCheckbox();
+            geoGebraToolsPage.steps.switchToPreviewTab();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolVisibilityButtonLabel('Show', '3D graphing calculator');
+            geoGebraToolsPage.steps.verifyGeoGebraToolNotVisible();
+        });
+
+        it('When the user selects \'Show GeoGebra 3D graphing calculator\' button then the 3D graphing calculator should be displayed and the button should change to \'Hide GeoGebra 3D graphing calculator\'', () => {
+            geoGebraToolsPage.steps.clickOnGeoGebraToolVisibilityButton();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolVisibilityButtonLabel('Hide', '3D graphing calculator');
+            geoGebraToolsPage.steps.verifyGeoGebraToolIsVisible();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolKeypadIsVisible();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolCloseButtonIsVisible();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolDragHandleIsVisible();
+        });
+
+        it('When the user closes the 3D graphing calculator using the \'Close\' button the 3D graphing calculator should close and the \'Show GeoGebra 3D graphing calculator\' button should be displayed', () => {
+            geoGebraToolsPage.steps.closeGeoGebraTool();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolVisibilityButtonLabel('Show', '3D graphing calculator');
+            geoGebraToolsPage.steps.verifyGeoGebraToolNotVisible();
+        });
+
+        it('When the user checks \'Launch the GeoGebra 3D graphing calculator by default\' then on switching to preview tab the 3D graphing calculator should be displayed along with \'Hide GeoGebra 3D graphing calculator\' button', () => {
+            geoGebraToolsPage.steps.switchToEditTab();
+            geoGebraToolsPage.steps.checkLaunchToolByDefaultCheckbox();
+            geoGebraToolsPage.steps.switchToPreviewTab();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolVisibilityButtonLabel('Hide', '3D graphing calculator');
+            geoGebraToolsPage.steps.verifyGeoGebraToolIsVisible();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolKeypadIsVisible();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolCloseButtonIsVisible();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolDragHandleIsVisible();
+        });
+
+        geoGebraToolsPage.tests.verifyPreviewTabContentsCSSAndA11y();
+
+        it('When the user selects \'Hide GeoGebra 3D graphing calculator\' button then the 3D graphing calculator should not be displayed and the button should change to \'Show GeoGebra 3D graphing calculator\'', () => {
+            geoGebraToolsPage.steps.clickOnGeoGebraToolVisibilityButton();
+            geoGebraToolsPage.steps.verifyPreviewTabGeoGebraToolVisibilityButtonLabel('Show', '3D graphing calculator');
+            geoGebraToolsPage.steps.verifyGeoGebraToolNotVisible();
+        });
+    });
+});