itemengine-cypress-automation 1.0.119 → 1.0.121

package/cypress/pages/components/index.js

@@ -23,7 +23,6 @@ export * from './maximumRecorderLengthComponent';
 export * from './playbackControlsBaseComponent';
 export * from './fillInTheGapsTextCommonComponent'
 export * from './fillInTheGapsDropdownCommonComponent';
-export * from './figOverImageCommonComponent';
 export * from './uploadImageSectionComponent';
 export * from './colorPopupComponent';
 export * from './customizeHighlightPropertiesComponent';
@@ -44,7 +43,7 @@ export * from './allowMultipleInstancesOfSameDraggableOptionComponent';
 export * from './questionInputFieldComponent';
 export * from './studentViewSettingsLabelComponent';
 export * from './backgroundImageUploadComponent';
-export * from './figOverImageCanvasComponent';
+export * from './imageCanvasComponent';
 export * from './correctIncorrectAnswerLabelComponent';
 export * from './acceptedStudentInputComponent';
 export * from './draggableOptionsSectionComponent';
@@ -53,4 +52,5 @@ export * from './customizeSpecialCharacterComponent';
 export * from './opacityComponent';
 export * from './imageActionsComponent';
 export * from './createCustomCategoryFlyout';
-export * from './customizeMathCharacterComponent';
+export * from './customizeMathCharacterComponent';
+export * from './fillInTheGapsDragAndDropCommonComponents';

package/cypress/pages/components/maximumRecorderLengthComponent.js

@@ -37,6 +37,28 @@ const steps = {
             .clear()
             .blur();
     },
+
+    /**
+     * Selects the duration for maximum recorder length input field
+     * @param {('Secs' | 'Mins')} duration - The duration for maximum recorder length input field. 
+     * @throws {Error} Will throw an error if an invalid duration is provided.
+     */
+    toggleMaximumRecorderLengthInputField: (duration) => {
+        switch (duration) {
+            case 'Secs':
+                maximumRecorderLengthComponent.maximumRecorderLengthSecsToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Mins':
+                maximumRecorderLengthComponent.maximumRecorderLengthMinsToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid duration');
+        }
+    }
 }
 
 const tests = {
@@ -78,16 +100,9 @@ const tests = {
         });
 
         //Note: a11y is covered for Maximum recorder length section in HeaderSection file using verifyCreateItemWrapperContentsA11y
-
-        it('When the user toggles to "Mins", "15" should be displayed in \'Maximum recorder length\' field', () => {
-            maximumRecorderLengthComponent.maximumRecorderLengthMinsToggleButton()
-                .click()
-                .should('have.class', 'ngie-toggle-button-selected');
-            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength(15);
-        });
     },
 
