Merge pull request #11 from penpot/grid_layout

Grid layout

pages/base-page.js

@@ -58,6 +58,19 @@ exports.BasePage = class BasePage {
     this.removeFlexLayout = page.locator(
       'ul[class*="workspace_context_menu"] li:has-text("Remove flex layout")',
     );
+    this.addGridLayout = page.locator(
+      'ul[class*="workspace_context_menu"] li:has-text("Add grid layout")',
+    );
+    this.removeGridLayout = page.locator(
+      'ul[class*="workspace_context_menu"] li:has-text("Remove grid layout")',
+    );
+    this.addRowGridLayoutBtn = page.locator('g[class*="grid-plus-button"]',
+    ).first();
+    this.addColumnGridLayoutBtn = page.locator('g[class*="grid-plus-button"]',
+    ).last();
+    this.removeGridLayout = page.locator(
+      'ul[class*="workspace_context_menu"] li:has-text("Remove grid layout")',
+    );
     this.deleteLayerMenuOption = page.locator(
       'ul[class*="workspace_context_menu"] span:has-text("Delete")',
     );
@@ -253,6 +266,24 @@ exports.BasePage = class BasePage {
     await this.createdBoardTitle.click({ button: 'right', force: true });
     await this.removeFlexLayout.click();
   }
+
+  async addGridLayoutViaRightClick() {
+    await this.createdBoardTitle.click({ button: 'right', force: true });
+    await this.addGridLayout.click();
+  }
+  async removeGridLayoutViaRightClick() {
+    await this.createdBoardTitle.click({ button: 'right', force: true });
+    await this.removeGridLayout.click();
+  }
+
+  async addRowGridLayoutBtnClick() {
+    await this.addRowGridLayoutBtn.click();
+  }
+
+  async addColumnGridLayoutBtnClick() {
+    await this.addColumnGridLayoutBtn.click();
+  }
+
   async showMainComponentViaRightClick() {
     await this.copyLayer.click({ button: 'right', force: true });
     await this.showMainComponentOption.click();

pages/workspace/design-panel-page.js

@@ -98,6 +98,13 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     this.flexElementPositionAbsolute = page.locator(
       'label[for=":absolute-position"] span',
     );
+    this.gridEditButton = page.locator(
+      'button[alt="Grid edit mode"]',
+    );
+    this.gridDoneButton = page.locator(
+      'button[class*="done-btn"]',
+    );
+    this.gridLayoutMenu = page.locator('div[class*="grid-layout-menu"]');
     this.layoutRemoveButton = page.locator(
       'div[class*="layout_container__element-title"] button[class*="remove-layout"]',
     );
@@ -145,6 +152,24 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
       'div[title="Bottom padding"] input',
     );
     this.layoutPaddingLeftInput = page.locator('div[title="Left padding"] input');
+    this.layoutGridJustifyStartBtn = page.locator(
+      'label[title="Justify items start"] span',
+    );
+    this.layoutGridJustifyCenterBtn = page.locator(
+      'label[title="Justify items center"] span',
+    );
+    this.layoutGridJustifyEndBtn = page.locator(
+      'label[title="Justify items end"] span',
+    );
+    this.layoutGridJustifySpaceBetweenBtn = page.locator(
+      'label[title="Justify items space-between"] span',
+    );
+    this.layoutGridJustifySpaceAroundBtn = page.locator(
+      'label[title="Justify items space-around"] span',
+    );
+    this.layoutGridJustifySpaceEvenlyBtn = page.locator(
+      'label[title="Justify items space-evenly"] span',
+    );
 
     //Design panel - Blur section
     this.blurSection = page.locator(
@@ -663,6 +688,13 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     await this.layoutRemoveButton.click();
   }
 
+  async openGridEditModeFromDesignPanel() {
+    await this.gridEditButton.click();
+  }
+  async clickGridDoneButton() {
+    await this.gridDoneButton.click();
+  }
+
   async expandFlexLayoutMenu() {
     if (!(await this.flexLayoutMenu.isVisible())) {
       await this.flexLayoutCollapsedIcon.click();
@@ -670,8 +702,17 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     await expect(this.flexLayoutMenu).toBeVisible();
   }
 
-  async changeLayoutDirection(direction) {
-    await this.expandFlexLayoutMenu();
+  async expandGridLayoutMenu() {
+    if (!(await this.gridLayoutMenu.isVisible())) {
+      await this.flexLayoutCollapsedIcon.click();
+    }
+    await expect(this.gridLayoutMenu).toBeVisible();
+  }
+
+  async changeLayoutDirection(direction, flex = true) {
+    flex
+      ? await this.expandFlexLayoutMenu()
+      : await this.expandGridLayoutMenu();
     switch (direction) {
       case 'Row':
         await this.layoutDirectRowBtn.click();
@@ -688,47 +729,97 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     }
   }
 
-  async changeLayoutAlignment(alignment) {
-    await this.expandFlexLayoutMenu();
-    switch (alignment) {
-      case 'Start':
-        await this.layoutAlignStartBtn.click();
-        break;
-      case 'Center':
-        await this.layoutAlignCenterBtn.click();
-        break;
-      case 'End':
-        await this.layoutAlignEndBtn.click();
-        break;
+  async changeLayoutAlignment(alignment, flex = true) {
+    if(flex) {
+      await this.expandFlexLayoutMenu();
+      switch (alignment) {
+        case 'Start':
+          await this.layoutAlignStartBtn.click();
+          break;
+        case 'Center':
+          await this.layoutAlignCenterBtn.click();
+          break;
+        case 'End':
+          await this.layoutAlignEndBtn.click();
+          break;
+      }
+    } else {
+      await this.expandGridLayoutMenu();
+      switch (alignment) {
+        case 'Start':
+          await this.layoutAlignStartBtn.first().click();
+          await this.layoutAlignStartBtn.last().click();
+          break;
+        case 'Center':
+          await this.layoutAlignCenterBtn.first().click();
+          await this.layoutAlignCenterBtn.last().click();
+          break;
+        case 'End':
+          await this.layoutAlignEndBtn.first().click();
+          await this.layoutAlignEndBtn.last().click();
+          break;
+      }
     }
   }
 
-  async changeLayoutJustification(justify) {
-    await this.expandFlexLayoutMenu();
-    switch (justify) {
-      case 'Start':
-        await this.layoutJustifyStartBtn.click();
-        break;
-      case 'Center':
-        await this.layoutJustifyCenterBtn.click();
-        break;
-      case 'End':
-        await this.layoutJustifyEndBtn.click();
-        break;
-      case 'Space between':
-        await this.layoutJustifySpaceBetweenBtn.click();
-        break;
-      case 'Space around':
-        await this.layoutJustifySpaceAroundBtn.click();
-        break;
-      case 'Space evenly':
-        await this.layoutJustifySpaceEvenlyBtn.click();
-        break;
+  async changeLayoutJustification(justify, flex = true) {
+    if(flex) {
+      await this.expandFlexLayoutMenu();
+      switch (justify) {
+        case 'Start':
+          await this.layoutJustifyStartBtn.click();
+          break;
+        case 'Center':
+          await this.layoutJustifyCenterBtn.click();
+          break;
+        case 'End':
+          await this.layoutJustifyEndBtn.click();
+          break;
+        case 'Space between':
+          await this.layoutJustifySpaceBetweenBtn.click();
+          break;
+        case 'Space around':
+          await this.layoutJustifySpaceAroundBtn.click();
+          break;
+        case 'Space evenly':
+          await this.layoutJustifySpaceEvenlyBtn.click();
+          break;
+      }
+    } else {
+      await this.expandGridLayoutMenu();
+      switch (justify) {
+        case 'Start':
+          await this.layoutGridJustifyStartBtn.first().click();
+          await this.layoutGridJustifyStartBtn.last().click();
+          break;
+        case 'Center':
+          await this.layoutGridJustifyCenterBtn.first().click();
+          await this.layoutGridJustifyCenterBtn.last().click();
+          break;
+        case 'End':
+          await this.layoutGridJustifyEndBtn.first().click();
+          await this.layoutGridJustifyEndBtn.last().click();
+          break;
+        case 'Space between':
+          await this.layoutGridJustifySpaceBetweenBtn.first().click();
+          await this.layoutGridJustifySpaceBetweenBtn.last().click();
+          break;
+        case 'Space around':
+          await this.layoutGridJustifySpaceAroundBtn.first().click();
+          await this.layoutGridJustifySpaceAroundBtn.last().click();
+          break;
+        case 'Space evenly':
+          await this.layoutGridJustifySpaceEvenlyBtn.first().click();
+          await this.layoutGridJustifySpaceEvenlyBtn.last().click();
+          break;
+      }
     }
   }
 
-  async changeLayoutColumnGap(value) {
-    await this.expandFlexLayoutMenu();
+  async changeLayoutColumnGap(value, flex = true) {
+    flex
+      ? await this.expandFlexLayoutMenu()
+      : await this.expandGridLayoutMenu();
     await this.layoutColumnGapInput.clear();
     await this.layoutColumnGapInput.pressSequentially(value);
     await this.clickOnEnter();
@@ -738,15 +829,31 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     await this.layoutColumnGapInput.click();
   }
 
-  async changeLayoutRowGap(value) {
-    await this.expandFlexLayoutMenu();
+  async changeLayoutColumnGapOnGridEdit(value) {
+    await this.layoutColumnGapInput.clear();
+    await this.layoutColumnGapInput.pressSequentially(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutRowGap(value, flex = true) {
+    flex
+      ? await this.expandFlexLayoutMenu()
+      : await this.expandGridLayoutMenu();
     await this.layoutRowGapInput.clear();
     await this.layoutRowGapInput.pressSequentially(value);
     await this.clickOnEnter();
   }
 
-  async changeLayoutPadding(type, value) {
-    await this.expandFlexLayoutMenu();
+  async changeLayoutRowGapOnGridEdit(value) {
+    await this.layoutRowGapInput.clear();
+    await this.layoutRowGapInput.pressSequentially(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutPadding(type, value, flex = true) {
+    flex
+      ? await this.expandFlexLayoutMenu()
+      : await this.expandGridLayoutMenu();
     switch (type) {
       case 'Vertical':
         await this.layoutVerticalPaddingInput.clear();
@@ -768,13 +875,43 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     await this.layoutHorizontPaddingInput.click();
   }
 
-  async switchToIndependentPadding() {
-    await this.expandFlexLayoutMenu();
+  async switchToIndependentPadding(flex = true) {
+    flex
+      ? await this.expandFlexLayoutMenu()
+      : await this.expandGridLayoutMenu();
     await this.layoutIndepPaddingsIcon.click();
   }
 
-  async changeLayoutIndependentPadding(type, value) {
-    await this.expandFlexLayoutMenu();
+  async switchToIndependentPaddingOnGridEdit() {
+    await this.layoutIndepPaddingsIcon.click();
+  }
+
+  async changeLayoutIndependentPadding(type, value, flex = true) {
+    flex
+      ? await this.expandFlexLayoutMenu()
+      : await this.expandGridLayoutMenu();
+    switch (type) {
+      case 'Bottom':
+        await this.layoutPaddingBottomInput.clear();
+        await this.layoutPaddingBottomInput.pressSequentially(value);
+        break;
+      case 'Right':
+        await this.layoutPaddingRightInput.clear();
+        await this.layoutPaddingRightInput.pressSequentially(value);
+        break;
+      case 'Left':
+        await this.layoutPaddingLeftInput.clear();
+        await this.layoutPaddingLeftInput.pressSequentially(value);
+        break;
+      case 'Top':
+        await this.layoutPaddingTopInput.clear();
+        await this.layoutPaddingTopInput.pressSequentially(value);
+        break;
+    }
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutIndependentPaddingOnGridEdit(type, value) {
     switch (type) {
       case 'Bottom':
         await this.layoutPaddingBottomInput.clear();

tests/composition/composition-grid-layout.spec.js

@@ -0,0 +1,162 @@
+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 teamName = random().concat('autotest');
+
+let teamPage,dashboardPage,mainPage,designPanelPage,layersPanelPage;
+test.beforeEach(async ({ page }) => {
+  teamPage = new TeamPage(page);
+  dashboardPage = new DashboardPage(page);
+  mainPage = new MainPage(page);
+  designPanelPage = new DesignPanelPage(page);
+  layersPanelPage = new LayersPanelPage(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)
+});
+
+mainTest('PENPOT-1689,1696 Check grid lines, check edit mode in the right panel', async ({ page }) => {
+  await mainPage.createDefaultBoardByCoordinates(200, 300);
+  await designPanelPage.changeHeightAndWidthForLayer('300', '400');
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.addGridLayoutViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await designPanelPage.isLayoutRemoveButtonExists();
+  await mainPage.clickViewportOnce();
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+  await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-layout.png', {
+    mask: [mainPage.guides],
+  });
+  await designPanelPage.openGridEditModeFromDesignPanel();
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-edit-mode.png', {
+    mask: [mainPage.guides],
+  });
+  await expect(mainPage.fileRightSidebarAside).toHaveScreenshot(
+    'grid-edit-right-sidebar-image.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, 300);
+    await designPanelPage.changeHeightAndWidthForLayer('500', '600');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.addGridLayoutViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.isLayoutRemoveButtonExists();
+
+    await mainPage.createDefaultEllipseByCoordinates(200, 200, true);
+    await mainPage.createComponentViaRightClick();
+    await layersPanelPage.dragAndDropComponentToBoard('Ellipse');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.createDefaultRectangleByCoordinates(200, 200, true);
+    await mainPage.createComponentViaRightClick();
+    await layersPanelPage.dragAndDropComponentToBoard('Rectangle');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.createDefaultEllipseByCoordinates(200, 200, true);
+    await layersPanelPage.dragAndDropComponentToBoard('Ellipse');
+    await mainPage.createDefaultRectangleByCoordinates(200, 200, true);
+    await layersPanelPage.dragAndDropComponentToBoard('Rectangle');
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.waitForChangeIsSaved();
+  });
+
+  mainTest('PENPOT-1690 Change direction', async ({ page }) => {
+    await designPanelPage.changeLayoutDirection('Column', false);
+    await mainPage.waitForChangeIsSaved();
+    await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
+      'column-direction-layer.png',
+    );
+  });
+
+  mainTest('PENPOT-1691 Change alignment', async ({ page }) => {
+    await designPanelPage.changeLayoutAlignment('Center', false);
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-alignment-center.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1692 Change justify - PENPOT-1694 Сhange vertical, horizontal, bottom and left paddings', async ({ page }) => {
+    await designPanelPage.openGridEditModeFromDesignPanel();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.switchToIndependentPaddingOnGridEdit();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.changeLayoutIndependentPaddingOnGridEdit('Top', '50');
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.changeLayoutIndependentPaddingOnGridEdit('Left', '50');
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.changeLayoutIndependentPaddingOnGridEdit('Bottom', '50');
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.changeLayoutIndependentPaddingOnGridEdit('Right', '50');
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-paddings.png', {
+      mask: [mainPage.guides],
+    });
+    await expect(mainPage.fileRightSidebarAside).toHaveScreenshot(
+      'grid-edit-right-sidebar-paddings-image.png',
+      {
+        mask: [mainPage.usersSection],
+      },
+    );
+    await designPanelPage.clickGridDoneButton();
+    await designPanelPage.changeLayoutJustification('Space between', false);
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-justify-space-between.png', {
+      mask: [mainPage.guides],
+    });
+    await expect(mainPage.fileRightSidebarAside).toHaveScreenshot(
+      'right-sidebar-justify-image.png',
+      {
+        mask: [mainPage.usersSection],
+      },
+    );
+  });
+
+  mainTest('PENPOT-1693 Change row gap', async ({ page }) => {
+    await designPanelPage.openGridEditModeFromDesignPanel();
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.changeLayoutRowGapOnGridEdit('50');
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-row-gap.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1695 Change columns and rows', async ({ page }) => {
+    await designPanelPage.openGridEditModeFromDesignPanel();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.addRowGridLayoutBtnClick();
+    await mainPage.addColumnGridLayoutBtnClick();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-3-3.png', {
+      mask: [mainPage.guides],
+    });
+  });
+});