argent-grid 0.1.0 → 0.3.0

package/e2e/cell-renderers.spec.ts

@@ -0,0 +1,152 @@
+/**
+ * E2E / Visual Tests — Cell Renderer valueGetter Regression
+ *
+ * These tests guard against the bug where renderCell() read cell values via
+ * `getValueByPath(rowNode.data, column.field)` directly, completely bypassing
+ * `ColDef.valueGetter`.  The symptom was:
+ *   - CheckboxRenderer: every row appeared checked (raw performance 60-99
+ *     is always truthy, but the valueGetter should return `performance >= 80`)
+ *   - RatingRenderer: every row showed 5 stars (raw performance 60-99 passed
+ *     to Math.round() is always ≥ 5, but the valueGetter scales to 0-5)
+ *
+ * Data used by both stories (CellRenderers.stories.ts):
+ *   performance(i) = 60 + ((i * 7) % 40)
+ *
+ *   Row  │ perf │ highPerf (≥80) │ stars ((perf-60)/8 rounded)
+ *   ─────┼──────┼────────────────┼────────────────────────────
+ *     0  │  60  │ false          │ 0
+ *     1  │  67  │ false          │ 1
+ *     2  │  74  │ false          │ 2
+ *     3  │  81  │ true           │ 3
+ *     4  │  88  │ true           │ 4
+ *     5  │  95  │ true           │ 4  (rounds to 4)
+ *     6  │  62  │ false          │ 0
+ */
+
+import { expect, test } from '@playwright/test';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Sample the RGBA colour of a single logical pixel from the grid's canvas
+ * element.  Accounts for devicePixelRatio so coordinates are always in CSS
+ * pixel space (matching the layout calculations below).
+ */
+async function sampleCanvasPixel(
+  page: import('@playwright/test').Page,
+  logicalX: number,
+  logicalY: number
+): Promise<{ r: number; g: number; b: number; a: number }> {
+  const canvas = page.locator('canvas.argent-grid-canvas').first();
+
+  return canvas.evaluate(
+    (el: HTMLCanvasElement, [lx, ly]: number[]) => {
+      const dpr = window.devicePixelRatio || 1;
+      const ctx = el.getContext('2d');
+      if (!ctx) throw new Error('No 2d context');
+      const d = ctx.getImageData(Math.round(lx * dpr), Math.round(ly * dpr), 1, 1).data;
+      return { r: d[0], g: d[1], b: d[2], a: d[3] };
+    },
+    [logicalX, logicalY]
+  );
+}
+
+/** Wait for the grid canvas to finish its first render. */
+async function waitForCanvas(page: import('@playwright/test').Page) {
+  await page.waitForSelector('argent-grid', { state: 'visible', timeout: 15000 });
+  await page.waitForSelector('canvas.argent-grid-canvas', { state: 'visible', timeout: 10000 });
+  // Allow one rAF cycle + any Angular change detection
+  await page.waitForTimeout(800);
+}
+
+/**
+ * Canvas layout constants — must stay in sync with CellRenderers.stories.ts
+ * column widths and the default rowHeight (32 px).
+ */
+const ROW_HEIGHT = 32;
+
+/** Vertical centre of row `i` inside the canvas (canvas starts at data row 0). */
+function rowCenterY(i: number) {
+  return i * ROW_HEIGHT + ROW_HEIGHT / 2;
+}
+
+// ---------------------------------------------------------------------------
+// CheckboxRenderer story
+// ---------------------------------------------------------------------------
+
+test.describe('CheckboxRenderer — valueGetter regression', () => {
+  test('visual snapshot — mixed checked/unchecked checkboxes', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-cellrenderers--checkbox-renderer');
+    await waitForCanvas(page);
+    await page.waitForTimeout(500);
+
+    await expect(page.locator('argent-grid')).toHaveScreenshot('checkbox-renderer-mixed.png');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// RatingRenderer story
+// ---------------------------------------------------------------------------
+
+test.describe('RatingRenderer — valueGetter regression', () => {
+  /**
+   * Story column layout:
+   *   id(80) | name(200) | Performance(150) | Stars(Small)(120)
+   *
+   * "Performance" column starts at x = 280, width = 150.
+   * Stars: max=5, size=16, gap=2  ⟹  totalWidth = 5*16 + 4*2 = 88
+   *   startX = 280 + (150 − 88) / 2 = 311
+   *   star[i] centre x = 311 + i*(16+2) + 8
+   *     star[0] ≈ 319,  star[3] ≈ 373
+   */
+  const starCenterX = (starIndex: number) => 311 + starIndex * 18 + 8;
+
+  test('row 0 (performance=60) shows 0 stars — all star pixels are empty', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-cellrenderers--rating-renderer');
+    await waitForCanvas(page);
+
+    // Row 0 → (60-60)/8 = 0 stars → all stars should be the empty colour #e5e7eb (light gray)
+    const y = rowCenterY(0);
+    for (let s = 0; s < 5; s++) {
+      const px = await sampleCanvasPixel(page, starCenterX(s), y);
+      // Empty star: very light, high R+G around 220-235. Not yellow (R≫G, B low).
+      // Just assert it's NOT the bright yellow fill colour (#ffb400 = r255 g180 b0)
+      const isYellow = px.r > 200 && px.g > 130 && px.g < 200 && px.b < 50;
+      expect(isYellow, `star ${s} of row 0 should not be yellow`).toBe(false);
+    }
+  });
+
+  test('different rows show different numbers of filled stars', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-cellrenderers--rating-renderer');
+    await waitForCanvas(page);
+
+    /**
+     * Sample the first star of each row and check that row 6 (0 stars) and
+     * row 4 (~4 stars) look different.  This would catch the regression where
+     * every row got the raw performance value (60-99) passed to drawRating,
+     * causing Math.round(67) = 67 ≥ 5 → all 5 stars filled.
+     */
+    const firstStarX = starCenterX(0);
+
+    const row0px = await sampleCanvasPixel(page, firstStarX, rowCenterY(0));  // 0 stars
+    const row4px = await sampleCanvasPixel(page, firstStarX, rowCenterY(4));  // ~4 stars
+
+    // Row 0 first star should be empty (not yellow)
+    const row0IsYellow = row0px.r > 200 && row0px.g > 100 && row0px.b < 80;
+    expect(row0IsYellow).toBe(false);
+
+    // Row 4 first star should be filled (yellow)
+    const row4IsYellow = row4px.r > 180 && row4px.g > 100 && row4px.b < 80;
+    expect(row4IsYellow).toBe(true);
+  });
+
+  test('visual snapshot — varying star ratings across rows', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-cellrenderers--rating-renderer');
+    await waitForCanvas(page);
+    await page.waitForTimeout(500);
+
+    await expect(page.locator('argent-grid')).toHaveScreenshot('rating-renderer-varied.png');
+  });
+});

