Merge remote-tracking branch 'origin/grid_layout' into grid_layout

# Conflicts:
#	pages/base-page.js

pages/base-page.js

@@ -95,6 +95,12 @@ exports.BasePage = class BasePage {
     this.duplicateOption = page.locator(
       'ul[class*="workspace_context_menu"] span:has-text("Duplicate")',
     );
+    this.copyOption = page.locator(
+      'ul[class*="workspace_context_menu"] span:has-text("Copy")',
+    );
+    this.pasteOption = page.locator(
+      'ul[class*="workspace_context_menu"] span:has-text("Paste")',
+    );
     this.groupOption = page.locator(
       'ul[class*="workspace_context_menu"] span:has-text("Group")',
     );
@@ -171,6 +177,18 @@ exports.BasePage = class BasePage {
     }
   }
 
+  async clickShortcutCtrlD(browserName) {
+    if (getPlatformName() === 'MacOS' || getPlatformName() === 'darwin') {
+      await this.page.keyboard.press('Meta+D');
+    } else {
+      if (browserName !== 'webkit') {
+        await this.page.keyboard.press('Control+D');
+      } else {
+        await this.page.keyboard.press('Meta+D');
+      }
+    }
+  }
+
   async reloadPage() {
     await this.page.reload();
   }

pages/workspace/main-page.js

@@ -884,6 +884,18 @@ exports.MainPage = class MainPage extends BasePage {
     }
   }
 
+  async copyLayerViaRightClick() {
+    const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]');
+    await layerSel.last().click({ button: 'right', force: true });
+    await this.copyOption.click();
+  }
+
+  async pasteLayerViaRightClick() {
+    const layerSel = this.page.locator('div[class="viewport"]');
+    await layerSel.last().click({ button: 'right', force: true });
+    await this.pasteOption.click();
+  }
+
   async duplicateLayerViaRightClick() {
     const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]');
     await layerSel.last().click({ button: 'right', force: true });

tests/components/main-components/component-grid-layout.spec.js

