refactor fixtures, update snapshots for components

README.md

@@ -49,6 +49,7 @@ Some settings from _playwright.config.js_ may be useful:
 - For disabling parallelism set `workers` to 1.
 
 **5. Tests amount and execution time.**
+
 - For now there are 327 tests in current repository
 - If parallel execution is enabled with default amount of workers (2) the average time for each browser is the following:
 - Chrome: 43 mins

fixtures.js

@@ -11,7 +11,7 @@ const mainTest = base.test.extend({
     await loginPage.enterPwd(process.env.LOGIN_PWD);
     await loginPage.clickLoginButton();
     await dashboardPage.isDashboardOpenedAfterLogin();
-    await dashboardPage.isHeaderDisplayed("Projects");
+    await dashboardPage.isHeaderDisplayed('Projects');
     await use(page);
   },
 });

helpers/get-platform.js

@@ -13,4 +13,4 @@ export const getPlatformName = () => {
       platformName = 'Linux';
   }
   return platformName;
-}
+};

pages/base-page.js

@@ -1,5 +1,5 @@
 const { expect } = require('@playwright/test');
-const { getPlatformName } = require("../helpers/get-platform");
+const { getPlatformName } = require('../helpers/get-platform');
 
 exports.BasePage = class BasePage {
   /**
@@ -99,13 +99,13 @@ exports.BasePage = class BasePage {
   }
 
   async clickShortcutCtrlZ(browserName) {
-    if ( getPlatformName() === "MacOS") {
-      await this.page.keyboard.press("Meta+Z");
+    if (getPlatformName() === 'MacOS') {
+      await this.page.keyboard.press('Meta+Z');
     } else {
-      if (browserName !== "webkit") {
-        await this.page.keyboard.press("Control+Z");
+      if (browserName !== 'webkit') {
+        await this.page.keyboard.press('Control+Z');
       } else {
-        await this.page.keyboard.press("Meta+Z");
+        await this.page.keyboard.press('Meta+Z');
       }
     }
   }

pages/dashboard/dashboard-page.js

@@ -397,16 +397,16 @@ exports.DashboardPage = class DashboardPage extends BasePage {
 
   async clickUnpinProjectButton() {
     await this.projectNameTitle.first().hover();
-    await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin-fill");
+    await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin-fill');
     await this.pinUnpinProjectButton.click();
-    await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin");
+    await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin');
   }
 
   async clickPinProjectButton() {
     await this.projectNameTitle.first().hover();
-    await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin");
+    await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin');
     await this.pinUnpinProjectButton.click();
-    await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin-fill");
+    await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin-fill');
   }
 
   async checkPinnedProjectsSidebarItem(text) {
@@ -466,12 +466,12 @@ exports.DashboardPage = class DashboardPage extends BasePage {
   }
 
   async importFileProcessingSuccess(file) {
-    const fileChooserPromise = this.page.waitForEvent("filechooser");
+    const fileChooserPromise = this.page.waitForEvent('filechooser');
     await this.fileImport.click();
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(file);
     await expect(this.modalTitle).toBeVisible();
-    await expect(this.modalTitle).toHaveText("Import Penpot files");
+    await expect(this.modalTitle).toHaveText('Import Penpot files');
     await this.modalAcceptButton.click();
     await this.feedbackBanner.waitFor();
     await expect(this.feedbackBannerMessage).toHaveText(
@@ -481,16 +481,18 @@ exports.DashboardPage = class DashboardPage extends BasePage {
   }
 
   async importFileProcessingError(file) {
-    const fileChooserPromise = this.page.waitForEvent("filechooser");
+    const fileChooserPromise = this.page.waitForEvent('filechooser');
     await this.fileImport.click();
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(file);
     await expect(this.modalTitle).toBeVisible();
-    await expect(this.modalTitle).toHaveText("Import Penpot files");
+    await expect(this.modalTitle).toHaveText('Import Penpot files');
     await expect(this.modalAcceptButton).toBeVisible();
     await expect(this.modalAcceptButton).toBeDisabled();
 
-    await expect(this.importErrorMessage).toHaveText("Oops! We couldn't import this file");
+    await expect(this.importErrorMessage).toHaveText(
+      "Oops! We couldn't import this file",
+    );
     await this.modalCancelButton.click();
   }
 

pages/workspace/assets-panel-page.js

@@ -77,10 +77,10 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
       'div[class*="assets-header"] button[class*="section-button"]',
     );
     this.assetsTypeDropdown = page.locator('ul[class*="context-menu-items"]');
-    this.assetsTypeAll = page.locator("#section-all");
-    this.assetsTypeComponents = page.locator("#section-components");
-    this.assetsTypeColors = page.locator("#section-color");
-    this.assetsTypeTypographies = page.locator("#section-typography");
+    this.assetsTypeAll = page.locator('#section-all');
+    this.assetsTypeComponents = page.locator('#section-components');
+    this.assetsTypeColors = page.locator('#section-color');
+    this.assetsTypeTypographies = page.locator('#section-typography');
     this.duplicateMainComponentMenuItem = page.locator(
       'li:has-text("Duplicate main")',
     );
@@ -293,33 +293,33 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
     await this.assetsTypeButton.click();
     await expect(this.assetsTypeDropdown).toBeVisible();
     switch (type) {
-      case "All assets":
+      case 'All assets':
         await this.assetsTypeAll.click();
         break;
-      case "Components":
+      case 'Components':
         await this.assetsTypeComponents.click();
         break;
-      case "Colors":
+      case 'Colors':
         await this.assetsTypeColors.click();
         break;
-      case "Typographies":
+      case 'Typographies':
         await this.assetsTypeTypographies.click();
         break;
     }
   }
 
   async duplicateFileLibraryComponent() {
-    await this.assetComponentLabel.click({ button: "right" });
+    await this.assetComponentLabel.click({ button: 'right' });
     await this.duplicateMainComponentMenuItem.click();
   }
 
   async showFileLibraryMainComponent() {
-    await this.assetComponentLabel.click({ button: "right" });
+    await this.assetComponentLabel.click({ button: 'right' });
     await this.showMainComponentMenuItem.click();
   }
 
   async renameFileLibraryComponent(newName) {
-    await this.assetComponentLabel.click({ button: "right" });
+    await this.assetComponentLabel.click({ button: 'right' });
     await this.renameFileLibraryMenuItem.click();
     await this.fileLibraryComponentNameInput.fill(newName);
     await this.clickOnEnter();

pages/workspace/color-palette-page.js

@@ -42,7 +42,7 @@ exports.ColorPalettePage = class ColorPalettePage extends BasePage {
     await expect(this.popUp).toBeVisible();
   }
 
-  async clickColorBullet(isFileLibrary=true, value=0) {
+  async clickColorBullet(isFileLibrary = true, value = 0) {
     const classAttr = isFileLibrary
       ? 'color_bullet_new__is-library-color'
       : 'color_bullet_new__is-not-library-color';

pages/workspace/comments-panel-page.js

@@ -60,7 +60,7 @@ exports.CommentsPanelPage = class CommentsPanelPage extends BasePage {
     await this.commentsButton.click();
   }
 
-  async enterCommentText(text, isEdit=false) {
+  async enterCommentText(text, isEdit = false) {
     if (isEdit) {
       await this.commentEditInput.fill(text);
     } else {

pages/workspace/design-panel-page.js

@@ -293,7 +293,7 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     this.createAnnotationOptionDesign = page.locator(
       'ul[class*="component__custom-select-dropdown"] span:text-is("Create annotation")',
     );
-    this.annotationTextArea = page.locator("#annotation-textarea");
+    this.annotationTextArea = page.locator('#annotation-textarea');
     this.annotationCreateTitle = page.locator(
       'div[class^="component-annotation"] div[class^=title]',
     );
@@ -623,7 +623,7 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
     }
   }
 
-  async isLayoutRemoveButtonExists(condition=true) {
+  async isLayoutRemoveButtonExists(condition = true) {
     if (condition === true) {
       await expect(this.layoutRemoveButton).toBeVisible();
     } else {
@@ -902,7 +902,7 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
 
   async createAnnotationRightClick() {
     const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]');
-    await layerSel.last().click({ button: "right", force: true });
+    await layerSel.last().click({ button: 'right', force: true });
     await this.createAnnotationOption.click();
     await expect(this.annotationTextArea).toBeVisible();
   }

pages/workspace/inspect-panel-page.js

@@ -1,5 +1,5 @@
-const { BasePage } = require("../base-page");
-const { expect } = require("@playwright/test");
+const { BasePage } = require('../base-page');
+const { expect } = require('@playwright/test');
 
 exports.InspectPanelPage = class InspectPanelPage extends BasePage {
   /**
@@ -10,7 +10,7 @@ exports.InspectPanelPage = class InspectPanelPage extends BasePage {
 
     this.inspectTab = page.locator('div[data-id="inspect"]');
     this.annotationBlockOnInspect = page.locator(
-      "div.attributes-block.inspect-annotation",
+      'div.attributes-block.inspect-annotation',
     );
   }
 
@@ -21,4 +21,4 @@ exports.InspectPanelPage = class InspectPanelPage extends BasePage {
   async isAnnotationExistOnInspectTab() {
     await expect(this.annotationBlockOnInspect).toBeVisible();
   }
-}
+};

pages/workspace/layers-panel-page.js

@@ -9,7 +9,7 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
     super(page);
 
     this.layersTab = page.locator('div[data-id="layers"]');
-    this.layersSidebar = page.locator("#layers");
+    this.layersSidebar = page.locator('#layers');
     this.createdLayerOnLayersPanelNameInput = page.locator(
       'div[class*="element-list-body"] input[class*="element-name"]',
     );
@@ -150,27 +150,27 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
 
   async createComponentViaRightClickLayers() {
     await this.createdLayerOnLayersPanelSpan.click({
-      button: "right",
+      button: 'right',
       force: true,
     });
     await this.createComponentMenuItem.click();
   }
 
   async clickCopyComponentOnLayersTab() {
-    await this.copyComponentLayer.last().click();
+    await this.copyComponentLayer.first().click();
   }
 
   async clickMainComponentOnLayersTab() {
     await this.mainComponentLayer.last().click();
   }
 
   async restoreMainComponentViaRightClick() {
-    await this.copyComponentLayer.click({ button: "right", force: true });
+    await this.copyComponentLayer.click({ button: 'right', force: true });
     await this.restoreMainComponentMenuItem.click();
   }
 
   async updateMainComponentViaRightClick() {
-    await this.copyComponentLayer.click({ button: "right", force: true });
+    await this.copyComponentLayer.click({ button: 'right', force: true });
     await this.updateMainComponentMenuItem.click();
   }
 };

pages/workspace/main-page.js

@@ -260,8 +260,16 @@ exports.MainPage = class MainPage extends BasePage {
 
   async clickViewportByCoordinates(x, y) {
     await this.viewport.hover();
-    await this.viewport.click({ position: { x: x, y: y }, delay: 300, force: true });
-    await this.viewport.click({ position: { x: x, y: y }, delay: 300, force: true });
+    await this.viewport.click({
+      position: { x: x, y: y },
+      delay: 300,
+      force: true,
+    });
+    await this.viewport.click({
+      position: { x: x, y: y },
+      delay: 300,
+      force: true,
+    });
   }
 
   async isUnSavedChangesDisplayed() {
@@ -799,9 +807,9 @@ exports.MainPage = class MainPage extends BasePage {
     await this.designTab.click();
   }
 
-  async createComponentsMultipleShapesRightClick(singleComponent=true) {
-    const layerSel = this.page.locator("div.viewport .main.viewport-selrect");
-    await layerSel.last().click({ button: "right", force: true });
+  async createComponentsMultipleShapesRightClick(singleComponent = true) {
+    const layerSel = this.page.locator('div.viewport .main.viewport-selrect');
+    await layerSel.last().click({ button: 'right', force: true });
     if (singleComponent) {
       await this.createComponentMenuItem.click();
     } else {
@@ -811,22 +819,22 @@ exports.MainPage = class MainPage extends BasePage {
 
   async createComponentViaShortcut(browserName) {
     await this.createdLayer.click({ force: true });
-    if (browserName === "webkit") {
-      await this.page.keyboard.press("Meta+K");
+    if (browserName === 'webkit') {
+      await this.page.keyboard.press('Meta+K');
     } else {
-      await this.page.keyboard.press("Control+K");
+      await this.page.keyboard.press('Control+K');
     }
   }
 
   async duplicateLayerViaRightClick() {
     const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]');
-    await layerSel.last().click({ button: "right", force: true });
+    await layerSel.last().click({ button: 'right', force: true });
     await this.duplicateOption.click();
   }
 
   async showInAssetsPanelRightClick() {
     const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]');
-    await layerSel.last().click({ button: "right", force: true });
+    await layerSel.last().click({ button: 'right', force: true });
     await this.showInAssetsPanelOption.click();
   }
 };

tests/assets/assets-colors.spec.js

@@ -1,7 +1,9 @@
 const { mainTest } = require('../../fixtures');
 const { MainPage } = require('../../pages/workspace/main-page');
 const { expect, test } = require('@playwright/test');
-const { ColorPalettePage } = require('../../pages/workspace/color-palette-page');
+const {
+  ColorPalettePage,
+} = require('../../pages/workspace/color-palette-page');
 const { random } = require('../../helpers/string-generator');
 const { TeamPage } = require('../../pages/dashboard/team-page');
 const { DashboardPage } = require('../../pages/dashboard/dashboard-page');

tests/color/color-picker.spec.js

@@ -1,6 +1,8 @@
 const { mainTest } = require('../../fixtures');
 const { MainPage } = require('../../pages/workspace/main-page');
-const { ColorPalettePage } = require('../../pages/workspace/color-palette-page');
+const {
+  ColorPalettePage,
+} = require('../../pages/workspace/color-palette-page');
 const { expect, test } = require('@playwright/test');
 const { TeamPage } = require('../../pages/dashboard/team-page');
 const { DashboardPage } = require('../../pages/dashboard/dashboard-page');