package/e2e/debug-streaming.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Debug Streaming Story', () => {
+  test('check console errors and logs', async ({ page }) => {
+    page.on('console', (msg) => {
+      console.log(`[BROWSER ${msg.type()}] ${msg.text()}`);
+    });
+
+    await page.goto('http://localhost:6006/iframe.html?id=features-streaming--live-stock-feed&viewMode=story');
+    
+    // Wait for grid
+    try {
+      await page.waitForSelector('argent-grid', { timeout: 10000 });
+      console.log('argent-grid selector found');
+    } catch (e) {
+      console.log('argent-grid selector NOT found within timeout');
+    }
+
+    // Wait a bit for updates
+    await page.waitForTimeout(5000);
+    
+    const canvas = page.locator('canvas').first();
+    const isVisible = await canvas.isVisible();
+    console.log('Canvas is visible:', isVisible);
+    
+    if (isVisible) {
+      const box = await canvas.boundingBox();
+      console.log('Canvas bounding box:', box);
+    }
+  });
+});

package/e2e/dnd.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Drag and Drop Functionality', () => {
+  test('should reorder columns by dragging', async ({ page }) => {
+    // Use simple Default story without groups for reordering test
+    await page.goto('/iframe.html?id=components-argentgrid--default');
+    
+    // Wait for the grid to be ready
+    await page.waitForSelector('.argent-grid-header-cell');
+    
+    const idHeader = page.locator('.argent-grid-header-cell:has-text("ID")').first();
+    const nameHeader = page.locator('.argent-grid-header-cell:has-text("Name")').first();
+    
+    await expect(idHeader).toBeVisible();
+    await expect(nameHeader).toBeVisible();
+    
+    const initialIdBox = await idHeader.boundingBox();
+    const initialNameBox = await nameHeader.boundingBox();
+    
+    if (!initialIdBox || !initialNameBox) throw new Error('Could not find header bounding boxes');
+    
+    // Drag ID past Name
+    const idHandle = idHeader.locator('.argent-grid-header-content');
+    const handleBox = await idHandle.boundingBox();
+    if (!handleBox) throw new Error('Could not find handle bounding box');
+    
+    await page.mouse.move(handleBox.x + handleBox.width / 2, handleBox.y + handleBox.height / 2);
+    await page.mouse.down();
+    // Drag way past Name (which is ~200px wide) to ensure it drops at index >= 1
+    await page.mouse.move(initialIdBox.x + 300, initialIdBox.y + handleBox.height / 2, { steps: 30 });
+    await page.mouse.up();
+    
+    // Wait for changes to reflect
+    await page.waitForTimeout(2000);
+    
+    const finalIdBox = await idHeader.boundingBox();
+    if (!finalIdBox) throw new Error('Could not find final ID bounding box');
+    
+    // ID should now have moved to the right
+    expect(finalIdBox.x).toBeGreaterThan(initialIdBox.x);
+  });
+
+  test('should group columns by dragging into group panel', async ({ page }) => {
+    // USE DragAndDropGrouping story because it has rowGroupPanelShow: 'always'
+    await page.goto('/iframe.html?id=features-grouping--drag-and-drop-grouping');
+    await page.waitForSelector('.argent-grid-header-cell');
+    
+    const panel = page.locator('.argent-grid-row-group-panel');
+    await expect(panel).toBeVisible();
+    
+    // Find the Department column
+    const deptHeader = page.locator('.argent-grid-header-cell:has-text("Department")').first();
+    await expect(deptHeader).toBeVisible();
+    
+    // Drag Department to the group panel
+    const handle = deptHeader.locator('.argent-grid-header-content');
+    const handleBox = await handle.boundingBox();
+    const panelBox = await panel.boundingBox();
+    if (!handleBox || !panelBox) throw new Error('Could not find bounding boxes');
+    
+    await page.mouse.move(handleBox.x + handleBox.width / 2, handleBox.y + handleBox.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(panelBox.x + panelBox.width / 2, panelBox.y + panelBox.height / 2, { steps: 20 });
+    await page.mouse.up();
+    
+    // Wait for changes
+    await page.waitForTimeout(2000);
+    
+    // Verify a group pill appeared in the panel
+    const pill = panel.locator('.row-group-pill:has-text("Department")');
+    await expect(pill).toBeVisible({ timeout: 5000 });
+  });
+});

