Skip to content

Commit

Permalink
Merge pull request #112 from penpot/cstanislav/feature/board
Browse files Browse the repository at this point in the history 
feat(board): add new test 1863, 1864
  • Loading branch information
@chalapkoStanislav
chalapkoStanislav authored Oct 31, 2024
2 parents de9ef9d + 53b6023 commit 8e5a803
Show file tree
Hide file tree
Showing 12 changed files with 81 additions and 44 deletions.
7 changes: 7 additions & 0 deletions pages/base-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ exports.BasePage = class BasePage {
).first();
this.addColumnGridLayoutBtn = page.locator('g[class*="grid-plus-button"]',
).last();
this.columnsRowsOnDesignPanel = page.getByTestId('inspect-layout-rows').locator('..');
this.deleteLayerMenuOption = page.getByRole('listitem').filter({ hasText: 'Delete' });
this.createComponentMenuItem = page.getByRole('listitem').filter({ hasText: 'Create component' });
this.updateMainComponentMenuItem = page.getByRole('listitem').filter({ hasText: 'Update main component' });
Expand Down Expand Up @@ -282,6 +283,12 @@ exports.BasePage = class BasePage {
await this.addColumnGridLayoutBtn.click();
}

async addColumnsGridLayout(count) {
for(let i= 0; i < count; i++) {
await this.addRowGridLayoutBtn.click();
}
}

async showMainComponentViaRightClick() {
await this.copyLayer.click({ button: 'right', force: true });
await this.showMainComponentOption.click();
Expand Down
105 changes: 61 additions & 44 deletions tests/composition/composition-grid-layout.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,30 +38,47 @@ test.afterEach(async ({ page }, testInfo) => {
await updateTestResults(testInfo.status, testInfo.retry)
});

mainTest(qase([1689,1696],'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.waitForChangeIsUnsaved();
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, mainPage.guidesFragment, mainPage.toolBarWindow]
mainTest.describe(() => {
mainTest.beforeEach(async ({ page, browserName }, testInfo) => {
await mainPage.createDefaultBoardByCoordinates(200, 300);
await designPanelPage.changeHeightAndWidthForLayer('300', '400');
await mainPage.waitForChangeIsSaved();
await mainPage.addGridLayoutViaRightClick();
await mainPage.waitForChangeIsUnsaved();
await mainPage.waitForChangeIsSaved();
await designPanelPage.isLayoutRemoveButtonExists();
await mainPage.clickViewportOnce();
await mainPage.clickCreatedBoardTitleOnCanvas();
});

mainTest(qase([1689,1696],'PENPOT-1689,1696 Check grid lines, check edit mode in the right panel'), async () => {
await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-layout.png', {
mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow]
});
await designPanelPage.openGridEditModeFromDesignPanel();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-edit-mode.png', {
mask: [mainPage.guides, mainPage.guidesFragment]
});
await expect(mainPage.fileRightSidebarAside).toHaveScreenshot(
'grid-edit-right-sidebar-image.png',
{
mask: [mainPage.usersSection],
},
);
});

mainTest(qase(1863,'Add a lot of columns and check "Columns" panel'), async () => {
await designPanelPage.openGridEditModeFromDesignPanel();
await mainPage.waitForChangeIsSaved();
await mainPage.addColumnsGridLayout(30);
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-3-30.png', {
mask: [mainPage.guides],
});
await expect(mainPage.columnsRowsOnDesignPanel).toHaveScreenshot('lot-1fr-columns.png');

});
await designPanelPage.openGridEditModeFromDesignPanel();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-edit-mode.png', {
mask: [mainPage.guides, mainPage.guidesFragment]
});
await expect(mainPage.fileRightSidebarAside).toHaveScreenshot(
'grid-edit-right-sidebar-image.png',
{
mask: [mainPage.usersSection],
},
);
});

