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

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -4,6 +4,7 @@ import { autoScoredSpecifyCorrectAnswerSection } from "./autoScoredSpecifyCorrec
 import { commonComponents } from "./commonComponents";
 import { optionsWrapperComponent } from "./optionsWrapperComponent";
 import { createQuestionBasePage } from "./createQuestionBasePage";
+import { placeholderTextSectionComponent } from "./placeholderTextSectionComponent";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -43,10 +44,12 @@ const selectors = {
     //Preview tab
     dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-dropdown-wrapper'),
     dropdownPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-haspopup="listbox"]'),
+    dropdownPlaceholderText: () => cy.get('.cloze-with-dropdown-placeholder'),
+    dropdownTextLabel: () => cy.get('.dropdown-label-text'),
     dropdownNumerationPreviewTab: () => cy.get('.answer-numeration-number-box'),
-    correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answers-label"]'),
     correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
     tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
+    correctAnswerResponseWrapperWithoutEnumeration: () => cy.get('[class*="response-dropdown"] input'),
 
     //additional settings
     enterAriaLabelInputField: () => cy.get('input[aria-label*="Enter ARIA label"]')
@@ -136,7 +139,7 @@ const steps = {
     */
     expandDropdownInSpecifyCorrectAnswerSection: (dropdownIndex) => {
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), dropdownIndex)
-            .click({ position: "right" });
+            .click({ position: 'right' }, { force: true });
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), dropdownIndex)
             .should('have.attr', 'aria-expanded', 'true');
     },
@@ -161,7 +164,7 @@ const steps = {
      */
     expandDropdownInPreviewTab: (dropdownIndex) => {
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), dropdownIndex)
-            .click();
+            .click({ force: true });
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), dropdownIndex)
             .should('have.attr', 'aria-expanded', 'true');
     },
@@ -587,6 +590,82 @@ const steps = {
             .should('have.value', points)
             .blur();
     },
