1702,1703,1706,1745 tests added

pages/base-page.js

@@ -104,6 +104,36 @@ exports.BasePage = class BasePage {
     this.detachInstanceOption = page.locator(
       'ul[class*="workspace_context_menu"] span:has-text("Detach instance")',
     );
+    this.duplicateRowMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Duplicate row")',
+    );
+    this.addRowAboveMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Add 1 row above")',
+    );
+    this.AddRowBelowMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Add 1 row below")',
+    );
+    this.deleteRowMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Delete row")',
+    ).first();
+    this.deleteAndShapesRowMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Delete row and shapes")',
+    );
+    this.duplicateColumnMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Duplicate column")',
+    );
+    this.addColumnLeftMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Add 1 column to the left")',
+    );
+    this.AddColumnRightMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Add 1 column to the right")',
+    );
+    this.deleteColumnMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Delete column")',
+    ).first();
+    this.deleteAndShapesColumnMenuItem = page.locator(
+      'ul[class*="workspace_context_menu"] li span:has-text("Delete column and shapes")',
+    );
   }
 
   async clearInput(input, browserName) {

pages/workspace/design-panel-page.js

@@ -98,6 +98,8 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     this.flexElementPositionAbsolute = page.locator(
       'label[for=":absolute-position"] span',
     );
+    this.flexAddLayoutButton = page.locator('button[data-type="flex"]');
+    this.gridAddLayoutButton = page.locator('button[data-type="grid"]');
     this.gridEditButton = page.locator(
       'button[alt="Grid edit mode"]',
     );
@@ -108,6 +110,9 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     this.layoutRemoveButton = page.locator(
       'div[class*="layout_container__element-title"] button[class*="remove-layout"]',
     );
+    this.layoutAddButton = page.locator(
+      'div[class*="layout_container__element-title"] button[class*="add-layout"]',
+    );
     this.layoutDirectRowBtn = page.locator('label[title="Row"] span');
     this.layoutDirectRowReverseBtn = page.locator('label[title="Row reverse"] span');
     this.layoutDirectColumnBtn = page.locator('label[title="Column"] span');
@@ -688,6 +693,13 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     await this.layoutRemoveButton.click();
   }
 
+  async addLayoutFromDesignPanel(layoutName) {
+    await this.layoutAddButton.click();
+    layoutName === 'flex'
+      ? await this.flexAddLayoutButton.click()
+      : await this.gridAddLayoutButton.click();
+  }
+
   async openGridEditModeFromDesignPanel() {
     await this.gridEditButton.click();
   }

pages/workspace/inspect-panel-page.js

@@ -15,6 +15,7 @@ exports.InspectPanelPage = class InspectPanelPage extends BasePage {
     this.rowGapOnInspect = page.locator(
       'div[class*="layout-row"] div[title="Row gap"]',
     );
+    this.codeTabButton = page.locator('div[data-id="code"]');
   }
 
   async openInspectTab() {
@@ -28,4 +29,8 @@ exports.InspectPanelPage = class InspectPanelPage extends BasePage {
   async isRowGapExistOnInspectTab() {
     await expect(this.rowGapOnInspect).toBeVisible();
   }
+
+  async openCodeTab() {
+    await this.codeTabButton.click();
+  }
 };

pages/workspace/main-page.js

@@ -28,6 +28,8 @@ exports.MainPage = class MainPage extends BasePage {
     this.textbox = page.locator('div[role="textbox"] div[contenteditable="true"]');
     this.guides = page.locator('.guides .new-guides');
     this.guidesFragment = page.locator('.main_ui_workspace_sidebar__resize-area');
+    this.gridEditorLabel = page.locator('input[class*="grid-editor-label"]');
+    this.gridEditorButton = page.locator('button[class*="grid-editor-button"]');
 
     //Node panel
     this.pathActionsBlock = page.locator('div[class$="path_actions__sub-actions"]');
@@ -893,4 +895,28 @@ exports.MainPage = class MainPage extends BasePage {
     await layerSel.last().click({ button: 'right', force: true });
     await this.showInAssetsPanelOption.click();
   }
+
+  async changeGridRowLabel(value) {
+    await this.gridEditorLabel.last().click();
+    await this.gridEditorLabel.last().fill(value);
+    await this.clickOnEnter();
+  }
+
+  async duplicateGridRow() {
+    await this.gridEditorLabel.last().hover();
+    await this.gridEditorButton.click();
+    await this.duplicateRowMenuItem.click();
+  }
+
+  async deleteGridRow() {
+    await this.gridEditorLabel.last().hover();
+    await this.gridEditorButton.click();
+    await this.deleteRowMenuItem.click();
+  }
+
+  async addGridRowBelow() {
+    await this.gridEditorLabel.last().hover();
+    await this.gridEditorButton.click();
+    await this.AddRowBelowMenuItem.click();
+  }
 };

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

@@ -58,7 +58,6 @@ mainTest('PENPOT-1689,1696 Check grid lines, check edit mode in the right panel'
       mask: [mainPage.usersSection],
     },
   );