mainTest.describe(() => {
Expand Down Expand Up @@ -94,15 +111,15 @@ mainTest.describe(() => {
await mainPage.waitForChangeIsSaved();
});

mainTest(qase(1690,'PENPOT-1690 Change direction'), async ({ page }) => {
mainTest(qase(1690,'PENPOT-1690 Change direction'), async () => {
await designPanelPage.changeLayoutDirection('Column', false);
await mainPage.waitForChangeIsSaved();
await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
'column-direction-layer.png',
);
});

mainTest(qase(1691,'PENPOT-1691 Change alignment'), async ({ page }) => {
mainTest(qase(1691,'PENPOT-1691 Change alignment'), async () => {
await designPanelPage.changeLayoutAlignment('Center', false);
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-alignment-center.png', {
Expand Down Expand Up @@ -168,7 +185,7 @@ mainTest.describe(() => {
);
});

mainTest(qase(1695,'PENPOT-1695 Change columns and rows'), async ({ page }) => {
mainTest(qase(1695,'PENPOT-1695 Change columns and rows'), async () => {
await designPanelPage.openGridEditModeFromDesignPanel();
await mainPage.waitForChangeIsSaved();
await mainPage.addRowGridLayoutBtnClick();
Expand Down Expand Up @@ -252,7 +269,7 @@ mainTest.describe(() => {
await mainPage.waitForChangeIsSaved();
});

mainTest(qase(1699,'PENPOT-1699 Image and change - alignment and change vertical, horizontal margin'), async ({ page }) => {
mainTest(qase(1699,'PENPOT-1699 Image and change - alignment and change vertical, horizontal margin'), async () => {
await mainPage.uploadImage('images/mini_sample.jpg');
await layersPanelPage.dragAndDropComponentToBoard('mini_sample');
await mainPage.waitForChangeIsSaved();
Expand Down Expand Up @@ -293,7 +310,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1700,'PENPOT-1700 Create a board with Grid Layout with a image and create duplicate this image in next column (change vertical direction)'), async ({ page }) => {
mainTest(qase(1700,'PENPOT-1700 Create a board with Grid Layout with a image and create duplicate this image in next column (change vertical direction)'), async () => {
await designPanelPage.changeLayoutDirection('Column', false);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.clickLayerOnLayersTab('mini_sample');
Expand All @@ -304,7 +321,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1701,'PENPOT-1701 Create a board with Grid Layout with a image and create duplicate this image in next column (change horizontal direction)'), async ({ page }) => {
mainTest(qase(1701,'PENPOT-1701 Create a board with Grid Layout with a image and create duplicate this image in next column (change horizontal direction)'), async () => {
await designPanelPage.changeLayoutDirection('Row', false);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.clickLayerOnLayersTab('mini_sample');
Expand All @@ -315,7 +332,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1704,'PENPOT-1704 Change position and alignment within the Board'), async ({ page }) => {
mainTest(qase(1704,'PENPOT-1704 Change position and alignment within the Board'), async () => {
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
await designPanelPage.changeLayoutAlignment('Center', false);
Expand All @@ -332,7 +349,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1705,'PENPOT-1705 Change margin and padding within the Board'), async ({ page }) => {
mainTest(qase(1705,'PENPOT-1705 Change margin and padding within the Board'), async () => {
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
await designPanelPage.switchToIndependentPaddingOnGridEdit();
Expand All @@ -355,7 +372,7 @@ mainTest.describe(() => {
);
});

mainTest(qase(1706,'PENPOT-1706 Adding Flex Board'), async ({ page }) => {
mainTest(qase(1706,'PENPOT-1706 Adding Flex Board'), async () => {
await designPanelPage.addLayoutFromDesignPanel('flex');
await designPanelPage.isFlexElementSectionOpened();
await mainPage.waitForChangeIsSaved();
Expand All @@ -371,7 +388,7 @@ mainTest.describe(() => {
);
});

mainTest(qase(1711,'PENPOT-1711 add grid lines as a dashboard - table - change duplicate, add row, delete row, change column numbers'), async ({ page }) => {
mainTest(qase(1711,'PENPOT-1711 add grid lines as a dashboard - table - change duplicate, add row, delete row, change column numbers'), async () => {
await designPanelPage.changeHeightAndWidthForLayer('600', '400');
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
Expand All @@ -397,7 +414,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1713,'PENPOT-1713 Add 4 pictures of different sizes and change the color for the back'), async ({ page }) => {
mainTest(qase(1713,'PENPOT-1713 Add 4 pictures of different sizes and change the color for the back'), async () => {
await mainPage.uploadImage('images/horizontal_sample.jpg');
await layersPanelPage.dragAndDropComponentToBoard('horizontal_sample');
await mainPage.waitForChangeIsSaved();
Expand Down Expand Up @@ -465,7 +482,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1702,'PENPOT-1702 Check fraction units, three dots and check duplicate, add row, delete row'), async ({ page }) => {
mainTest(qase(1702,'PENPOT-1702 Check fraction units, three dots and check duplicate, add row, delete row'), async () => {
await designPanelPage.changeHeightAndWidthForLayer('600', '400');
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
Expand All @@ -486,7 +503,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1703,'PENPOT-1703 Check fraction units, change px column manual'), async ({ page }) => {
mainTest(qase(1703,'PENPOT-1703 Check fraction units, change px column manual'), async () => {
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
await mainPage.changeGridRowLabel('100 PX');
Expand All @@ -496,7 +513,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1708,'PENPOT-1708 Check occupy two cells (button Area) - vertical and horizontal'), async ({ page }) => {
mainTest(qase(1708,'PENPOT-1708 Check occupy two cells (button Area) - vertical and horizontal'), async () => {
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
await mainPage.waitForChangeIsSaved();
Expand All @@ -515,7 +532,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1709,'PENPOT-1709 Check occupy four cells (button Area) - Create Area name'), async ({ page }) => {
mainTest(qase(1709,'PENPOT-1709 Check occupy four cells (button Area) - Create Area name'), async () => {
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
await mainPage.waitForChangeIsSaved();
Expand All @@ -527,7 +544,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1736,'PENPOT-1736 Check row numbers in right menu'), async ({ page }) => {
mainTest(qase(1736,'PENPOT-1736 Check row numbers in right menu'), async () => {
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
await mainPage.waitForChangeIsSaved();
Expand All @@ -538,7 +555,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1737,'PENPOT-1737 Locate button'), async ({ page }) => {
mainTest(qase(1737,'PENPOT-1737 Locate button'), async () => {
await mainPage.clickBoardOnCanvas();
await designPanelPage.changeAxisXandYForLayer('400', '2000');
await designPanelPage.addLayoutFromDesignPanel('grid');
Expand Down Expand Up @@ -601,7 +618,7 @@ mainTest.describe(() => {
});
});

mainTest(qase(1746,'PENPOT-1746 Check to add area - manually'), async ({ page }) => {
mainTest(qase(1746,'PENPOT-1746 Check to add area - manually'), async () => {
await mainPage.clickBoardOnCanvas();
await mainPage.doubleClickBoardOnCanvas();
await mainPage.waitForChangeIsSaved();
Expand All @@ -628,7 +645,7 @@ mainTest.describe(() => {
});
});

mainTest(qase([1707,1741],'PENPOT-1707,1741 Add grid lines, and upload the images, check removed some image'), async ({ page, browserName }) => {
mainTest(qase([1707,1741],'PENPOT-1707,1741 Add grid lines, and upload the images, check removed some image'), async ({ browserName }) => {
await mainPage.createDefaultBoardByCoordinates(400, 300);
await designPanelPage.changeHeightAndWidthForLayer('500', '600');
await mainPage.waitForChangeIsSaved();
Expand All @@ -648,7 +665,7 @@ mainTest(qase([1707,1741],'PENPOT-1707,1741 Add grid lines, and upload the image
});
});

mainTest(qase(1710,'PENPOT-1710 Add grid lines as a dashboard - table'), async ({ page }) => {
mainTest(qase(1710,'PENPOT-1710 Add grid lines as a dashboard - table'), async () => {
await mainPage.createDefaultBoardByCoordinates(200, 300);
await designPanelPage.changeHeightAndWidthForLayer('300', '400');
await mainPage.waitForChangeIsSaved();
Expand All @@ -664,7 +681,7 @@ mainTest(qase(1710,'PENPOT-1710 Add grid lines as a dashboard - table'), async (
});
});

mainTest(qase(1712,'PENPOT-1712 Add grid lines, change px for all column'), async ({ page, browserName }) => {
mainTest(qase(1712,'PENPOT-1712 Add grid lines, change px for all column'), async () => {
await mainPage.createDefaultBoardByCoordinates(400, 300);
await designPanelPage.changeHeightAndWidthForLayer('500', '600');
await mainPage.waitForChangeIsSaved();
Expand Down
Binary file added ...composition-grid-layout.spec.js-snapshots/win32/chrome/board-with-grid-3-30.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tion/composition-grid-layout.spec.js-snapshots/win32/chrome/lot-1fr-columns.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...omposition-grid-layout.spec.js-snapshots/win32/firefox/board-with-grid-3-30.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ion/composition-grid-layout.spec.js-snapshots/win32/firefox/lot-1fr-columns.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...composition-grid-layout.spec.js-snapshots/win32/webkit/board-with-grid-3-30.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tion/composition-grid-layout.spec.js-snapshots/win32/webkit/lot-1fr-columns.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions tests/panels-features/panels-features-grid.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,4 +340,17 @@ mainTest.describe(() => {
await mainPage.waitForChangeIsSaved();
await expect(mainPage.createdLayer).toHaveScreenshot('board-without-grid.png');
});

mainTest(qase(1864,'Duplicate board with guide'), async ({ page, browserName }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickAddGridButton();
await mainPage.waitForChangeIsSaved();
await mainPage.clickShortcutCtrlD(browserName);
await mainPage.waitForChangeIsUnsaved();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('two-board-with-guide.png', {
mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow]
});
});
});
Binary file added ...es/panels-features-grid.spec.js-snapshots/win32/chrome/two-board-with-guide.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...s/panels-features-grid.spec.js-snapshots/win32/firefox/two-board-with-guide.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...es/panels-features-grid.spec.js-snapshots/win32/webkit/two-board-with-guide.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8e5a803

Please sign in to comment.