+
+    /**
+     * Verifies the placeholder text of a dropdown in the preview tab.
+     * @param {number} dropdownIndex - The index of the dropdown to verify.
+     * @param {string} placeholderText - The expected placeholder text.
+     * @returns {void}
+     */
+    verifyDropdownPlaceholderTextPreviewTab: (dropdownIndex, placeholderText) => {
+        fillInTheGapsDropdownCommonComponent.dropdownWrapperPreviewTab()
+            .eq(dropdownIndex)
+            .within(() => {
+                utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.dropdownPlaceholderText(), placeholderText);
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownPlaceholderText(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies that the placeholder text does not exist for a dropdown in the preview tab.
+     * @param {number} dropdownIndex - The index of the dropdown to verify.
+     * @returns {void}
+     */
+    verifyDropdownPlaceholderTextNotExistsPreviewTab: (dropdownIndex) => {
+        fillInTheGapsDropdownCommonComponent.dropdownWrapperPreviewTab()
+            .eq(dropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownPlaceholderText(), 'notExist');
+            });
+    },
+
+    verifyDropdownNumerationNotExistsPreviewTab: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownNumerationPreviewTab(), 'notExist');
+    },
+
+    /**
+     * Verifies the placeholder text of a dropdown in the preview tab.
+     * @param {number} dropdownIndex - The index of the dropdown to verify.
+     * @param {string} placeholderText - The expected placeholder text.
+     * @returns {void}
+     */
+    verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection: (dropdownIndex, placeholderText) => {
+        fillInTheGapsDropdownCommonComponent.dropdownWrapperSpecifyCorrectAnswerSection()
+            .eq(dropdownIndex)
+            .within(() => {
+                utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.dropdownPlaceholderText(), placeholderText);
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownPlaceholderText(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies that the placeholder text does not exist for a dropdown in the preview tab.
+     * @param {number} dropdownIndex - The index of the dropdown to verify.
+     * @returns {void}
+     */
+    verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection: (dropdownIndex) => {
+        fillInTheGapsDropdownCommonComponent.dropdownWrapperSpecifyCorrectAnswerSection()
+            .eq(dropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownPlaceholderText(), 'notExist');
+            });
+    },
+
+    verifyDropdownNumerationNotExistsSpecifyCorrectAnswerSection: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownNumerationSpecifyCorrectAnswerSection(), 'notExist');
+    },
+
+    verifyDropdownAriaLabelPreviewTab: (inputFieldIndex, ariaLabel) => {
+        fillInTheGapsDropdownCommonComponent.dropdownPreviewTab()
+            .eq(inputFieldIndex)
+            .should('have.attr', 'aria-label', ariaLabel)
+    },
+
+    verifyDropdownAriaLabelSpecifyCorrectAnswerSection: (inputFieldIndex, ariaLabel) => {
+        fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection()
+            .eq(inputFieldIndex)
+            .should('have.attr', 'aria-label', ariaLabel)
+    }
 }
 
 const tests = {
@@ -737,6 +816,91 @@ const tests = {
         it('Accessibility of Dropdown and Dropdown menu section', { tags: 'a11y' }, () => {
             cy.checkAccessibility(fillInTheGapsDropdownCommonComponent.dropdownLabel().parents('.student-view-settings-container'));
         });
+    },
+
+    verifyPlaceholderTextPreviewTabFunctionality: () => {
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab dropdown', () => {
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab dropdown', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.addInputToPlaceholderTextInputField('Add answer');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(0, 'Add answer');
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(1, 'Add answer');
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('When the user selects an option in the dropdown, then the placeholder text should disappear and on switching from edit tab to preview tab, the placeholder text should re-appear for the dropdown', () => {
+            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: 'Flower' }]);
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(1, 'Add answer');
+            createQuestionBasePage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(0, 'Add answer');
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(1, 'Add answer');
+        });
+
+        it('When the user removes the placeholder text input field, then placeholder text should get updated accordingly for both the preview tab dropdowns', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.clearPlaceholderTextInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(1);
+        });
+    },
+
+    verifyIndividualPlaceholderTextPreviewTabFunctionality: () => {
+        it('When "Customize placeholder text for individual text containers" checkbox is checked and \'Placeholder text\' input fields for individual text containers are kept empty, then no \'Placeholder text\' should be displayed in the preview tab dropdown', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.checkCustomizePlaceholderTextCheckbox();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user has set a placeholder text in either individual placeholder text input field, then placeholder text should be displayed for the respective dropdown in preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response a');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(0, 'Response a');
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user removes the placeholder text from individual placeholder text input field, then placeholder text should get updated accordingly for both the dropdown in preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.clearIndividualPlaceholderTextInputField(0);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user has set placeholder text in individual placeholder text input field, then it should override the placeholder text set in the global placeholder text input field', () => {
+            cy.log('Pre step: Adding global placeholder text and individual placeholder text')
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.addInputToPlaceholderTextInputField('Global placeholder');
+            placeholderTextSectionComponent.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response 1');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(0, 'Response 1');
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(1, 'Global placeholder');
+        });
+
+        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('When the user selects an option from the dropdown, then the placeholder text should disappear and on switching from edit tab to preview tab, the placeholder text should re-appear in the preview tab', () => {
+            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: 'Flower' }]);
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextNotExistsPreviewTab(0);
+            createQuestionBasePage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownCommonComponent.steps.verifyDropdownPlaceholderTextPreviewTab(1, 'Global placeholder');
+        });
     }
 }
 

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -4,6 +4,7 @@ import { autoScoredScoringSectionMultiResponseType } from "./autoScoredScoringSe
 import { autoScoredSpecifyCorrectAnswerSection } from "./autoScoredSpecifyCorrectAnswerSection";
 import { commonComponents } from "./commonComponents";
 import { createQuestionBasePage } from "./createQuestionBasePage";
+import { placeholderTextSectionComponent } from "./placeholderTextSectionComponent";
 import { scoringSectionBaseEditTab } from "./scoringSectionBaseEditTab";
 const css = Cypress.env('css');
 const conditionalCheckboxes = ['Case sensitive', 'Validate if answer is included in the response', 'Ignore extra spaces', 'Ignore single letter mistake'];
