itemengine-cypress-automation 1.0.255 → 1.0.256-updatedRepo18thNov-3c7b396.0

package/cypress/pages/components/ckEditorInsertImageComponent.js

@@ -0,0 +1,272 @@
+import { dialogBoxBase } from "../dialogBoxBase";
+import { createQuestionBasePage } from "../components/createQuestionBasePage.js";
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...createQuestionBasePage,
+    ...dialogBoxBase,
+    //Basic
+    imageInsertIcon: () => cy.get('.cke_button__image_icon'),
+    imagePropertiesLabel: () => cy.get('.dialog-header-label'),
+    imagePropertyWrapper: () => cy.get('.custom-link-wrapper'),
+    imageInQuestionInstruction: () => cy.get('[data-cke-saved-src*="https"]'),
+    foxImageLinkUrlValueCheck: () => cy.get('[data-cke-saved-src*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
+    imageInfoButton: () => cy.get('[title="Image Info"]'),
+    uploadButton: () => cy.get('[title="Upload"]'),
+    //Image Info
+    urlLabel: () => cy.get('.dialog-input-label').eq(0),
+    urlInputField: () => cy.get('.cke_dialog_ui_input_text').eq(1),
+    alternateTextLabel: () => cy.get('.dialog-input-label').eq(1),
+    alternateTextInputField: () => cy.get('.cke_dialog_ui_input_text').eq(3),
+    widthLabel: () => cy.get('.dialog-input-label').eq(2),
+    widthInputField: () => cy.get('.cke_dialog_ui_input_text').eq(5),
+    heightLabel: () => cy.get('.dialog-input-label').eq(3),
+    heightInputField: () => cy.get('.cke_dialog_ui_input_text').eq(7),
+    borderLabel: () => cy.get('.dialog-input-label').eq(4),
+    borderInputField: () => cy.get('.cke_dialog_ui_input_text').eq(9),
+    hSpaceLabel: () => cy.get('.dialog-input-label').eq(5),
+    hSpaceInputField: () => cy.get('.cke_dialog_ui_input_text').eq(11),
+    vSpaceLabel: () => cy.get('.dialog-input-label').eq(6),
+    vSpaceInputField: () => cy.get('.cke_dialog_ui_input_text').eq(13),
+    //Image Responsive
+    imageResponsivenessLabel: () => cy.get('.dialog-input-label').eq(8),
+    responsiveRadioButton: () => cy.get('[class*="image-responsiveness-radio-wrapper"]').eq(1),
+    responsiveRadioLabel: () => cy.get('[class*="image-responsiveness-radio-wrapper"]').eq(2),
+    fixedRadioButton: () => cy.get('[class*="image-responsiveness-radio-wrapper"]').eq(3),
+    fixedRadioLabel: () => cy.get('[class*="image-responsiveness-radio-wrapper"]').eq(4),
+    //Alignment
+    alignmentLabel: () => cy.get('.dialog-input-label').eq(7),
+    alignmentDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(1),
+    alignmentOptions: (alignment = null) => {
+        if (alignment) {
+            return cy.get(`[class*="cke_dialog_ui_input_select"] option[value="${alignment}"]`)
+        } else {
+            return cy.get('[class*="cke_dialog_ui_input_select"] option[value]').eq(3)
+        }
+    },
+    //Special Button
+    lockRatioButton: () => cy.get('[title="Lock Ratio"]'),
+    resetSizeButton: () => cy.get('[title="Reset Size"]'),
+    //Preview box
+    imageInPreviewBox: () => cy.get('[src*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
+    //Upload
+    sendItToTheServerLabel: () => cy.get('.dialog-input-label').eq(9),
+    chooseFileButton: () => cy.get('.dialog-input-area').eq(9),
+    sendItToTheServerButton: () => cy.get('[title="Send it to the Server"] .cke_dialog_ui_button'),
+}
+
+const steps = {
+    clickChooseFileButton: () => {
+        ckEditorInsertImageComponent.chooseFileButton()
+            .click();
+    },
+
+    selectImageInsertOptionFromCKEditorToolbar: () => {
+        ckEditorInsertImageComponent.imageInsertIcon()
+            .eq(0)
+            .click();
+    },
+
+    selectLockRatioButton: () => {
+        ckEditorInsertImageComponent.lockRatioButton()
+            .click();
+    },
+
+    selectResetSizeButton: () => {
+        ckEditorInsertImageComponent.resetSizeButton()
+            .click();
+    },
+
+    /**
+     * This function adds URL in the image popup
+     * @param {string} text to be added in the url input field
+     */
+    addURLInImagePopUp: (text) => {
+        ckEditorInsertImageComponent.urlInputField()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    /**
+     * This function adds text in the alternate text
+     * @param {string} text to be added in the alternate text input field
+     */
+    addTextInAlternateText: (text) => {
+        ckEditorInsertImageComponent.alternateTextInputField()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    /**
+     * This function adds text in the width input field
+     * @param {string} text to be added in the width input field
+     */
+    insertWidth: (text) => {
+        ckEditorInsertImageComponent.widthInputField()
+            .clear()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    /**
+    * This function adds text in the height input field
+    * @param {string} text to be added in the height input field
+    */
+    insertHeight: (text) => {
+        ckEditorInsertImageComponent.heightInputField()
+            .clear()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    /**
+     * This function adds text in the border input field
+     * @param {string} text to be added in the border input field
+     */
+    insertBorder: (text) => {
+        ckEditorInsertImageComponent.borderInputField()
+            .clear()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    /**
+     * This function adds text in the vSpace input field
+     * @param {string} text to be added in the vSpace input field
+     */
+    insertVSpace: (text) => {
+        ckEditorInsertImageComponent.vSpaceInputField()
+            .clear()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+     /**
+     * This function adds text in the hSpace input field
+     * @param {string} text to be added in the hSpace input field
+     */
+    insertHSpace: (text) => {
+        ckEditorInsertImageComponent.hSpaceInputField()
+            .clear()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    verifyImageInfoButtonSelected: () => {
+        ckEditorInsertImageComponent.imageInfoButton()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    selectUploadButton: () => {
+        ckEditorInsertImageComponent.uploadButton()
+            .click();
+    },
+
+    verifyUploadButtonSelected: () => {
+        ckEditorInsertImageComponent.uploadButton()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    verifyResponsiveRadioButtonChecked: () => {
+        ckEditorInsertImageComponent.responsiveRadioButton()
+            .should('be.checked');
+    },
+
+    verifyFixedRadioButtonChecked: () => {
+        ckEditorInsertImageComponent.fixedRadioButton()
+            .should('be.checked');
+    },
+
+    verifyLockRatioButtonChecked: () => {
+        ckEditorInsertImageComponent.lockRatioButton()
+            .should('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+     * This function verifies the width and height of the input field
+     * @param {number} width expected width of the input field
+     * @param {number} height expected height of the input field
+     */
+    verifyWidthAndHeightInInputField: (width, height) => {
+        ckEditorInsertImageComponent.widthInputField()
+            .should('have.value', width);
+        ckEditorInsertImageComponent.heightInputField()
+            .should('have.value', height);
+    },
+
+    /**
+     * This function verifies the border of the input field
+     * @param {number} width 
+     * @param {number} height 
+     * @param {number} border 
+     * @param {number} hSpace 
+     * @param {number} vSpace 
+     * @param {number} view 
+     */
+    verifyCssOfImageInDifferentViews: (width, height, border, hSpace, vSpace, view) => {
+        switch (view) {
+            case 'Preview Box':
+                utilities.verifyCSS(ckEditorInsertImageComponent.imageInPreviewBox(), {
+                    'width': `${width}px`,
+                    'height': `${height}px`,
+                    'border': `${border}px solid rgb(0, 0, 0)`,
+                    //It not working cause of a bug https://redmine.zeuslearning.com/issues/586076
+                    //HSpace
+                    // 'margin-left': `${hSpace}px`,
+                    // 'margin-right': `${hSpace}px`,
+                    //VSpace
+                    'margin-top': `${vSpace}px`,
+                    'margin-bottom': `${vSpace}px`,
+                });
+                break;
+            case 'Question Instruction':
+                utilities.verifyCSS(ckEditorInsertImageComponent.foxImageLinkUrlValueCheck(), {
+                    'width': `${width}px`,
+                    'height': `${height}px`,
+                    'border': `${border}px solid rgb(0, 0, 46)`,
+                    //It not working cause of a bug https://redmine.zeuslearning.com/issues/586076
+                    //HSpace
+                    // 'margin-left': `${hSpace}px`,
+                    // 'margin-right': `${hSpace}px`,
+                    //VSpace
+                    'margin-top': `${vSpace}px`,
+                    'margin-bottom': `${vSpace}px`,
+                });
+                break;
+            case 'Preview Tab':
+                utilities.verifyCSS(ckEditorInsertImageComponent.imageInPreviewBox(), {
+                    'width': `${width}px`,
+                    // It is not Working cause of a bug https://redmine.zeuslearning.com/issues/586086
+                    // 'height': `${height}px`,
+                    'border': `${border}px solid rgb(0, 0, 46)`,
+                    //It not working cause of a bug https://redmine.zeuslearning.com/issues/586076
+                    //HSpace
+                    // 'margin-left': `${hSpace}px`,
+                    // 'margin-right': `${hSpace}px`,
+                    //VSpace
+                    'margin-top': `${vSpace}px`,
+                    'margin-bottom': `${vSpace}px`,
+                });
+                break;
+            default:
+                throw new Error(`Unsupported page identifier: ${view}`);
+        }
+    },
+
+    /**
+     * This function selects the alignment option from the dropdown
+     * @param {string} alignment option from the dropdown
+     */
+    selectAlignmentOptionDropdown: (alignment) => {
+        ckEditorInsertImageComponent.alignmentDropDown()
+            .click();
+        ckEditorInsertImageComponent.alignmentOptions(alignment)
+            .click();
+    }
+}
+
+export const ckEditorInsertImageComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/ckEditorLinkComponent.js

@@ -0,0 +1,142 @@
+import { dialogBoxBase } from "../dialogBoxBase";
+import { createQuestionBasePage } from "../components/createQuestionBasePage.js";
+import utilities from "../../support/helpers/utilities";
+import constants from "../../fixtures/constants.js";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...createQuestionBasePage,
+    ...dialogBoxBase,
+    //Basic
+    buttonLinkIcon: () => cy.get('.cke_button__link_icon'),
+    linkLabel: () => cy.get('.dialog-header-label'),
+    linkPopUpWrapper: () => cy.get('.custom-link-wrapper'),
+    urlInQuestionInstruction: () => cy.get('[data-cke-saved-href*="https"]'),
+    foxImageLinkUrlValueCheck: () => cy.get('[data-cke-saved-href*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
+    urlInputField: () => cy.get('input[class*="cke_dialog_ui_input_text"]').eq(1),
+    OkButton: () => cy.get('[title="OK"]'),
+    //Link Info
+    displayTextInputField: () => cy.get('input[class*="cke_dialog_ui_input_text"]').eq(0),
+    linkInfo: () => cy.get('[title="Link Info"]'),
+    displayTextLabel: () => cy.get('.dialog-input-label').eq(0),
+    displayTextInputField: () => cy.get('.cke_dialog_ui_input_text').eq(1),
+    linkTypeLabel: () => cy.get('.dialog-input-label').eq(1),
+    linkTypeDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(0),
+    protocolLabel: () => cy.get('.dialog-input-label').eq(2),
+    protocolDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(1),
+    urlLabel: () => cy.get('.dialog-input-label').eq(3),
+    urlInputField: () => cy.get('.cke_dialog_ui_input_text').eq(3),
+    //Protocol
+    protocolDropDown: () => cy.get('.dialog-input-area').eq(2),
+    selectProtocolOptionDropdown: (protocolType = null) => {
+        if (protocolType) {
+            return cy.get(`[class*="cke_dialog_ui_input_select"] option[value="${protocolType}"]`)
+        } else {
+            return cy.get('[class*="cke_dialog_ui_input_select"] option[value]').eq(8)
+        }
+    },
+    //Upload
+    uploadSectionTitle: () => cy.get('[title="Upload"]').eq(0),
+    uploadTitle: () => cy.get('.dialog-input-label').eq(12),
+    chooseFileButton: () => cy.get('.cke_dialog_ui_input_file').eq(0),
+    chooseFileButtonClick: () => cy.get('.cke_dialog_ui_input_file').eq(1),
+    sendItToServerButton: () => cy.get('[title="Send it to the Server"]'),
+    //Preview Tab
+    urlInQuestionInstructionPreviewTab: () => cy.get('[data-testid="question-instruction-element"] [href*="https"]'),
+    foxImageLinkUrlValueCheckPreviewTab: () => cy.get('[data-testid="question-instruction-element"] [href*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
+}
+
+const steps = {
+    selectLinkButtonOptionFromCKEditorToolbar: () => {
+        ckEditorLinkComponent.buttonLinkIcon()
+            .eq(0)
+            .click();
+    },
+
+    addURLInLinkPopUp: (text) => {
+        ckEditorLinkComponent.urlInputField()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    addTextInDisplayText: (text) => {
+        ckEditorLinkComponent.displayTextInputField()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    selectOkButtonFromCKEditorToolbarForLinkPopUp: () => {
+        ckEditorLinkComponent.OkButton()
+            .click();
+    },
+
+    expandProtocolDropDown: () => {
+        ckEditorLinkComponent.protocolDropDown()
+            .click({force: true});
+    },
+
+    selectProtocolType: (protocolType) => {
+        switch (protocolType) {
+            case 'http://':
+                ckEditorLinkComponent.steps.expandProtocolDropDown();
+                ckEditorLinkComponent.selectProtocolOptionDropdown('http://')
+                    .click();
+                break;
+            case 'https://':
+                ckEditorLinkComponent.steps.expandProtocolDropDown();
+                ckEditorLinkComponent.selectProtocolOptionDropdown('https://')
+                    .click();
+                break;
+            case 'ftp://':
+                ckEditorLinkComponent.steps.expandProtocolDropDown();
+                ckEditorLinkComponent.selectProtocolOptionDropdown('ftp://')
+                    .click();
+                break;
+            case 'news://':
+                ckEditorLinkComponent.steps.expandProtocolDropDown();
+                ckEditorLinkComponent.selectProtocolOptionDropdown('news://')
+                    .click();
+                break;
+            default:
+                throw new Error(`Unknown protocol: ${protocolType}`);
+        }
+    },
+
+    clickUploadButton: () => {
+        ckEditorLinkComponent.uploadSectionTitle()
+            .click();
+    },
+
+    clickOnChooseFileButton: () => {
+        ckEditorLinkComponent.chooseFileButton()
+            .click();
+    },
+
+    clickingOnTheLinkPreviewTab: () => {
+        ckEditorLinkComponent.urlInQuestionInstructionPreviewTab()
+            .click();
+    },
+
+    verifyWindowOpenMethodAfterClickingOnLink: (fileName) => {
+        cy.window().document().then(function (doc) {
+            doc.addEventListener('click', () => {
+                setTimeout(function () { doc.location.reload() }, 5000);
+            });
+        ckEditorLinkComponent.foxImageLinkUrlValueCheckPreviewTab()
+                .click();
+         cy.verifyDownload(fileName);
+        });
+    },
+    
+
+    clickSendItToServerButton: () => {
+        ckEditorLinkComponent.sendItToServerButton()
+            .click();
+        cy.wait(1000);
+    }
+}
+
+export const ckEditorLinkComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/customSettingsSeparatorsComponent.ts

@@ -0,0 +1,97 @@
+const selectors = {
+    decimalSeparatorLabel: () => cy.get('.single-select-toggle-group-title').eq(0),
+    thousandSeparatorLabel: () => cy.get('.single-select-toggle-group-title').eq(1),
+    decimalSeparatorToggleOptions: (ariaLabel: string | null = null) => {
+        if (ariaLabel) {
+            return cy.get(`.single-select-toggle-group button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('.single-select-toggle-group button');
+        }
+    },
+    thousandSeparatorToggleOptions: (ariaLabel: string | null = null) => {
+        if (ariaLabel) {
+            return cy.get(`.single-select-toggle-group-double button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('.single-select-toggle-group-double button');
+        }
+    },
+    decimalPlacesToBeComparedLabel: () => cy.get('[for*="dec-places-label"]'),
+    decimalPlacesToBeComparedInputField: () => cy.get('input[id*="dec-places-label"]'),
+    toleranceLabel: () => cy.get('[for*="tolerance-label"]'),
+    toleranceInputField: () => cy.get('input[id*="tolerance-label"]'),
+    decimalAndThousandSeparatorWrapper: () => cy.get('[class*="CustomSettingsstyles__ToggleWrapper"]'),
+    decimalPlacesAndToleranceWrapper: () => cy.get('.custom-settings-text-box-wrapper')
+}
+
+const steps = {
+    /**
+     * This function selects decimal separator options
+     * @param option aria-label of the option to be selected
+     */
+    selectDecimalSeparatorOption: (option: string) => {
+        selectors.decimalSeparatorToggleOptions(option)
+            .click();
+    },
+
+    /**
+     * This function verifies the label of decimal separator
+     * @param label of the decimal separator
+     */
+    verifyLabelDecimalSeparatorLabel: (label: string) => {
+        customSettingsSeparatorComponent.decimalSeparatorLabel()
+            .should('have.text', label);
+    },
+
+    /**
+     * Verifies the existence of the decimal separator toggle options.
+     * @param {string} option - The aria-label of the option to be verified.
+     */
+    verifyDecimalSeparatorOptions: (option: string) => {
+        customSettingsSeparatorComponent.decimalSeparatorToggleOptions(option)
+            .should('exist');
+    },
+
+    verifyDecimalAndThousandSeparatorDoesNotExist: () => {
+        customSettingsSeparatorComponent.decimalPlacesAndToleranceWrapper()
+            .should('not.exist');
+        customSettingsSeparatorComponent.decimalAndThousandSeparatorWrapper()
+            .should('not.exist');
+    },
+
+    /**
+     * This function verifies the label of thousand separator
+     * @param label of the thousand separator
+     */
+    verifyLabelThousandSeparatorLabel: (label: string) => {
+        customSettingsSeparatorComponent.thousandSeparatorLabel()
+            .should('have.text', label);
+    },
+
+    /**
+     * Verifies the existence of the thousand separator toggle options.
+     * @param {string} option - The aria-label of the option to be verified.
+     */
+    verifyThousandSeparatorOptions: (option: string) => {
+        customSettingsSeparatorComponent.thousandSeparatorToggleOptions(option)
+            .should('exist');
+    },
+
+    verifyVisibilityOfDecimalPlacesToBeComparedSection: () => {
+        customSettingsSeparatorComponent.decimalPlacesToBeComparedLabel()
+            .should('have.text', 'Decimal places to be compared');
+        customSettingsSeparatorComponent.decimalPlacesToBeComparedInputField()
+            .should('be.visible');
+    },
+
+    verifyVisibilityOfToleranceSection: () => {
+        customSettingsSeparatorComponent.toleranceLabel()
+            .should('have.text', 'Tolerance');
+        customSettingsSeparatorComponent.toleranceInputField()
+            .should('be.visible');
+    }
+}
+
+export const customSettingsSeparatorComponent = {
+    ...selectors,
+    steps
+}