itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/rulerPage.js

@@ -0,0 +1,441 @@
+import { createItemPage } from "./createItemPage";
+import utilities from "../support/helpers/utilities";
+import { createQuestionBasePage, additionalSettingsPanel, commonComponents, toolVisibilityComponent, measuringToolComponent } from "./components";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
+import { dialogBoxBase } from "./dialogBoxBase";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...createItemPage,
+    ...selectQuestionResourceToolPage,
+    ...createQuestionBasePage,
+    ...commonComponents,
+    ...toolVisibilityComponent,
+    ...dialogBoxBase,
+    ...measuringToolComponent,
+    alternativeTextLabel: () => cy.get('.alternative-text'),
+    rotationDropdownListOption: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Rotation-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Rotation-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"]')
+        }
+    },
+    rulerColorLabel: () => cy.get('[class*="ColorPalletestyles__ColorPalleteLabel"]'),
+    rulerVisibilityLabel: () => cy.get('[class*="Rulerstyles__VisibilityLabelWrapper"]'),
+    unitOfMeasurementLabel: () => cy.get('#Unit-of-measurement-dropdown-label'),
+    unitOfMeasurementDropdown: () => cy.get('#Unit-of-measurement-select'),
+    unitOfMeasurementListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Unit-of-measurement-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Unit-of-measurement-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"]')
+        }
+    },
+    lengthOfRulerLabel: () => cy.get('#Length-of-ruler-dropdown-label'),
+    lengthOfRulerDropdown: () => cy.get('#Length-of-ruler-select'),
+    lengthOfRulerDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Length-of-ruler-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Length-of-ruler-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"]')
+        }
+    },
+    displayOnTopLabel: () => cy.get('[class*="Rulerstyles__LabelTextWrapper"]'),
+    centimeterRadioButton: () => cy.get('[data-value="centimeter"] input'),
+    centimeterLabel: () => cy.get('[data-value="centimeter"] .ngie-radio-label'),
+    inchRadioButton: () => cy.get('[data-value="inch"] input'),
+    inchLabel: () => cy.get('[data-value="inch"] .ngie-radio-label'),
+    allowUserToFlipRulerCheckbox: () => cy.get('[data-ngie-testid="allow-student-to-flip-ruler-checkbox"] input'),
+    allowUserToFlipRulerLabel: () => cy.get('[data-ngie-testid="allow-student-to-flip-ruler-checkbox"] .MuiFormControlLabel-label'),
+    uploadLabel: () => cy.get('[class*="CustomRulerImagestyles__LabelWrapper"]').eq(0),
+    uploadButton: () => cy.get('[class*="CustomRulerImagestyles__UploadWrapper"] .choose-file-button'),
+    fileNameLabel: () => cy.get('[class*="CustomRulerImagestyles__LabelWrapper"]').eq(1),
+    uploadedFileNameLabel: () => cy.get('[class*="CustomRulerImagestyles__SelectedFile"] [role="button"]'),
+    inputTypeFile: () => cy.get('input[type="file"]'),
+    deleteImageButton: () => cy.get('[class*="CustomRulerImagestyles__UploadWrapper"] .ngie-icon-btn-cls'),
+    imagePreviewLabel: () => cy.get('.preview-label-wrapper'),
+    uploadedImagePreview: () => cy.get('.img-preview-mobile-view'),
+    imageWidthLabel: () => cy.get('[class*="CustomRulerImagestyles__LabelInputWrapper"]').eq(0),
+    imageWidthInputField: () => cy.get('[aria-label="Image width (px)"]'),
+    imageHeightLabel: () => cy.get('[class*="CustomRulerImagestyles__LabelInputWrapper"]').eq(1),
+    imageHeightInputField: () => cy.get('[aria-label="Image height (px)"]'),
+    noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
+    fileUploadProgressBar: () => cy.get('[class*="CustomRulerImagestyles__ProgressBar"]'),
+    lockAspectRatioButton: () => cy.get('[aria-label="Locked aspect ratio"]'),
+    resetButton: () => cy.get('[aria-label="Reset image size"]'),
+    lockAspectRatioButton: () => cy.get('[class*="CustomRulerImagestyles__LockIconWrapper"]'),
+    resetDimensionsButton: () => cy.get('[aria-label="Reset image size"]'),
+    //preview tab
+    rulerPreviewTab: () => cy.get('[class*="RulerComponentstyles__DefaultRulerWrapper"]'),
+    rulerUploadedImagePreviewTab: () => cy.get('[class*="RulerComponentstyles__RulerComponentWrapper"] img'),
+    alternativeTextWrapperPreviewTab: () => cy.get('[class*="Rulerstyles__AlternativeTextWrapper"]'),
+    flipRulerButton: () => cy.get('.flip-button'),
+    rotationButtonWithDegreeInPreviewTab: () => cy.get('.icon-rotate-with-angle'),
+    rotationButtonDegreeText: () => cy.get('.ruler-rotation .moveable-rotation-control .angle-measurement'),
+    rulerVisibilityButtonPreviewTab: () => cy.get('.ngie-icon-with-label-btn:visible'),
+    rulerVisibleImagePreviewTab: () => cy.get('.ngie-icon-with-label-btn #eye'),
+    rulerHideImagePreviewTab: () => cy.get('.ngie-icon-with-label-btn #Hide_cell'),
+    previewWrapper: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"]')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...commonComponents.steps,
+    ...selectQuestionResourceToolPage.steps,
+    ...toolVisibilityComponent.steps,
+    ...measuringToolComponent.steps,
+
+    /**
+     * @param {string[]} dropdownOptionsArray array containing options of rotation dropdown list
+     * @description this function is used to verify inner text of expanded dropdown list options
+     */
+    verifyUnitOfMeasurementDropdownOptions: (dropdownOptionsArray) => {
+        dropdownOptionsArray.forEach((option, count) => {
+            rulerPage.unitOfMeasurementListOptions()
+                .eq(count)
+                .should('have.text', option);
+        });
+    },
+
+    expandUnitOfMeasurementDropdown: () => {
+        rulerPage.unitOfMeasurementDropdown()
+            .click();
+    },
+
+    expandLengthOfRulerDropdown: () => {
+        rulerPage.lengthOfRulerDropdown()
+            .click();
+    },
+
+    /**
+     * @param {string[]} dropdownOptionsArray array containing options of dropdown list
+     * @description this function is used to verify inner text of expanded dropdown list options
+     */
+    verifyLengthOfRulerDropdownListOptions: (dropdownOptionsArray) => {
+        dropdownOptionsArray.forEach((option, count) => {
+            rulerPage.lengthOfRulerDropdownListOptions()
+                .eq(count)
+                .should('have.text', option);
+        });
+    },
+
+    /**
+     * @param {string} option option to be selected from the dropdown list
+     * @description function selects option from expanded dropdown list
+     */
+    selectOptionFromLengthOfRulerDropdown: (option) => {
+        rulerPage.lengthOfRulerDropdownListOptions(option)
+            .click();
+    },
+
+    /**
+     * @param {string} option option to be selected from the dropdown list
+     * @description function selects option from expanded dropdown list
+     */
+    selectOptionFromUnitOfMeasurementDropdown: (option) => {
+        rulerPage.unitOfMeasurementListOptions(option)
+            .click();
+    },
+
+    verifyCentimeterRadioButtonIsSelected: () => {
+        rulerPage.centimeterRadioButton()
+            .should('be.checked');
+    },
+
+    /**
+     * @param {string} filePath file path for the file to be attached
+     * @description function attaches file
+     */
+    uploadFile: (filePath) => {
+        rulerPage.inputTypeFile()
+            .attachFile(filePath);
+    },
+
+    verifyWidthInputFieldValueInImagePreview: () => {
+        rulerPage.uploadedImagePreview()
+            .find('img')
+            .invoke('attr', 'width')
+            .then((width) => {
+                const imgWidth = width;
+                rulerPage.imageWidthInputField()
+                    .should('have.value', imgWidth)
+            });
+    },
+
+    verifyWidthInputFieldValueAfterReset: () => {
+        rulerPage.uploadedImagePreview()
+            .find('img')
+            .then(($element) => {
+                const imgWidth = $element[0].naturalWidth;
+                rulerPage.imageWidthInputField()
+                    .should('have.value', imgWidth)
+            });
+    },
+
+    verifyHeightInputFieldValueInImagePreview: () => {
+        rulerPage.uploadedImagePreview()
+            .find('img')
+            .invoke('attr', 'height').then((height) => {
+                const imgHeight = height;
+                rulerPage.imageHeightInputField()
+                    .should('have.value', imgHeight)
+            });
+    },
+
+    verifyHeightInputFieldValueAfterReset: () => {
+        rulerPage.uploadedImagePreview()
+            .find('img')
+            .then(($element) => {
+                const imgHeight = $element[0].naturalHeight;
+                rulerPage.imageHeightInputField()
+                    .should('have.value', imgHeight)
+            });
+    },
+
+    unlockAspectRatio: () => {
+        rulerPage.lockAspectRatioButton()
+            .click();
+        rulerPage.lockAspectRatioButton()
+            .find('button')
+            .should('have.attr', 'aria-label', 'Unlocked aspect ratio');
+    },
+
+    lockAspectRatio: () => {
+        rulerPage.lockAspectRatioButton()
+            .click();
+        rulerPage.lockAspectRatioButton()
+            .find('button')
+            .should('have.attr', 'aria-label', 'Locked aspect ratio');
+    },
+
+    /**
+     * @param {number} width holds value of width attribute
+     * @description function updates width in input field
+     */
+    updateImageWidth: (width) => {
+        rulerPage.imageWidthInputField()
+            .clear()
+            .type(width);
+    },
+
+    /**
+     * @param {number} height holds value of height attribute
+     * @description function updates height in input field
+     */
+    updateImageHeight: (height) => {
+        rulerPage.imageHeightInputField()
+            .clear()
+            .type(height);
+    },
+
+    /**
+     * @param {number} width holds value of width attribute
+     * @description function verifies width property in image
+     */
+    verifyUpdatedWidthOfImage: (width) => {
+        rulerPage.uploadedImagePreview()
+            .find('img')
+            .should('have.attr', 'width', width)
+    },
+
+    /**
+     * @param {number} height holds value of height attribute
+     * @description function verifies height property in image
+     */
+    verifyUpdatedHeightOfImage: (height) => {
+        rulerPage.uploadedImagePreview()
+            .find('img')
+            .should('have.attr', 'height', height)
+    },
+
+    /**
+     * @param {number} width holds value of width attribute
+     * @description function verifies width property in input field
+     */
+    verifyUpdatedWidthInImageWidthInputField: (width) => {
+        rulerPage.imageWidthInputField()
+            .should('have.value', width)
+    },
+
+    /**
+     * @param {number} height holds value of height attribute
+     * @description function verifies height property in input field
+     */
+    verifyUpdatedHeightInImageHeightInputField: (height) => {
+        rulerPage.imageHeightInputField()
+            .should('have.value', height)
+    },
+
+    resetDimensions: () => {
+        rulerPage.resetDimensionsButton()
+            .click();
+    },
+
+    clickOnDeleteButton: () => {
+        rulerPage.deleteImageButton()
+            .click();
+    },
+
+    /**
+     * @param {string} unitOfMeasurement is the length of ruler
+     * @description function verifies inner text of the element
+     */
+    verifyInnerTextOfLengthOfRulerDropdown: (lengthOfRuler) => {
+        utilities.verifyInnerText(rulerPage.lengthOfRulerDropdown(), lengthOfRuler);
+    },
+
+    /**
+     * @param {string} unitOfMeasurement is the unit of measurement
+     * @description function verifies inner text of the element
+     */
+    verifyInnerTextOfUnitOfMeasurementDropdown: (unitOfMeasurement) => {
+        utilities.verifyInnerText(rulerPage.unitOfMeasurementDropdown(), unitOfMeasurement);
+    },
+
+    verifyAllowUserToFlipRulerCheckboxIsUnchecked: () => {
+        rulerPage.allowUserToFlipRulerCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkAllowUserToFlipRulerCheckbox: () => {
+        rulerPage.allowUserToFlipRulerCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyLengthOfRulerInPreview: (length) => {
+        let lengthOfRuler = length.replaceAll(' ', '')
+        rulerPage.rulerPreviewTab()
+            .find('svg g')
+            .eq(0)
+            .should('have.attr', 'data-name', `Ruler ${lengthOfRuler}`);
+    },
+
+    verifyColorOfRulerInPreview: (colorIndex) => {
+        const fillColor = () => {
+            switch (colorIndex) {
+                case 0:
+                    return 'rgba(255, 255, 255, 1)';
+                case 1:
+                    return 'rgb(186, 201, 255)';
+                case 2:
+                    return 'rgb(128, 239, 255)';
+                case 3:
+                    return 'rgb(255, 238, 215)';
+                case 4:
+                    return 'rgb(255, 238, 78)';
+                case 5:
+                    return 'rgb(220, 223, 230)';
+                default:
+                    return 'incorrect colorIndex';
+            }
+        };
+        rulerPage.rulerPreviewTab()
+            .find('svg g')
+            .eq(2)
+            .should('have.css', 'fill', fillColor());
+    },
+
+    verifyAlternativeTextInPreview: (altText) => {
+        rulerPage.alternativeTextWrapperPreviewTab()
+            .find('input')
+            .should('have.attr', 'value', altText)
+    },
+
+    verifyNoAlternativeTextPresentInPreview: () => {
+        rulerPage.alternativeTextWrapperPreviewTab()
+            .find('input')
+            .should('have.attr', 'value', '')
+    },
+
+    verifyFlipButtonNotVisible: () => {
+        utilities.verifyElementVisibilityState(rulerPage.flipRulerButton(), 'notExist');
+    },
+
+    verifyFlipButtonVisible: () => {
+        utilities.verifyElementVisibilityState(rulerPage.flipRulerButton(), 'visible');
+    },
+
+    verifyRotationButtonWithDegreeVisible: () => {
+        utilities.verifyElementVisibilityState(rulerPage.rotationButtonWithDegreeInPreviewTab(), 'visible');
+        utilities.verifyInnerText(rulerPage.rotationButtonDegreeText(), '0°');
+        utilities.verifyElementVisibilityState(rulerPage.rotationButtonDegreeText(), 'visible');
+    },
+
+    /**
+     * @param {string} opacity value of opacity for the element
+     * @description function verifies opacity css property for the element
+     */
+    verifyRulerOpacityInPreview: (opacity) => {
+        rulerPage.rulerPreviewTab()
+            .find('svg g')
+            .eq(2)
+            .find('rect')
+            .should('have.css', 'opacity', opacity);
+    },
+
+    verifyWidthAndHeightOfImageInPreviewTab: () => {
+        cy.log('Switching to Edit Tab');
+        rulerPage.steps.switchToEditTab();
+        rulerPage.uploadedImagePreview()
+            .find('img')
+            .invoke('attr', 'width')
+            .then((width) => {
+                const imgWidth = width;
+                rulerPage.uploadedImagePreview()
+                    .find('img')
+                    .invoke('attr', 'height')
+                    .then((height) => {
+                        const imgHeight = height;
+                        cy.log('Switching to Preview Tab');
+                        rulerPage.steps.switchToPreviewTab();
+                        rulerPage.rulerUploadedImagePreviewTab()
+                            .should('have.attr', 'width', imgWidth)
+                            .should('have.attr', 'height', imgHeight);
+                    });
+            });
+    },
+
+    /**
+     * @param {("Show"|"Hide")} visibility
+     */
+    verifyPreviewTabRulerVisibilityButtonLabel: (visibility) => {
+        utilities.verifyInnerText(rulerPage.rulerVisibilityButtonPreviewTab(), `${visibility} ruler`);
+        if (visibility == 'Hide') {
+            utilities.verifyElementVisibilityState(rulerPage.rulerHideImagePreviewTab(), 'visible');
+        } else {
+            utilities.verifyElementVisibilityState(rulerPage.rulerVisibleImagePreviewTab(), 'visible');
+        }
+    },
+
+    verifyPreviewTabRulerVisibilityButtonDoesNotExist: () => {
+        utilities.verifyElementVisibilityState(rulerPage.rulerVisibilityButtonPreviewTab(), 'notExist');
+    },
+
+    clickOnRulerVisibilityButton: () => {
+        rulerPage.rulerVisibilityButtonPreviewTab()
+            .click();
+    },
+
+    verifyRulerNotVisible: () => {
+        utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'notExist');
+    },
+
+    verifyRulerVisible: () => {
+        utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'visible');
+    }
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...additionalSettingsPanel.tests,
+    ...commonComponents.tests,
+    ...dialogBoxBase.tests
+}
+
+export const rulerPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/selectQuestionResourceToolPage.js

