chore: griddy work

tests/e2e/filtering-context-menu.spec.ts

@@ -0,0 +1,167 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Griddy Filtering - Context Menu', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the WithTextFiltering story
+    await page.goto(
+      '/?path=/story/components-griddy--with-text-filtering'
+    )
+    // Wait for the Griddy table to load
+    await page.waitForSelector('[role="table"]', { timeout: 5000 })
+  })
+
+  test('should show context menu on right-click on column header', async ({ page }) => {
+    // Right-click on "First Name" header
+    const firstNameHeader = page.locator('[role="columnheader"]').first()
+    await firstNameHeader.click({ button: 'right' })
+
+    // Check if context menu items appear
+    await expect(page.locator('text=Sort')).toBeVisible({ timeout: 2000 })
+    await expect(page.locator('text=Open Filters')).toBeVisible()
+  })
+
+  test('should show "Reset Sorting" option when column is sorted', async ({ page }) => {
+    const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+    // Click to sort the column
+    await firstNameHeader.click()
+
+    // Wait a moment for state update
+    await page.waitForTimeout(100)
+
+    // Right-click to open context menu
+    await firstNameHeader.click({ button: 'right' })
+
+    // Check if "Reset Sorting" appears
+    await expect(page.locator('text=Reset Sorting')).toBeVisible({ timeout: 2000 })
+  })
+
+  test('should show "Reset Filter" option when filter is active', async ({ page }) => {
+    const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+    // Right-click to open context menu
+    await firstNameHeader.click({ button: 'right' })
+
+    // Click "Open Filters"
+    await page.locator('text=Open Filters').click()
+
+    // Wait for filter popover to appear
+    await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+    // Set a filter value
+    const textInput = page.locator('input[placeholder="Enter value..."]')
+    await textInput.fill('Alice')
+
+    // Click Apply button
+    await page.locator('button:has-text("Apply")').click()
+
+    // Wait for popover to close
+    await page.waitForTimeout(200)
+
+    // Right-click again to open context menu
+    await firstNameHeader.click({ button: 'right' })
+
+    // Check if "Reset Filter" appears
+    await expect(page.locator('text=Reset Filter')).toBeVisible({ timeout: 2000 })
+  })
+
+  test('should open filter panel when "Open Filters" is clicked', async ({ page }) => {
+    const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+    // Right-click to open context menu
+    await firstNameHeader.click({ button: 'right' })
+
+    // Click "Open Filters"
+    await page.locator('text=Open Filters').click()
+
+    // Check if filter popover appears with correct title
+    await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+    // Check if operator dropdown exists
+    await expect(page.locator('text=Operator').or(page.locator('[role="combobox"]'))).toBeVisible()
+
+    // Check if input field exists
+    await expect(page.locator('input[placeholder="Enter value..."]')).toBeVisible()
+
+    // Check if Apply and Clear buttons exist
+    await expect(page.locator('button:has-text("Apply")')).toBeVisible()
+    await expect(page.locator('button:has-text("Clear")')).toBeVisible()
+  })
+
+  test('should filter data when filter is applied', async ({ page }) => {
+    const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+    // Right-click to open context menu
+    await firstNameHeader.click({ button: 'right' })
+
+    // Click "Open Filters"
+    await page.locator('text=Open Filters').click()
+
+    // Wait for filter popover
+    await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+    // Set filter value to "Alice"
+    const textInput = page.locator('input[placeholder="Enter value..."]')
+    await textInput.fill('Alice')
+
+    // Wait for debounce (300ms)
+    await page.waitForTimeout(350)
+
+    // Click Apply button
+    await page.locator('button:has-text("Apply")').click()
+
+    // Wait for filter to be applied
+    await page.waitForTimeout(200)
+
+    // Check that filter icon is now blue (active)
+    const filterButton = page.locator('[aria-label="Filter status indicator"]').first()
+    const color = await filterButton.evaluate((el: any) => {
+      return window.getComputedStyle(el).color
+    })
+
+    // Blue color should be present (filter is active)
+    expect(color).toContain('rgb')
+  })
+
+  test('should clear filter when "Reset Filter" is clicked', async ({ page }) => {
+    const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+    // Open filter and apply one
+    await firstNameHeader.click({ button: 'right' })
+    await page.locator('text=Open Filters').click()
+    await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+    const textInput = page.locator('input[placeholder="Enter value..."]')
+    await textInput.fill('Alice')
+    await page.waitForTimeout(350)
+    await page.locator('button:has-text("Apply")').click()
+    await page.waitForTimeout(200)
+
+    // Now clear the filter via context menu
+    await firstNameHeader.click({ button: 'right' })
+    await page.locator('text=Reset Filter').click()
+
+    // Wait for state update
+    await page.waitForTimeout(200)
+
+    // Right-click again to verify "Reset Filter" is gone
+    await firstNameHeader.click({ button: 'right' })
+
+    // "Reset Filter" should not be visible
+    const resetFilterItem = page.locator('text=Reset Filter').first()
+    await expect(resetFilterItem).not.toBeVisible({ timeout: 2000 })
+  })
+
+  test('should have visible filter status icon', async ({ page }) => {
+    // Check that filter icons are visible in headers
+    const filterButton = page.locator('[aria-label="Filter status indicator"]').first()
+    await expect(filterButton).toBeVisible()
+
+    // Check that the icon has opacity (should be visible)
+    const opacity = await filterButton.evaluate((el: any) => {
+      return window.getComputedStyle(el).opacity
+    })
+
+    expect(parseFloat(opacity)).toBeGreaterThan(0.5)
+  })
+})