synchronization and different page components test added (1478,1479,1480,1482,1483,1519,1526,1527)

pages/workspace/layers-panel-page.js

@@ -170,6 +170,10 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
     await this.mainComponentLayer.last().click();
   }
 
+  async clickNMainComponentOnLayersTab(index) {
+    await this.mainComponentLayer.nth(index).click();
+  }
+
   async doubleClickCopyComponentOnLayersTab() {
     const layer = this.page.locator(
       `div[class*="element-list-body"] span[class*="element-name"]`,

pages/workspace/main-page.js

@@ -525,6 +525,30 @@ exports.MainPage = class MainPage extends BasePage {
     }
   }
 
+  async pressCopyShortcut(browserName) {
+    if (getPlatformName() === 'MacOS') {
+      await this.page.keyboard.press('Meta+C');
+    } else {
+      if (browserName === 'webkit') {
+        await this.page.keyboard.press('Meta+C');
+      } else {
+        await this.page.keyboard.press('Control+C');
+      }
+    }
+  }
+
+  async pressPasteShortcut(browserName) {
+    if (getPlatformName() === 'MacOS') {
+      await this.page.keyboard.press('Meta+V');
+    } else {
+      if (browserName === 'webkit') {
+        await this.page.keyboard.press('Meta+V');
+      } else {
+        await this.page.keyboard.press('Control+V');
+      }
+    }
+  }
+
   async clickShowBoardNamesMainMenuSubItem() {
     await this.showBoardNamesMainMenuSubItem.click();
   }

tests/components/main-components/update-main-components.spec.js

@@ -372,3 +372,158 @@ test.describe(() => {
     },
   );
 });
+
+mainTest('PENPOT-1478 Changed direct, not overriden', async () => {
+  await mainPage.createDefaultRectangleByCoordinates(200, 300);
+  await mainPage.createComponentViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('400', '500');
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickMainComponentOnLayersTab();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#093EDC');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    '1478-component-update-canvas.png'
+  );
+  await assetsPanelPage.clickAssetsTab();
+  await assetsPanelPage.expandComponentsBlockOnAssetsTab();
+  await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
+    '1478-component-update-asset.png',
+  );
+});
+
+mainTest('PENPOT-1479 Changed remote, not overriden', async () => {
+  await mainPage.createDefaultRectangleByCoordinates(200, 300);
+  await mainPage.createComponentViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('400', '500');
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.createComponentViaRightClick();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('200', '500');
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickMainComponentOnLayersTab();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#C41ABC');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    '1479-component-update-canvas.png'
+  );
+  await assetsPanelPage.clickAssetsTab();
+  await assetsPanelPage.expandComponentsBlockOnAssetsTab();
+  await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
+    '1479-component-update-asset.png',
+  );
+});
+
+mainTest('PENPOT-1480 Changed direct, overriden in copy', async () => {
+  await mainPage.createDefaultRectangleByCoordinates(200, 300);
+  await mainPage.createComponentViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('400', '500');
+  await mainPage.waitForChangeIsSaved();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#DC08D3');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickMainComponentOnLayersTab();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#660E62');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    '1480-component-update-canvas.png'
+  );
+  await assetsPanelPage.clickAssetsTab();
+  await assetsPanelPage.expandComponentsBlockOnAssetsTab();
+  await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
+    '1480-component-update-asset.png',
+  );
+});
+
+mainTest('PENPOT-1482 Changed remote, overriden in copy', async () => {
+  await mainPage.createDefaultRectangleByCoordinates(200, 300);
+  await mainPage.createComponentViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('400', '500');
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.createComponentViaRightClick();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('200', '500');
+  await mainPage.waitForChangeIsSaved();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#0F602A');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickMainComponentOnLayersTab();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#C41ABC');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    '1482-component-update-canvas.png'
+  );
+  await assetsPanelPage.clickAssetsTab();
+  await assetsPanelPage.expandComponentsBlockOnAssetsTab();
+  await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
+    '1482-component-update-asset.png',
+  );
+});
+
+mainTest('PENPOT-1483 Changed remote, overriden in near, overriden in copy', async () => {
+  await mainPage.createDefaultRectangleByCoordinates(200, 300);
+  await mainPage.createComponentViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('400', '500');
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.createComponentViaRightClick();
+  await mainPage.duplicateLayerViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await designPanelPage.changeAxisXandYForLayer('200', '500');
+  await mainPage.waitForChangeIsSaved();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#0F602A');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickNMainComponentOnLayersTab(-2);
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#83B092');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await layersPanelPage.clickMainComponentOnLayersTab();
+  await designPanelPage.clickComponentFillColorIcon();
+  await colorPalettePage.setHex('#326F46');
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    '1483-component-update-canvas.png'
+  );
+  await assetsPanelPage.clickAssetsTab();
+  await assetsPanelPage.expandComponentsBlockOnAssetsTab();
+  await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
+    '1483-component-update-asset.png',
+  );
+});

