1751,1749 tests added

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")',
     );

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();
   }

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();

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 });

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',
+    );
+  },
+);