Merge pull request #392 from mariohmol/feat/playwright-e2e

feat(e2e): add Playwright e2e test infrastructure

Author: mariohmol

package.json

@@ -15,7 +15,8 @@
     "dist": "npm run build && npm run browserify && cp src/jsgantt.css dist/ && cp dist/jsgantt.js dist/jsgantt.css docs/ && echo 'DIST finished'",
     "publishnpm": "npm run dist && npm publish",
     "demo-full": "npm run dist && npm run start",
-    "deploy:demo": "npm run dist && mkdir -p /var/www/test/jsgantt-improved && cp -r docs/. /var/www/test/jsgantt-improved/ && cp dist/jsgantt.js dist/jsgantt.css /var/www/test/jsgantt-improved/"
+    "deploy:demo": "npm run dist && mkdir -p /var/www/test/jsgantt-improved && cp -r docs/. /var/www/test/jsgantt-improved/ && cp dist/jsgantt.js dist/jsgantt.css /var/www/test/jsgantt-improved/",
+    "test-e2e": "npx playwright test"
   },
   "repository": {
     "type": "git",
@@ -31,6 +32,7 @@
     "@types/node": "^24.3.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.59.1",
     "@types/chai": "^4.1.5",
     "chai": "^4.1.2",
     "http-server": "^14.1.1",

playwright.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './test/e2e',
+  timeout: 30_000,
+  retries: 0,
+  reporter: 'list',
+  use: {
+    baseURL: process.env.JSGANTT_E2E_BASE_URL ?? 'http://localhost:8080',
+    headless: true,
+    viewport: { width: 1400, height: 900 },
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

test/e2e/gantt.page.ts

@@ -0,0 +1,99 @@
+/**
+ * Page Object Model for the jsGantt demo page.
+ * Wraps common selectors and helpers used across e2e specs.
+ */
+
+import { Page, Locator } from '@playwright/test';
+
+export const DEMO_URL = 'demo.html';
+
+export interface BarMetrics {
+  id: string;
+  /** JS-computed left offset in CSS pixels (bar.style.left) */
+  styleLeft: number;
+  /** JS-computed width in CSS pixels (bar.style.width) */
+  styleWidth: number;
+  /** Actual left position in viewport pixels relative to chart table left edge */
+  viewportLeft: number;
+  /** Actual width in viewport pixels */
+  viewportWidth: number;
+}
+
+export interface ColMetrics {
+  index: number;
+  text: string;
+  /** Width in viewport pixels */
+  viewportWidth: number;
+}
+
+export class GanttPage {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async goto(url = DEMO_URL) {
+    await this.page.goto(url, { waitUntil: 'load' });
+    await this.page.waitForSelector('#embedded-Gantt .gcharttable', { timeout: 10_000 });
+    // Allow layout to settle
+    await this.page.waitForTimeout(400);
+  }
+
+  /**
+   * Apply CSS zoom to the Gantt container, simulating browser-level zoom.
+   * zoom=1.0 restores 100%.
+   */
+  async applyZoom(zoom: number) {
+    await this.page.evaluate((z: number) => {
+      const el = document.querySelector<HTMLElement>('#embedded-Gantt');
+      if (el) el.style.zoom = z === 1 ? '' : String(z);
+    }, zoom);
+  }
+
+  /**
+   * Measure bar positions relative to the chart table's left edge.
+   * Returns up to `limit` bars.
+   */
+  async getBarMetrics(limit = 8): Promise<BarMetrics[]> {
+    return this.page.evaluate((lim: number) => {
+      const chartTable = document.querySelector('.gcharttable');
+      if (!chartTable) return [];
+      const chartRect = chartTable.getBoundingClientRect();
+      return Array.from(document.querySelectorAll('[id*="bardiv_"]'))
+        .slice(0, lim)
+        .map(bar => {
+          const el = bar as HTMLElement;
+          const rect = el.getBoundingClientRect();
+          return {
+            id: el.id.replace(/.*bardiv_/, 'bar_'),
+            styleLeft: parseInt(el.style.left || '0', 10),
+            styleWidth: parseInt(el.style.width || '0', 10),
+            viewportLeft: Math.round((rect.left - chartRect.left) * 100) / 100,
+            viewportWidth: Math.round(rect.width * 100) / 100,
+          };
+        });
+    }, limit);
+  }
+
+  /**
+   * Measure the last header row's column widths in viewport pixels.
+   * The last row is the finest date granularity (day/week/month).
+   */
+  async getColumnMetrics(limit = 20): Promise<ColMetrics[]> {
+    return this.page.evaluate((lim: number) => {
+      const headerTable = document.querySelector('.gcharttableh');
+      if (!headerTable) return [];
+      const rows = headerTable.querySelectorAll('tr');
+      const lastRow = rows[rows.length - 1];
+      if (!lastRow) return [];
+      return Array.from(lastRow.querySelectorAll('td'))
+        .slice(0, lim)
+        .map((td, i) => ({
+          index: i,
+          text: (td as HTMLElement).innerText.trim().slice(0, 10),
+          viewportWidth: Math.round(td.getBoundingClientRect().width * 100) / 100,
+        }));
+    }, limit);
+  }
+}

test/e2e/zoom-alignment.spec.ts

@@ -0,0 +1,80 @@
+/**
+ * E2E tests for issue #23: bar misalignment at non-100% browser zoom.
+ *
+ * Root cause: table-layout:auto gives columns fractional pixel widths at
+ * non-100% zoom. As columns accumulate, bars drift away from their date.
+ *
+ * Fix: table-layout:fixed + explicit JS cell widths (already applied).
+ *
+ * Test strategy:
+ *   - Apply CSS zoom to #embedded-Gantt (equivalent to browser-level zoom)
+ *   - At each zoom level, assert bars scale proportionally with zoom
+ *     (viewportLeft ≈ styleLeft × zoom ± tolerance)
+ *   - Assert column widths are uniform within each zoom level
+ *     (no fractional-px spread from table-layout:auto)
+ */
+
+import { test, expect } from '@playwright/test';
+import { GanttPage, DEMO_URL } from './gantt.page';
+
+const ZOOM_LEVELS = [0.75, 0.8, 1.0, 1.25, 1.5];
+
+/** Maximum allowed drift between expected and actual bar position (px). */
+const DRIFT_TOLERANCE_PX = 3;
+
+/** Maximum allowed spread between widest and narrowest column at the same zoom (px). */
+const COL_SPREAD_TOLERANCE_PX = 1;
+
+test.describe('Issue #23 — bar alignment at non-100% zoom', () => {
+  for (const zoom of ZOOM_LEVELS) {
+    const label = `${Math.round(zoom * 100)}%`;
+
+    test(`bars are correctly aligned at ${label} zoom`, async ({ page }) => {
+      const gantt = new GanttPage(page);
+      await gantt.goto(DEMO_URL);
+      await gantt.applyZoom(zoom);
+
+      const bars = await gantt.getBarMetrics(8);
+      expect(bars.length, 'should find rendered task bars').toBeGreaterThan(0);
+
+      for (const bar of bars) {
+        const expectedLeft = bar.styleLeft * zoom;
+        const drift = Math.abs(bar.viewportLeft - expectedLeft);
+        expect(
+          drift,
+          `${bar.id} at zoom ${label}: viewportLeft=${bar.viewportLeft} expected≈${expectedLeft.toFixed(1)}`,
+        ).toBeLessThanOrEqual(DRIFT_TOLERANCE_PX);
+      }
+    });
+
+    test(`column widths are uniform at ${label} zoom`, async ({ page }) => {
+      const gantt = new GanttPage(page);
+      await gantt.goto(DEMO_URL);
+
+      // Capture baseline column width at 100% before applying zoom
+      const baseCols = await gantt.getColumnMetrics(5);
+      const baseColWidth = baseCols[0]?.viewportWidth ?? 39;
+
+      await gantt.applyZoom(zoom);
+
+      const cols = await gantt.getColumnMetrics(20);
+      expect(cols.length, 'should find header columns').toBeGreaterThan(0);
+
+      // All columns at the same zoom level should have the same width
+      const widths = cols.map(c => c.viewportWidth);
+      const spread = Math.max(...widths) - Math.min(...widths);
+      expect(
+        spread,
+        `column width spread at ${label} zoom (min=${Math.min(...widths).toFixed(2)} max=${Math.max(...widths).toFixed(2)})`,
+      ).toBeLessThanOrEqual(COL_SPREAD_TOLERANCE_PX);
+
+      // Column widths should scale proportionally with the zoom factor
+      const expectedWidth = baseColWidth * zoom;
+      const avgWidth = widths.reduce((a, b) => a + b, 0) / widths.length;
+      expect(
+        Math.abs(avgWidth - expectedWidth),
+        `avg col width ${avgWidth.toFixed(2)} should be ≈ baseCol(${baseColWidth}) × zoom(${zoom}) = ${expectedWidth.toFixed(2)}`,
+      ).toBeLessThanOrEqual(1);
+    });
+  }
+});