tests/panels-features/panels-features-pages.spec.js

@@ -4,6 +4,11 @@ const { expect, test } = require('@playwright/test');
 const { random } = require('../../helpers/string-generator');
 const { TeamPage } = require('../../pages/dashboard/team-page');
 const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
+const { BasePage } = require('../../pages/base-page');
+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 { ColorPalettePage } = require('../../pages/workspace/color-palette-page');
 
 const teamName = random().concat('autotest');
 
@@ -99,3 +104,82 @@ mainTest('PF-119 Delete page', async ({ page }) => {
   await mainPage.isFirstPageNameDisplayed('Page 1');
   await expect(mainPage.pagesBlock).toHaveScreenshot('page-1.png');
 });
+
+mainTest('PENPOT-1519 Copy and paste components from Page 1 to Page 2, on Page 2 right-click component and select "Show main component"',
+  async ({ page, browserName }) => {
+  const mainPage = new MainPage(page);
+  const basePage = new BasePage(page);
+  const layersPanelPage = new LayersPanelPage(page);
+  await mainPage.createDefaultRectangleByCoordinates(300, 300);
+  await mainPage.createComponentViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.pressCopyShortcut(browserName);
+  await mainPage.clickAddPageButton();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.clickOnPageOnLayersPanel(false);
+  await mainPage.pressPasteShortcut(browserName);
+  await layersPanelPage.clickCopyComponentOnLayersTab();
+  await basePage.showMainComponentViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    'page-copies-component-show-main.png',
+  );
+});
+
+mainTest('PENPOT-1526 Add a component from local library to Page 1 and Page 2, edit component on Page 2 and click "Reset overrides"',
+  async ({ page }) => {
+    const mainPage = new MainPage(page);
+    const basePage = new BasePage(page);
+    const layersPanelPage = new LayersPanelPage(page);
+    const assetsPanelPage = new AssetsPanelPage(page);
+    const designPanelPage = new DesignPanelPage(page);
+    await mainPage.createDefaultRectangleByCoordinates(300, 300);
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickAddPageButton();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickOnPageOnLayersPanel(false);
+    await assetsPanelPage.clickAssetsTab();
+    await assetsPanelPage.expandComponentsBlockOnAssetsTab();
+    await assetsPanelPage.dragComponentOnCanvas(100, 100);
+    await layersPanelPage.openLayersTab();
+    await mainPage.waitForChangeIsSaved();
+    await layersPanelPage.clickCopyComponentOnLayersTab();
+    await designPanelPage.changeHeightAndWidthForLayer('100', '150');
+    await basePage.resetOverridesViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot(
+      'page-copies-component-reset-overrides.png',
+    );
+  });
+
+mainTest('PENPOT-1527 Add a component from local library to Page 1 and Page 2, edit component on Page 2 and click "Update main component"',
+  async ({ page }) => {
+    const mainPage = new MainPage(page);
+    const layersPanelPage = new LayersPanelPage(page);
+    const assetsPanelPage = new AssetsPanelPage(page);
+    const designPanelPage = new DesignPanelPage(page);
+    const colorPalettePage = new ColorPalettePage(page);
+    await mainPage.createDefaultRectangleByCoordinates(200, 200);
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickAddPageButton();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickOnPageOnLayersPanel(false);
+    await assetsPanelPage.clickAssetsTab();
+    await assetsPanelPage.expandComponentsBlockOnAssetsTab();
+    await assetsPanelPage.dragComponentOnCanvas(500, 500);
+    await layersPanelPage.openLayersTab();
+    await mainPage.waitForChangeIsSaved();
+    await layersPanelPage.clickCopyComponentOnLayersTab();
+    await designPanelPage.clickComponentFillColorIcon();
+    await colorPalettePage.setHex('#243E8E');
+    await layersPanelPage.clickCopyComponentOnLayersTab();
+    await mainPage.waitForChangeIsSaved();
+    await layersPanelPage.updateMainComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickOnPageOnLayersPanel(true);
+    await expect(mainPage.viewport).toHaveScreenshot(
+      'page-copies-component-update-main.png',
+    );
+  });