Merge pull request #13 from penpot/penpot_1752

1752,1753,1755,1756 tests added

pages/workspace/design-panel-page.js

@@ -231,6 +231,8 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     );
     this.strokeAlignmentField = page.locator('div[data-test="stroke.alignment"]');
     this.strokeTypeField = page.locator('div[data-test="stroke.style"]');
+    this.strokeFirstCapDropdown = page.locator('div[class*="stroke_row__cap-select"]').first();
+    this.strokeSecondCapDropdown = page.locator('div[class*="stroke_row__cap-select"]').last();
 
     //Design panel - Text section
     this.textUpperCaseIcon = page.locator('svg.icon-text-uppercase');
@@ -1228,4 +1230,13 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     await inputLocator.fill(value);
     await this.clickOnEnter();
   }
+
+  async changeCap(capName, firstSecond = 'first') {
+    firstSecond === 'first'
+      ? await this.strokeFirstCapDropdown.click()
+      : await this.strokeSecondCapDropdown.click();
+    await this.page
+      .locator(`ul[class*="stroke-cap-dropdown"] span:has-text('${capName}')`)
+      .click();
+  }
 };

pages/workspace/inspect-panel-page.js

@@ -12,6 +12,9 @@ exports.InspectPanelPage = class InspectPanelPage extends BasePage {
     this.annotationBlockOnInspect = page.locator(
       'div.main_ui_viewer_inspect_annotation__attributes-block',
     );
+    this.textBlockOnInspect = page.locator(
+      'div.main_ui_viewer_inspect_attributes_text__attributes-block',
+    );
     this.rowGapOnInspect = page.locator(
       'div[class*="layout-row"] div[title="Row gap"]',
     );

pages/workspace/layers-panel-page.js

@@ -240,6 +240,18 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
     await component.dragTo(board);
   }
 