-
 });
 
 test.describe(() => {
@@ -346,23 +345,92 @@ test.describe(() => {
     );
   });
 
-});
+  mainTest('PENPOT-1706 Adding Flex Board', async ({ page }) => {
+    await designPanelPage.addLayoutFromDesignPanel('flex');
+    await designPanelPage.isFlexElementSectionOpened();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-flex-layout.png', {
+      mask: [mainPage.guides],
+    });
+    await expect(mainPage.fileRightSidebarAside).toHaveScreenshot(
+      'flex-layout-right-sidebar-image.png',
+      {
+        mask: [mainPage.usersSection],
+      },
+    );
+  });
 
-mainTest('PENPOT-1715 Add grid lines, check edit mode and add the text', async ({ page }) => {
-  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.createDefaultTextLayer();
-  await layersPanelPage.dragAndDropComponentToBoard('Hello World!');
-  await mainPage.waitForChangeIsSaved();
-
-  await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-text.png', {
-    mask: [mainPage.guides],
+  mainTest('PENPOT-1745 Check code section', async ({ page }) => {
+    await mainPage.createDefaultRectangleByCoordinates(200, 200, true);
+    await layersPanelPage.dragAndDropComponentToBoard('Rectangle');
+    await mainPage.clickViewportOnce();
+    await mainPage.clickCreatedBoardTitleOnCanvas();
+    await mainPage.waitForChangeIsSaved();
+    await inspectPanelPage.openInspectTab();
+    await inspectPanelPage.openCodeTab();
+    await expect(mainPage.fileRightSidebarAside).toHaveScreenshot(
+      'right-sidebar-inspect-code-section-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, 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-1715 Add grid lines, check edit mode and add the text', async ({ page }) => {
+    await mainPage.createDefaultTextLayer();
+    await layersPanelPage.dragAndDropComponentToBoard('Hello World!');
+    await mainPage.waitForChangeIsSaved();
+
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-text.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1702 Check fraction units, three dots and check duplicate, add row, delete row', async ({ page }) => {
+    await designPanelPage.changeHeightAndWidthForLayer('600', '400');
+    await mainPage.clickBoardOnCanvas();
+    await mainPage.doubleClickBoardOnCanvas();
+    await mainPage.duplicateGridRow();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-duplicated-row.png', {
+      mask: [mainPage.guides],
+    });
+    await mainPage.deleteGridRow();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-delete-row.png', {
+      mask: [mainPage.guides],
+    });
+    await mainPage.addGridRowBelow();
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-add-row-below.png', {
+      mask: [mainPage.guides],
+    });
+  });
+
+  mainTest('PENPOT-1703 Check fraction units, change px column manual', async ({ page }) => {
+    await mainPage.clickBoardOnCanvas();
+    await mainPage.doubleClickBoardOnCanvas();
+    await mainPage.changeGridRowLabel('100 PX');
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-with-px-row.png', {
+      mask: [mainPage.guides],
+    });
   });
 });