itemengine-cypress-automation 1.0.199 → 1.0.200

package/cypress/pages/components/draggableOptionsStyleAndLayoutComponent.js

@@ -0,0 +1,444 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
+const selectors = {
+    draggableOptionsLabel: () => cy.get('.draggable-options-label'),
+    dragHandleIconLabel: () => cy.get('[class*="styles__SubSectionLabel"]').eq(2),
+    defaultDragHandleIconButton: () => cy.get('button[aria-label="default drag handle icon"]'),
+    arrowsDragHandleIconButton: () => cy.get('button[aria-label="arrows drag handle icon"]'),
+    noneDragHandleIconButton: () => cy.get('button[aria-label="none drag handle icon"]'),
+    fillColorLabel: () => cy.get('.draggable-options-color-wrapper .sub-section-label').eq(0),
+    borderColorLabel: () => cy.get('.draggable-options-color-wrapper .sub-section-label').eq(1),
+    colorBlock: () => cy.get('.draggable-options-color-wrapper .color-picker-block'),
+    editColorButton: () => cy.get('.draggable-options-color-wrapper button[aria-label="edit color"]'),
+    borderStyleLabel: () => cy.get('.options-border-style .options-label').eq(1),
+    dashedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dashed-toggle-button"]').eq(1),
+    dottedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dotted-toggle-button"]').eq(1),
+    solidBorderStyleToggleButton: () => cy.get('[data-ngie-testid="solid-toggle-button"]').eq(1),
+    noneBorderStyleToggleButton: () => cy.get('[data-ngie-testid="none-toggle-button"]').eq(1),
+    colorBlockSelectedIcon: () => cy.get('[class*="BtnSelectionWrapper"] svg'),
+    draggableOptionPanelLabel: () => cy.get('.draggable-option-panel-label'),
+    panelPlacementLabel: () => cy.get('.panel-placement-style .options-label'),
+    bottomPanelPlacementToggleButton: () => cy.get('[data-ngie-testid="bottom-toggle-button"]'),
+    topPanelPlacementToggleButton: () => cy.get('[data-ngie-testid="top-toggle-button"]'),
+    leftPanelPlacementToggleButton: () => cy.get('.panel-placement-style [data-ngie-testid="left-toggle-button"]'),
+    rightPanelPlacementToggleButton: () => cy.get('.panel-placement-style [data-ngie-testid="right-toggle-button"]'),
+    optionAlignmentInPanelLabel: () => cy.get('.option-alignment .options-label'),
+    leftOptionAlignmentToggleButton: () => cy.get('.option-alignment [data-ngie-testid="left-toggle-button"]'),
+    centerOptionAlignmentToggleButton: () => cy.get('.option-alignment [data-ngie-testid="center-toggle-button"]'),
+    rightOptionAlignmentToggleButton: () => cy.get('.option-alignment [data-ngie-testid="right-toggle-button"]'),
+}
+
+const steps = {
+    /**
+     * Selects and verifies the panel placement toggle button.
+     * @param {('Bottom' | 'Top' | 'Left' | 'Right')} panelPlacement - The placement of the panel.
+     * @throws {Error} If an invalid panel placement is provided.
+     */
+    selectPanelPlacementToggleButton: (panelPlacement) => {
+        switch (panelPlacement) {
+            case 'Bottom':
+                draggableOptionsStyleAndLayoutComponent.bottomPanelPlacementToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Top':
+                draggableOptionsStyleAndLayoutComponent.topPanelPlacementToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Left':
+                draggableOptionsStyleAndLayoutComponent.leftPanelPlacementToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Right':
+                draggableOptionsStyleAndLayoutComponent.rightPanelPlacementToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid placement');
+        }
+    },
+
+    /**
+     * Verifies the selected state of the panel placement toggle button.
+     * @param {('Bottom' | 'Top' | 'Left' | 'Right')} panelPlacement - The placement of the panel.
+     * @throws {Error} If an invalid panel placement button is provided.
+     */
+    verifyPanelPlacementToggleButtonSelectedState: (panelPlacement) => {
+        switch (panelPlacement) {
+            case 'Bottom':
+                draggableOptionsStyleAndLayoutComponent.bottomPanelPlacementToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Top':
+                draggableOptionsStyleAndLayoutComponent.topPanelPlacementToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Left':
+                draggableOptionsStyleAndLayoutComponent.leftPanelPlacementToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Right':
+                draggableOptionsStyleAndLayoutComponent.rightPanelPlacementToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid placement button');
+        }
+    },
+
+    /**
+     * Selects and verifies the option alignment toggle button.
+     * @param {('Left' | 'Center' | 'Right')} optionAlignment - The alignment of the options.
+     * @throws {Error} If an invalid option alignment button is provided.
+     */
+    selectOptionAlignmentToggleButton: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                draggableOptionsStyleAndLayoutComponent.leftOptionAlignmentToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Center':
+                draggableOptionsStyleAndLayoutComponent.centerOptionAlignmentToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Right':
+                draggableOptionsStyleAndLayoutComponent.rightOptionAlignmentToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid option alignment button');
+        }
+    },
+
+    /**
+     * Verifies the selected state of the option alignment toggle button.
+     *
+     * @param {('Left' | 'Center' | 'Right')} optionAlignment - The alignment of the options.
+     * @throws {Error} If an invalid option alignment button is provided.
+     */
+    verifyOptionAlignmentToggleButtonSelectedState: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                draggableOptionsStyleAndLayoutComponent.leftOptionAlignmentToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Center':
+                draggableOptionsStyleAndLayoutComponent.centerOptionAlignmentToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Right':
+                draggableOptionsStyleAndLayoutComponent.rightOptionAlignmentToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid option alignment button');
+        }
+    },
+
+    /**
+     * Verifies the selected state of the drag handle icon button.
+     * @param {('Default' | 'Arrows' | 'None')} iconButton - The type of drag handle icon.
+     * @throws {Error} If an invalid drag handle icon is provided.
+     */
+    verifyDragHandleIconSelectedState: (iconButton) => {
+        switch (iconButton) {
+            case 'Default':
+                draggableOptionsStyleAndLayoutComponent.defaultDragHandleIconButton()
+                    .should('have.class', 'selected-button-icon');
+                break;
+            case 'Arrows':
+                draggableOptionsStyleAndLayoutComponent.arrowsDragHandleIconButton()
+                    .should('have.class', 'selected-button-icon');
+                break;
+            case 'None':
+                draggableOptionsStyleAndLayoutComponent.noneDragHandleIconButton()
+                    .should('have.class', 'selected-button-icon');
+                break;
+            default:
+                throw new Error('Invalid drag handle icon');
+        }
+    },
+
+    /**
+     * Selects and verifies the drag handle icon button.
+     * @param {('Default' | 'Arrows' | 'None')} iconButton - The type of drag handle icon.
+     * @throws {Error} If an invalid drag handle icon is provided.
+     */
+    selectDragHandleIconButton: (iconButton) => {
+        switch (iconButton) {
+            case 'Default':
+                draggableOptionsStyleAndLayoutComponent.defaultDragHandleIconButton()
+                    .click()
+                    .should('have.class', 'selected-button-icon');
+                break;
+            case 'Arrows':
+                draggableOptionsStyleAndLayoutComponent.arrowsDragHandleIconButton()
+                    .click()
+                    .should('have.class', 'selected-button-icon');
+                break;
+            case 'None':
+                draggableOptionsStyleAndLayoutComponent.noneDragHandleIconButton()
+                    .click()
+                    .should('have.class', 'selected-button-icon');
+                break;
+            default:
+                throw new Error('Invalid drag handle icon');
+        }
+    },
+
+    /**
+     * Clicks on the edit color button.
+     * @param {number} buttonIndex - The index of the edit color button.
+     */
+    editDraggableOptionColor: (buttonIndex) => {
+        utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.editColorButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the color of a color block.
+     * @param {number} blockIndex - The index of the color block.
+     * @param {string} color - The expected background color of the color block.
+     */
+    verifyDraggableOptionColorBlockColor: (blockIndex, color) => {
+        utilities.verifyCSS(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), blockIndex), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * @param {number} blockIndex index of the color block in the style and layout customization section
+     * @description this function verifies the selected state of a block
+     */
+    verifyDraggableOptionColorBlockSelectedState: (blockIndex) => {
+        utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), blockIndex)
+            .should('have.class', 'selected-button-icon')
+            .within(() => {
+                utilities.verifyElementVisibilityState(draggableOptionsStyleAndLayoutComponent.colorBlockSelectedIcon(), 'visible');
+            });
+    },
+
+    /**
+     * Selects a border style toggle button and verifies it has the selected class.
+     * @param {('Dashed' | 'Dotted' | 'Solid' | 'None')} button - The border style to select.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    selectDraggableOptionBorderStyleToggleButton: (button) => {
+        switch (button) {
+            case 'Dashed':
+                draggableOptionsStyleAndLayoutComponent.dashedBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Dotted':
+                draggableOptionsStyleAndLayoutComponent.dottedBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                draggableOptionsStyleAndLayoutComponent.solidBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                draggableOptionsStyleAndLayoutComponent.noneBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * Verifies the selected state of a border style toggle button.
+     * @param {('Dashed' | 'Dotted' | 'Solid' | 'None')} button - The border style to verify.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    verifyDraggableOptionBorderStyleToggleButtonSelectedState: (button) => {
+        switch (button) {
+            case 'Dashed':
+                draggableOptionsStyleAndLayoutComponent.dashedBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Dotted':
+                draggableOptionsStyleAndLayoutComponent.dottedBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                draggableOptionsStyleAndLayoutComponent.solidBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                draggableOptionsStyleAndLayoutComponent.noneBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * Selects a color block by index.
+     * @param {number} blockIndex - The index of the color block to select.
+     */
+    selectDraggableOptionColorBlock: (blockIndex) => {
+        utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), blockIndex)
+            .click();
+    }
+}
+
+const tests = {
+    verifyDraggableOptionsFillColorSectionContents: () => {
+        it('"Fill color" label and two color blocks and an "Edit color" button should be displayed. The selected color block should be of color "rgb(245, 248, 255)" and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(draggableOptionsStyleAndLayoutComponent.fillColorLabel(), 'Fill color');
+            draggableOptionsStyleAndLayoutComponent.steps.verifyDraggableOptionColorBlockColor(0, css.color.defaultBackground);
+            draggableOptionsStyleAndLayoutComponent.steps.verifyDraggableOptionColorBlockSelectedState(0);
+            draggableOptionsStyleAndLayoutComponent.steps.verifyDraggableOptionColorBlockColor(1, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.editColorButton(), 0), 'Edit color');
+            utilities.verifyElementVisibilityState(draggableOptionsStyleAndLayoutComponent.editColorButton(), 'visible');
+        });
+    },
+
+    verifyDraggableOptionsBorderColorSectionContents: () => {
+        it('"Border color" label and two color blocks and an "Edit color" button should be displayed. The selected color block should be of color "rgb(82, 0, 255) and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(draggableOptionsStyleAndLayoutComponent.borderColorLabel(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.editColorButton(), 1), 'Edit color');
+            utilities.verifyElementVisibilityState(draggableOptionsStyleAndLayoutComponent.editColorButton(), 'visible');
+            draggableOptionsStyleAndLayoutComponent.steps.verifyDraggableOptionColorBlockColor(2, css.color.figDefaultComponentBorder);
+            draggableOptionsStyleAndLayoutComponent.steps.verifyDraggableOptionColorBlockSelectedState(2);
+            draggableOptionsStyleAndLayoutComponent.steps.verifyDraggableOptionColorBlockColor(3, css.color.none);
+        });
+    },
+
+    verifyDraggableOptionsBorderStyleSectionContents: () => {
+        it('"Border style" label and four toggle buttons should be displayed - "Dashed", "Dotted", "Solid", "None". By default "Solid" button should be in selected state', () => {
+            utilities.verifyInnerText(draggableOptionsStyleAndLayoutComponent.borderStyleLabel(), 'Border style');
+            utilities.verifyInnerText(draggableOptionsStyleAndLayoutComponent.dashedBorderStyleToggleButton(), 'Dashed');
+            utilities.verifyElementVisibilityState(draggableOptionsStyleAndLayoutComponent.dashedBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(draggableOptionsStyleAndLayoutComponent.dottedBorderStyleToggleButton(), 'Dotted');
+            utilities.verifyElementVisibilityState(draggableOptionsStyleAndLayoutComponent.dottedBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(draggableOptionsStyleAndLayoutComponent.solidBorderStyleToggleButton(), 'Solid');
+            utilities.verifyElementVisibilityState(draggableOptionsStyleAndLayoutComponent.solidBorderStyleToggleButton(), 'visible');
+            draggableOptionsStyleAndLayoutComponent.steps.verifyDraggableOptionBorderStyleToggleButtonSelectedState('Solid');
+            utilities.verifyInnerText(draggableOptionsStyleAndLayoutComponent.noneBorderStyleToggleButton(), 'None');
+            utilities.verifyElementVisibilityState(draggableOptionsStyleAndLayoutComponent.noneBorderStyleToggleButton(), 'visible');
+        });
+    },
+
+    verifyDraggableOptionsFillColorTooltips: () => {
+        it('When the user hovers over the color blocks in the "Fill color" section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), 0).verifyTooltip('#FFFFFF');
+            utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), 1).verifyTooltip('None');
+        });
+    },
+
+    verifyDraggableOptionsBorderColorTooltips: () => {
+        it('When the user hovers over the color blocks in the "Border color" section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), 2).verifyTooltip('#6B8BFF');
+            utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), 3).verifyTooltip('None');
+        });
+    },
+
+    verifyDraggableOptionSectionContentsCSSAndA11y: () => {
+        it('CSS of "Draggable options section" contents"', { tags: 'css' }, () => {
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.draggableOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.dragHandleIconLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.fillColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.borderColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), 0), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.editColorButton(), 0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.borderStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.dottedBorderStyleToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.solidBorderStyleToggleButton(), {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.secondaryBtnActive}`
+            });
+        });
+
+        it('Accessibility of "Draggable options section" contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(draggableOptionsStyleAndLayoutComponent.draggableOptionsLabel().parents('.ngie-accordion-detail'))
+        });
+
+        it('CSS of "Draggable options section" - hover state', { tags: 'css' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible');
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'background-color': css.color.tooltipBg,
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.triggerMouseout(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.colorBlock(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+            utilities.hoverOverElement(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.editColorButton(), 0));
+            utilities.verifyCSS(utilities.getNthElement(draggableOptionsStyleAndLayoutComponent.editColorButton(), 0), {
+                'background-color': css.color.optionsBg,
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.hoverAwayFromElement();
+            utilities.hoverOverElement(draggableOptionsStyleAndLayoutComponent.dottedBorderStyleToggleButton());
+            utilities.verifyCSS(draggableOptionsStyleAndLayoutComponent.dottedBorderStyleToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.hoverAwayFromElement();
+        });
+    }
+}
+
+export const draggableOptionsStyleAndLayoutComponent = {
+    ...selectors,
+    steps,
+    tests
+}