+  async dragAndDropElementToElement(name, dragToName) {
+    await this.page.waitForTimeout(200);
+    const component = this.page.locator(
+      `div[class*="element-list-body"] span[class*="element-name"]:text-is("${name}") >>nth=0`,
+    );
+    const board = this.page.locator(
+      `div[class*="element-list-body"] span[class*="element-name"]:text-is("${dragToName}") >>nth=0`,
+    );
+    await component.hover();
+    await component.dragTo(board);
+  }
+
   async deleteMainComponentViaRightClick() {
     await this.mainComponentLayer.first().click({ button: 'right', force: true });
     await this.deleteLayerMenuOption.click();

tests/components/main-components/component-grid-layout.spec.js

@@ -320,11 +320,21 @@ test.describe(() => {
 
   });
 
-  mainTest('PENPOT-1725 Create annotation for component', async ({}) => {
+  mainTest('PENPOT-1725,1752 Create annotation for component, that already has annotation', async ({}) => {
     await designPanelPage.isAnnotationAddedToComponent(annotation);
     await expect(designPanelPage.componentBlockOnDesignTab).toHaveScreenshot(
       'component-annotation.png',
     );
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.isAnnotationOptionNotVisibleRightClick();
+    await expect(mainPage.viewport).toHaveScreenshot(
+      'component-right-click-annotation-disabled.png',
+    );
+    await designPanelPage.clickOnComponentMenuButton();
+    await designPanelPage.isAnnotationOptionNotVisible();
+    await expect(designPanelPage.componentBlockOnDesignTab).toHaveScreenshot(
+      'component-annotation-disabled.png',
+    );
   });
 
   mainTest('PENPOT-1726 Edit annotation for component', async ({}) => {

tests/composition/composition-board.spec.js

@@ -349,6 +349,35 @@ test.describe(() => {
     await layersPanelPage.searchLayer('test');
     await layersPanelPage.isLayerSearched('Test');
   });
+
+  mainTest('PENPOT-1756 Absolute positioned board moving', async ({ page }) => {
+    const mainPage = new MainPage(page);
+    const designPanelPage = new DesignPanelPage(page);
+    const layersPanelPage = new LayersPanelPage(page);
+    await designPanelPage.changeHeightAndWidthForLayer('400', '500');
+    await mainPage.pressFlexLayoutShortcut();
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.doubleClickCreatedBoardTitleOnCanvas();
+    await layersPanelPage.renameCreatedLayer('Main Board');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.createDefaultBoardByCoordinates(200, 200);
+    await designPanelPage.changeHeightAndWidthForLayer('200', '200');
+    await mainPage.waitForChangeIsSaved();
+    await mainPage.createDefaultEllipseByCoordinates(220, 220);
+    await layersPanelPage.dragAndDropComponentToBoard('Ellipse');
+    await mainPage.waitForChangeIsSaved();
+    await layersPanelPage.dragAndDropElementToElement('Board', 'Main Board');
+    await mainPage.waitForChangeIsSaved();
+    await designPanelPage.setFlexElementPositionAbsolute();
+    await expect(mainPage.viewport).toHaveScreenshot('board-in-flex-board.png', {
+      mask: [mainPage.guides],
+    });
+    await designPanelPage.changeAxisXandYForLayer('700', '600');
+    await mainPage.waitForChangeIsSaved();
+    await expect(mainPage.viewport).toHaveScreenshot('board-in-flex-board-moved.png', {
+      mask: [mainPage.guides],
+    });
+  });
 });
 
 test.describe(() => {

tests/composition/composition-path.spec.js

@@ -43,6 +43,17 @@ mainTest('CO-274 Create Path from toolbar - opened', async ({ page }) => {
   await expect(mainPage.viewport).toHaveScreenshot('path-opened.png');
 });
 
+mainTest('PENPOT-1755 Create Path from toolbar with cap', async ({ page }) => {
+  const mainPage = new MainPage(page);
+  const designPanelPage = new DesignPanelPage(page);
+  await mainPage.createDefaultOpenPath();
+  await mainPage.isCreatedLayerVisible();
+  await designPanelPage.changeCap('Arrow', 'first');
+  await designPanelPage.changeCap('Triangle', 'second');
+  await mainPage.waitForChangeIsSaved();
+  await expect(mainPage.viewport).toHaveScreenshot('path-opened-with-cap.png');
+});
+
 test.describe(() => {
   test.beforeEach(async ({ page }, testInfo) => {
     await testInfo.setTimeout(testInfo.timeout + 15000);

tests/composition/composition-text.spec.js

@@ -8,6 +8,7 @@ const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
 const { DesignPanelPage } = require('../../pages/workspace/design-panel-page');
 const { LayersPanelPage } = require('../../pages/workspace/layers-panel-page');
 const { updateTestResults } = require('./../../helpers/saveTestResults.js');
+const { InspectPanelPage } = require('../../pages/workspace/inspect-panel-page');
 
 const teamName = random().concat('autotest');
 
@@ -284,17 +285,22 @@ test.describe(() => {
   });
 
   mainTest(
-    'CO-216 Change text color and opacity by typing color code',
+    'CO-216 Change text color and opacity by typing color code, PENPOT-1753 Check text color in inspect mode',
     async ({ page }) => {
       const mainPage = new MainPage(page);
       const colorPalettePage = new ColorPalettePage(page);
       const designPanelPage = new DesignPanelPage(page);
+      const inspectPanelPage = new InspectPanelPage(page);
       await designPanelPage.clickFillColorIcon();
       await colorPalettePage.setHex('#304d6a');
       await designPanelPage.changeOpacityForFill('50');
       await mainPage.clickMoveButton();
       await mainPage.waitForChangeIsSaved();
       await expect(mainPage.viewport).toHaveScreenshot('text-fill-opacity.png');
+      await inspectPanelPage.openInspectTab();
+      await expect(inspectPanelPage.textBlockOnInspect).toHaveScreenshot(
+        'inspect-text-block-color.png',
+      );
     },
   );