Merge pull request #124 from penpot/dherrero/feature/rename-selected-…

…layer

feat(rename-layer): add new tests renaming by shortcut and context menu

pages/base-page.js

@@ -25,7 +25,8 @@ exports.BasePage = class BasePage {
     this.copyLayer = page
       .locator('div[class*="viewport"] [class*="viewport-selrect"]')
       .last();
-    this.createdBoardTitle = page.locator('g[class="frame-title"] div >> nth=0');
+    this.createdBoardTitle = page.getByTestId('viewport').getByText('Board').first();
+
     this.deleteLayerMenuItem = page
       .getByRole('listitem')
       .filter({ hasText: 'Delete' });
@@ -138,6 +139,7 @@ exports.BasePage = class BasePage {
       .getByRole('listitem')
       .filter({ hasText: 'Merge cells' });
     this.acceptCookieButton = page.locator('button[class*="CookieConsent_accept"]');
+    this.renameOption = page.getByRole('listitem').filter({ hasText: 'Rename' });
   }
 
   async clearInput(input, browserName) {
@@ -178,6 +180,10 @@ exports.BasePage = class BasePage {
     }
   }
 
+  async clickShortcutAltN(browserName) {
+    await this.page.keyboard.press('Alt+N');
+  }
+
   async reloadPage() {
     await this.page.reload();
   }
@@ -377,6 +383,11 @@ exports.BasePage = class BasePage {
     await expect(this.wrapperMessage).toBeVisible({ timeout: 10000 });
   }
 
+  async renameCreatedBoardViaRightClick() {
+    await this.createdBoardTitle.click({ button: 'right', force: true });
+    await this.renameOption.click();
+  }
+
   async acceptCookie() {
     if (await this.acceptCookieButton.isVisible()) {
       await this.acceptCookieButton.click();

pages/workspace/layers-panel-page.js

@@ -1,21 +1,20 @@
 const { expect } = require('@playwright/test');
-const { BasePage } = require('../base-page');
+const { MainPage } = require('../workspace/main-page');
 
-exports.LayersPanelPage = class LayersPanelPage extends BasePage {
+exports.LayersPanelPage = class LayersPanelPage extends MainPage {
   /**
    * @param {import('@playwright/test').Page} page
    */
   constructor(page) {
     super(page);
 
     this.layersTab = page.getByRole('tab', { name: 'layers' });
-    this.layersSidebar = page.locator('div#layers');
+    this.layersSidebar = page.getByTestId('layer-tree');
+    this.layersRows = page.getByTestId('layer-row');
     this.sidebarLayerItem = page.locator(
       'div[class*="workspace_sidebar_layer_item__layer-row"]',
     );
-    this.createdLayerOnLayersPanelNameInput = page.locator(
-      'div[class*="element-list-body"] input[class*="element-name"]',
-    );
+    this.createdLayerOnLayersPanelNameInput = this.layersRows.getByRole('textbox');
     this.searchLayersIcon = page.locator('svg[class="icon-search"]');
     this.searchLayersInput = page.getByPlaceholder('Search layers');
     this.searchedLayerOnLayersPanelNameText = page.locator(
@@ -62,11 +61,34 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
     await this.clickLayerOnLayersTab(name);
   }
 
-  async renameCreatedLayer(newName) {
+  async typeNameForCreatedLayer(newName) {
     await this.createdLayerOnLayersPanelNameInput.fill(newName);
+  }
+
+  async typeNameCreatedLayerAndEnter(newName) {
+    await this.typeNameForCreatedLayer(newName);
+    await this.clickOnEnter();
+  }
+
+  async typeNameCreatedLayerAndClickOnViewport(newName, x, y) {
+    await this.typeNameForCreatedLayer(newName);
+    await this.clickViewportByCoordinates(x, y, 3);
+  }
+
+  async isNotRenameLayerInputDisplayed(newName) {
+    await expect(this.createdLayerOnLayersPanelNameInput).toHaveCount(0);
     await this.clickOnEnter();
   }
 
+  async renameLayerViaRightClick(layerName, browserName = 'chrome') {
+    const layerSel = this.layersRows.getByText(layerName);
+    await layerSel.last().click({
+      button: 'right',
+      force: true,
+    });
+    await this.renameOption.locator('span').first().click();
+  }
+
   async isLayerNameDisplayed(name) {
     await expect(this.createdLayerOnLayersPanelSpan).toHaveText(name);
   }

tests/components/main-components/update-main-components.spec.js

@@ -453,12 +453,12 @@ mainTest.describe(() => {
       await layersPanelPage.clickCopyComponentOnLayersTab();
 
       await layersPanelPage.doubleClickCopyComponentOnLayersTab();
-      await layersPanelPage.renameCreatedLayer('test');
+      await layersPanelPage.typeNameCreatedLayerAndEnter('test');
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.isCopyComponentNameDisplayed('test');
       await layersPanelPage.clickMainComponentOnLayersTab();
       await layersPanelPage.doubleClickMainComponentOnLayersTab();
-      await layersPanelPage.renameCreatedLayer('dfsfs');
+      await layersPanelPage.typeNameCreatedLayerAndEnter('dfsfs');
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.isCopyComponentNameDisplayed('test');
       await layersPanelPage.clickMainComponentOnLayersTab();

tests/composition/composition-board.spec.js

@@ -58,21 +58,81 @@ mainTest.describe(() => {
     });
   });
 
-  mainTest(qase(219, 'CO-4 Rename board with valid name'), async ({ page }) => {
-    const newName = 'New test board';
-    const renamedName = 'renamed board';
-    const mainPage = new MainPage(page);
-    const layersPanelPage = new LayersPanelPage(page);
-    await mainPage.doubleClickCreatedBoardTitleOnCanvas();
-    await layersPanelPage.renameCreatedLayer(newName);
-    await mainPage.waitForChangeIsSaved();
-    await layersPanelPage.isBoardNameDisplayed(newName);
+  mainTest(
+    qase(219, 'Rename board (by double clicking) with valid name'),
+    async ({ page }) => {
+      const newName = 'New test board';
+      const renamedName = 'renamed board';
+      const mainPage = new MainPage(page);
+      const layersPanelPage = new LayersPanelPage(page);
+      // Rename board by double clicking on the board
+      await mainPage.doubleClickCreatedBoardTitleOnCanvas();
+      await layersPanelPage.typeNameCreatedLayerAndEnter(newName);
+      await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.isBoardNameDisplayed(newName);
+      // Rename board by double clicking on the board layer
+      await layersPanelPage.doubleClickLayerOnLayersTab(newName);
+      await layersPanelPage.typeNameCreatedLayerAndClickOnViewport(
+        renamedName,
+        900,
+        100,
+      );
+      await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.isBoardNameDisplayed(renamedName);
+    },
+  );
 
-    await layersPanelPage.doubleClickLayerOnLayersTab(newName);
-    await layersPanelPage.renameCreatedLayer(renamedName);
-    await mainPage.waitForChangeIsSaved();
-    await layersPanelPage.isBoardNameDisplayed(renamedName);
-  });
+  mainTest(
+    qase(1923, 'Rename board (by shortcut) with valid name'),
+    async ({ page }) => {
+      const newName = 'New test board';
+      const renamedName = 'renamed board';
+      const mainPage = new MainPage(page);
+      const layersPanelPage = new LayersPanelPage(page);
+      // rename by shortcut while the board is selected
+      await layersPanelPage.clickShortcutAltN();
+      await layersPanelPage.typeNameCreatedLayerAndClickOnViewport(
+        newName,
+        900,
+        100,
+      );
+      await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.isBoardNameDisplayed(newName);
+      // try to rename by shortcut while nothing is selected
+      await layersPanelPage.clickShortcutAltN();
+      await layersPanelPage.isNotRenameLayerInputDisplayed();
+      // rename by shortcut while the board layer is selected
+      await layersPanelPage.selectLayerByName(newName);
+      await layersPanelPage.clickShortcutAltN();
+      await layersPanelPage.typeNameCreatedLayerAndEnter(renamedName);
+      await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.isBoardNameDisplayed(renamedName);
+    },
+  );
+
+  mainTest(
+    qase(1924, 'Rename board (by context menu) with valid name'),
+    async ({ page }) => {
+      const newName = 'New test board';
+      const renamedName = 'renamed board';
+      const mainPage = new MainPage(page);
+      const layersPanelPage = new LayersPanelPage(page);
+      // rename by RMB context menu while the board is selected
+      await mainPage.renameCreatedBoardViaRightClick();
+      await layersPanelPage.typeNameCreatedLayerAndClickOnViewport(
+        newName,
+        900,
+        100,
+      );
+      await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.isBoardNameDisplayed(newName);
+      // rename by RMB context menu while the board layer is selected
+      await layersPanelPage.renameLayerViaRightClick(newName);
+      await layersPanelPage.typeNameCreatedLayerAndEnter(renamedName);
+      await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.isBoardNameDisplayed(renamedName);
+    },
+  );
 
   mainTest(qase(220, 'CO-5 Rename board with empty field'), async ({ page }) => {
     const defaultBoardName = 'Board';
@@ -362,7 +422,7 @@ mainTest.describe(() => {
     const mainPage = new MainPage(page);
     const layersPanelPage = new LayersPanelPage(page);
     await mainPage.doubleClickCreatedBoardTitleOnCanvas();
-    await layersPanelPage.renameCreatedLayer('Test');
+    await layersPanelPage.typeNameForCreatedLayer('Test');
     await mainPage.waitForChangeIsSaved();
     await layersPanelPage.isBoardNameDisplayed('Test');
     await layersPanelPage.searchLayer('test');
@@ -379,7 +439,7 @@ mainTest.describe(() => {
       await mainPage.pressFlexLayoutShortcut();
       await mainPage.waitForChangeIsSaved();
       await mainPage.doubleClickCreatedBoardTitleOnCanvas();
-      await layersPanelPage.renameCreatedLayer('Main Board');
+      await layersPanelPage.typeNameForCreatedLayer('Main Board');
       await mainPage.waitForChangeIsSaved();
       await mainPage.createDefaultBoardByCoordinates(200, 200);
       await designPanelPage.changeHeightAndWidthForLayer('200', '200');
@@ -419,13 +479,13 @@ mainTest.describe(() => {
     await mainPage.clickViewportByCoordinates(100, 150);
     await mainPage.waitForChangeIsSaved();
     await mainPage.doubleClickBoardTitleOnCanvas('Board');
-    await layersPanelPage.renameCreatedLayer(board1);
+    await layersPanelPage.typeNameForCreatedLayer(board1);
     await mainPage.waitForChangeIsSaved();
     await mainPage.clickCreateBoardButton();
     await mainPage.clickViewportByCoordinates(250, 300);
     await mainPage.waitForChangeIsSaved();
     await mainPage.doubleClickBoardTitleOnCanvas('Board');
-    await layersPanelPage.renameCreatedLayer(board2);
+    await layersPanelPage.typeNameForCreatedLayer(board2);
     await mainPage.waitForChangeIsSaved();
   });
 

tests/composition/composition-curve.spec.js

@@ -51,7 +51,7 @@ mainTest.describe(() => {
       await mainPage.drawCurve(900, 300, 600, 200);
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.doubleClickLayerOnLayersTab('Path');
-      await layersPanelPage.renameCreatedLayer('renamed curve');
+      await layersPanelPage.typeNameCreatedLayerAndEnter('renamed curve');
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.isLayerNameDisplayed('renamed curve');
     },

tests/composition/composition-ellipse.spec.js

@@ -49,7 +49,7 @@ mainTest.describe(() => {
     const mainPage = new MainPage(page);
     const layersPanelPage = new LayersPanelPage(page);
     await layersPanelPage.doubleClickLayerOnLayersTab('Ellipse');
-    await layersPanelPage.renameCreatedLayer('renamed ellipse');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('renamed ellipse');
     await mainPage.waitForChangeIsSaved();
     await layersPanelPage.isLayerNameDisplayed('renamed ellipse');
   });

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

@@ -898,7 +898,7 @@ mainTest(
     await designPanelPage.changeHeightAndWidthForLayer('300', '400');
     await mainPage.waitForChangeIsSaved();
     await mainPage.doubleClickCreatedBoardTitleOnCanvas();
-    await layersPanelPage.renameCreatedLayer('Dashboard');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('Dashboard');
     await mainPage.waitForChangeIsSaved();
     await layersPanelPage.isBoardNameDisplayed('Dashboard');
     await layersPanelPage.clickLayerOnLayersTab('Dashboard');

tests/composition/composition-image.spec.js

@@ -49,7 +49,7 @@ mainTest.describe(() => {
     const mainPage = new MainPage(page);
     const layersPanelPage = new LayersPanelPage(page);
     await layersPanelPage.doubleClickLayerOnLayersTab('images');
-    await layersPanelPage.renameCreatedLayer('renamed image');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('renamed image');
     await mainPage.waitForChangeIsSaved();
     await layersPanelPage.isLayerNameDisplayed('renamed image');
   });

tests/composition/composition-path.spec.js

@@ -72,7 +72,7 @@ mainTest.describe(() => {
     const mainPage = new MainPage(page);
     const layersPanelPage = new LayersPanelPage(page);
     await layersPanelPage.doubleClickLayerOnLayersTab('Path');
-    await layersPanelPage.renameCreatedLayer('renamed path');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('renamed path');
     await mainPage.waitForChangeIsSaved();
     await layersPanelPage.isLayerNameDisplayed('renamed path');
   });
@@ -161,7 +161,7 @@ mainTest.describe(() => {
       const path1 = 'Path #1';
       const path2 = 'Path #2';
       await layersPanelPage.doubleClickLayerOnLayersTab('Path');
-      await layersPanelPage.renameCreatedLayer(path1);
+      await layersPanelPage.typeNameCreatedLayerAndEnter(path1);
       await mainPage.waitForChangeIsSaved();
       await mainPage.clickCreatePathButton();
       await mainPage.clickViewportByCoordinates(200, 300);
@@ -171,7 +171,7 @@ mainTest.describe(() => {
       await mainPage.clickOnDesignTab();
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.doubleClickLayerOnLayersTab('Path');
-      await layersPanelPage.renameCreatedLayer(path2);
+      await layersPanelPage.typeNameCreatedLayerAndEnter(path2);
       await mainPage.waitForChangeIsSaved();
       await mainPage.clickViewportOnce();
       await layersPanelPage.hideUnhideLayerByIconOnLayersTab(path1);

tests/composition/composition-rectangle.spec.js

@@ -239,7 +239,7 @@ mainTest.describe(() => {
     const mainPage = new MainPage(page);
     const layersPanelPage = new LayersPanelPage(page);
     await layersPanelPage.doubleClickLayerOnLayersTab('Rectangle');
-    await layersPanelPage.renameCreatedLayer('renamed rectangle');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('renamed rectangle');
     await mainPage.waitForChangeIsSaved();
     await layersPanelPage.isLayerNameDisplayed('renamed rectangle');
   });

tests/composition/composition-text.spec.js

@@ -267,7 +267,7 @@ mainTest.describe(() => {
     const mainPage = new MainPage(page);
     const layersPanelPage = new LayersPanelPage(page);
     await layersPanelPage.doubleClickLayerOnLayersTab('Hello World!');
-    await layersPanelPage.renameCreatedLayer('renamed text');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('renamed text');
     await mainPage.waitForChangeIsSaved();
     await layersPanelPage.isLayerNameDisplayed('renamed text');
   });

tests/panels-features/panels-features-prototype.spec.js

@@ -163,16 +163,16 @@ mainTest(
     const layersPanelPage = new LayersPanelPage(page);
     await mainPage.createDefaultBoardByCoordinates(900, 100);
     await layersPanelPage.doubleClickLayerOnLayersTab('Board');
-    await layersPanelPage.renameCreatedLayer('Board #1');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('Board #1');
     await mainPage.createDefaultBoardByCoordinates(500, 200);
     await layersPanelPage.doubleClickLayerOnLayersTab('Board');
-    await layersPanelPage.renameCreatedLayer('Board #2');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('Board #2');
     await prototypePanelPage.clickPrototypeTab();
     await prototypePanelPage.dragAndDropPrototypeArrowConnector(900, 100);
     await mainPage.waitForChangeIsSaved();
     await mainPage.createDefaultBoardByCoordinates(200, 600);
     await layersPanelPage.doubleClickLayerOnLayersTab('Board');
-    await layersPanelPage.renameCreatedLayer('Board #3');
+    await layersPanelPage.typeNameCreatedLayerAndEnter('Board #3');
     await mainPage.clickViewportByCoordinates(500, 200);
     await prototypePanelPage.clickFirstInteractionRecord();
     await prototypePanelPage.selectInteractionDestination('Board #3');