package/e2e/screenshots.spec.ts

@@ -0,0 +1,52 @@
+import { test } from '@playwright/test';
+
+test.describe('ArgentGrid Screenshots', () => {
+  test.beforeEach(async () => {
+    // Skip if not in CI
+    test.skip(!process.env.CI, 'Screenshot tests only run in CI');
+  });
+
+  test('capture default grid screenshot', async ({ page }) => {
+    await page.goto('/iframe.html?id=components-argentgrid--default');
+    await page.waitForSelector('argent-grid', { timeout: 15000 });
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({
+      path: 'e2e/screenshots/grid-default.png',
+      fullPage: false,
+    });
+  });
+
+  test('capture dark mode screenshot', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-theming--dark-mode');
+    await page.waitForSelector('argent-grid', { timeout: 15000 });
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({
+      path: 'e2e/screenshots/grid-dark-mode.png',
+      fullPage: false,
+    });
+  });
+
+  test('capture grouping screenshot', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-grouping--row-grouping');
+    await page.waitForSelector('argent-grid', { timeout: 15000 });
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({
+      path: 'e2e/screenshots/grid-grouping.png',
+      fullPage: false,
+    });
+  });
+
+  test('capture benchmark screenshot', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-benchmark--benchmark-10-k');
+    await page.waitForSelector('app-benchmark-wrapper', { timeout: 30000 });
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({
+      path: 'e2e/screenshots/benchmark.png',
+      fullPage: false,
+    });
+  });
+});