@@ -0,0 +1,349 @@
+const { expect, test } = require('@playwright/test');
+const { mainTest } = require('../../../fixtures');
+const { MainPage } = require('../../../pages/workspace/main-page');
+const { LayersPanelPage } = require('../../../pages/workspace/layers-panel-page');
+const { DesignPanelPage } = require('../../../pages/workspace/design-panel-page');
+const { random } = require('../../../helpers/string-generator');
+const { TeamPage } = require('../../../pages/dashboard/team-page');
+const { DashboardPage } = require('../../../pages/dashboard/dashboard-page');
+const { updateTestResults } = require('../../../helpers/saveTestResults.js');
+const { InspectPanelPage } = require('../../../pages/workspace/inspect-panel-page');
+const { AssetsPanelPage } = require('../../../pages/workspace/assets-panel-page');
+const { ColorPalettePage } = require('../../../pages/workspace/color-palette-page');
+
+const teamName = random().concat('autotest');
+const annotation = 'Test annotation for automation';
+
+let teamPage,dashboardPage,mainPage,designPanelPage,layersPanelPage,inspectPanelPage,assetsPanelPage,colorPalettePage;
+test.beforeEach(async ({ page }) => {
+  teamPage = new TeamPage(page);
+  dashboardPage = new DashboardPage(page);
+  mainPage = new MainPage(page);
+  designPanelPage = new DesignPanelPage(page);
+  inspectPanelPage = new InspectPanelPage(page);
+  assetsPanelPage = new AssetsPanelPage(page);
+  layersPanelPage = new LayersPanelPage(page);
+  colorPalettePage = new ColorPalettePage(page);
+  await teamPage.createTeam(teamName);
+  await teamPage.isTeamSelected(teamName);
+  await dashboardPage.createFileViaPlaceholder();
+  await mainPage.isMainPageLoaded();
+});
+
+test.afterEach(async ({ page }, testInfo) => {
+  const teamPage = new TeamPage(page);
+  const mainPage = new MainPage(page);
+  await mainPage.backToDashboardFromFileEditor();
+  await teamPage.deleteTeam(teamName);
+  await updateTestResults(testInfo.status, testInfo.retry)
+});
+
+test.describe(() => {
+  test.beforeEach(async ({ page, browserName }, testInfo) => {
+    if (browserName === 'webkit') {
+      await testInfo.setTimeout(testInfo.timeout + 20000);
+    } else {
+      await testInfo.setTimeout(testInfo.timeout + 15000);
+    }
+    await mainPage.createDefaultBoardByCoordinates(400, 400);
+    await designPanelPage.changeHeightAndWidthForLayer('300', '400');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.addGridLayoutViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.isLayoutRemoveButtonExists();
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+  });
+
+  mainTest('PENPOT-1717 Create a component from empty Grid Board', async ({}) => {
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('empty-board-component-with-grid-layout.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1724 Create a component from grid board with some element inside, edit component in grid layout section', async ({}) => {
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.clickBoardOnCanvas();
+    await mainPage.doubleClickBoardOnCanvas();
+    await mainPage.changeGridRowLabel('100 PX');
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-px-row.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1729 Move a component between pages', async ({page, context}) => {
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.pressCopyShortcut();
+    await mainPage.clickAddPageButton();
+    await mainPage.clickOnPageOnLayersPanel(false);
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.pressPasteShortcut();
+    await mainPage.waitForChangeIsSaved();
+    await expect(page).toHaveScreenshot('board-component-on-page2.png', {
+      mask: [mainPage.usersSection],
+    });
+  });
+
+  mainTest('PENPOT-1730 Restore main component', async ({browserName, context}) => {
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+    await mainPage.createComponentViaRightClick();
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.pressCopyShortcut();
+    await mainPage.pressPasteShortcut();
+    await layersPanelPage.clickMainComponentOnLayersTab();
+    await layersPanelPage.deleteMainComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await layersPanelPage.clickCopyComponentOnLayersTab();
+    await layersPanelPage.restoreMainComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-main-restore.png', {
+      mask: [mainPage.guides],
+    });
+    await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
+      'copy-paste-layer.png',
+    );
+  });
+
+  mainTest('PENPOT-1731 Undo component editing and deleting', async ({ browserName }) => {
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.clickFillColorIcon();
+    await colorPalettePage.setHex('#0000FF');
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot(
+      'board-component-blue-color.png', {
+        mask: [mainPage.guides],
+      });
+    await mainPage.clickViewportOnce();
+    await mainPage.clickShortcutCtrlZ(browserName);
+    await expect(mainPage.viewport).toHaveScreenshot(
+      'board-component-undo-color.png', {
+        mask: [mainPage.guides],
+      });
+    await layersPanelPage.deleteMainComponentViaRightClick();
+    await expect(mainPage.viewport).toHaveScreenshot(
+      'board-component-deleted.png', {
+        mask: [mainPage.guides],
+      });
+    await mainPage.clickShortcutCtrlZ(browserName);
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot(
+      'board-component-restored.png', {
+        mask: [mainPage.guides],
+      });
+  });
+
+  mainTest('PENPOT-1732,1733,1734 Click "Show main component" in File2', async ({ page, browserName }) => {
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickPencilBoxButton();
+    await dashboardPage.addFileAsSharedLibraryViaRightclick();
+    await dashboardPage.isSharedLibraryIconDisplayed();
+
+    await dashboardPage.createFileViaTitlePanel();
+    await assetsPanelPage.clickAssetsTab();
+    await assetsPanelPage.clickLibrariesButton();
+    await assetsPanelPage.isSharedLibraryVisibleByName('New File 1');
+    await assetsPanelPage.clickSharedLibraryImportButton('New File 1');
+    await assetsPanelPage.clickCloseModalButton();
+    await dashboardPage.reloadPage();
+    await assetsPanelPage.clickAssetsTab();
+    await assetsPanelPage.clickLibraryTitle();
+    await assetsPanelPage.clickLibraryComponentsTitle();
+    await assetsPanelPage.dragAndDropComponentToViewport('Board');
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-from-library-file.png');
+
+    await mainPage.showMainComponentViaRightClick();
+    const newPage = await page.waitForEvent('popup');
+    await expect(newPage).toHaveScreenshot('board-component-on-first-file.png', {
+      mask: [mainPage.usersSection],
+    });
+  });
+
+});
+
+test.describe(() => {
+  test.beforeEach(async ({ page, browserName }, testInfo) => {
+    if (browserName === 'webkit') {
+      await testInfo.setTimeout(testInfo.timeout + 20000);
+    } else {
+      await testInfo.setTimeout(testInfo.timeout + 15000);
+    }
+    await mainPage.createDefaultBoardByCoordinates(400, 400);
+    await designPanelPage.changeHeightAndWidthForLayer('300', '300');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.addGridLayoutViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.isLayoutRemoveButtonExists();
+    await mainPage.clickViewportOnce();
+    await mainPage.createDefaultRectangleByCoordinates(180, 200, true);
+    await layersPanelPage.dragAndDropComponentToBoard('Rectangle');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.duplicateLayerViaLayersTab('Rectangle');
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+  });
+
+  mainTest('PENPOT-1718 Copy-paste component, that was created from grid board', async ({browserName, context}) => {
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.pressCopyShortcut();
+    await mainPage.pressPasteShortcut();
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-copy-paste.png', {
+      mask: [mainPage.guides],
+    });
+    await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
+      'copy-paste-layer.png',
+    );
+  });
+
+  mainTest('PENPOT-1719 Create a component from grid board with some element inside', async ({}) => {
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-with-rectangle.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1728 Duplicate component, that was created from grid board', async ({browserName}) => {
+    await mainPage.clickShortcutCtrlD(browserName);
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-duplicated.png', {
+      mask: [mainPage.guides],
+    });
+    await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
+      'duplicated-layer.png',
+    );
+  });
+
+});
+
+test.describe(() => {
+  test.beforeEach(async ({ page, browserName }, testInfo) => {
+    if (browserName === 'webkit') {
+      await testInfo.setTimeout(testInfo.timeout + 20000);
+    } else {
+      await testInfo.setTimeout(testInfo.timeout + 15000);
+    }
+    await mainPage.createDefaultBoardByCoordinates(100, 100);
+    await designPanelPage.changeHeightAndWidthForLayer('200', '200');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.addGridLayoutViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.isLayoutRemoveButtonExists();
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.clickShortcutCtrlD(browserName);
+    await designPanelPage.changeAxisXandYForLayer('500', '100');
+  });
+
+  mainTest('PENPOT-1720 Change the copy component and click "Update main component"', async ({}) => {
+    await designPanelPage.changeHeightAndWidthForLayer('25', '25');
+    await layersPanelPage.updateMainComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-main-updated.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1721 Change the copy component and click "Show main component"', async ({}) => {
+    await designPanelPage.clickFillColorIcon();
+    await colorPalettePage.setHex('#000000');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.showMainComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-main-show.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1722 Change the copy component and click "Reset overrides"', async ({}) => {
+    await designPanelPage.clickFillColorIcon();
+    await colorPalettePage.setHex('#000000');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.resetOverridesViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-reset-overrides.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1723 Change the copy component and click "Detach instance"', async ({}) => {
+    await designPanelPage.changeHeightAndWidthForLayer('25', '25');
+    await mainPage.waitForChangeIsSaved();
+    await layersPanelPage.detachInstanceCopyComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-component-with-grid-layout-detach-instance.png', {
+      mask: [mainPage.guides],
+    });
+    await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
+      'detach-instance-layer.png',
+    );
+  });
+
+});
+
+test.describe(() => {
+  test.beforeEach(async ({ page, browserName }, testInfo) => {
+    if (browserName === 'webkit') {
+      await testInfo.setTimeout(testInfo.timeout + 20000);
+    } else {
+      await testInfo.setTimeout(testInfo.timeout + 15000);
+    }
+    await mainPage.createDefaultBoardByCoordinates(400, 400);
+    await designPanelPage.changeHeightAndWidthForLayer('300', '400');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.addGridLayoutViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.isLayoutRemoveButtonExists();
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.createComponentViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.createAnnotationRightClick();
+    await designPanelPage.addAnnotationForComponent(annotation);
+    await designPanelPage.waitForChangeIsSaved();
+
+  });
+
+  mainTest('PENPOT-1725 Create annotation for component', async ({}) => {
+    await designPanelPage.isAnnotationAddedToComponent(annotation);
+    await expect(designPanelPage.componentBlockOnDesignTab).toHaveScreenshot(
+      'component-annotation.png',
+    );
+  });
+
+  mainTest('PENPOT-1726 Edit annotation for component', async ({}) => {
+    await designPanelPage.clickOnEditAnnotation();
+    await designPanelPage.editAnnotationForComponent('Edit annotation');
+    await designPanelPage.waitForChangeIsSaved();
+    await designPanelPage.isAnnotationAddedToComponent('Edit annotation');
+    await expect(designPanelPage.componentBlockOnDesignTab).toHaveScreenshot(
+      'component-annotation-edit.png',
+    );
+  });
+
+  mainTest('PENPOT-1727 Delete annotation for component', async ({}) => {
+    await designPanelPage.clickOnDeleteAnnotation();
+    await designPanelPage.confirmDeleteAnnotation();
+    await designPanelPage.waitForChangeIsSaved();
+    await expect(designPanelPage.componentBlockOnDesignTab).toHaveScreenshot(
+      'component-annotation-delete.png',
+    );
+  });
+
+});