@@ -6,6 +6,13 @@ const selectors = {
             return cy.get('.type-card-container')
         }
     },
+    resourceAndToolOptionTitle: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.type-card-container [aria-label="${ariaLabel}"]`)
+        } else {
+            return cy.get('.type-card-container')
+        }
+    },
     selectAQuestionHeaderText: () => cy.get('[class*="QuestionResourceToolstyles__HeaderText"]'),
     questionTypeCategory: () => cy.get('[class*="QuestionResourceToolstyles__CategorySection"]'),
     resourceTypeCategory: () => cy.get('.MuiCard-root')
@@ -32,6 +39,7 @@ const questionTypeCategoryMap = {
     'essay response - basic': 'Constructed response',
     'essay response - math': 'Constructed response',
     'short text response': 'Constructed response',
+    'Drawing Response': 'Constructed response',
     'upload response': 'Recorded response',
     'audio response': 'Recorded response',
     'video response': 'Recorded response',
@@ -47,8 +55,7 @@ const steps = {
     },
 
     selectResourceType: (resourceCategory) => {
-        selectQuestionResourceToolPage.resourceTypeCategory()
-            .contains(resourceCategory)
+        selectQuestionResourceToolPage.resourceAndToolOptionTitle(resourceCategory)
             .click();
     }
 }

package/cypress/pages/shortTextResponsePage.js

@@ -72,6 +72,17 @@ const steps = {
             .verifyInnerText(correctAnswer)
         shortTextResponsePage.previewTabCorrectAnswerResponse()
             .should('have.length', 1);
+    },
+
+    createBasicShortTextResponseQuestion: (inputQuestion, points, inputAnswer) => {
+        shortTextResponsePage.questionInstructionsInputField()
+            .type(inputQuestion);
+        shortTextResponsePage.pointsInputField()
+            .type(points);
+        shortTextResponsePage.setCorrectAnswerResponseField()
+            .type(inputAnswer);
+        shortTextResponsePage.saveQuestionButton()
+            .click();
     }
 }
 

package/cypress/pages/singleSelectionGridPage.js

@@ -1,4 +1,4 @@
-import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, mcqOptionsComponent, mcqScoringComponent, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase } from "./components";
+import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, mcqScoringComponent, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase } from "./components";
 import { gridCommonComponents } from "./components/gridCommonComponents";
 import { studentResponseAndLayoutComponent } from "./components/studentResponseAreaAndLayoutComponent";
 const css = Cypress.env('css');
@@ -8,7 +8,6 @@ const selectors = {
     ...commonComponents,
     ...scoringSectionBase,
     ...autoScoredSetCorrectAnswerSection,
-    ...mcqOptionsComponent,
     ...autoScoredScoringSectionMultipleResponsesType,
     ...autoScoredAdditionalSettings,
     ...previewScoringAndShowCorrectAnswerComponent,