diff --git a/pages/base-page.js b/pages/base-page.js index ee0365d..f257615 100644 --- a/pages/base-page.js +++ b/pages/base-page.js @@ -95,6 +95,9 @@ exports.BasePage = class BasePage { this.duplicateOption = page.locator( 'ul[class*="workspace_context_menu"] span:has-text("Duplicate")', ); + this.groupOption = page.locator( + 'ul[class*="workspace_context_menu"] span:has-text("Group")', + ); this.showMainComponentOption = page.locator( 'ul[class*="workspace_context_menu"] span:has-text("Show main component")', ); diff --git a/pages/workspace/design-panel-page.js b/pages/workspace/design-panel-page.js index f49479d..033807a 100644 --- a/pages/workspace/design-panel-page.js +++ b/pages/workspace/design-panel-page.js @@ -28,6 +28,9 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { this.yAxisInput = page.locator('div[title="Y axis"] input'); //Design panel - Fill section + this.firstColorIcon = page.locator( + 'div[class*="color_bullet__color-bullet-wrapper"]', + ).first(); this.fillColorIcon = page.locator( 'div[class*="fill__element-set"] div[class*="color_bullet__color-bullet-wrapper"]', ); @@ -50,6 +53,9 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { this.shadowSection = page.locator( 'div[class*="shadow__element-title"]:has-text("Shadow")', ); + this.groupShadowSection = page.locator( + 'div[class*="shadow__element-title"]:has-text("Group shadow")', + ); this.addShadowButton = page.locator('button[class*="shadow__add-shadow"]'); this.shadowActionsButton = page.locator('button[class*="shadow__more-options"]'); this.shadowXInput = page.locator( @@ -434,6 +440,9 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { } } + async clickFirstColorIcon() { + await this.firstColorIcon.click(); + } async clickFillColorIcon() { await this.fillColorIcon.click(); } @@ -542,6 +551,11 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { await this.addShadowButton.click(); } + async clickAddGroupShadowButton() { + await this.groupShadowSection.waitFor(); + await this.addShadowButton.click(); + } + async clickShadowActionsButton() { await this.shadowActionsButton.click(); } diff --git a/pages/workspace/layers-panel-page.js b/pages/workspace/layers-panel-page.js index 02fa887..8103ac5 100644 --- a/pages/workspace/layers-panel-page.js +++ b/pages/workspace/layers-panel-page.js @@ -44,6 +44,13 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage { ); } + async expandGroupOnLayersTab() { + if (!(await this.layerItemToggleExpand.isVisible())) { + await this.layerBoardToggleContentCollapse.first().click(); + await expect(this.layerItemToggleExpand).toBeVisible(); + } + } + async expandBoardOnLayersTab() { if (!(await this.layerItemToggleExpand.isVisible())) { await this.layerBoardToggleContentCollapse.click(); diff --git a/pages/workspace/main-page.js b/pages/workspace/main-page.js index 2f7323c..f9ddb10 100644 --- a/pages/workspace/main-page.js +++ b/pages/workspace/main-page.js @@ -898,6 +898,12 @@ exports.MainPage = class MainPage extends BasePage { await this.duplicateOption.click(); } + async groupLayerViaRightClick() { + const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]'); + await layerSel.last().click({ button: 'right', force: true }); + await this.groupOption.click(); + } + async showInAssetsPanelRightClick() { const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]'); await layerSel.last().click({ button: 'right', force: true }); diff --git a/tests/components/main-components/create-main-components.spec.js b/tests/components/main-components/create-main-components.spec.js index 62e1b42..2f0d07c 100644 --- a/tests/components/main-components/create-main-components.spec.js +++ b/tests/components/main-components/create-main-components.spec.js @@ -8,6 +8,7 @@ const { LayersPanelPage } = require('../../../pages/workspace/layers-panel-page' const { AssetsPanelPage } = require('../../../pages/workspace/assets-panel-page'); const { DesignPanelPage } = require('../../../pages/workspace/design-panel-page'); const { updateTestResults } = require('./../../../helpers/saveTestResults.js'); +const { ColorPalettePage } = require('../../../pages/workspace/color-palette-page'); const teamName = random().concat('autotest'); @@ -299,3 +300,56 @@ mainTest( ); }, ); + +mainTest('PENPOT-1751 Grouping component copies', + async ( {page}, testInfo) => { + await testInfo.setTimeout(testInfo.timeout + 20000); + + const mainPage = new MainPage(page); + const layersPanelPage = new LayersPanelPage(page); + await mainPage.createDefaultEllipseByCoordinates(200, 200); + await mainPage.createComponentViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await mainPage.createDefaultRectangleByCoordinates(500, 200, true); + await mainPage.createComponentViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickMainMenuButton(); + await mainPage.clickEditMainMenuItem(); + await mainPage.clickSelectAllMainMenuSubItem(); + await mainPage.waitForChangeIsSaved(); + await mainPage.duplicateLayerViaRightClick(); + await mainPage.groupLayerViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.expandGroupOnLayersTab(); + await expect(layersPanelPage.layersSidebar).toHaveScreenshot( + 'copy-components-group-layers.png', + ); + }, +); + +mainTest('PENPOT-1749 Change group shadow color', + async ( {page}, testInfo) => { + await testInfo.setTimeout(testInfo.timeout + 20000); + + const mainPage = new MainPage(page); + const designPanelPage = new DesignPanelPage(page); + const colorPalettePage = new ColorPalettePage(page); + await mainPage.createDefaultRectangleByCoordinates(200, 200); + await mainPage.createComponentViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await mainPage.groupLayerViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await designPanelPage.clickAddGroupShadowButton(); + await mainPage.waitForChangeIsSaved(); + await designPanelPage.clickFirstColorIcon(); + await colorPalettePage.setHex('#ff0000'); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + + await expect(mainPage.viewport).toHaveScreenshot( + 'components-change-group-shadow-color.png', + ); + }, +); diff --git a/tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/components-change-group-shadow-color.png b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/components-change-group-shadow-color.png new file mode 100644 index 0000000..50793e3 Binary files /dev/null and b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/components-change-group-shadow-color.png differ diff --git a/tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/copy-components-group-layers.png b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/copy-components-group-layers.png new file mode 100644 index 0000000..7685e47 Binary files /dev/null and b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/chrome/copy-components-group-layers.png differ diff --git a/tests/components/main-components/create-main-components.spec.js-snapshots/win32/firefox/components-change-group-shadow-color.png b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/firefox/components-change-group-shadow-color.png new file mode 100644 index 0000000..70ab926 Binary files /dev/null and b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/firefox/components-change-group-shadow-color.png differ diff --git a/tests/components/main-components/create-main-components.spec.js-snapshots/win32/firefox/copy-components-group-layers.png b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/firefox/copy-components-group-layers.png new file mode 100644 index 0000000..78c5b9f Binary files /dev/null and b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/firefox/copy-components-group-layers.png differ diff --git a/tests/components/main-components/create-main-components.spec.js-snapshots/win32/webkit/components-change-group-shadow-color.png b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/webkit/components-change-group-shadow-color.png new file mode 100644 index 0000000..4041eeb Binary files /dev/null and b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/webkit/components-change-group-shadow-color.png differ diff --git a/tests/components/main-components/create-main-components.spec.js-snapshots/win32/webkit/copy-components-group-layers.png b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/webkit/copy-components-group-layers.png new file mode 100644 index 0000000..a6218e5 Binary files /dev/null and b/tests/components/main-components/create-main-components.spec.js-snapshots/win32/webkit/copy-components-group-layers.png differ