@@ -12,6 +13,7 @@ const conditionalCheckboxes = ['Case sensitive', 'Validate if answer is included
 const selectors = {
     answerInputFieldSpecifyCorrectAnswerSection: () => cy.get('.label-image-text-inline-text-field input'),
     answerInputFieldPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field input'),
+    answerInputFieldWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field'),
     responseAreaNumeration: () => cy.get('.response-input-adornment'),
     correctAnswerSectionWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
     correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answer-label"]'),
@@ -19,6 +21,7 @@ const selectors = {
     correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
     correctAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__AnswerCell"]'),
     correctAnswerResponse: () => cy.get('[class*="AnswerWrapperForLabel"]'),
+    correctAnswerResponseWrapperWithoutEnumeration: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper [class*="ResponseInputWrapper"] input'),
 
     setLimitLabel: () => cy.get('[class*="SetLimitWrapper"] .text-label'),
     minimumCharacterLimitLabel: () => cy.get('.label-image-min-max-container .additional-settings-label').eq(0),
@@ -47,7 +50,6 @@ const selectors = {
     responseAccordionPointsInputFieldWrapper: () => cy.get('[class*="ResponseComponentstyles__PointsWrapper"]'),
     responseAccordionAddAlternateButton: () => cy.get('.add-alternate-btn'),
     responseAccordionAddAlternateButtonLabel: () => cy.get('.add-alternate-btn p'),
-    responseAreaNumeration: () => cy.get('.response-input-adornment'),
 
     //Special characters section
     specialCharactersLabel: () => cy.get('[class*="LabelImageWithTextstyles__CustomizedSpecialCharacterWrapper"]'),
@@ -84,9 +86,6 @@ const selectors = {
     //Student view settings
     spellCheckLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"] .MuiFormControlLabel-label'),
     spellCheckCheckbox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input[type="checkbox"]'),
-
-    //additional settings
-    enterAriaLabelInputField: () => cy.get('input[aria-label*="Enter ARIA label"]')
 }
 
 const steps = {
@@ -765,6 +764,64 @@ const steps = {
             .should('have.value', points)
             .blur();
     },
+
+    verifyAnswerInputFieldPlaceholderTextPreviewTab: (answerFieldIndex, placeholderText) => {
+        fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab()
+            .eq(answerFieldIndex)
+            .should('have.attr', 'placeholder', placeholderText)
+    },
+
+    verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab: (answerFieldIndex) => {
+        fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab()
+            .eq(answerFieldIndex)
+            .should('not.have.attr', 'placeholder')
+    },
+
+    clearAnswerInputFieldPreviewTab: (answerFieldIndex) => {
+        fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab()
+            .eq(answerFieldIndex)
+            .clear()
+            .blur();
+    },
+
+    verifyAnswerInputFieldEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab()
+                .eq(index)
+                .parents('.cloze-with-text-response-field-wrapper')
+                .within(() => {
+                    utilities.verifyTextContent(fillInTheGapsTextCommonComponent.responseAreaNumeration(), `${option}`);
+                });
+        });
+    },
+
+    verifyCorrectAnswerResponsesEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsTextCommonComponent.correctAnswerResponseWrapper(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            fillInTheGapsTextCommonComponent.correctAnswerResponseWrapper()
+                .eq(index)
+                .within(() => {
+                    utilities.verifyInnerText(fillInTheGapsTextCommonComponent.correctAnswerResponseNumeration(), `${option}`);
+                });
+        });
+    },
+
+    verifyResponseAreaNumerationNotExists: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.responseAreaNumeration(), 'notExist');
+    },
+
+    verifyAnswerInputFieldAriaLabelPreviewTab: (inputFieldIndex, ariaLabel) => {
+        fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab()
+            .eq(inputFieldIndex)
+            .should('have.attr', 'aria-label', ariaLabel)
+    },
+
+    verifyAnswerInputFieldAriaLabelSpecifyCorrectAnswerSection: (inputFieldIndex, ariaLabel) => {
+        fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection()
+            .eq(inputFieldIndex)
+            .should('have.attr', 'aria-label', ariaLabel)
+    }
 }
 
 const tests = {
@@ -1057,7 +1114,7 @@ const tests = {
             fillInTheGapsTextCommonComponent.steps.focusInAndFocusOutOfResponseAnswerInputFieldPreviewTab();
             fillInTheGapsTextCommonComponent.steps.verifyLimitReachedWarningMessageNotExist();
         });
-        
+
         it('When the user updates minimum character limit in edit tab and enters character less than the minimum character limit value set and focus out of response field, then the warning message \'Minimum 6 characters are required\' should be displayed in preview tab', () => {
             createQuestionBasePage.steps.switchToEditTab();
             fillInTheGapsTextCommonComponent.steps.setMinimumLimit(6);
@@ -1479,7 +1536,93 @@ const tests = {
             fillInTheGapsTextCommonComponent.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '0' }]);
             fillInTheGapsTextCommonComponent.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '0' }]);
         });
