diff --git a/pages/base-page.js b/pages/base-page.js index 1aff432..e9ec7b8 100644 --- a/pages/base-page.js +++ b/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) { diff --git a/pages/workspace/design-panel-page.js b/pages/workspace/design-panel-page.js index 4eb62bf..ae54fd2 100644 --- a/pages/workspace/design-panel-page.js +++ b/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(); } diff --git a/pages/workspace/inspect-panel-page.js b/pages/workspace/inspect-panel-page.js index 99b42ca..b7d70eb 100644 --- a/pages/workspace/inspect-panel-page.js +++ b/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(); + } }; diff --git a/pages/workspace/main-page.js b/pages/workspace/main-page.js index c57c807..d1a4ab1 100644 --- a/pages/workspace/main-page.js +++ b/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(); + } }; diff --git a/tests/composition/composition-grid-layout.spec.js b/tests/composition/composition-grid-layout.spec.js index 7a3e73a..d0ffa26 100644 --- a/tests/composition/composition-grid-layout.spec.js +++ b/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], + }); }); }); diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-add-row-below.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-add-row-below.png new file mode 100644 index 0000000..afa9610 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-add-row-below.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-delete-row.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-delete-row.png new file mode 100644 index 0000000..8759d53 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-delete-row.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-duplicated-row.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-duplicated-row.png new file mode 100644 index 0000000..afa86dc Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-duplicated-row.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-flex-layout.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-flex-layout.png new file mode 100644 index 0000000..38dad7e Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-flex-layout.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-px-row.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-px-row.png new file mode 100644 index 0000000..8d4bad3 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-px-row.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/flex-layout-right-sidebar-image.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/flex-layout-right-sidebar-image.png new file mode 100644 index 0000000..f86cd9f Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/flex-layout-right-sidebar-image.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/right-sidebar-inspect-code-section-image.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/right-sidebar-inspect-code-section-image.png new file mode 100644 index 0000000..ba6f2e1 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/right-sidebar-inspect-code-section-image.png differ