-    verifyMaximumRecorderLengthInputFieldErrorMessages: () => {
+    verifyMaximumRecorderLengthInputFieldErrorMessagesForSecsDuration: () => {
         it('When the user focuses in and out of the empty \'Maximum recorder length\' input field, \'Error: Maximum recorder length is required.\' validation error should be displayed below the \'Maximum recorder length\' input field', () => {
             maximumRecorderLengthComponent.steps.clearMaximumRecorderLengthInputField();
             utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Maximum recorder length is required.');
@@ -98,7 +113,7 @@ const tests = {
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Maximum recorder length is required.\' should disappear.', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
         });
 
         it('When the user has set \'Maximum recorder length\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 secs.\' should be displayed', () => {
@@ -112,7 +127,7 @@ const tests = {
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Value must be greater than 0 secs.\' should disappear', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
         });
     },
 
@@ -123,7 +138,36 @@ const tests = {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('!@#abcde584');
             maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength('584');
         });
-    }
+    },
+
+    verifyMaximumRecorderLengthInputFieldErrorMessagesForMinsDuration: () => {
+        it('When the user focuses in and out of the empty \'Maximum recorder length\' input field, \'Error: Maximum recorder length is required.\' validation error should be displayed below the \'Maximum recorder length\' input field', () => {
+            maximumRecorderLengthComponent.steps.clearMaximumRecorderLengthInputField();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Maximum recorder length is required.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+
+        commonComponents.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Maximum recorder length is required.\' should disappear.', () => {
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('50');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
+        });
+
+        it('When the user has set \'Maximum recorder length\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 mins.\' should be displayed', () => {
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('0');
+            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength('0');
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Value must be greater than 0 mins.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+
+        commonComponents.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Value must be greater than 0 mins.\' should disappear', () => {
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('50');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
+        });
+    },
 }
 
 export const maximumRecorderLengthComponent = {

package/cypress/pages/components/previewScoringAndShowCorrectAnswerComponent.js

@@ -1,6 +1,6 @@
 import { createQuestionBasePage } from "./createQuestionBasePage";
 const css = Cypress.env('css');
-//This file be deprecated, the new file is autoScoredScoringPreviewTab
+//Note: deprecated file
 const selectors = {
     showCorrectAnswerCheckbox: () => cy.get('input[aria-label="Show correct answer"]'),
     showCorrectAnswerCheckboxLabel: () => cy.get('.showAnswer-options-label').eq(1),

package/cypress/pages/components/questionInputFieldComponent.js

@@ -4,36 +4,45 @@ import { commonComponents } from "./commonComponents";
 const selectors = {
     questionLabel: () => cy.get('.cloze-with-text-question-wrapper .title-casing'),
     questionInputField: () => cy.get('.cloze-with-text-question-wrapper [title="question"]'),
-    responseToken: () => cy.get('.cke_widget_wrapper_add_response_element'),
-    responseTokenCloseButton: () => cy.get('.add_response_close'),
-    ckEditorAddResponseButton: () => cy.get('[title="Add Response"]'),
-    responseTokenNumeration: () => cy.get('marker'),
-    responseTokenResponseLabel: () => cy.get('content')
+    responseArea: () => cy.get('.cke_widget_wrapper_add_response_element'),
+    responseAreaCloseButton: () => cy.get('.add_response_close'),
+    addResponseAreaButton: () => cy.get('.add-response-token-wrapper-cls button'),
+    responseAreaNumeration: () => cy.get('marker'),
+    responseAreaResponseLabel: () => cy.get('content'),
+    questionContainerPreviewTab: () => cy.get('.preview-question-text-wrapper'),
+    responseAreaSettingsButton: () => cy.get('.add_response_settings_btn')
 }
 
 const steps = {
+    addResponseAreaInQuestionField: () => {
+        questionInputFieldComponent.questionInputField()
+            .click();
+        questionInputFieldComponent.steps.clickOnAddResponseAreaButton();
+    },
+
     /**
      * @description Delete a response token by clicking on its close button
-     * @param {number} responseTokenIndex response token index
+     * @param {number} responseAreaIndex response token index
      */
-    deleteAResponseToken: (responseTokenIndex) => {
-        utilities.getNthElement(questionInputFieldComponent.responseToken(), responseTokenIndex)
+    deleteAResponseArea: (responseAreaIndex) => {
+        utilities.getNthElement(questionInputFieldComponent.responseArea(), responseAreaIndex)
             .within(() => {
-                questionInputFieldComponent.responseTokenCloseButton()
+                questionInputFieldComponent.responseAreaCloseButton()
                     .click();
             });
     },
 
     /**
      * @description Verify response token numeration and close button
-     * @param {number} responseTokenIndex response token index
+     * @param {number} responseAreaIndex response token index
      */
-    verifyResponseTokenNumerationAndCloseButton: (responseTokenIndex) => {
-        utilities.getNthElement(questionInputFieldComponent.responseToken(), responseTokenIndex)
+    verifyResponseAreaContents: (responseAreaIndex) => {
+        utilities.getNthElement(questionInputFieldComponent.responseArea(), responseAreaIndex)
             .within(() => {
-                utilities.verifyInnerText(questionInputFieldComponent.responseTokenNumeration(), `${responseTokenIndex + 1}`);
-                utilities.verifyElementVisibilityState(questionInputFieldComponent.responseTokenNumeration(), 'visible');
-                utilities.verifyElementVisibilityState(questionInputFieldComponent.responseTokenCloseButton(), 'visible');
+                utilities.verifyInnerText(questionInputFieldComponent.responseAreaNumeration(), `${responseAreaIndex + 1}`);
+                utilities.verifyElementVisibilityState(questionInputFieldComponent.responseAreaNumeration(), 'visible');
+                utilities.verifyElementVisibilityState(questionInputFieldComponent.responseAreaCloseButton(), 'visible');
+                utilities.verifyElementVisibilityState(questionInputFieldComponent.responseAreaSettingsButton(), 'visible');
             });
     },
 
@@ -53,14 +62,14 @@ const steps = {
             .blur();
     },
 
-    clickInQuestionInputField: () => {
+    focusInQuestionInputField: () => {
         questionInputFieldComponent.questionInputField()
             .click();
     },
 
-    addResponseToken: () => {
-        questionInputFieldComponent.steps.clickInQuestionInputField();
-        questionInputFieldComponent.ckEditorAddResponseButton()
+    addResponseArea: () => {
+        questionInputFieldComponent.steps.focusInQuestionInputField();
+        questionInputFieldComponent.addResponseAreaButton()
             .click();
     },
 
@@ -73,6 +82,23 @@ const steps = {
         questionInputFieldComponent.questionInputField()
             .should('not.have.attr', 'data-cke-editorplaceholder');
     },
+
+    clickOnAddResponseAreaButton: () => {
+        questionInputFieldComponent.addResponseAreaButton()
+            .click();
+    },
+
+    verifyResponseAreaButtonDisabled: () => {
+        questionInputFieldComponent.addResponseAreaButton()
+            .parent()
+            .should('have.class', 'disabled');
+    },
+
+    verifyResponseAreaButtonEnabled: () => {
+        questionInputFieldComponent.addResponseAreaButton()
+            .parent()
+            .should('not.have.class', 'disabled');
+    }
 }
 
 const tests = {
@@ -86,10 +112,10 @@ const tests = {
         });
     },
 
-    addTokenAndVerifyMinimumOneTokenRequiredErrorMessageNotExist: () => {
-        it('When the user adds a token in the question field, then the error message should disappear', () => {
-            questionInputFieldComponent.steps.addResponseToken();
-            utilities.verifyElementCount(questionInputFieldComponent.responseToken(), 1);
+    addResponseAreaAndVerifyMinimumOneAreaRequiredErrorMessageNotExist: () => {
+        it('When the user adds a response area in the question field, then the error message should disappear', () => {
+            questionInputFieldComponent.steps.addResponseArea();
+            utilities.verifyElementCount(questionInputFieldComponent.responseArea(), 1);
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
     },

package/cypress/pages/components/scoringSectionBase.js

@@ -1,7 +1,7 @@
 import utilities from "../../support/helpers/utilities";
 import { commonComponents } from "./commonComponents";
 const css = Cypress.env('css');
-
+//Note: deprecated file
 const selectors = {
     scoringLabel: () => cy.get('.edit-scoring-label'),
     scoringTypeLabel: () => cy.get('#Scoring-Type-dropdown-label'),

package/cypress/pages/createItemPage.js

@@ -12,6 +12,8 @@ const selectors = {
     viewAllQuestionsButton: () => cy.get('.view-question-resource-button-wrapper'),
     createItemContainer: () => cy.get('.edit-wrapper'),
     referenceId: () => cy.get('.edit-item-reference-id'),
+    applyChangesButton: () => cy.get('.applyChangesBtn'),
+    titleInputField: () => cy.get('.edit-box-field-wrapper input'),
     itemTitle: () => cy.get('.ItemLevel-Header'),
     tagsButton: () => cy.get('.ngie-button').contains('Tags'),
     tagsInputField: () => cy.get('.tags-chip-container'),
@@ -72,6 +74,23 @@ const steps = {
         cy.visit('/item-engine/demo/create-item');
     },
 
+    /**
+   * @param {string} reference id of the question to be navigated 
+   * @description this function navigates to the edit item page of the 
+   */
+    navigateToEditItemUsingReferenceID: (reference) => {
+        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(reference)}`);
+    },
+
+    navigateToEditItemPage: () => {
+        createItemPage.referenceId()
+            .invoke('text')
+            .then(text => {
+                const referenceId = text;
+                steps.navigateToEditItemUsingReferenceID(referenceId);
+            });
+    },
+
     verifyCreateItemContainerIsVisible: () => {
         createItemPage.createItemContainer()
             .should('be.visible');
@@ -96,6 +115,52 @@ const steps = {
             .should('have.text', arrayOfTags.sort().join(''));
     },
 
+    /**
+    * @param {string[]} arrayOfTags of text that need to enter in tags input field
+    * @description set tags for an item
+    */
+    setTags: (arrayOfTags) => {
+        steps.clickOnTagsButton()
+        for (let index = 0; index < arrayOfTags.length; index++) {
+            createItemPage.tagsInputField()
+                .type(`${arrayOfTags[index]}{enter}`);
+        }
+        createItemPage.applyChangesButton()
+            .click();
+    },
+
+    /**
+    * @param {string[]} value of text that need to enter in title input field
+    * @description this function enters text in title input field
+    */
+    enterTitle: (value) => {
+        createItemPage.titleInputField()
+            .type(value);
+    },
+
+    clickOnSubmitButton: () => {
+        createItemPage.submitButton()
+            .click();
+    },
+
+
+    navigateToStudentViewPage: () => {
+        createItemPage.referenceId()
+            .invoke('text')
+            .then(text => {
+                const referenceId = text;
+                steps.navigateToStudentViewUsingReferenceID(referenceId);
+            });
+    },
+
+    /**
+      * @param {string} reference id of the question to be navigated 
+      * @description this function navigates to the student view page
+      */
+    navigateToStudentViewUsingReferenceID: (reference) => {
+        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(reference)}`);
+    },
+
     clickOnSettingsButton: () => {
         createItemPage.settingsBtn()
             .click();
@@ -106,7 +171,7 @@ const steps = {
      * @param {number} questionNumber denotes question number
      * @param {string} questionTitle denotes question title
      * @param {string} questionInstruction denotes question instruction
-     * @description verify question content 
+     * @description verify question content
      */
 
     verifyBasicQuestionContentsPreview: ({ questionIndex, questionTitle, questionInstructions, panel = 0 }) => {
@@ -208,7 +273,7 @@ const steps = {
     },
 
     /**
-     * @param {string} spacing {("default"| "double"|"triple")} 
+     * @param {string} spacing {("default"| "double"|"triple")}
      * @param {boolean} isHorizontalCheckboxChecked {("true"| "false")}
      * @description this function verifies spacing between questions
      */