-    }
+    },
+
+    verifyPlaceholderTextPreviewTabFunctionality: () => {
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab answer input field', () => {
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab answer input field', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.addInputToPlaceholderTextInputField('Add answer');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(0, 'Add answer');
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(1, 'Add answer');
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('When the user starts typing in the answer input field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the preview tab answer input fields', () => {
+            fillInTheGapsTextCommonComponent.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Response 1' }]);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(1, 'Add answer');
+            fillInTheGapsTextCommonComponent.steps.clearAnswerInputFieldPreviewTab(0)
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(0, 'Add answer');
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(1, 'Add answer');
+        });
+
+
+        it('When the user removes the placeholder text input field, then placeholder text should get updated accordingly for both the preview tab answer input fields', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.clearPlaceholderTextInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(1);
+        });
+    },
+
+    verifyIndividualPlaceholderTextPreviewTabFunctionality: () => {
+        it('When "Customize placeholder text for individual text containers" checkbox is checked and \'Placeholder text\' input fields for individual text containers are kept empty, then no \'Placeholder text\' should be displayed in the preview tab answer input field', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.checkCustomizePlaceholderTextCheckbox();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user has set a placeholder text in either individual placeholder text input field, then placeholder text should be displayed for the respective answer input field in preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response a');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(0, 'Response a');
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user removes the placeholder text from individual placeholder text input field, then placeholder text should get updated accordingly for both the answer input field in preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.clearIndividualPlaceholderTextInputField(0);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(1);
+        });
+
+        it('When the user has set placeholder text in individual placeholder text input field, then it should override the placeholder text set in the global placeholder text input field', () => {
+            cy.log('Pre step: Adding global placeholder text and individual placeholder text')
+            createQuestionBasePage.steps.switchToEditTab();
+            placeholderTextSectionComponent.steps.addInputToPlaceholderTextInputField('Global placeholder');
+            placeholderTextSectionComponent.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response 1');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(0, 'Response 1');
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(1, 'Global placeholder');
+        });
+
+        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab().parents('.response-input-field'))
+        });
+
+        it('When the user enters text in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear in the preview tab', () => {
+            fillInTheGapsTextCommonComponent.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Option 1' }]);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextNotExistsPreviewTab(0);
+            fillInTheGapsTextCommonComponent.steps.clearAnswerInputFieldPreviewTab(0);
+            fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholderTextPreviewTab(1, 'Global placeholder');
+        });
+    },
 }
 
 export const fillInTheGapsTextCommonComponent = {

package/cypress/pages/components/gradingViewEnumerationComponent.js

@@ -0,0 +1,151 @@
+import utilities from "../../support/helpers/utilities";
+const gradingEnumerationButtons = ['Numerical', 'Alphabet (uppercase)', 'Alphabet (lowercase)', 'Roman numeral (uppercase)', 'Roman numeral (lowercase)']
+const css = Cypress.env('css');
+
+const selectors = {
+    gradingViewLabel: () => cy.get('[class*="GradingViewLabel"]'),
+    gradingStyleLabel: () => cy.get('[class*="GradingStyleLabel"]'),
+    withEnumerationRadioButton: () => cy.get('[data-value="withEnumeration"] input'),
+    withEnumerationRadioButtonLabel: () => cy.get('[data-value="withEnumeration"] .ngie-radio-label'),
+    withoutEnumerationRadioButton: () => cy.get('[data-value="withoutEnumeration"] input'),
+    withoutEnumerationRadioButtonLabel: () => cy.get('[data-value="withoutEnumeration"] .ngie-radio-label'),
+    identifiersLabel: () => cy.get('[class*="identifiers-wrapper"] .options-label'),
+    numericalToggleButton: () => cy.get('[data-ngie-testid="numerical-toggle-button"]'),
+    alphabetUppercaseToggleButton: () => cy.get('[data-ngie-testid="alphabet-(uppercase)-toggle-button"]'),
+    alphabetLowercaseToggleButton: () => cy.get('[data-ngie-testid="alphabet-(lowercase)-toggle-button"]'),
+    romanNumeralUppercaseToggleButton: () => cy.get('[data-ngie-testid="roman-numeral-(uppercase)-toggle-button"]'),
+    romanNumeralLowercaseToggleButton: () => cy.get('[data-ngie-testid="roman-numeral-(lowercase)-toggle-button"]'),
+    identifiersToggleButtonLabel: () => cy.get('[class*="identifiers-wrapper"] .ngie-toggle-button-label'),
+    identifiersToggleButtonIcon: () => cy.get('[class*="identifiers-wrapper"] .ngie-toggle-button-icon')
+}
+
+const steps = {
+    verifyWithEnumerationRadioButtonCheckedState: () => {
+        gradingViewEnumerationComponent.withEnumerationRadioButton()
+            .should('be.checked');
+    },
+
+    selectIdentifierToggleButton: (toggleButton) => {
+        const toggleButtonMap = {
+            'Numerical': gradingViewEnumerationComponent.numericalToggleButton(),
+            'Alphabet (uppercase)': gradingViewEnumerationComponent.alphabetUppercaseToggleButton(),
+            'Alphabet (lowercase)': gradingViewEnumerationComponent.alphabetLowercaseToggleButton(),
+            'Roman numeral (uppercase)': gradingViewEnumerationComponent.romanNumeralUppercaseToggleButton(),
+            'Roman numeral (lowercase)': gradingViewEnumerationComponent.romanNumeralLowercaseToggleButton()
+        };
+        if (!toggleButtonMap[toggleButton]) {
+            throw new Error('Invalid identifier toggle button');
+        }
+        toggleButtonMap[toggleButton]
+            .click()
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    selectEnumerationType: (enumerationType) => {
+        switch (enumerationType) {
+            case 'with enumeration':
+                gradingViewEnumerationComponent.withEnumerationRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'without enumeration':
+                gradingViewEnumerationComponent.withoutEnumerationRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('Invalid enumeration type');
+        }
+    }
+}
+
+const tests = {
+    verifyGradingViewEnumerationSectionContents: (typeOfInput) => {
+        it('"Grading view" label should be displayed', () => {
+            utilities.verifyInnerText(gradingViewEnumerationComponent.gradingViewLabel(), 'Grading view');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.gradingViewLabel(), 'visible');
+        });
+
+        it('"Grading style" label along with two radio buttons, "with enumeration" and "without enumeration" should be displayed. By default, "with enumeration" radio button should be in checked state', () => {
+            utilities.verifyInnerText(gradingViewEnumerationComponent.gradingStyleLabel(), 'Grading style');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.gradingStyleLabel(), 'visible');
+            utilities.verifyInnerText(gradingViewEnumerationComponent.withEnumerationRadioButtonLabel(), 'With enumeration');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.withEnumerationRadioButtonLabel(), 'visible');
+            utilities.verifyInnerText(gradingViewEnumerationComponent.withoutEnumerationRadioButtonLabel(), 'Without enumeration');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.withoutEnumerationRadioButtonLabel(), 'visible');
+            gradingViewEnumerationComponent.steps.verifyWithEnumerationRadioButtonCheckedState();
+        });
+
+        it(`When "with enumeration" radio button is in checked state, "${typeOfInput} identifiers" label along with ${gradingEnumerationButtons.length} toggle buttons. By default, 'Numerical' toggle button should be in selected state of the ${gradingEnumerationButtons.join(' , ')} toggle buttons`, () => {
+            utilities.verifyInnerText(gradingViewEnumerationComponent.identifiersLabel(), `${typeOfInput} identifiers`);
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.numericalToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.alphabetUppercaseToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.alphabetLowercaseToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.romanNumeralUppercaseToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.romanNumeralLowercaseToggleButton(), 'visible');
+            gradingEnumerationButtons.forEach((button, buttonIndex) => {
+                utilities.verifyInnerText(utilities.getNthElement(gradingViewEnumerationComponent.identifiersToggleButtonLabel(), buttonIndex), button);
+            });
+            gradingViewEnumerationComponent.numericalToggleButton()
+                .should('have.attr', 'aria-pressed', 'true');
+        });
+
+        it('CSS of grading view section contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(gradingViewEnumerationComponent.gradingViewLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gradingViewEnumerationComponent.gradingStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gradingViewEnumerationComponent.withoutEnumerationRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gradingViewEnumerationComponent.withEnumerationRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gradingViewEnumerationComponent.identifiersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gradingViewEnumerationComponent.numericalToggleButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `2px solid ${css.color.secondaryBtnActive}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(gradingViewEnumerationComponent.identifiersToggleButtonLabel(), 0), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(utilities.getNthElement(gradingViewEnumerationComponent.identifiersToggleButtonIcon().find('tspan'), 0), {
+                'fill': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(gradingViewEnumerationComponent.alphabetLowercaseToggleButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(gradingViewEnumerationComponent.identifiersToggleButtonLabel(), 1), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(utilities.getNthElement(gradingViewEnumerationComponent.identifiersToggleButtonIcon().find('tspan'), 4), {
+                'fill': css.color.figDefaultComponentBorder
+            });
+        });
+    }
+}
+
+export const gradingViewEnumerationComponent = {
+    ...selectors,
+    steps,
+    tests,
+}