package/e2e/theming.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Theming Stories', () => {
+  test('should load Light Mode story', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-theming--light-mode');
+    await page.waitForSelector('argent-grid', { timeout: 15000 });
+
+    const grid = page.locator('argent-grid').first();
+    await expect(grid).toBeVisible({ timeout: 10000 });
+  });
+
+  test('should load Dark Mode story', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-theming--dark-mode');
+    await page.waitForSelector('argent-grid', { timeout: 15000 });
+
+    const grid = page.locator('argent-grid').first();
+    await expect(grid).toBeVisible({ timeout: 10000 });
+  });
+
+  test('should load Compact Mode story', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-theming--compact-mode');
+    await page.waitForSelector('argent-grid', { timeout: 15000 });
+
+    const grid = page.locator('argent-grid').first();
+    await expect(grid).toBeVisible({ timeout: 10000 });
+  });
+
+  test('should load Compact Dark Mode story', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-theming--compact-dark-mode');
+    await page.waitForSelector('argent-grid', { timeout: 15000 });
+
+    const grid = page.locator('argent-grid').first();
+    await expect(grid).toBeVisible({ timeout: 10000 });
+  });
+});

package/e2e/visual.spec.ts

@@ -0,0 +1,112 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('ArgentGrid Visual Regression', () => {
+  // Increase timeout for visual tests as they depend on rendering
+  test.slow();
+
+  test('default grid should look correct', async ({ page }) => {
+    await page.goto('/iframe.html?id=components-argentgrid--default');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+    // Wait longer for CI rendering and font stabilization
+    await page.waitForTimeout(2000);
+    
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-default.png');
+  });
+
+  test('selection column should be centered and aligned', async ({ page }) => {
+    await page.goto('/iframe.html?id=components-argentgrid--with-selection');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+    await page.waitForTimeout(2000);
+    
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-with-selection.png');
+  });
+
+  test('text filter with floating filters should be aligned', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-filtering--text-filter');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+    await page.waitForTimeout(2000);
+    
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-text-filter.png');
+  });
+
+  test('hidden floating filters with popup should be correct', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-filtering--set-filter');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+
+    // Open the filter popup for the Department column (which uses Set Filter)
+    const deptHeader = page.locator('.argent-grid-floating-filter-cell').nth(2); // Department is 3rd
+    const filterBtn = deptHeader.locator('.floating-filter-btn');
+    
+    await filterBtn.scrollIntoViewIfNeeded();
+    await filterBtn.click();
+    
+    // Wait for popup animation
+    await page.waitForSelector('.set-filter-popup', { state: 'visible', timeout: 5000 });
+    await page.waitForTimeout(1000);
+    
+    // Snapshot the popup area
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-filter-popup.png');
+  });
+
+  test('empty state after filtering should be clean', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-filtering--text-filter');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+    
+    // Type something that matches nothing
+    const filterInput = page.locator('.floating-filter-input').first();
+    await filterInput.fill('NON_EXISTENT_VALUE_12345');
+    await page.waitForTimeout(1000); // Wait for debounce and render
+    
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-empty-state.png');
+  });
+
+  test('cell borders should remain visible after scrolling down', async ({ page }) => {
+    await page.goto('/iframe.html?id=components-argentgrid--default');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+    
+    // Scroll down significantly
+    const viewport = page.locator('.argent-grid-viewport');
+    await viewport.evaluate((el) => el.scrollTop = 500);
+    
+    // Wait for render
+    await page.waitForTimeout(2000);
+    
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-scroll-borders.png');
+  });
+
+  test('column group headers should show horizontal border', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-grouping--column-groups');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+    await page.waitForTimeout(2000);
+
+    // Verify the group header cells have a bottom border via the group-cell class
+    const groupCell = page.locator('.argent-grid-header-group-cell').first();
+    await expect(groupCell).toBeVisible();
+
+    // The bottom border should be drawn — verify via computed style
+    const borderBottom = await groupCell.evaluate(
+      (el) => getComputedStyle(el).borderBottomWidth
+    );
+    expect(borderBottom).toBe('1px');
+
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-column-group-headers.png');
+  });
+
+  test('sidebar buttons should be visible and not blocked by header', async ({ page }) => {
+    await page.goto('/iframe.html?id=features-advanced--side-bar');
+    await page.waitForSelector('argent-grid', { state: 'visible' });
+    
+    // Check if sidebar buttons are present
+    const sidebar = page.locator('.side-bar-buttons');
+    await expect(sidebar).toBeVisible();
+    
+    // Verify first button position is below top of grid
+    const firstButton = page.locator('.side-bar-button').first();
+    const box = await firstButton.boundingBox();
+    // In our new grid-based layout, the sidebar is a sibling of the content area
+    // Just ensure it's rendered and has reasonable position
+    expect(box?.y).toBeGreaterThanOrEqual(0);
+    await page.waitForTimeout(1000);
+    await expect(page.locator('argent-grid')).toHaveScreenshot('grid-sidebar-buttons.png');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argent-grid",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A free, high-performance alternative to AG Grid Enterprise",
   "author": "hainzhao",
   "license": "MIT",
@@ -34,18 +34,27 @@
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
-    "@angular/core": "^18.0.0",
+    "@angular/core": "^18.2.14",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
-    "@types/exceljs": "^1.3.2",
+    "@biomejs/biome": "2.4.4",
+    "@chromatic-com/storybook": "^3.2.7",
+    "@playwright/test": "^1.58.2",
+    "@storybook/addon-actions": "^8.6.17",
+    "@storybook/addon-controls": "^8.6.17",
+    "@storybook/addon-docs": "^8.6.17",
+    "@storybook/addon-essentials": "^8.6.17",
+    "@storybook/angular": "^8.6.17",
     "@types/node": "^20.0.0",
     "@vitest/coverage-v8": "^3.0.0",
     "jsdom": "^26.0.0",
     "ng-packagr": "^18.0.0",
     "rxjs": "~7.8.0",
+    "storybook": "^8.6.17",
     "typescript": "~5.4.2",
     "vite": "^6.0.0",
-    "vitest": "^3.0.0"
+    "vitest": "^3.0.0",
+    "zone.js": "^0.14.0"
   },
   "scripts": {
     "build": "ng-packagr -p ng-package.json",
@@ -53,8 +62,13 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "cd demo-app && npx playwright test",
-    "lint": "eslint src/**/*.ts",
-    "clean": "rm -rf dist"
+    "test:e2e": "playwright test",
+    "test:e2e:update": "playwright test --update-snapshots",
+    "lint": "biome check src",
+    "lint:fix": "biome check src --write",
+    "lint:fix:unsafe": "biome check src --write --unsafe",
+    "clean": "rm -rf dist",
+    "storybook": "ng run argent-grid-storybook:storybook",
+    "build-storybook": "ng run argent-grid-storybook:build-storybook"
   }
 }