Playwright fixture for handling grid events (#4502)

* Fixture for grid * Fixture for grid * Fixture for grid
saleor · Nov 30, 2023 · 0314e1d · 0314e1d
1 parent c23e8bc
commit 0314e1d
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 1 deletion.
diff --git a/.changeset/modern-maps-lay.md b/.changeset/modern-maps-lay.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Implement fixture for handling grid events in Playwright
diff --git a/playwright/pages/basePage.ts b/playwright/pages/basePage.ts
@@ -9,11 +9,13 @@ export class BasePage {
   readonly gridCanvas: Locator;
   readonly successBanner: Locator;
   readonly errorBanner: Locator;
+  readonly gridInput: Locator;
 
   constructor(page: Page) {
     this.page = page;
     this.pageHeader = page.getByTestId("page-header");
-    this.gridCanvas = page.locator('[data-testid="data-grid-canvas"]');
+    this.gridCanvas = page.locator(`[data-testid="data-grid-canvas]`);
+    this.gridInput = this.page.locator('[class="clip-region"]').locator("textarea")
     this.successBanner = page.locator(LOCATORS.successBanner);
     this.errorBanner = page.locator(LOCATORS.errorBanner);
   }
@@ -48,4 +50,63 @@ export class BasePage {
   async getRandomInt(max: number) {
     return Math.floor(Math.random() * (max + 1));
   }
+
+  async waitForGrid() {
+    await this.gridCanvas.locator("table")
+      .waitFor({ state: "attached", timeout: 10000 })
+  }
+
+  async findGridCellBounds(col: number, row: number) {
+    return this.gridCanvas.evaluate((node, { col, row }) => {
+      const fiberKey = Object.keys(node).find(x => x && x.includes("__reactFiber"));
+
+      if (!fiberKey || !node.parentNode) return null
+
+      /* 
+        We seek over the fiber node (hack), ignore typings for it.
+      */
+      const fiberParent = node.parentNode[fiberKey as keyof typeof node.parentNode] as any
+
+      const bounds: { x: number, y: number, width: number, height: number} = fiberParent
+        .pendingProps
+        .children
+        .props
+        .gridRef
+        .current
+        .getBounds(col, row)
+
+        if (!bounds) return null
+
+        return { 
+          ...bounds,
+          center: {
+            x: bounds.x + bounds.width / 2,
+            y: bounds.y + bounds.height / 2,
+          }
+        }
+      }, { col, row })
+  }
+
+
+  /*
+    Example:
+
+      const basePage = new BasePage(page);
+      const productPage = new ProductPage(page);
+
+      await basePage.gotoExistingProductPage(PRODUCTS.productWithOneVariant.id);
+      await productPage.editVariantButton.scrollIntoViewIfNeeded();
+      await basePage.waitForGrid()
+      await basePage.fillGridCell(1, 0, "New variant name")
+  */
+
+  async fillGridCell(col: number, row: number, content: string) {
+    const bounds = await this.findGridCellBounds(col, row)
+
+    if (!bounds) throw new Error(`Unable to find cell, col: ${col}, row: ${row}`)
+
+    await this.page.mouse.dblclick(bounds.center.x, bounds.center.y)
+    await this.gridInput.waitFor({ state: "attached" });
+    await this.gridInput.fill(content);
+  }
 }