Add tests for Flex Layout feature (firefox, chrome, webkit)

pages/base-page.js

@@ -18,4 +18,8 @@ exports.BasePage = class BasePage {
   async reloadPage() {
     await this.page.reload();
   }
+
+  async clickOnEnter() {
+    await this.page.keyboard.press("Enter");
+  }
 };

pages/main-page.js

@@ -51,6 +51,12 @@ exports.MainPage = class MainPage extends BasePage {
     this.editPathMenuItem = page.locator(
       'ul[class="workspace-context-menu"] li:has-text("Edit")'
     );
+    this.addFlexLayout = page.locator(
+      'ul[class="workspace-context-menu"] li:has-text("Add flex layout")'
+    );
+    this.removeFlexLayout = page.locator(
+      'ul[class="workspace-context-menu"] li:has-text("Remove flex layout")'
+    );
 
     //Layers panel
     this.layersTab = page.locator('div[data-id=":layers"]');
@@ -66,6 +72,7 @@ exports.MainPage = class MainPage extends BasePage {
     this.searchedLayerOnLayersPanelNameText = page.locator(
       'span[class="element-name"] >> nth=1'
     );
+    this.layoutIcon = page.locator('svg[class="icon-layout-rows"]');
 
     //Design panel
     this.canvasBackgroundColorIcon = page.locator(
@@ -89,6 +96,12 @@ exports.MainPage = class MainPage extends BasePage {
     this.fourthCornerRadiusInput = page.locator(
       'div[class="input-element mini"] input  >> nth=3'
     );
+    this.sizeWidthInput = page.locator(
+      'div[class="input-element width"] input'
+    );
+    this.sizeHeightInput = page.locator(
+      'div[class="input-element height"] input'
+    );
 
     //Design panel - Shadow section
     this.addShadowButton = page.locator(
@@ -191,6 +204,80 @@ exports.MainPage = class MainPage extends BasePage {
       'div[title="Stroke color"] div[class="color-bullet is-not-library-color"]'
     );
 
+    //Design panel - Flex Layout section
+    this.removeLayoutButton = page.locator(
+      'div[class="element-set-title"] button[class="remove-layout"]'
+    );
+    this.layoutMenu = page.locator(
+      'div[class="element-set-content layout-menu"]'
+    );
+    this.layoutDirectRowBtn = page.locator(
+      'div[class="layout-row"] button[alt="Row"]'
+    );
+    this.layoutDirectRowReverseBtn = page.locator(
+      'div[class="layout-row"] button[alt="Row reverse"]'
+    );
+    this.layoutDirectColumnBtn = page.locator(
+      'div[class="layout-row"] button[alt="Column"]'
+    );
+    this.layoutDirectColumnReverseBtn = page.locator(
+      'div[class="layout-row"] button[alt="Column reverse"]'
+    );
+    this.layoutAlignStartBtn = page.locator(
+      'div[class="layout-row"] button[alt="Align items start"]'
+    );
+    this.layoutAlignCenterBtn = page.locator(
+      'div[class="layout-row"] button[alt="Align items center"]'
+    );
+    this.layoutAlignEndBtn = page.locator(
+      'div[class="layout-row"] button[alt="Align items end"]'
+    );
+    this.layoutJustifyStartBtn = page.locator(
+      'div[class="layout-row"] button[alt="Justify content start"]'
+    );
+    this.layoutJustifyCenterBtn = page.locator(
+      'div[class="layout-row"] button[alt="Justify content center"]'
+    );
+    this.layoutJustifyEndBtn = page.locator(
+      'div[class="layout-row"] button[alt="Justify content end"]'
+    );
+    this.layoutJustifySpaceBetweenBtn = page.locator(
+      'div[class="layout-row"] button[alt="Justify content space-between"]'
+    );
+    this.layoutJustifySpaceAroundBtn = page.locator(
+      'div[class="layout-row"] button[alt="Justify content space-around"]'
+    );
+    this.layoutJustifySpaceEvenlyBtn = page.locator(
+      'div[class="layout-row"] button[alt="Justify content space-evenly"]'
+    );
+    this.layoutColumnGapInput = page.locator(
+      'div[class="gap-group"] div[alt="Column gap"] input'
+    );
+    this.layoutRowGapInput = page.locator(
+      'div[class="gap-group"] div[alt="Row gap"] input'
+    );
+    this.layoutVerticalPaddingInput = page.locator(
+      'div[class="padding-group"] div[alt="Vertical padding"] input'
+    );
+    this.layoutHorizontPaddingInput = page.locator(
+      'div[class="padding-group"] div[alt="Horizontal padding"] input'
+    );
+    this.layoutIndepPaddingsIcon = page.locator(
+      'div[class="padding-icons"] div[alt="Independent paddings"]'
+    );
+    this.layoutPaddingTopInput = page.locator(
+      'div[class="padding-row"] div[alt="Top"] input'
+    );
+    this.layoutPaddingRightInput = page.locator(
+      'div[class="padding-row"] div[alt="Right"] input'
+    );
+    this.layoutPaddingBottomInput = page.locator(
+      'div[class="padding-row"] div[alt="Bottom"] input'
+    );
+    this.layoutPaddingLeftInput = page.locator(
+      'div[class="padding-row"] div[alt="Left"] input'
+    );
+
     //Node panel
     this.firstNode = page.locator(
       'g[class="path-point"] circle[pointer-events="visible"] >> nth=0'
@@ -595,6 +682,25 @@ exports.MainPage = class MainPage extends BasePage {
     await this.createdBoardTitle.dblclick();
   }
 
+  async clickCreatedBoardTitleOnCanvas() {
+    await this.createdBoardTitle.click();
+  }
+
+  async changeWidthForLayer(width) {
+    await this.sizeWidthInput.fill(width);
+    await this.clickOnEnter();
+  }
+
+  async changeHeightForLayer(height) {
+    await this.sizeHeightInput.fill(height);
+    await this.clickOnEnter();
+  }
+
+  async changeHeightAndWidthForLayer(height, width) {
+    await this.changeWidthForLayer(width);
+    await this.changeHeightForLayer(height);
+  }
+
   async doubleClickCreatedLayerOnLayersPanel() {
     await this.createdLayerOnLayersPanelNameText.dblclick();
   }
@@ -695,6 +801,139 @@ exports.MainPage = class MainPage extends BasePage {
     await this.deleteLayerMenuItem.click();
   }
 
+  async addFlexLayoutViaRightClick() {
+    await this.createdLayer.click({ button: "right", force: true });
+    await this.addFlexLayout.click();
+  }
+
+  async removeFlexLayoutViaRightClick() {
+    await this.createdLayer.click({ button: "right", force: true });
+    await this.removeFlexLayout.click();
+  }
+
+  async pressFlexLayoutShortcut() {
+    await this.createdLayer.click({ force: true });
+    await this.page.keyboard.press("Shift+A");
+  }
+
+  async isLayoutMenuExpanded(condition = true) {
+    if (condition === true) {
+      await expect(this.layoutMenu).toBeVisible();
+    } else {
+      await expect(this.layoutMenu).toBeHidden();
+    }
+  }
+
+  async isLayoutIconVisibleOnLayer(condition = true) {
+    if (condition === true) {
+      await expect(this.layoutIcon).toBeVisible();
+    } else {
+      await expect(this.layoutIcon).toBeHidden();
+    }
+  }
+
+  async removeLayoutFromDesignPanel() {
+    await this.removeLayoutButton.click();
+  }
+
+  async changeLayoutDirection(direction) {
+    switch (direction) {
+      case "Row":
+        await this.layoutDirectRowBtn.click();
+        break;
+      case "Row reverse":
+        await this.layoutDirectRowReverseBtn.click();
+        break;
+      case "Column":
+        await this.layoutDirectColumnBtn.click();
+        break;
+      case "Column reverse":
+        await this.layoutDirectColumnReverseBtn.click();
+        break;
+    }
+  }
+
+  async changeLayoutAlignment(alignment) {
+    switch (alignment) {
+      case "Start":
+        await this.layoutAlignStartBtn.click();
+        break;
+      case "Center":
+        await this.layoutAlignCenterBtn.click();
+        break;
+      case "End":
+        await this.layoutAlignEndBtn.click();
+        break;
+    }
+  }
+
+  async changeLayoutJustification(justify) {
+    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 changeLayoutColumnGap(value) {
+    await this.layoutColumnGapInput.fill(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutRowGap(value) {
+    await this.layoutRowGapInput.fill(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutVerticalPadding(value) {
+    await this.layoutVerticalPaddingInput.fill(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutHorizontalPadding(value) {
+    await this.layoutHorizontPaddingInput.fill(value);
+    await this.clickOnEnter();
+  }
+
+  async switchToIndependentPadding() {
+    await this.layoutIndepPaddingsIcon.click();
+  }
+
+  async changeLayoutTopPadding(value) {
+    await this.layoutPaddingTopInput.fill(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutBottomPadding(value) {
+    await this.layoutPaddingBottomInput.fill(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutRightPadding(value) {
+    await this.layoutPaddingRightInput.fill(value);
+    await this.clickOnEnter();
+  }
+
+  async changeLayoutLeftPadding(value) {
+    await this.layoutPaddingLeftInput.fill(value);
+    await this.clickOnEnter();
+  }
+
   async transformToPathViaRightclick() {
     await this.createdLayer.click({ button: "right", force: true });
     await this.transformToPathMenuItem.click();

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

@@ -0,0 +1,244 @@
+const { expect } = require("@playwright/test");
+const { mainTest } = require("../../fixtures");
+const { MainPage } = require("../../pages/main-page");
+
+mainTest.beforeEach(async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.clickCreateBoardButton();
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isCreatedLayerVisible();
+  await mainPage.changeHeightAndWidthForLayer("300", "300");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.clickCreateRectangleButton();
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.clickCreateEllipseButton();
+  await mainPage.clickViewportTwice();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+});
+
+mainTest("FL-1 Add flex layout to board from rightclick", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.addFlexLayoutViaRightClick();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+});
+
+mainTest("FL-2 Add flex layout to board from shortcut", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.pressFlexLayoutShortcut();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+});
+
+mainTest(
+  "FL-4 Remove flex layout from board from rightclick",
+  async ({ page }) => {
+    const mainPage = new MainPage(page);
+    await mainPage.addFlexLayoutViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.isLayoutIconVisibleOnLayer();
+    await mainPage.isLayoutMenuExpanded();
+    await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.removeFlexLayoutViaRightClick();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.isLayoutIconVisibleOnLayer(false);
+    await mainPage.isLayoutMenuExpanded(false);
+    await expect(mainPage.viewport).toHaveScreenshot(
+      "board-without-layout.png"
+    );
+  }
+);
+
+mainTest(
+  "FL-5 Remove flex layout from board from shortcut",
+  async ({ page }) => {
+    const mainPage = new MainPage(page);
+    await mainPage.pressFlexLayoutShortcut();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.isLayoutIconVisibleOnLayer();
+    await mainPage.isLayoutMenuExpanded();
+    await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.pressFlexLayoutShortcut();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.isLayoutIconVisibleOnLayer(false);
+    await mainPage.isLayoutMenuExpanded(false);
+    await expect(mainPage.viewport).toHaveScreenshot(
+      "board-without-layout.png"
+    );
+  }
+);
+
+mainTest(
+  "FL-6 Remove flex layout from board from Design panel",
+  async ({ page }) => {
+    const mainPage = new MainPage(page);
+    await mainPage.pressFlexLayoutShortcut();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.isLayoutIconVisibleOnLayer();
+    await mainPage.isLayoutMenuExpanded();
+    await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.removeLayoutFromDesignPanel();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.isLayoutIconVisibleOnLayer(false);
+    await mainPage.isLayoutMenuExpanded(false);
+    await expect(mainPage.viewport).toHaveScreenshot(
+      "board-without-layout.png"
+    );
+  }
+);
+
+mainTest("FL-7 Change direction", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.pressFlexLayoutShortcut();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+  await mainPage.changeLayoutDirection("Row reverse");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-row-reverse-direction.png"
+  );
+  await mainPage.changeLayoutDirection("Column");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-column-direction.png"
+  );
+  await mainPage.changeLayoutDirection("Column reverse");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-column-reverse-direction.png"
+  );
+  await mainPage.changeLayoutDirection("Row");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-row-direction.png");
+});
+
+mainTest("FL-9 Change alignment", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.pressFlexLayoutShortcut();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+  await mainPage.changeLayoutAlignment("Center");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-align-center.png");
+  await mainPage.changeLayoutAlignment("End");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-align-end.png");
+  await mainPage.changeLayoutAlignment("Start");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-align-start.png");
+});
+
+mainTest("FL-10 Change justification", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.pressFlexLayoutShortcut();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+  await mainPage.changeLayoutJustification("Center");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-justify-center.png");
+  await mainPage.changeLayoutJustification("End");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-justify-end.png");
+  await mainPage.changeLayoutJustification("Space between");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-justify-space-between.png"
+  );
+  await mainPage.changeLayoutJustification("Space around");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-justify-space-around.png"
+  );
+  await mainPage.changeLayoutJustification("Space evenly");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-justify-space-evenly.png"
+  );
+  await mainPage.changeLayoutJustification("Start");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-justify-start.png");
+});
+
+mainTest("FL-12 Change column gap", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.pressFlexLayoutShortcut();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+  await mainPage.changeLayoutColumnGap("5");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-5.png");
+  await mainPage.changeLayoutColumnGap("15");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-15.png");
+  await mainPage.changeLayoutColumnGap("0");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-0.png");
+});
+
+mainTest("FL-13 Change row gap", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.pressFlexLayoutShortcut();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+  await mainPage.changeLayoutDirection("Column");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.changeLayoutRowGap("5");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-5.png");
+  await mainPage.changeLayoutRowGap("15");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-15.png");
+  await mainPage.changeLayoutRowGap("0");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-0.png");
+});
+
+mainTest("FL-14 Change single padding", async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.pressFlexLayoutShortcut();
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.isLayoutIconVisibleOnLayer();
+  await mainPage.isLayoutMenuExpanded();
+  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+  await mainPage.clickCreatedBoardTitleOnCanvas();
+  await mainPage.changeLayoutVerticalPadding("5");
+  await mainPage.waitForChangeIsSaved();
+  await mainPage.changeLayoutHorizontalPadding("15");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot("layout-padding-5-15.png");
+  await mainPage.changeLayoutHorizontalPadding("0");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-horizontal_padding-0.png"
+  );
+  await mainPage.changeLayoutVerticalPadding("0");
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "layout-vertical_padding-0.png"
+  );
+});