diff --git a/playwright-report/data/089c96250ea51529ad9dc8c8c4ec8090e458b752.png b/playwright-report/data/089c96250ea51529ad9dc8c8c4ec8090e458b752.png new file mode 100644 index 0000000..5553b54 Binary files /dev/null and b/playwright-report/data/089c96250ea51529ad9dc8c8c4ec8090e458b752.png differ diff --git a/playwright-report/data/09079ba157736810a81c15373b296fa6ca6105bd.md b/playwright-report/data/09079ba157736810a81c15373b296fa6ca6105bd.md new file mode 100644 index 0000000..357e55c --- /dev/null +++ b/playwright-report/data/09079ba157736810a81c15373b296fa6ca6105bd.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Filter Operators >> should filter with 'before' operator +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:158:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:154:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,923,050 +- img +- paragraph: Average Progress +- paragraph: 45.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,625,958 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [DASH-10680] Add progressive web app features (Sprint 27) In Progress Medium โšก Performance Emily Jackson Emily Jackson 9/11/2025 30% $700 $210": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-10680] Add progressive web app features (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/11/2025" + - gridcell "30%" + - gridcell "$700" + - gridcell "$210" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-8172] Debug crash on mobile Safari (Q1 Goals) Blocked High ๐Ÿ› Bug Sophia Taylor Sophia Taylor 9/4/2025 34% $1,225 $417": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-8172] Debug crash on mobile Safari (Q1 Goals)" + - gridcell "Blocked" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/4/2025" + - gridcell "34%" + - gridcell "$1,225" + - gridcell "$417" + - row "Press Space to toggle row selection (unchecked) [CORE-10037] Update to ES6 modules (Sprint 27) Backlog Medium โ™ป๏ธ Refactor Isabella Garcia Isabella Garcia 9/19/2025 0% $4,700": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-10037] Update to ES6 modules (Sprint 27)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/19/2025" + - gridcell "0%" + - gridcell "$4,700" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-2852] Add database indexing (Tech Debt) Todo Low โšก Performance Maya Patel Maya Patel 9/25/2025 5% $3,525 $176": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-2852] Add database indexing (Tech Debt)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/25/2025" + - gridcell "5%" + - gridcell "$3,525" + - gridcell "$176" + - row "Press Space to toggle row selection (unchecked) [AUTH-3130] Add encryption at rest Backlog High ๐Ÿ”’ Security Priya Sharma Priya Sharma 9/3/2025 0% $650": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-3130] Add encryption at rest" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$650" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-4562] Configure CDN distribution Backlog Medium ๐Ÿ”ง DevOps Priya Sharma Priya Sharma 9/10/2025 0% $2,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4562] Configure CDN distribution" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/10/2025" + - gridcell "0%" + - gridcell "$2,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-10932] Add request batching (Tech Debt) Backlog High โšก Performance Alex Chen Alex Chen 9/4/2025 0% $10,600": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-10932] Add request batching (Tech Debt)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/4/2025" + - gridcell "0%" + - gridcell "$10,600" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-4706] Correct CSS overflow in sidebar (Performance Sprint) Testing High ๐Ÿ› Bug Chris Martinez Chris Martinez 9/1/2025 84% $875 $735": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-4706] Correct CSS overflow in sidebar (Performance Sprint)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/1/2025" + - gridcell "84%" + - gridcell "$875" + - gridcell "$735" + - row "Press Space to toggle row selection (unchecked) [APP-5851] Create security penetration tests Backlog High ๐Ÿงช Testing Marcus Williams Marcus Williams 9/5/2025 0% $4,650": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-5851] Create security penetration tests" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$4,650" + - gridcell + - row "Press Space to toggle row selection (unchecked) [WEB-6259] Fix broken deep links in navigation Testing High ๐Ÿ› Bug Sarah Johnson Sarah Johnson 9/3/2025 86% $250 $215": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-6259] Fix broken deep links in navigation" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/3/2025" + - gridcell "86%" + - gridcell "$250" + - gridcell "$215" + - row "Press Space to toggle row selection (unchecked) [USER-7503] Document new filter components (Sprint 26) Todo Low ๐Ÿ“ Documentation Jessica Lopez Jessica Lopez 10/2/2025 11% $1,175 $129": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-7503] Document new filter components (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "10/2/2025" + - gridcell "11%" + - gridcell "$1,175" + - gridcell "$129" + - row "Press Space to toggle row selection (unchecked) [APP-8227] Correct data corruption in cache layer Todo Medium ๐Ÿ› Bug Emily Jackson Emily Jackson 9/6/2025 19% $2,850 $542": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-8227] Correct data corruption in cache layer" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/6/2025" + - gridcell "19%" + - gridcell "$2,850" + - gridcell "$542" + - row "Press Space to toggle row selection (unchecked) [DASH-10718] Add E2E tests for checkout flow Backlog Low ๐Ÿงช Testing Jessica Lopez Jessica Lopez 10/4/2025 0% $175": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-10718] Add E2E tests for checkout flow" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿงช Testing" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "10/4/2025" + - gridcell "0%" + - gridcell "$175" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-1831] Implement virtual scrolling In Progress Critical โšก Performance Isabella Garcia Isabella Garcia 8/31/2025 49% $400 $196": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1831] Implement virtual scrolling" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/31/2025" + - gridcell "49%" + - gridcell "$400" + - gridcell "$196" + - row "Press Space to toggle row selection (unchecked) [DASH-3531] Write migration guide for v2 (Sprint 25) Backlog Critical ๐Ÿ“ Documentation Michael Anderson Michael Anderson 9/1/2025 0% $775": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-3531] Write migration guide for v2 (Sprint 25)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$775" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-5705] Create advanced search filters (Sprint 23) In Progress High โœจ Feature Ryan Thomas Ryan Thomas 9/2/2025 42% $900 $378": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-5705] Create advanced search filters (Sprint 23)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/2/2025" + - gridcell "42%" + - gridcell "$900" + - gridcell "$378" + - row "Press Space to toggle row selection (unchecked) [BACKEND-6524] Add internationalization tests (Sprint 23) Testing High ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/2/2025 94% $4,700 $4,418": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-6524] Add internationalization tests (Sprint 23)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/2/2025" + - gridcell "94%" + - gridcell "$4,700" + - gridcell "$4,418" + - row "Press Space to toggle row selection (unchecked) [MOBILE-8040] Implement dark mode toggle Backlog Critical โœจ Feature Sarah Johnson Sarah Johnson 9/1/2025 0% $325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8040] Implement dark mode toggle" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$325" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,923,050 $18,297,092": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,923,050" + - gridcell "$18,297,092" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 154 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); +``` \ No newline at end of file diff --git a/playwright-report/data/0fb0d9a83bcb925749cfb462a24754b10521f898.png b/playwright-report/data/0fb0d9a83bcb925749cfb462a24754b10521f898.png new file mode 100644 index 0000000..01bf5cb Binary files /dev/null and b/playwright-report/data/0fb0d9a83bcb925749cfb462a24754b10521f898.png differ diff --git a/playwright-report/data/1d80f38cd6132ed51f35d84bb584201d6166bccb.md b/playwright-report/data/1d80f38cd6132ed51f35d84bb584201d6166bccb.md new file mode 100644 index 0000000..047a80a --- /dev/null +++ b/playwright-report/data/1d80f38cd6132ed51f35d84bb584201d6166bccb.md @@ -0,0 +1,469 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Accessibility >> should have proper ARIA labels +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:284:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:286:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,967,825 +- img +- paragraph: Average Progress +- paragraph: 46.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,114,956 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [UI-3315] Build real-time notifications system Testing Medium โœจ Feature David Lee David Lee 9/19/2025 94% $825 $776": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3315] Build real-time notifications system" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/19/2025" + - gridcell "94%" + - gridcell "$825" + - gridcell "$776" + - row "Press Space to toggle row selection (unchecked) [APP-2260] Modernize legacy jQuery code (Sprint 26) Backlog High โ™ป๏ธ Refactor Chris Martinez Chris Martinez 9/8/2025 0% $12,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-2260] Modernize legacy jQuery code (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$12,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-8808] Configure load balancer In Progress Medium ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/18/2025 29% $3,800 $1,102": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-8808] Configure load balancer" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/18/2025" + - gridcell "29%" + - gridcell "$3,800" + - gridcell "$1,102" + - row "Press Space to toggle row selection (unchecked) [AUTH-10120] Build custom report generator (Sprint 26) In Progress Low โœจ Feature Alex Chen Alex Chen 9/18/2025 49% $6,150 $3,014": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-10120] Build custom report generator (Sprint 26)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/18/2025" + - gridcell "49%" + - gridcell "$6,150" + - gridcell "$3,014" + - row "Press Space to toggle row selection (unchecked) [CORE-1851] Add CDN for static assets (Q2 Planning) In Progress Critical โšก Performance Jessica Lopez Jessica Lopez 9/2/2025 46% $4,000 $1,840": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-1851] Add CDN for static assets (Q2 Planning)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "46%" + - gridcell "$4,000" + - gridcell "$1,840" + - row "Press Space to toggle row selection (unchecked) [AUTH-5606] Test mobile responsiveness In Review Critical ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/2/2025 79% $13,525 $10,685": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-5606] Test mobile responsiveness" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/2/2025" + - gridcell "79%" + - gridcell "$13,525" + - gridcell "$10,685" + - row "Press Space to toggle row selection (unchecked) [DATA-6061] Create integration test suite (Sprint 25) In Review High ๐Ÿงช Testing Sarah Johnson Sarah Johnson 9/7/2025 72% $9,750 $7,020": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6061] Create integration test suite (Sprint 25)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/7/2025" + - gridcell "72%" + - gridcell "$9,750" + - gridcell "$7,020" + - row "Press Space to toggle row selection (unchecked) [API-7531] Implement secure file upload (Sprint 23) Testing Medium ๐Ÿ”’ Security Isabella Garcia Isabella Garcia 9/9/2025 85% $4,125 $3,506": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7531] Implement secure file upload (Sprint 23)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/9/2025" + - gridcell "85%" + - gridcell "$4,125" + - gridcell "$3,506" + - row "Press Space to toggle row selection (unchecked) [API-8009] Create troubleshooting guide (Sprint 23) Testing Low ๐Ÿ“ Documentation James Wilson James Wilson 9/29/2025 87% $550 $479": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-8009] Create troubleshooting guide (Sprint 23)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/29/2025" + - gridcell "87%" + - gridcell "$550" + - gridcell "$479" + - row "Press Space to toggle row selection (unchecked) [USER-10761] Set up monitoring alerts (Security Audit) Backlog Critical ๐Ÿ”ง DevOps Sarah Johnson Sarah Johnson 9/3/2025 0% $7,900": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-10761] Set up monitoring alerts (Security Audit)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$7,900" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-4557] Add request batching (Performance Sprint) Testing Medium โšก Performance Daniel Kim Daniel Kim 9/14/2025 94% $825 $776": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-4557] Add request batching (Performance Sprint)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/14/2025" + - gridcell "94%" + - gridcell "$825" + - gridcell "$776" + - row "Press Space to toggle row selection (unchecked) [DATA-6483] Create backup automation In Review Critical ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 8/31/2025 77% $3,025 $2,329": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6483] Create backup automation" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "8/31/2025" + - gridcell "77%" + - gridcell "$3,025" + - gridcell "$2,329" + - row "Press Space to toggle row selection (unchecked) [MOBILE-6649] Create data visualization charts Todo Critical โœจ Feature Daniel Kim Daniel Kim 9/2/2025 12% $6,825 $819": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-6649] Create data visualization charts" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/2/2025" + - gridcell "12%" + - gridcell "$6,825" + - gridcell "$819" + - row "Press Space to toggle row selection (unchecked) [UI-7483] Create video tutorials (Q1 Goals) In Progress Medium ๐Ÿ“ Documentation Maya Patel Maya Patel 9/7/2025 31% $925 $287": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-7483] Create video tutorials (Q1 Goals)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/7/2025" + - gridcell "31%" + - gridcell "$925" + - gridcell "$287" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1178] Extract business logic layer (Security Audit) Backlog High โ™ป๏ธ Refactor Jessica Lopez Jessica Lopez 9/2/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1178] Extract business logic layer (Security Audit)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-6440] Add database indexing (Q2 Planning) Todo High โšก Performance Daniel Kim Daniel Kim 9/7/2025 16% $4,150 $664": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6440] Add database indexing (Q2 Planning)" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/7/2025" + - gridcell "16%" + - gridcell "$4,150" + - gridcell "$664" + - row "Press Space to toggle row selection (unchecked) [USER-6714] Implement service workers In Progress Critical โšก Performance David Lee David Lee 8/30/2025 58% $2,100 $1,218": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-6714] Implement service workers" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "8/30/2025" + - gridcell "58%" + - gridcell "$2,100" + - gridcell "$1,218" + - row "Press Space to toggle row selection (unchecked) [INFRA-7899] Implement session management In Progress Critical ๐Ÿ”’ Security Priya Sharma Priya Sharma 8/30/2025 52% $950 $494": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7899] Implement session management" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/30/2025" + - gridcell "52%" + - gridcell "$950" + - gridcell "$494" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,967,825 $18,852,869": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,967,825" + - gridcell "$18,852,869" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 265 | await dateHeader.click(); + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 286 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/playwright-report/data/22528e8bf069948c6266581b1a9bf5d60d3de6ce.png b/playwright-report/data/22528e8bf069948c6266581b1a9bf5d60d3de6ce.png new file mode 100644 index 0000000..2cf7705 Binary files /dev/null and b/playwright-report/data/22528e8bf069948c6266581b1a9bf5d60d3de6ce.png differ diff --git a/playwright-report/data/25c9f33514ca89979ab0b4f4864dd286ad8c1728.md b/playwright-report/data/25c9f33514ca89979ab0b4f4864dd286ad8c1728.md new file mode 100644 index 0000000..43dd491 --- /dev/null +++ b/playwright-report/data/25c9f33514ca89979ab0b4f4864dd286ad8c1728.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Filter Operators >> should filter with 'inRange' operator +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:192:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:154:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,896,300 +- img +- paragraph: Average Progress +- paragraph: 45.8% +- img +- paragraph: Budget Remaining +- paragraph: $22,019,666 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [DATA-7323] Implement caching strategy In Review Medium โšก Performance John Robinson John Robinson 9/12/2025 69% $1,875 $1,294": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-7323] Implement caching strategy" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/12/2025" + - gridcell "69%" + - gridcell "$1,875" + - gridcell "$1,294" + - row "Press Space to toggle row selection (unchecked) [ADMIN-1270] Configure health checks (Security Audit) Testing Critical ๐Ÿ”ง DevOps Isabella Garcia Isabella Garcia 9/2/2025 94% $150 $141": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1270] Configure health checks (Security Audit)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/2/2025" + - gridcell "94%" + - gridcell "$150" + - gridcell "$141" + - row "Press Space to toggle row selection (unchecked) [CORE-3391] Add export to PDF functionality Backlog Critical โœจ Feature Alex Chen Alex Chen 9/2/2025 0% $15,675": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3391] Add export to PDF functionality" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$15,675" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-3898] Add database indexing (Performance Sprint) Testing Low โšก Performance Maya Patel Maya Patel 9/18/2025 93% $7,450 $6,929": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3898] Add database indexing (Performance Sprint)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/18/2025" + - gridcell "93%" + - gridcell "$7,450" + - gridcell "$6,929" + - row "Press Space to toggle row selection (unchecked) [MOBILE-7518] Write migration guide for v2 (Sprint 26) In Progress Critical ๐Ÿ“ Documentation Maya Patel Maya Patel 9/4/2025 27% $225 $61": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-7518] Write migration guide for v2 (Sprint 26)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/4/2025" + - gridcell "27%" + - gridcell "$225" + - gridcell "$61" + - row "Press Space to toggle row selection (unchecked) [DASH-5712] Debug crash on mobile Safari (Sprint 23) In Review High ๐Ÿ› Bug Amanda White Amanda White 9/4/2025 79% $625 $494": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-5712] Debug crash on mobile Safari (Sprint 23)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/4/2025" + - gridcell "79%" + - gridcell "$625" + - gridcell "$494" + - row "Press Space to toggle row selection (unchecked) [API-9045] Fix broken deep links in navigation (Sprint 25) Backlog Medium ๐Ÿ› Bug John Robinson John Robinson 9/7/2025 0% $9,900": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-9045] Fix broken deep links in navigation (Sprint 25)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$9,900" + - gridcell + - row "Press Space to toggle row selection (unchecked) [APP-10647] Extract business logic layer (Sprint 24) Todo High โ™ป๏ธ Refactor Priya Sharma Priya Sharma 9/5/2025 19% $8,975 $1,705": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-10647] Extract business logic layer (Sprint 24)" + - gridcell "Todo" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/5/2025" + - gridcell "19%" + - gridcell "$8,975" + - gridcell "$1,705" + - row "Press Space to toggle row selection (unchecked) [DASH-4007] Add input sanitization Backlog Low ๐Ÿ”’ Security David Lee David Lee 9/6/2025 0% $4,025": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-4007] Add input sanitization" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ”’ Security" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$4,025" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-10146] Update API documentation In Progress Low ๐Ÿ“ Documentation Olivia Brown Olivia Brown 9/19/2025 33% $8,425 $2,780": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-10146] Update API documentation" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/19/2025" + - gridcell "33%" + - gridcell "$8,425" + - gridcell "$2,780" + - row "Press Space to toggle row selection (unchecked) [DASH-1940] Document new filter components Todo Critical ๐Ÿ“ Documentation Ryan Thomas Ryan Thomas 9/1/2025 14% $575 $81": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-1940] Document new filter components" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/1/2025" + - gridcell "14%" + - gridcell "$575" + - gridcell "$81" + - row "Press Space to toggle row selection (unchecked) [AUTH-2138] Build analytics dashboard (Sprint 26) Backlog Low โœจ Feature James Wilson James Wilson 10/3/2025 0% $5,150": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-2138] Build analytics dashboard (Sprint 26)" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "10/3/2025" + - gridcell "0%" + - gridcell "$5,150" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-5747] Optimize memory usage (Sprint 27) In Review High โšก Performance James Wilson James Wilson 9/6/2025 69% $6,125 $4,226": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-5747] Optimize memory usage (Sprint 27)" + - gridcell "In Review" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/6/2025" + - gridcell "69%" + - gridcell "$6,125" + - gridcell "$4,226" + - row "Press Space to toggle row selection (unchecked) [APP-10842] Set up monitoring alerts (Sprint 24) Todo High ๐Ÿ”ง DevOps Olivia Brown Olivia Brown 9/2/2025 6% $10,550 $633": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-10842] Set up monitoring alerts (Sprint 24)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/2/2025" + - gridcell "6%" + - gridcell "$10,550" + - gridcell "$633" + - row "Press Space to toggle row selection (unchecked) [WEB-1250] Implement secrets management (Sprint 25) Todo High ๐Ÿ”ง DevOps David Lee David Lee 9/1/2025 13% $7,425 $965": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1250] Implement secrets management (Sprint 25)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/1/2025" + - gridcell "13%" + - gridcell "$7,425" + - gridcell "$965" + - row "Press Space to toggle row selection (unchecked) [WEB-3110] Add input sanitization (Security Audit) Testing Low ๐Ÿ”’ Security Kevin Zhang Kevin Zhang 9/11/2025 88% $100 $88": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-3110] Add input sanitization (Security Audit)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ”’ Security" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/11/2025" + - gridcell "88%" + - gridcell "$100" + - gridcell "$88" + - row "Press Space to toggle row selection (unchecked) [UI-4504] Add visual regression tests Backlog Critical ๐Ÿงช Testing Kevin Zhang Kevin Zhang 8/30/2025 0% $675": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4504] Add visual regression tests" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "8/30/2025" + - gridcell "0%" + - gridcell "$675" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-4562] Add multi-language support Backlog Low โœจ Feature Jessica Lopez Jessica Lopez 9/23/2025 0% $6,825": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4562] Add multi-language support" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/23/2025" + - gridcell "0%" + - gridcell "$6,825" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,896,300 $18,876,634": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,896,300" + - gridcell "$18,876,634" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 154 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); +``` \ No newline at end of file diff --git a/playwright-report/data/27a44a0cc011500922c0700b359a9a571b58fb2a.png b/playwright-report/data/27a44a0cc011500922c0700b359a9a571b58fb2a.png new file mode 100644 index 0000000..99af214 Binary files /dev/null and b/playwright-report/data/27a44a0cc011500922c0700b359a9a571b58fb2a.png differ diff --git a/playwright-report/data/27c10e96c277cb8ceed18c903cde5e6daa674e85.png b/playwright-report/data/27c10e96c277cb8ceed18c903cde5e6daa674e85.png new file mode 100644 index 0000000..32325f1 Binary files /dev/null and b/playwright-report/data/27c10e96c277cb8ceed18c903cde5e6daa674e85.png differ diff --git a/playwright-report/data/2eabb2288d0ba7276251e476c740dcafeac2c2a1.md b/playwright-report/data/2eabb2288d0ba7276251e476c740dcafeac2c2a1.md deleted file mode 100644 index eafb657..0000000 --- a/playwright-report/data/2eabb2288d0ba7276251e476c740dcafeac2c2a1.md +++ /dev/null @@ -1,255 +0,0 @@ -# Test info - -- Name: SavedViewsManager Headless Component E2E Tests >> SavedViewsManager trigger button renders correctly -- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/saved-views-manager-headless.spec.ts:17:3 - -# Error details - -``` -TimeoutError: page.waitForSelector: Timeout 10000ms exceeded. -Call log: - - waiting for locator('.ag-theme-custom') to be visible - - at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/saved-views-manager-headless.spec.ts:8:16 -``` - -# Page snapshot - -```yaml -- banner: - - heading "AG Grid React Components" [level=1] - - navigation: - - link "Home": - - /url: / - - link "Demo": - - /url: /demo - - link "Docs": - - /url: /docs - - button "Show version details": v0.1.0+35 feat/headless-refactor - - img - - text: MIT License - - link "GitHub": - - /url: https://github.com/ryanrozich/ag-grid-react-components - - img - - text: GitHub -- text: Pre-release v0.1.0 Minimal Bundle Size MIT License -- heading "AG Grid filters that understand \"today\"" [level=1] -- paragraph: If you're using AG Grid, you know users struggle with date filtering. They want "last 30 days" to mean last 30 daysโ€”tomorrow too. These open source React components make it happen. -- button "View Live Demo" -- button "Documentation" -- img "AG Grid React Components showcase - DateFilter with relative date expressions, QuickFilterDropdown with presets, and ActiveFilters display" -- text: DateFilter QuickFilterDropdown ActiveFilters -- paragraph: New UX features for AG Grid -- paragraph: AG Grid is incredibly extensible, but its filtering UX hasn't kept up with modern apps. When you have dozens of columns and dynamic data, users need better ways to filter, save, and share their views. These open source components fill that gap. -- term: - - img - - text: DateFilter -- definition: - - paragraph: Let users filter by "this week", "last month", or "next quarter". These relative queries stay current and work perfectly when bookmarked or shared. -- term: - - img - - text: QuickFilterDropdown -- definition: - - paragraph: Give users instant access to common filters like "Overdue tasks" or "Due this week". No more manual date picking for repetitive queries. -- term: - - img - - text: ActiveFilters -- definition: - - paragraph: No more hunting for tiny blue dots. Show exactly what's filtered in clear, removable pills that users can understand at a glance. -- term: - - img - - text: URL State Persistence -- definition: - - paragraph: Users can bookmark their favorite views and share them with teammates. "Last 30 days" stays last 30 days, even next month. -- paragraph: Your users understand dates differently than databases do -- heading "The Problem" [level=3] -- list: - - listitem: ร— Users manually pick dates every single time - - listitem: ร— "Last 30 days" becomes outdated tomorrow - - listitem: ร— Can't share or bookmark filtered views - - listitem: ร— Tiny blue dots hide active filters -- heading "The Solution" [level=3] -- list: - - listitem: โœ“ Relative date expressions that stay current - - listitem: โœ“ Quick filter presets for common queries - - listitem: โœ“ Shareable URLs with compressed state - - listitem: โœ“ Clear filter pills with one-click removal -- heading "The Benefit" [level=3] -- list: - - listitem: โ†’ Users save hours on repetitive filtering - - listitem: โ†’ Teams share consistent report views - - listitem: โ†’ Dashboards that update automatically - - listitem: โ†’ Happy users, fewer support tickets -- paragraph: Developer experience that just works -- paragraph: Clean APIs, zero dependencies, and thoughtful defaults. Style it your way or use it headless. -- code: "npm install ag-grid-react-components // Just add to your existing AG Grid setup import { createDateFilter } from 'ag-grid-react-components'; const DateFilter = createDateFilter(); const columnDefs = [{ field: 'dueDate', filter: DateFilter, filterParams: { defaultMode: 'relative' } }];" -- img -- heading "Start in minutes" [level=3] -- list: - - listitem: โ†’ Single npm install - - listitem: โ†’ Works with AG Grid Community & Enterprise - - listitem: โ†’ TypeScript support out of the box - - listitem: "โ†’ Minimal bundle: starts at 25KB" -- img -- heading "Style it your way" [level=3] -- list: - - listitem: โ†’ Headless by default - - listitem: โ†’ CSS modules for scoped styles - - listitem: โ†’ Override any style with className - - listitem: โ†’ Works with Tailwind, CSS-in-JS, etc. -- img -- heading "Configure everything" [level=3] -- list: - - listitem: โ†’ Pluggable date picker adapters - - listitem: โ†’ Customizable date expressions - - listitem: โ†’ Extensible filter presets - - listitem: โ†’ Override any behavior with callbacks -- heading "Open Source" [level=2] -- paragraph: Built by the community, for the community -- paragraph: We actively encourage contributions. Found a bug? Have a feature idea? Want to improve the docs? Jump in! This project exists because developers like you make it better. -- img -- heading "Report Issues" [level=3] -- paragraph: Found a bug? Let us know on GitHub -- img -- heading "Suggest Features" [level=3] -- paragraph: Have an idea? We'd love to hear it -- img -- heading "Submit PRs" [level=3] -- paragraph: Code contributions always welcome -- link "Contribute on GitHub": - - /url: https://github.com/ryanrozich/ag-grid-react-components - - img - - text: Contribute on GitHub -- contentinfo: - - heading "AG Grid React Components" [level=3] - - paragraph: Enterprise-ready date filtering components for AG Grid. Released under the MIT License. - - heading "Resources" [level=3] - - list: - - listitem: - - link "GitHub Repository": - - /url: https://github.com/ryanrozich/ag-grid-react-components - - listitem: - - link "NPM Package": - - /url: https://www.npmjs.com/package/ag-grid-react-components - - listitem: - - link "AG Grid Documentation": - - /url: https://www.ag-grid.com/react-data-grid/ - - heading "Legal" [level=3] - - paragraph: This project is not affiliated with AG Grid Ltd. - - paragraph: Use at your own risk. No warranty provided. - - paragraph: ยฉ 2025 Ryan Rozich. All rights reserved. -``` - -# Test source - -```ts - 1 | import { test, expect } from "@playwright/test"; - 2 | - 3 | test.describe("SavedViewsManager Headless Component E2E Tests", () => { - 4 | test.beforeEach(async ({ page }) => { - 5 | await page.goto("http://localhost:5174/"); - 6 | - 7 | // Wait for the demo to load -> 8 | await page.waitForSelector(".ag-theme-custom", { timeout: 10000 }); - | ^ TimeoutError: page.waitForSelector: Timeout 10000ms exceeded. - 9 | - 10 | // Navigate to Server-Side Data tab where SavedViewsManager is used - 11 | await page.click("text=Server-Side Data"); - 12 | - 13 | // Wait for the grid to be ready - 14 | await page.waitForSelector("[data-saved-views-trigger]", { timeout: 5000 }); - 15 | }); - 16 | - 17 | test("SavedViewsManager trigger button renders correctly", async ({ - 18 | page, - 19 | }) => { - 20 | // Check that the trigger button exists - 21 | const trigger = page.locator("[data-saved-views-trigger]"); - 22 | await expect(trigger).toBeVisible(); - 23 | - 24 | // Check that it contains the icon and text - 25 | await expect(trigger.locator("svg[data-icon]")).toBeVisible(); - 26 | await expect(trigger.locator("[data-label]")).toHaveText("Saved Views"); - 27 | - 28 | // Check that indicator is not visible when no active view - 29 | await expect(trigger.locator("[data-indicator]")).not.toBeVisible(); - 30 | }); - 31 | - 32 | test("SavedViewsManager panel opens and closes correctly", async ({ - 33 | page, - 34 | }) => { - 35 | // Click the trigger to open the panel - 36 | await page.click("[data-saved-views-trigger]"); - 37 | - 38 | // Check that panel is visible - 39 | const panel = page.locator("[data-saved-views-panel]"); - 40 | await expect(panel).toBeVisible(); - 41 | - 42 | // Check panel structure - 43 | await expect(panel.locator("[data-saved-views-title]")).toHaveText( - 44 | "Saved Views", - 45 | ); - 46 | await expect(panel.locator("[data-saved-views-close]")).toBeVisible(); - 47 | await expect(panel.locator("[data-saved-views-actions]")).toBeVisible(); - 48 | await expect(panel.locator("[data-saved-views-list]")).toBeVisible(); - 49 | - 50 | // Check empty state - 51 | await expect(panel.locator("[data-empty-message]")).toHaveText( - 52 | "No saved views yet", - 53 | ); - 54 | - 55 | // Close the panel - 56 | await page.click("[data-saved-views-close]"); - 57 | await expect(panel).not.toBeVisible(); - 58 | }); - 59 | - 60 | test("Save view dialog opens and validates input", async ({ page }) => { - 61 | // Open SavedViewsManager - 62 | await page.click("[data-saved-views-trigger]"); - 63 | - 64 | // Click Save Current button - 65 | await page.click('[data-action="save"]'); - 66 | - 67 | // Check that dialog is visible - 68 | const dialog = page.locator("[data-save-view-dialog]"); - 69 | await expect(dialog).toBeVisible(); - 70 | - 71 | // Check dialog structure - 72 | await expect(dialog.locator("[data-dialog-title]")).toHaveText( - 73 | "Save Current View", - 74 | ); - 75 | await expect(dialog.locator("[data-field-input]")).toBeVisible(); - 76 | await expect(dialog.locator("[data-field-textarea]")).toBeVisible(); - 77 | - 78 | // Check that save button is disabled when name is empty - 79 | const saveButton = dialog.locator( - 80 | '[data-action="save"][data-primary="true"]', - 81 | ); - 82 | await expect(saveButton).toBeDisabled(); - 83 | - 84 | // Type a view name - 85 | await dialog.locator("[data-field-input]").fill("Test View"); - 86 | - 87 | // Save button should now be enabled - 88 | await expect(saveButton).toBeEnabled(); - 89 | - 90 | // Close dialog - 91 | await dialog.locator('[data-action="cancel"]').click(); - 92 | await expect(dialog).not.toBeVisible(); - 93 | }); - 94 | - 95 | test("Can save and display a view", async ({ page }) => { - 96 | // Apply a filter first - 97 | const categoryCol = page - 98 | .locator(".ag-header-cell") - 99 | .filter({ hasText: "Category" }); - 100 | await categoryCol.locator(".ag-icon-menu").click(); - 101 | - 102 | // Wait for menu and click filter - 103 | await page.waitForSelector(".ag-menu", { state: "visible" }); - 104 | await page.click('.ag-menu-option:has-text("Filter")'); - 105 | - 106 | // Select Bug in the filter - 107 | await page.waitForSelector(".ag-set-filter-list", { state: "visible" }); - 108 | await page.click('.ag-set-filter-item:has-text("Bug")'); -``` \ No newline at end of file diff --git a/playwright-report/data/3917ba0038818f8f15d5e568f4bd547a7f40e520.png b/playwright-report/data/3917ba0038818f8f15d5e568f4bd547a7f40e520.png new file mode 100644 index 0000000..86f32ab Binary files /dev/null and b/playwright-report/data/3917ba0038818f8f15d5e568f4bd547a7f40e520.png differ diff --git a/playwright-report/data/3bd5d99849b12d73ac815bf0316e3bec9bb31654.md b/playwright-report/data/3bd5d99849b12d73ac815bf0316e3bec9bb31654.md new file mode 100644 index 0000000..8dc53df --- /dev/null +++ b/playwright-report/data/3bd5d99849b12d73ac815bf0316e3bec9bb31654.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Absolute Date Mode >> should filter by specific date +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:129:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:116:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,141,725 +- img +- paragraph: Average Progress +- paragraph: 46.2% +- img +- paragraph: Budget Remaining +- paragraph: $22,201,297 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [API-1850] Fix responsive layout on tablets (Sprint 25) In Progress High ๐Ÿ› Bug Maya Patel Maya Patel 9/4/2025 29% $6,925 $2,008": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-1850] Fix responsive layout on tablets (Sprint 25)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/4/2025" + - gridcell "29%" + - gridcell "$6,925" + - gridcell "$2,008" + - row "Press Space to toggle row selection (unchecked) [DATA-5874] Resolve memory leak in data grid (Sprint 23) Todo Low ๐Ÿ› Bug Sophia Taylor Sophia Taylor 9/14/2025 5% $4,425 $221": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-5874] Resolve memory leak in data grid (Sprint 23)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/14/2025" + - gridcell "5%" + - gridcell "$4,425" + - gridcell "$221" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-5966] Document component props (Performance Sprint) In Review Medium ๐Ÿ“ Documentation Isabella Garcia Isabella Garcia 9/19/2025 68% $1,525 $1,037": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-5966] Document component props (Performance Sprint)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/19/2025" + - gridcell "68%" + - gridcell "$1,525" + - gridcell "$1,037" + - row "Press Space to toggle row selection (unchecked) [ADMIN-6814] Implement social media sharing (Tech Debt) In Progress Low โœจ Feature John Robinson John Robinson 9/24/2025 46% $725 $334": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-6814] Implement social media sharing (Tech Debt)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/24/2025" + - gridcell "46%" + - gridcell "$725" + - gridcell "$334" + - row "Press Space to toggle row selection (unchecked) [UI-4598] Add brute force protection (Q2 Planning) In Progress High ๐Ÿ”’ Security Emily Jackson Emily Jackson 8/31/2025 21% $1,525 $320": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4598] Add brute force protection (Q2 Planning)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "8/31/2025" + - gridcell "21%" + - gridcell "$1,525" + - gridcell "$320" + - row "Press Space to toggle row selection (unchecked) [INFRA-4715] Implement secrets management (Sprint 25) Backlog High ๐Ÿ”ง DevOps Jessica Lopez Jessica Lopez 9/3/2025 0% $1,300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4715] Implement secrets management (Sprint 25)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$1,300" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-5529] Test error boundary behavior (Tech Debt) Backlog Critical ๐Ÿงช Testing Amanda White Amanda White 9/2/2025 0% $4,975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-5529] Test error boundary behavior (Tech Debt)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$4,975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-5864] Implement caching strategy Testing Medium โšก Performance Jessica Lopez Jessica Lopez 9/9/2025 81% $400 $324": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-5864] Implement caching strategy" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/9/2025" + - gridcell "81%" + - gridcell "$400" + - gridcell "$324" + - row "Press Space to toggle row selection (unchecked) [AUTH-8154] Extract business logic layer (Security Audit) In Review Medium โ™ป๏ธ Refactor James Wilson James Wilson 9/12/2025 67% $3,550 $2,379": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-8154] Extract business logic layer (Security Audit)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/12/2025" + - gridcell "67%" + - gridcell "$3,550" + - gridcell "$2,379" + - row "Press Space to toggle row selection (unchecked) [USER-8989] Add keyboard shortcuts (Q2 Planning) Testing High โœจ Feature Emily Jackson Emily Jackson 9/6/2025 84% $350 $294": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-8989] Add keyboard shortcuts (Q2 Planning)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/6/2025" + - gridcell "84%" + - gridcell "$350" + - gridcell "$294" + - row "Press Space to toggle row selection (unchecked) [DATA-10874] Add visual regression tests (Q1 Goals) Todo High ๐Ÿงช Testing James Wilson James Wilson 9/2/2025 10% $4,025 $403": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-10874] Add visual regression tests (Q1 Goals)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/2/2025" + - gridcell "10%" + - gridcell "$4,025" + - gridcell "$403" + - row "Press Space to toggle row selection (unchecked) [DASH-2012] Refactor error handling Testing Low โ™ป๏ธ Refactor Alex Chen Alex Chen 10/1/2025 90% $525 $473": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-2012] Refactor error handling" + - gridcell "Testing" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "10/1/2025" + - gridcell "90%" + - gridcell "$525" + - gridcell "$473" + - row "Press Space to toggle row selection (unchecked) [INFRA-4297] Implement API key rotation (Security Audit) In Progress High ๐Ÿ”’ Security Daniel Kim Daniel Kim 8/29/2025 33% $3,400 $1,122": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4297] Implement API key rotation (Security Audit)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "8/29/2025" + - gridcell "33%" + - gridcell "$3,400" + - gridcell "$1,122" + - row "Press Space to toggle row selection (unchecked) [UI-5330] Clean up deprecated APIs Testing Critical โ™ป๏ธ Refactor Priya Sharma Priya Sharma 8/30/2025 92% $800 $736": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-5330] Clean up deprecated APIs" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/30/2025" + - gridcell "92%" + - gridcell "$800" + - gridcell "$736" + - row "Press Space to toggle row selection (unchecked) [WEB-5335] Refactor error handling (Sprint 24) In Review Low โ™ป๏ธ Refactor Maya Patel Maya Patel 9/14/2025 78% $8,275 $6,455": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5335] Refactor error handling (Sprint 24)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/14/2025" + - gridcell "78%" + - gridcell "$8,275" + - gridcell "$6,455" + - row "Press Space to toggle row selection (unchecked) [APP-5872] Refactor authentication flow (Sprint 24) Backlog Low โ™ป๏ธ Refactor Amanda White Amanda White 10/4/2025 0% $4,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-5872] Refactor authentication flow (Sprint 24)" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "10/4/2025" + - gridcell "0%" + - gridcell "$4,450" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-6132] Implement secrets management (Q1 Goals) Todo Medium ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/10/2025 15% $1,750 $263": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-6132] Implement secrets management (Q1 Goals)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/10/2025" + - gridcell "15%" + - gridcell "$1,750" + - gridcell "$263" + - row "Press Space to toggle row selection (unchecked) [API-6971] Add encryption at rest (Sprint 27) In Review High ๐Ÿ”’ Security Amanda White Amanda White 8/29/2025 65% $2,975 $1,934": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-6971] Add encryption at rest (Sprint 27)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "8/29/2025" + - gridcell "65%" + - gridcell "$2,975" + - gridcell "$1,934" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,141,725 $18,940,428": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,141,725" + - gridcell "$18,940,428" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 116 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { +``` \ No newline at end of file diff --git a/playwright-report/data/3e7d3b0d3bc72c28d311d685a75d36389aadbf67.png b/playwright-report/data/3e7d3b0d3bc72c28d311d685a75d36389aadbf67.png new file mode 100644 index 0000000..e13120e Binary files /dev/null and b/playwright-report/data/3e7d3b0d3bc72c28d311d685a75d36389aadbf67.png differ diff --git a/playwright-report/data/43e842532859331f0d292ae5f9872264716f82d1.png b/playwright-report/data/43e842532859331f0d292ae5f9872264716f82d1.png new file mode 100644 index 0000000..7910059 Binary files /dev/null and b/playwright-report/data/43e842532859331f0d292ae5f9872264716f82d1.png differ diff --git a/playwright-report/data/5188402a6f86fad9cbe2b67ce010e6468d8fff27.md b/playwright-report/data/5188402a6f86fad9cbe2b67ce010e6468d8fff27.md new file mode 100644 index 0000000..129a684 --- /dev/null +++ b/playwright-report/data/5188402a6f86fad9cbe2b67ce010e6468d8fff27.md @@ -0,0 +1,474 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Basic Functionality >> should open date filter dropdown when clicking on filter icon +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:13:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:16:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,678,275 +- img +- paragraph: Average Progress +- paragraph: 46.2% +- img +- paragraph: Budget Remaining +- paragraph: $22,630,379 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [WEB-1498] Add keyboard shortcuts (Performance Sprint) In Review High โœจ Feature Maya Patel Maya Patel 9/5/2025 70% $800 $560": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1498] Add keyboard shortcuts (Performance Sprint)" + - gridcell "In Review" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/5/2025" + - gridcell "70%" + - gridcell "$800" + - gridcell "$560" + - row "Press Space to toggle row selection (unchecked) [API-2031] Implement two-factor authentication Testing High โœจ Feature Alex Chen Alex Chen 9/6/2025 88% $5,075 $4,466": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-2031] Implement two-factor authentication" + - gridcell "Testing" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/6/2025" + - gridcell "88%" + - gridcell "$5,075" + - gridcell "$4,466" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-4407] Optimize render performance (Tech Debt) Todo High โšก Performance Kevin Zhang Kevin Zhang 9/4/2025 5% $100 $5": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-4407] Optimize render performance (Tech Debt)" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/4/2025" + - gridcell "5%" + - gridcell "$100" + - gridcell "$5" + - row "Press Space to toggle row selection (unchecked) [API-7201] Fix infinite scroll pagination bug (Sprint 27) In Progress Critical ๐Ÿ› Bug Emma Davis Emma Davis 9/1/2025 24% $14,150 $3,396": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7201] Fix infinite scroll pagination bug (Sprint 27)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/1/2025" + - gridcell "24%" + - gridcell "$14,150" + - gridcell "$3,396" + - row "Press Space to toggle row selection (unchecked) [DATA-8667] Extract business logic layer Backlog Low โ™ป๏ธ Refactor Chris Martinez Chris Martinez 10/12/2025 0% $300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-8667] Extract business logic layer" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "10/12/2025" + - gridcell "0%" + - gridcell "$300" + - gridcell + - row "Press Space to toggle row selection (unchecked) [WEB-8730] Fix broken deep links in navigation In Review Low ๐Ÿ› Bug Alex Chen Alex Chen 9/16/2025 73% $14,125 $10,311": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-8730] Fix broken deep links in navigation" + - gridcell "In Review" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/16/2025" + - gridcell "73%" + - gridcell "$14,125" + - gridcell "$10,311" + - row "Press Space to toggle row selection (unchecked) [WEB-2629] Optimize image loading In Review Medium โšก Performance Michael Anderson Michael Anderson 9/10/2025 68% $800 $544": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-2629] Optimize image loading" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/10/2025" + - gridcell "68%" + - gridcell "$800" + - gridcell "$544" + - row "Press Space to toggle row selection (unchecked) [PROJ-2937] Implement auto-scaling (Sprint 26) Todo Low ๐Ÿ”ง DevOps David Lee David Lee 9/22/2025 18% $12,450 $2,241": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-2937] Implement auto-scaling (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/22/2025" + - gridcell "18%" + - gridcell "$12,450" + - gridcell "$2,241" + - row "Press Space to toggle row selection (unchecked) [DATA-3204] Add database indexing (Sprint 27) Testing Critical โšก Performance John Robinson John Robinson 9/1/2025 87% $5,425 $4,720": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-3204] Add database indexing (Sprint 27)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/1/2025" + - gridcell "87%" + - gridcell "$5,425" + - gridcell "$4,720" + - row "Press Space to toggle row selection (unchecked) [MOBILE-4054] Document error handling patterns Backlog Medium ๐Ÿ“ Documentation Emma Davis Emma Davis 9/9/2025 0% $2,300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-4054] Document error handling patterns" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$2,300" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-6615] Write API contract tests (Sprint 25) Todo High ๐Ÿงช Testing Isabella Garcia Isabella Garcia 9/4/2025 17% $775 $132": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-6615] Write API contract tests (Sprint 25)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/4/2025" + - gridcell "17%" + - gridcell "$775" + - gridcell "$132" + - row "Press Space to toggle row selection (unchecked) [CORE-7613] Optimize render performance (Sprint 24) Backlog Critical โšก Performance Emily Jackson Emily Jackson 8/31/2025 0% $200": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-7613] Optimize render performance (Sprint 24)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$200" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-2780] Add internationalization tests (Q1 Goals) Backlog Critical ๐Ÿงช Testing Amanda White Amanda White 8/30/2025 0% $500": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-2780] Add internationalization tests (Q1 Goals)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "8/30/2025" + - gridcell "0%" + - gridcell "$500" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-4660] Implement dark mode toggle Backlog Critical โœจ Feature Olivia Brown Olivia Brown 8/31/2025 0% $600": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4660] Implement dark mode toggle" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$600" + - gridcell + - row "Press Space to toggle row selection (unchecked) [APP-7011] Add SQL injection prevention In Review Low ๐Ÿ”’ Security Sophia Taylor Sophia Taylor 9/13/2025 72% $1,275 $918": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-7011] Add SQL injection prevention" + - gridcell "In Review" + - gridcell "Low" + - gridcell "๐Ÿ”’ Security" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/13/2025" + - gridcell "72%" + - gridcell "$1,275" + - gridcell "$918" + - row "Press Space to toggle row selection (unchecked) [INFRA-1288] Fix infinite scroll pagination bug (Sprint 24) Backlog Medium ๐Ÿ› Bug Marcus Williams Marcus Williams 9/6/2025 0% $11,025": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-1288] Fix infinite scroll pagination bug (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$11,025" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-3206] Optimize database queries (Sprint 24) Todo Critical โ™ป๏ธ Refactor Isabella Garcia Isabella Garcia 8/29/2025 16% $250 $40": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-3206] Optimize database queries (Sprint 24)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/29/2025" + - gridcell "16%" + - gridcell "$250" + - gridcell "$40" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3226] Add export to PDF functionality (Sprint 25) In Progress High โœจ Feature Chris Martinez Chris Martinez 9/3/2025 23% $6,075 $1,397": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3226] Add export to PDF functionality (Sprint 25)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/3/2025" + - gridcell "23%" + - gridcell "$6,075" + - gridcell "$1,397" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,678,275 $19,047,896": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,678,275" + - gridcell "$19,047,896" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 16 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); +``` \ No newline at end of file diff --git a/playwright-report/data/58fca8ecf84e4b0f85a3a5d5282bf9e211bbc81e.md b/playwright-report/data/58fca8ecf84e4b0f85a3a5d5282bf9e211bbc81e.md new file mode 100644 index 0000000..9638784 --- /dev/null +++ b/playwright-report/data/58fca8ecf84e4b0f85a3a5d5282bf9e211bbc81e.md @@ -0,0 +1,535 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Integration with Grid >> should update filter model when filter is applied +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:217:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:220:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,940,450 +- img +- paragraph: Average Progress +- paragraph: 46.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,055,007 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-1745] Write unit tests for auth module (Sprint 26) Testing Medium ๐Ÿงช Testing John Robinson John Robinson 9/15/2025 84% $3,475 $2,919": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1745] Write unit tests for auth module (Sprint 26)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/15/2025" + - gridcell "84%" + - gridcell "$3,475" + - gridcell "$2,919" + - row "Press Space to toggle row selection (unchecked) [ADMIN-6305] Debug performance regression in search (Q2 Planning) Todo High ๐Ÿ› Bug James Wilson James Wilson 9/5/2025 7% $625 $44": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-6305] Debug performance regression in search (Q2 Planning)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/5/2025" + - gridcell "7%" + - gridcell "$625" + - gridcell "$44" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-8056] Test cross-browser compatibility (Sprint 27) In Progress Medium ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/13/2025 29% $9,675 $2,806": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-8056] Test cross-browser compatibility (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/13/2025" + - gridcell "29%" + - gridcell "$9,675" + - gridcell "$2,806" + - row "Press Space to toggle row selection (unchecked) [CORE-3043] Update README with examples (Performance Sprint) In Progress High ๐Ÿ“ Documentation John Robinson John Robinson 9/5/2025 36% $1,925 $693": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3043] Update README with examples (Performance Sprint)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/5/2025" + - gridcell "36%" + - gridcell "$1,925" + - gridcell "$693" + - row "Press Space to toggle row selection (unchecked) [APP-4852] Implement two-factor authentication (Sprint 26) Backlog High โœจ Feature Maya Patel Maya Patel 9/4/2025 0% $8,325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-4852] Implement two-factor authentication (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/4/2025" + - gridcell "0%" + - gridcell "$8,325" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-5743] Write performance optimization tips (Sprint 24) Backlog Medium ๐Ÿ“ Documentation Michael Anderson Michael Anderson 9/9/2025 0% $3,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-5743] Write performance optimization tips (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$3,450" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-7960] Set up monitoring alerts (Sprint 27) Testing Medium ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 9/12/2025 92% $4,625 $4,255": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-7960] Set up monitoring alerts (Sprint 27)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/12/2025" + - gridcell "92%" + - gridcell "$4,625" + - gridcell "$4,255" + - row "Press Space to toggle row selection (unchecked) [INFRA-7997] Optimize render performance In Progress High โšก Performance Jessica Lopez Jessica Lopez 9/6/2025 35% $300 $105": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7997] Optimize render performance" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/6/2025" + - gridcell "35%" + - gridcell "$300" + - gridcell "$105" + - row "Press Space to toggle row selection (unchecked) [WEB-9279] Handle null pointer exception in API client (Tech Debt) In Review Medium ๐Ÿ› Bug Kevin Zhang Kevin Zhang 9/7/2025 73% $750 $548": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-9279] Handle null pointer exception in API client (Tech Debt)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/7/2025" + - gridcell "73%" + - gridcell "$750" + - gridcell "$548" + - row "Press Space to toggle row selection (unchecked) [DATA-9507] Set up penetration testing (Sprint 25) Backlog Medium ๐Ÿ”’ Security Sophia Taylor Sophia Taylor 9/8/2025 0% $8,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-9507] Set up penetration testing (Sprint 25)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$8,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-10347] Create onboarding tutorial In Review High ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/3/2025 66% $800 $528": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-10347] Create onboarding tutorial" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/3/2025" + - gridcell "66%" + - gridcell "$800" + - gridcell "$528" + - row "Press Space to toggle row selection (unchecked) [CORE-10415] Update README with examples (Performance Sprint) Backlog High ๐Ÿ“ Documentation Kevin Zhang Kevin Zhang 9/5/2025 0% $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-10415] Update README with examples (Performance Sprint)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$350" + - gridcell + - row "Press Space to toggle row selection (unchecked) [WEB-7571] Optimize render performance (Performance Sprint) In Progress Low โšก Performance Jessica Lopez Jessica Lopez 9/27/2025 59% $17,525 $10,340": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-7571] Optimize render performance (Performance Sprint)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/27/2025" + - gridcell "59%" + - gridcell "$17,525" + - gridcell "$10,340" + - row "Press Space to toggle row selection (unchecked) [DATA-7842] Fix broken deep links in navigation (Security Audit) Todo Medium ๐Ÿ› Bug Amanda White Amanda White 9/2/2025 17% $14,850 $2,525": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-7842] Fix broken deep links in navigation (Security Audit)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/2/2025" + - gridcell "17%" + - gridcell "$14,850" + - gridcell "$2,525" + - row "Press Space to toggle row selection (unchecked) [INFRA-9290] Test offline functionality Todo Low ๐Ÿงช Testing Priya Sharma Priya Sharma 10/3/2025 16% $18,600 $2,976": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-9290] Test offline functionality" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿงช Testing" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "10/3/2025" + - gridcell "16%" + - gridcell "$18,600" + - gridcell "$2,976" + - row "Press Space to toggle row selection (unchecked) [DASH-1315] Configure CDN distribution Testing Critical ๐Ÿ”ง DevOps Alex Chen Alex Chen 9/1/2025 83% $8,500 $7,055": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-1315] Configure CDN distribution" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/1/2025" + - gridcell "83%" + - gridcell "$8,500" + - gridcell "$7,055" + - row "Press Space to toggle row selection (unchecked) [UI-3567] Test offline functionality (Sprint 25) In Progress Critical ๐Ÿงช Testing Daniel Kim Daniel Kim 9/1/2025 30% $3,950 $1,185": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3567] Test offline functionality (Sprint 25)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/1/2025" + - gridcell "30%" + - gridcell "$3,950" + - gridcell "$1,185" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3951] Document component props Backlog Low ๐Ÿ“ Documentation Priya Sharma Priya Sharma 9/27/2025 0% $4,350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3951] Document component props" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/27/2025" + - gridcell "0%" + - gridcell "$4,350" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,940,450 $18,885,443": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,940,450" + - gridcell "$18,885,443" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 220 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 265 | await dateHeader.click(); + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 286 | await dateHeader.click(); + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/playwright-report/data/59db4f5a93eb25ee0575c5af493ba646c926271f.md b/playwright-report/data/59db4f5a93eb25ee0575c5af493ba646c926271f.md new file mode 100644 index 0000000..9c116d0 --- /dev/null +++ b/playwright-report/data/59db4f5a93eb25ee0575c5af493ba646c926271f.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should parse relative date expressions correctly +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:58:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,604,650 +- img +- paragraph: Average Progress +- paragraph: 46.3% +- img +- paragraph: Budget Remaining +- paragraph: $21,912,371 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-4088] Write deployment guide (Sprint 23) Todo Critical ๐Ÿ“ Documentation Emily Jackson Emily Jackson 9/4/2025 8% $775 $62": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-4088] Write deployment guide (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/4/2025" + - gridcell "8%" + - gridcell "$775" + - gridcell "$62" + - row "Press Space to toggle row selection (unchecked) [DASH-6138] Implement caching strategy Todo High โšก Performance Amanda White Amanda White 9/6/2025 19% $650 $124": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-6138] Implement caching strategy" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/6/2025" + - gridcell "19%" + - gridcell "$650" + - gridcell "$124" + - row "Press Space to toggle row selection (unchecked) [DASH-7749] Set up CI/CD pipeline (Security Audit) In Review Critical ๐Ÿ”ง DevOps Olivia Brown Olivia Brown 9/3/2025 73% $4,900 $3,577": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-7749] Set up CI/CD pipeline (Security Audit)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/3/2025" + - gridcell "73%" + - gridcell "$4,900" + - gridcell "$3,577" + - row "Press Space to toggle row selection (unchecked) [WEB-4498] Optimize database queries (Sprint 25) In Progress Medium โšก Performance James Wilson James Wilson 9/13/2025 28% $550 $154": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-4498] Optimize database queries (Sprint 25)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/13/2025" + - gridcell "28%" + - gridcell "$550" + - gridcell "$154" + - row "Press Space to toggle row selection (unchecked) [API-6185] Optimize bundle size (Sprint 24) In Progress Critical โšก Performance Amanda White Amanda White 9/1/2025 27% $10,125 $2,734": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-6185] Optimize bundle size (Sprint 24)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/1/2025" + - gridcell "27%" + - gridcell "$10,125" + - gridcell "$2,734" + - row "Press Space to toggle row selection (unchecked) [BACKEND-8135] Reduce API call frequency (Sprint 24) Testing High โšก Performance David Lee David Lee 9/4/2025 84% $8,675 $7,287": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8135] Reduce API call frequency (Sprint 24)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/4/2025" + - gridcell "84%" + - gridcell "$8,675" + - gridcell "$7,287" + - row "Press Space to toggle row selection (unchecked) [BACKEND-8576] Update to React 18 patterns In Review High โ™ป๏ธ Refactor Maya Patel Maya Patel 9/5/2025 77% $575 $443": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8576] Update to React 18 patterns" + - gridcell "In Review" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/5/2025" + - gridcell "77%" + - gridcell "$575" + - gridcell "$443" + - row "Press Space to toggle row selection (unchecked) [ADMIN-8758] Implement blue-green deployment (Tech Debt) Backlog High ๐Ÿ”ง DevOps Sophia Taylor Sophia Taylor 9/7/2025 0% $1,400": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-8758] Implement blue-green deployment (Tech Debt)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$1,400" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-1564] Set up CI/CD pipeline (Sprint 25) Todo High ๐Ÿ”ง DevOps Sophia Taylor Sophia Taylor 9/3/2025 14% $7,600 $1,064": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-1564] Set up CI/CD pipeline (Sprint 25)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/3/2025" + - gridcell "14%" + - gridcell "$7,600" + - gridcell "$1,064" + - row "Press Space to toggle row selection (unchecked) [PROJ-3800] Implement social media sharing Backlog Medium โœจ Feature James Wilson James Wilson 9/19/2025 0% $2,850": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-3800] Implement social media sharing" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/19/2025" + - gridcell "0%" + - gridcell "$2,850" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-4395] Implement CSRF protection (Sprint 27) In Review High ๐Ÿ”’ Security Chris Martinez Chris Martinez 9/3/2025 62% $4,400 $2,728": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-4395] Implement CSRF protection (Sprint 27)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/3/2025" + - gridcell "62%" + - gridcell "$4,400" + - gridcell "$2,728" + - row "Press Space to toggle row selection (unchecked) [ADMIN-5439] Write migration guide for v2 (Sprint 25) In Progress Low ๐Ÿ“ Documentation Marcus Williams Marcus Williams 10/6/2025 22% $6,775 $1,491": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-5439] Write migration guide for v2 (Sprint 25)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "10/6/2025" + - gridcell "22%" + - gridcell "$6,775" + - gridcell "$1,491" + - row "Press Space to toggle row selection (unchecked) [AUTH-6864] Add input sanitization (Tech Debt) In Progress Critical ๐Ÿ”’ Security Sarah Johnson Sarah Johnson 8/30/2025 56% $625 $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-6864] Add input sanitization (Tech Debt)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "8/30/2025" + - gridcell "56%" + - gridcell "$625" + - gridcell "$350" + - row "Press Space to toggle row selection (unchecked) [PROJ-7850] Write testing best practices (Sprint 23) Todo Critical ๐Ÿ“ Documentation Jessica Lopez Jessica Lopez 9/2/2025 16% $3,375 $540": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-7850] Write testing best practices (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "16%" + - gridcell "$3,375" + - gridcell "$540" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-10547] Refactor error handling (Q1 Goals) Todo Medium โ™ป๏ธ Refactor Olivia Brown Olivia Brown 9/15/2025 16% $18,975 $3,036": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-10547] Refactor error handling (Q1 Goals)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/15/2025" + - gridcell "16%" + - gridcell "$18,975" + - gridcell "$3,036" + - row "Press Space to toggle row selection (unchecked) [MOBILE-3033] Add request batching (Sprint 26) Backlog High โšก Performance James Wilson James Wilson 9/1/2025 0% $13,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-3033] Add request batching (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$13,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-4514] Create integration test suite Backlog High ๐Ÿงช Testing Priya Sharma Priya Sharma 9/7/2025 0% $475": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4514] Create integration test suite" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$475" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-4902] Implement secrets management (Security Audit) Backlog High ๐Ÿ”ง DevOps James Wilson James Wilson 9/7/2025 0% $8,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-4902] Implement secrets management (Security Audit)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$8,450" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,604,650 $18,692,279": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,604,650" + - gridcell "$18,692,279" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/playwright-report/data/66eaa6d01a0bb0ae56717249c0ecbbf2e17d5148.png b/playwright-report/data/66eaa6d01a0bb0ae56717249c0ecbbf2e17d5148.png new file mode 100644 index 0000000..c8773c6 Binary files /dev/null and b/playwright-report/data/66eaa6d01a0bb0ae56717249c0ecbbf2e17d5148.png differ diff --git a/playwright-report/data/67ef74a52d6dfb2d7b8ede7bdb97278a80c0c7b3.md b/playwright-report/data/67ef74a52d6dfb2d7b8ede7bdb97278a80c0c7b3.md new file mode 100644 index 0000000..d65c0f5 --- /dev/null +++ b/playwright-report/data/67ef74a52d6dfb2d7b8ede7bdb97278a80c0c7b3.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Filter Operators >> should filter with 'after' operator +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:175:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:154:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,307,925 +- img +- paragraph: Average Progress +- paragraph: 46.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,404,326 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [UI-2927] Optimize image loading (Sprint 27) Todo Low โšก Performance Kevin Zhang Kevin Zhang 10/2/2025 18% $4,975 $896": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-2927] Optimize image loading (Sprint 27)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "10/2/2025" + - gridcell "18%" + - gridcell "$4,975" + - gridcell "$896" + - row "Press Space to toggle row selection (unchecked) [UI-4550] Split monolithic components (Sprint 27) Todo Critical โ™ป๏ธ Refactor James Wilson James Wilson 9/4/2025 12% $6,900 $828": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4550] Split monolithic components (Sprint 27)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/4/2025" + - gridcell "12%" + - gridcell "$6,900" + - gridcell "$828" + - row "Press Space to toggle row selection (unchecked) [USER-5097] Implement blue-green deployment In Progress Medium ๐Ÿ”ง DevOps Jessica Lopez Jessica Lopez 9/19/2025 27% $1,825 $493": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-5097] Implement blue-green deployment" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/19/2025" + - gridcell "27%" + - gridcell "$1,825" + - gridcell "$493" + - row "Press Space to toggle row selection (unchecked) [AUTH-4205] Create user profile dashboard Todo High โœจ Feature Chris Martinez Chris Martinez 9/5/2025 7% $725 $51": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-4205] Create user profile dashboard" + - gridcell "Todo" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/5/2025" + - gridcell "7%" + - gridcell "$725" + - gridcell "$51" + - row "Press Space to toggle row selection (unchecked) [CORE-2210] Add drag-and-drop file upload (Tech Debt) Testing Critical โœจ Feature Emma Davis Emma Davis 9/2/2025 84% $725 $609": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-2210] Add drag-and-drop file upload (Tech Debt)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/2/2025" + - gridcell "84%" + - gridcell "$725" + - gridcell "$609" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-3005] Debug crash on mobile Safari (Tech Debt) In Progress Critical ๐Ÿ› Bug James Wilson James Wilson 8/31/2025 58% $4,350 $2,523": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-3005] Debug crash on mobile Safari (Tech Debt)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "8/31/2025" + - gridcell "58%" + - gridcell "$4,350" + - gridcell "$2,523" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3460] Add drag-and-drop file upload (Sprint 26) Backlog Medium โœจ Feature Chris Martinez Chris Martinez 9/15/2025 0% $600": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3460] Add drag-and-drop file upload (Sprint 26)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/15/2025" + - gridcell "0%" + - gridcell "$600" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-6053] Handle null pointer exception in API client (Sprint 27) In Progress Medium ๐Ÿ› Bug David Lee David Lee 9/4/2025 49% $9,125 $4,471": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-6053] Handle null pointer exception in API client (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/4/2025" + - gridcell "49%" + - gridcell "$9,125" + - gridcell "$4,471" + - row "Press Space to toggle row selection (unchecked) [UI-6545] Fix login form validation error (Sprint 27) Todo Medium ๐Ÿ› Bug Michael Anderson Michael Anderson 9/4/2025 17% $5,925 $1,007": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-6545] Fix login form validation error (Sprint 27)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/4/2025" + - gridcell "17%" + - gridcell "$5,925" + - gridcell "$1,007" + - row "Press Space to toggle row selection (unchecked) [ADMIN-10067] Implement code splitting (Sprint 26) Backlog Medium โšก Performance James Wilson James Wilson 9/18/2025 0% $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-10067] Implement code splitting (Sprint 26)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/18/2025" + - gridcell "0%" + - gridcell "$350" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-5412] Create data visualization charts (Tech Debt) In Review Critical โœจ Feature Emily Jackson Emily Jackson 8/31/2025 71% $6,825 $4,846": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-5412] Create data visualization charts (Tech Debt)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "8/31/2025" + - gridcell "71%" + - gridcell "$6,825" + - gridcell "$4,846" + - row "Press Space to toggle row selection (unchecked) [BACKEND-5482] Build custom report generator (Tech Debt) Testing Critical โœจ Feature Michael Anderson Michael Anderson 9/1/2025 87% $3,200 $2,784": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-5482] Build custom report generator (Tech Debt)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/1/2025" + - gridcell "87%" + - gridcell "$3,200" + - gridcell "$2,784" + - row "Press Space to toggle row selection (unchecked) [CORE-5486] Test error boundary behavior Todo Critical ๐Ÿงช Testing Alex Chen Alex Chen 9/1/2025 13% $3,950 $514": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-5486] Test error boundary behavior" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/1/2025" + - gridcell "13%" + - gridcell "$3,950" + - gridcell "$514" + - row "Press Space to toggle row selection (unchecked) [WEB-5505] Add multi-language support (Security Audit) In Review Medium โœจ Feature John Robinson John Robinson 9/11/2025 75% $16,300 $12,225": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5505] Add multi-language support (Security Audit)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/11/2025" + - gridcell "75%" + - gridcell "$16,300" + - gridcell "$12,225" + - row "Press Space to toggle row selection (unchecked) [ADMIN-6448] Configure load balancer (Q1 Goals) Testing Medium ๐Ÿ”ง DevOps Michael Anderson Michael Anderson 9/13/2025 85% $9,850 $8,373": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-6448] Configure load balancer (Q1 Goals)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/13/2025" + - gridcell "85%" + - gridcell "$9,850" + - gridcell "$8,373" + - row "Press Space to toggle row selection (unchecked) [INFRA-7129] Add drag-and-drop file upload (Tech Debt) In Review High โœจ Feature Kevin Zhang Kevin Zhang 9/1/2025 60% $550 $330": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7129] Add drag-and-drop file upload (Tech Debt)" + - gridcell "In Review" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/1/2025" + - gridcell "60%" + - gridcell "$550" + - gridcell "$330" + - row "Press Space to toggle row selection (unchecked) [WEB-7967] Clean up deprecated APIs (Sprint 26) In Progress High โ™ป๏ธ Refactor Ryan Thomas Ryan Thomas 9/3/2025 47% $975 $458": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-7967] Clean up deprecated APIs (Sprint 26)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/3/2025" + - gridcell "47%" + - gridcell "$975" + - gridcell "$458" + - row "Press Space to toggle row selection (unchecked) [APP-8113] Set up vulnerability scanning Testing Critical ๐Ÿ”’ Security Emma Davis Emma Davis 8/30/2025 92% $1,500 $1,380": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-8113] Set up vulnerability scanning" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "8/30/2025" + - gridcell "92%" + - gridcell "$1,500" + - gridcell "$1,380" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,307,925 $18,903,599": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,307,925" + - gridcell "$18,903,599" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 154 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); +``` \ No newline at end of file diff --git a/playwright-report/data/696c9d1e67c7d4d9f0895d1cfc297f083ecc788c.png b/playwright-report/data/696c9d1e67c7d4d9f0895d1cfc297f083ecc788c.png new file mode 100644 index 0000000..075feb8 Binary files /dev/null and b/playwright-report/data/696c9d1e67c7d4d9f0895d1cfc297f083ecc788c.png differ diff --git a/playwright-report/data/6c9a91b9673eb1ba25c5c342262d05264127f031.md b/playwright-report/data/6c9a91b9673eb1ba25c5c342262d05264127f031.md new file mode 100644 index 0000000..f7e56fe --- /dev/null +++ b/playwright-report/data/6c9a91b9673eb1ba25c5c342262d05264127f031.md @@ -0,0 +1,487 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Basic Functionality >> should display filter type selector +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:26:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:29:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,999,275 +- img +- paragraph: Average Progress +- paragraph: 45.7% +- img +- paragraph: Budget Remaining +- paragraph: $22,309,635 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-3786] Reduce API call frequency In Progress High โšก Performance Emily Jackson Emily Jackson 9/7/2025 52% $1,000 $520": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-3786] Reduce API call frequency" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/7/2025" + - gridcell "52%" + - gridcell "$1,000" + - gridcell "$520" + - row "Press Space to toggle row selection (unchecked) [WEB-2827] Build real-time notifications system (Sprint 24) Backlog High โœจ Feature Ryan Thomas Ryan Thomas 9/9/2025 0% $1,800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-2827] Build real-time notifications system (Sprint 24)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$1,800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-5687] Create load testing scenarios Backlog High ๐Ÿงช Testing John Robinson John Robinson 9/9/2025 0% $10,800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-5687] Create load testing scenarios" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$10,800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-5761] Add audit logging Backlog High ๐Ÿ”’ Security Marcus Williams Marcus Williams 9/5/2025 0% $525": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-5761] Add audit logging" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$525" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-7292] Set up penetration testing (Sprint 23) Backlog Critical ๐Ÿ”’ Security Emily Jackson Emily Jackson 9/2/2025 0% $625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7292] Set up penetration testing (Sprint 23)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$625" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-7351] Add encryption at rest (Tech Debt) Todo High ๐Ÿ”’ Security Amanda White Amanda White 9/3/2025 12% $475 $57": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-7351] Add encryption at rest (Tech Debt)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/3/2025" + - gridcell "12%" + - gridcell "$475" + - gridcell "$57" + - row "Press Space to toggle row selection (unchecked) [API-8513] Configure health checks (Sprint 25) In Progress Critical ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/2/2025 22% $8,950 $1,969": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-8513] Configure health checks (Sprint 25)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/2/2025" + - gridcell "22%" + - gridcell "$8,950" + - gridcell "$1,969" + - row "Press Space to toggle row selection (unchecked) [ADMIN-5868] Configure CDN distribution (Sprint 24) Todo High ๐Ÿ”ง DevOps Priya Sharma Priya Sharma 9/9/2025 12% $1,525 $183": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-5868] Configure CDN distribution (Sprint 24)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/9/2025" + - gridcell "12%" + - gridcell "$1,525" + - gridcell "$183" + - row "Press Space to toggle row selection (unchecked) [WEB-1922] Implement rate limiting Backlog Medium ๐Ÿ”’ Security Olivia Brown Olivia Brown 9/5/2025 0% $175": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1922] Implement rate limiting" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$175" + - gridcell + - row "Press Space to toggle row selection (unchecked) [APP-3601] Implement virtual scrolling (Sprint 24) Backlog Critical โšก Performance Emma Davis Emma Davis 9/1/2025 0% $2,325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-3601] Implement virtual scrolling (Sprint 24)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$2,325" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-8040] Add audit logging (Performance Sprint) Todo Critical ๐Ÿ”’ Security Isabella Garcia Isabella Garcia 8/31/2025 11% $2,200 $242": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8040] Add audit logging (Performance Sprint)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/31/2025" + - gridcell "11%" + - gridcell "$2,200" + - gridcell "$242" + - row "Press Space to toggle row selection (unchecked) [DASH-8526] Add progressive web app features (Security Audit) Testing High โšก Performance Maya Patel Maya Patel 9/7/2025 87% $775 $674": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-8526] Add progressive web app features (Security Audit)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/7/2025" + - gridcell "87%" + - gridcell "$775" + - gridcell "$674" + - row "Press Space to toggle row selection (unchecked) [CORE-3302] Configure load balancer Todo Low ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/26/2025 13% $1,825 $237": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3302] Configure load balancer" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/26/2025" + - gridcell "13%" + - gridcell "$1,825" + - gridcell "$237" + - row "Press Space to toggle row selection (unchecked) [INFRA-4958] Test mobile responsiveness (Q1 Goals) In Review High ๐Ÿงช Testing Daniel Kim Daniel Kim 9/3/2025 60% $5,275 $3,165": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4958] Test mobile responsiveness (Q1 Goals)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/3/2025" + - gridcell "60%" + - gridcell "$5,275" + - gridcell "$3,165" + - row "Press Space to toggle row selection (unchecked) [WEB-5178] Create backup automation (Security Audit) Todo Low ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/26/2025 15% $475 $71": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5178] Create backup automation (Security Audit)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/26/2025" + - gridcell "15%" + - gridcell "$475" + - gridcell "$71" + - row "Press Space to toggle row selection (unchecked) [WEB-5276] Create troubleshooting guide (Sprint 26) In Progress Critical ๐Ÿ“ Documentation Isabella Garcia Isabella Garcia 8/31/2025 49% $650 $319": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5276] Create troubleshooting guide (Sprint 26)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/31/2025" + - gridcell "49%" + - gridcell "$650" + - gridcell "$319" + - row "Press Space to toggle row selection (unchecked) [API-7166] Set up SSL certificates (Sprint 24) Backlog Medium ๐Ÿ”’ Security Alex Chen Alex Chen 9/6/2025 0% $14,800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7166] Set up SSL certificates (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$14,800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-8065] Optimize image loading (Sprint 25) In Review Medium โšก Performance Emma Davis Emma Davis 9/7/2025 60% $3,900 $2,340": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-8065] Optimize image loading (Sprint 25)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/7/2025" + - gridcell "60%" + - gridcell "$3,900" + - gridcell "$2,340" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,999,275 $18,689,640": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,999,275" + - gridcell "$18,689,640" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 29 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { +``` \ No newline at end of file diff --git a/playwright-report/data/716360b3a1b3c3954eae92047a2d37e9fd17c7c9.md b/playwright-report/data/716360b3a1b3c3954eae92047a2d37e9fd17c7c9.md new file mode 100644 index 0000000..eb9dc5c --- /dev/null +++ b/playwright-report/data/716360b3a1b3c3954eae92047a2d37e9fd17c7c9.md @@ -0,0 +1,490 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Keyboard Navigation >> should support keyboard navigation +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:263:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:265:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,380,525 +- img +- paragraph: Average Progress +- paragraph: 45.9% +- img +- paragraph: Budget Remaining +- paragraph: $22,374,322 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [ADMIN-1109] Modernize legacy jQuery code (Sprint 23) In Progress Medium โ™ป๏ธ Refactor Michael Anderson Michael Anderson 9/14/2025 27% $700 $189": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1109] Modernize legacy jQuery code (Sprint 23)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/14/2025" + - gridcell "27%" + - gridcell "$700" + - gridcell "$189" + - row "Press Space to toggle row selection (unchecked) [CORE-9655] Create user profile dashboard In Review Critical โœจ Feature Chris Martinez Chris Martinez 9/4/2025 74% $12,325 $9,121": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-9655] Create user profile dashboard" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/4/2025" + - gridcell "74%" + - gridcell "$12,325" + - gridcell "$9,121" + - row "Press Space to toggle row selection (unchecked) [BACKEND-4131] Add progressive web app features (Q1 Goals) Backlog Critical โšก Performance David Lee David Lee 9/4/2025 0% $125": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-4131] Add progressive web app features (Q1 Goals)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/4/2025" + - gridcell "0%" + - gridcell "$125" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-4447] Fix infinite scroll pagination bug (Sprint 27) Testing Medium ๐Ÿ› Bug Emily Jackson Emily Jackson 9/7/2025 89% $225 $200": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-4447] Fix infinite scroll pagination bug (Sprint 27)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/7/2025" + - gridcell "89%" + - gridcell "$225" + - gridcell "$200" + - row "Press Space to toggle row selection (unchecked) [MOBILE-8714] Fix infinite scroll pagination bug (Performance Sprint) In Review High ๐Ÿ› Bug Michael Anderson Michael Anderson 9/4/2025 73% $18,750 $13,688": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8714] Fix infinite scroll pagination bug (Performance Sprint)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/4/2025" + - gridcell "73%" + - gridcell "$18,750" + - gridcell "$13,688" + - row "Press Space to toggle row selection (unchecked) [WEB-5129] Correct CSS overflow in sidebar (Performance Sprint) Blocked Critical ๐Ÿ› Bug Michael Anderson Michael Anderson 8/30/2025 23% $6,575 $1,512": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5129] Correct CSS overflow in sidebar (Performance Sprint)" + - gridcell "Blocked" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "8/30/2025" + - gridcell "23%" + - gridcell "$6,575" + - gridcell "$1,512" + - row "Press Space to toggle row selection (unchecked) [INFRA-5235] Create integration test suite (Performance Sprint) In Review Critical ๐Ÿงช Testing Jessica Lopez Jessica Lopez 9/2/2025 68% $13,650 $9,282": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-5235] Create integration test suite (Performance Sprint)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "68%" + - gridcell "$13,650" + - gridcell "$9,282" + - row "Press Space to toggle row selection (unchecked) [CORE-7389] Create security penetration tests (Sprint 23) Todo High ๐Ÿงช Testing Ryan Thomas Ryan Thomas 9/3/2025 12% $825 $99": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-7389] Create security penetration tests (Sprint 23)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/3/2025" + - gridcell "12%" + - gridcell "$825" + - gridcell "$99" + - row "Press Space to toggle row selection (unchecked) [PROJ-7893] Write testing best practices (Sprint 27) Testing High ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/5/2025 90% $2,400 $2,160": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-7893] Write testing best practices (Sprint 27)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/5/2025" + - gridcell "90%" + - gridcell "$2,400" + - gridcell "$2,160" + - row "Press Space to toggle row selection (unchecked) [ADMIN-1556] Optimize image loading (Sprint 23) Todo Critical โšก Performance Sarah Johnson Sarah Johnson 9/1/2025 9% $8,225 $740": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1556] Optimize image loading (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/1/2025" + - gridcell "9%" + - gridcell "$8,225" + - gridcell "$740" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-5737] Implement rate limiting (Sprint 24) Backlog High ๐Ÿ”’ Security Emma Davis Emma Davis 9/2/2025 0% $6,475": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-5737] Implement rate limiting (Sprint 24)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$6,475" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-6972] Implement code splitting In Progress Medium โšก Performance Ryan Thomas Ryan Thomas 9/9/2025 22% $4,600 $1,012": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-6972] Implement code splitting" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/9/2025" + - gridcell "22%" + - gridcell "$4,600" + - gridcell "$1,012" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-7063] Add CDN for static assets (Sprint 26) In Review Medium โšก Performance Amanda White Amanda White 9/12/2025 70% $3,800 $2,660": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-7063] Add CDN for static assets (Sprint 26)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/12/2025" + - gridcell "70%" + - gridcell "$3,800" + - gridcell "$2,660" + - row "Press Space to toggle row selection (unchecked) [AUTH-7437] Document error handling patterns (Security Audit) In Progress High ๐Ÿ“ Documentation Sarah Johnson Sarah Johnson 9/7/2025 42% $200 $84": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-7437] Document error handling patterns (Security Audit)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/7/2025" + - gridcell "42%" + - gridcell "$200" + - gridcell "$84" + - row "Press Space to toggle row selection (unchecked) [INFRA-7666] Reduce API call frequency (Sprint 24) In Progress Low โšก Performance Isabella Garcia Isabella Garcia 9/18/2025 20% $19,375 $3,875": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7666] Reduce API call frequency (Sprint 24)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/18/2025" + - gridcell "20%" + - gridcell "$19,375" + - gridcell "$3,875" + - row "Press Space to toggle row selection (unchecked) [AUTH-8730] Set up infrastructure as code (Sprint 25) Backlog Low ๐Ÿ”ง DevOps Maya Patel Maya Patel 9/24/2025 0% $250": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-8730] Set up infrastructure as code (Sprint 25)" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/24/2025" + - gridcell "0%" + - gridcell "$250" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-2131] Refactor state management In Progress Medium โ™ป๏ธ Refactor Chris Martinez Chris Martinez 9/13/2025 57% $500 $285": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-2131] Refactor state management" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/13/2025" + - gridcell "57%" + - gridcell "$500" + - gridcell "$285" + - row "Press Space to toggle row selection (unchecked) [USER-3258] Optimize memory usage In Review Critical โšก Performance David Lee David Lee 8/31/2025 63% $10,450 $6,584": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-3258] Optimize memory usage" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "8/31/2025" + - gridcell "63%" + - gridcell "$10,450" + - gridcell "$6,584" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,380,525 $19,006,203": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,380,525" + - gridcell "$19,006,203" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 265 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 286 | await dateHeader.click(); + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/playwright-report/data/7c441b5ed28587e85caff1ad2e793523e0c20fec.png b/playwright-report/data/7c441b5ed28587e85caff1ad2e793523e0c20fec.png new file mode 100644 index 0000000..555c402 Binary files /dev/null and b/playwright-report/data/7c441b5ed28587e85caff1ad2e793523e0c20fec.png differ diff --git a/playwright-report/data/9683970a9076462dc9d17efcde560d18b5f44b1f.png b/playwright-report/data/9683970a9076462dc9d17efcde560d18b5f44b1f.png new file mode 100644 index 0000000..8a1ddfa Binary files /dev/null and b/playwright-report/data/9683970a9076462dc9d17efcde560d18b5f44b1f.png differ diff --git a/playwright-report/data/acb6853561b31d69e284b4c08983f37fc9ca8fc2.md b/playwright-report/data/acb6853561b31d69e284b4c08983f37fc9ca8fc2.md new file mode 100644 index 0000000..c06ca46 --- /dev/null +++ b/playwright-report/data/acb6853561b31d69e284b4c08983f37fc9ca8fc2.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should filter data when applying relative date filter +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:91:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,317,700 +- img +- paragraph: Average Progress +- paragraph: 46.1% +- img +- paragraph: Budget Remaining +- paragraph: $22,229,711 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [INFRA-10822] Implement API key rotation In Progress Critical ๐Ÿ”’ Security John Robinson John Robinson 9/1/2025 26% $275 $72": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-10822] Implement API key rotation" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/1/2025" + - gridcell "26%" + - gridcell "$275" + - gridcell "$72" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1786] Implement dark mode toggle (Tech Debt) Backlog Medium โœจ Feature David Lee David Lee 9/14/2025 0% $875": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1786] Implement dark mode toggle (Tech Debt)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/14/2025" + - gridcell "0%" + - gridcell "$875" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-3304] Create load testing scenarios (Sprint 23) Testing High ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/4/2025 83% $9,075 $7,532": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3304] Create load testing scenarios (Sprint 23)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/4/2025" + - gridcell "83%" + - gridcell "$9,075" + - gridcell "$7,532" + - row "Press Space to toggle row selection (unchecked) [BACKEND-10625] Add export to PDF functionality (Sprint 24) Backlog High โœจ Feature Kevin Zhang Kevin Zhang 9/3/2025 0% $175": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-10625] Add export to PDF functionality (Sprint 24)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$175" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-6726] Configure Docker containers (Q1 Goals) Todo Low ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 10/8/2025 7% $775 $54": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-6726] Configure Docker containers (Q1 Goals)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "10/8/2025" + - gridcell "7%" + - gridcell "$775" + - gridcell "$54" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-7026] Implement service workers (Q2 Planning) Testing Medium โšก Performance Priya Sharma Priya Sharma 9/12/2025 84% $3,125 $2,625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-7026] Implement service workers (Q2 Planning)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/12/2025" + - gridcell "84%" + - gridcell "$3,125" + - gridcell "$2,625" + - row "Press Space to toggle row selection (unchecked) [API-7853] Optimize bundle size (Sprint 23) Todo Critical โšก Performance John Robinson John Robinson 8/31/2025 19% $850 $162": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7853] Optimize bundle size (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "8/31/2025" + - gridcell "19%" + - gridcell "$850" + - gridcell "$162" + - row "Press Space to toggle row selection (unchecked) [APP-8115] Add E2E tests for checkout flow Backlog Critical ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/1/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-8115] Add E2E tests for checkout flow" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-9657] Fix infinite scroll pagination bug (Sprint 23) In Progress High ๐Ÿ› Bug Chris Martinez Chris Martinez 8/31/2025 53% $3,600 $1,908": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-9657] Fix infinite scroll pagination bug (Sprint 23)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "8/31/2025" + - gridcell "53%" + - gridcell "$3,600" + - gridcell "$1,908" + - row "Press Space to toggle row selection (unchecked) [BACKEND-4725] Reduce API call frequency (Sprint 24) In Review Low โšก Performance Chris Martinez Chris Martinez 10/10/2025 75% $4,175 $3,131": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-4725] Reduce API call frequency (Sprint 24)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "10/10/2025" + - gridcell "75%" + - gridcell "$4,175" + - gridcell "$3,131" + - row "Press Space to toggle row selection (unchecked) [MOBILE-7209] Set up monitoring alerts (Sprint 24) In Progress Medium ๐Ÿ”ง DevOps Alex Chen Alex Chen 9/5/2025 22% $9,675 $2,129": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-7209] Set up monitoring alerts (Sprint 24)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/5/2025" + - gridcell "22%" + - gridcell "$9,675" + - gridcell "$2,129" + - row "Press Space to toggle row selection (unchecked) [DASH-7362] Set up monitoring alerts In Progress Critical ๐Ÿ”ง DevOps Daniel Kim Daniel Kim 8/30/2025 50% $225 $113": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-7362] Set up monitoring alerts" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "8/30/2025" + - gridcell "50%" + - gridcell "$225" + - gridcell "$113" + - row "Press Space to toggle row selection (unchecked) [AUTH-7376] Optimize memory usage In Review High โšก Performance Olivia Brown Olivia Brown 9/6/2025 66% $800 $528": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-7376] Optimize memory usage" + - gridcell "In Review" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/6/2025" + - gridcell "66%" + - gridcell "$800" + - gridcell "$528" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-8095] Build real-time notifications system (Tech Debt) Backlog High โœจ Feature Jessica Lopez Jessica Lopez 9/5/2025 0% $375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-8095] Build real-time notifications system (Tech Debt)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-9181] Add database indexing (Q1 Goals) In Review Low โšก Performance Sarah Johnson Sarah Johnson 10/1/2025 64% $950 $608": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-9181] Add database indexing (Q1 Goals)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "10/1/2025" + - gridcell "64%" + - gridcell "$950" + - gridcell "$608" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-10236] Update API documentation (Q2 Planning) Backlog Medium ๐Ÿ“ Documentation Daniel Kim Daniel Kim 9/13/2025 0% $3,525": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-10236] Update API documentation (Q2 Planning)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/13/2025" + - gridcell "0%" + - gridcell "$3,525" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DASH-10516] Fix responsive layout on tablets In Progress Medium ๐Ÿ› Bug Emily Jackson Emily Jackson 9/3/2025 26% $425 $111": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-10516] Fix responsive layout on tablets" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/3/2025" + - gridcell "26%" + - gridcell "$425" + - gridcell "$111" + - row "Press Space to toggle row selection (unchecked) [ADMIN-1027] Implement rate limiting (Q1 Goals) In Progress Critical ๐Ÿ”’ Security Maya Patel Maya Patel 8/29/2025 35% $8,925 $3,124": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1027] Implement rate limiting (Q1 Goals)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "8/29/2025" + - gridcell "35%" + - gridcell "$8,925" + - gridcell "$3,124" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,317,700 $19,087,989": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,317,700" + - gridcell "$19,087,989" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/playwright-report/data/afca09863e84d0a76b2e65faeff8b9e3468da7c6.png b/playwright-report/data/afca09863e84d0a76b2e65faeff8b9e3468da7c6.png new file mode 100644 index 0000000..63a9bf2 Binary files /dev/null and b/playwright-report/data/afca09863e84d0a76b2e65faeff8b9e3468da7c6.png differ diff --git a/playwright-report/data/bcde9e0406a7c6409f847842e00c75b50535850f.png b/playwright-report/data/bcde9e0406a7c6409f847842e00c75b50535850f.png new file mode 100644 index 0000000..44088f1 Binary files /dev/null and b/playwright-report/data/bcde9e0406a7c6409f847842e00c75b50535850f.png differ diff --git a/playwright-report/data/c09d9df9089aa1377b83a0eb942a1e9300cca833.md b/playwright-report/data/c09d9df9089aa1377b83a0eb942a1e9300cca833.md new file mode 100644 index 0000000..913c94f --- /dev/null +++ b/playwright-report/data/c09d9df9089aa1377b83a0eb942a1e9300cca833.md @@ -0,0 +1,517 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Integration with Grid >> should clear filter when reset is clicked +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:235:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:238:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,600,325 +- img +- paragraph: Average Progress +- paragraph: 45.7% +- img +- paragraph: Budget Remaining +- paragraph: $22,671,422 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [INFRA-1026] Optimize database queries (Sprint 27) Backlog High โšก Performance Jessica Lopez Jessica Lopez 9/6/2025 0% $1,425": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-1026] Optimize database queries (Sprint 27)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$1,425" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-5037] Test mobile responsiveness (Performance Sprint) Backlog Medium ๐Ÿงช Testing Olivia Brown Olivia Brown 9/14/2025 0% $800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-5037] Test mobile responsiveness (Performance Sprint)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/14/2025" + - gridcell "0%" + - gridcell "$800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-4971] Resolve CORS issue with external API (Sprint 24) Backlog Critical ๐Ÿ› Bug Priya Sharma Priya Sharma 8/31/2025 0% $550": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-4971] Resolve CORS issue with external API (Sprint 24)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$550" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-5319] Set up staging environment (Security Audit) Testing Low ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/16/2025 91% $6,600 $6,006": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-5319] Set up staging environment (Security Audit)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/16/2025" + - gridcell "91%" + - gridcell "$6,600" + - gridcell "$6,006" + - row "Press Space to toggle row selection (unchecked) [ADMIN-8236] Optimize image loading (Sprint 25) In Progress Low โšก Performance Emily Jackson Emily Jackson 10/4/2025 22% $150 $33": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-8236] Optimize image loading (Sprint 25)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "10/4/2025" + - gridcell "22%" + - gridcell "$150" + - gridcell "$33" + - row "Press Space to toggle row selection (unchecked) [DATA-8486] Implement auto-scaling (Sprint 26) In Review Critical ๐Ÿ”ง DevOps Sophia Taylor Sophia Taylor 9/1/2025 65% $1,000 $650": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-8486] Implement auto-scaling (Sprint 26)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/1/2025" + - gridcell "65%" + - gridcell "$1,000" + - gridcell "$650" + - row "Press Space to toggle row selection (unchecked) [WEB-10674] Implement dark mode toggle (Sprint 24) Backlog Medium โœจ Feature James Wilson James Wilson 9/8/2025 0% $8,200": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-10674] Implement dark mode toggle (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$8,200" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DASH-2313] Write migration guide for v2 Backlog Medium ๐Ÿ“ Documentation Sarah Johnson Sarah Johnson 9/14/2025 0% $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-2313] Write migration guide for v2" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/14/2025" + - gridcell "0%" + - gridcell "$350" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-4489] Add CDN for static assets (Sprint 27) In Progress High โšก Performance Maya Patel Maya Patel 9/6/2025 33% $2,350 $776": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-4489] Add CDN for static assets (Sprint 27)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/6/2025" + - gridcell "33%" + - gridcell "$2,350" + - gridcell "$776" + - row "Press Space to toggle row selection (unchecked) [DASH-4908] Write unit tests for auth module (Performance Sprint) Todo Low ๐Ÿงช Testing Marcus Williams Marcus Williams 10/3/2025 13% $550 $72": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-4908] Write unit tests for auth module (Performance Sprint)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿงช Testing" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "10/3/2025" + - gridcell "13%" + - gridcell "$550" + - gridcell "$72" + - row "Press Space to toggle row selection (unchecked) [DASH-5272] Create architecture overview (Tech Debt) In Review Medium ๐Ÿ“ Documentation Chris Martinez Chris Martinez 9/12/2025 72% $525 $378": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-5272] Create architecture overview (Tech Debt)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/12/2025" + - gridcell "72%" + - gridcell "$525" + - gridcell "$378" + - row "Press Space to toggle row selection (unchecked) [DATA-6362] Implement lazy loading (Security Audit) Backlog High โšก Performance Ryan Thomas Ryan Thomas 9/6/2025 0% $4,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6362] Implement lazy loading (Security Audit)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$4,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-8330] Split monolithic components (Tech Debt) Backlog Medium โ™ป๏ธ Refactor David Lee David Lee 9/11/2025 0% $8,625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8330] Split monolithic components (Tech Debt)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/11/2025" + - gridcell "0%" + - gridcell "$8,625" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-8437] Optimize memory usage (Sprint 23) In Review Low โšก Performance Isabella Garcia Isabella Garcia 9/17/2025 77% $5,875 $4,524": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-8437] Optimize memory usage (Sprint 23)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/17/2025" + - gridcell "77%" + - gridcell "$5,875" + - gridcell "$4,524" + - row "Press Space to toggle row selection (unchecked) [CORE-9546] Document component props (Sprint 25) Backlog Medium ๐Ÿ“ Documentation Olivia Brown Olivia Brown 9/13/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-9546] Document component props (Sprint 25)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/13/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-9864] Implement auto-scaling (Q1 Goals) Backlog High ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 9/8/2025 0% $10,225": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-9864] Implement auto-scaling (Q1 Goals)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$10,225" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-10536] Configure Docker containers Testing Critical ๐Ÿ”ง DevOps Priya Sharma Priya Sharma 8/31/2025 89% $8,100 $7,209": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-10536] Configure Docker containers" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/31/2025" + - gridcell "89%" + - gridcell "$8,100" + - gridcell "$7,209" + - row "Press Space to toggle row selection (unchecked) [AUTH-3709] Document error handling patterns (Tech Debt) In Review Medium ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/18/2025 79% $14,200 $11,218": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-3709] Document error handling patterns (Tech Debt)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/18/2025" + - gridcell "79%" + - gridcell "$14,200" + - gridcell "$11,218" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,600,325 $18,928,903": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,600,325" + - gridcell "$18,928,903" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 238 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 265 | await dateHeader.click(); + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 286 | await dateHeader.click(); + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/playwright-report/data/d4004029747397919fd13be91154b992bbfa3365.png b/playwright-report/data/d4004029747397919fd13be91154b992bbfa3365.png deleted file mode 100644 index c5d1695..0000000 Binary files a/playwright-report/data/d4004029747397919fd13be91154b992bbfa3365.png and /dev/null differ diff --git a/playwright-report/data/d998794474d049350f5475bbd77c9a0a29d1a65e.png b/playwright-report/data/d998794474d049350f5475bbd77c9a0a29d1a65e.png new file mode 100644 index 0000000..b0d7826 Binary files /dev/null and b/playwright-report/data/d998794474d049350f5475bbd77c9a0a29d1a65e.png differ diff --git a/playwright-report/data/e1f85419ff4e9b04ba622d177647e814bbd5262d.md b/playwright-report/data/e1f85419ff4e9b04ba622d177647e814bbd5262d.md new file mode 100644 index 0000000..6480ee0 --- /dev/null +++ b/playwright-report/data/e1f85419ff4e9b04ba622d177647e814bbd5262d.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should show validation error for invalid expressions +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:80:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,905,825 +- img +- paragraph: Average Progress +- paragraph: 45.7% +- img +- paragraph: Budget Remaining +- paragraph: $22,307,641 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [WEB-1563] Update to ES6 modules (Q2 Planning) Backlog Medium โ™ป๏ธ Refactor Jessica Lopez Jessica Lopez 9/10/2025 0% $1,025": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1563] Update to ES6 modules (Q2 Planning)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/10/2025" + - gridcell "0%" + - gridcell "$1,025" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-1912] Fix date picker timezone issue (Q2 Planning) Backlog Medium ๐Ÿ› Bug Emma Davis Emma Davis 9/5/2025 0% $7,325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-1912] Fix date picker timezone issue (Q2 Planning)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$7,325" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-5113] Fix broken unit tests in CI pipeline (Performance Sprint) In Review High ๐Ÿ› Bug Alex Chen Alex Chen 9/3/2025 68% $9,225 $6,273": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-5113] Fix broken unit tests in CI pipeline (Performance Sprint)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/3/2025" + - gridcell "68%" + - gridcell "$9,225" + - gridcell "$6,273" + - row "Press Space to toggle row selection (unchecked) [ADMIN-10264] Configure Docker containers (Performance Sprint) In Progress Low ๐Ÿ”ง DevOps Michael Anderson Michael Anderson 10/12/2025 32% $8,925 $2,856": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-10264] Configure Docker containers (Performance Sprint)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "10/12/2025" + - gridcell "32%" + - gridcell "$8,925" + - gridcell "$2,856" + - row "Press Space to toggle row selection (unchecked) [APP-7392] Set up CI/CD pipeline (Sprint 24) Testing Medium ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/18/2025 82% $675 $554": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-7392] Set up CI/CD pipeline (Sprint 24)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/18/2025" + - gridcell "82%" + - gridcell "$675" + - gridcell "$554" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1854] Clean up deprecated APIs (Sprint 26) Todo Low โ™ป๏ธ Refactor David Lee David Lee 10/1/2025 15% $13,100 $1,965": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1854] Clean up deprecated APIs (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "10/1/2025" + - gridcell "15%" + - gridcell "$13,100" + - gridcell "$1,965" + - row "Press Space to toggle row selection (unchecked) [APP-1921] Add database indexing Todo High โšก Performance Daniel Kim Daniel Kim 9/4/2025 7% $8,775 $614": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-1921] Add database indexing" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/4/2025" + - gridcell "7%" + - gridcell "$8,775" + - gridcell "$614" + - row "Press Space to toggle row selection (unchecked) [APP-3837] Add E2E tests for checkout flow (Sprint 26) Todo Medium ๐Ÿงช Testing Jessica Lopez Jessica Lopez 9/6/2025 7% $8,525 $597": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-3837] Add E2E tests for checkout flow (Sprint 26)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/6/2025" + - gridcell "7%" + - gridcell "$8,525" + - gridcell "$597" + - row "Press Space to toggle row selection (unchecked) [BACKEND-4920] Implement secrets management Backlog High ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/2/2025 0% $3,400": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-4920] Implement secrets management" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$3,400" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-4962] Fix login form validation error (Security Audit) In Progress High ๐Ÿ› Bug Jessica Lopez Jessica Lopez 9/2/2025 38% $14,725 $5,596": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-4962] Fix login form validation error (Security Audit)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "38%" + - gridcell "$14,725" + - gridcell "$5,596" + - row "Press Space to toggle row selection (unchecked) [API-5091] Update to ES6 modules (Sprint 27) In Progress Low โ™ป๏ธ Refactor David Lee David Lee 10/2/2025 54% $7,475 $4,037": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-5091] Update to ES6 modules (Sprint 27)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "10/2/2025" + - gridcell "54%" + - gridcell "$7,475" + - gridcell "$4,037" + - row "Press Space to toggle row selection (unchecked) [CORE-6865] Debug performance regression in search In Progress Critical ๐Ÿ› Bug Kevin Zhang Kevin Zhang 8/29/2025 57% $7,750 $4,418": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-6865] Debug performance regression in search" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "8/29/2025" + - gridcell "57%" + - gridcell "$7,750" + - gridcell "$4,418" + - row "Press Space to toggle row selection (unchecked) [WEB-8240] Document component props (Sprint 27) Backlog High ๐Ÿ“ Documentation Emma Davis Emma Davis 9/1/2025 0% $6,150": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-8240] Document component props (Sprint 27)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$6,150" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-8510] Debug WebSocket connection timeout (Sprint 25) Testing Low ๐Ÿ› Bug Alex Chen Alex Chen 9/12/2025 93% $3,425 $3,185": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8510] Debug WebSocket connection timeout (Sprint 25)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/12/2025" + - gridcell "93%" + - gridcell "$3,425" + - gridcell "$3,185" + - row "Press Space to toggle row selection (unchecked) [MOBILE-8891] Test cross-browser compatibility (Sprint 23) Todo Critical ๐Ÿงช Testing Emily Jackson Emily Jackson 9/1/2025 14% $4,300 $602": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8891] Test cross-browser compatibility (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/1/2025" + - gridcell "14%" + - gridcell "$4,300" + - gridcell "$602" + - row "Press Space to toggle row selection (unchecked) [USER-10598] Modernize legacy jQuery code (Sprint 27) In Progress Medium โ™ป๏ธ Refactor David Lee David Lee 9/10/2025 58% $4,375 $2,538": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-10598] Modernize legacy jQuery code (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/10/2025" + - gridcell "58%" + - gridcell "$4,375" + - gridcell "$2,538" + - row "Press Space to toggle row selection (unchecked) [DASH-1144] Write deployment guide Backlog Low ๐Ÿ“ Documentation John Robinson John Robinson 10/3/2025 0% $975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-1144] Write deployment guide" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "10/3/2025" + - gridcell "0%" + - gridcell "$975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-1387] Implement rate limiting (Sprint 25) Backlog Critical ๐Ÿ”’ Security Priya Sharma Priya Sharma 8/29/2025 0% $475": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1387] Implement rate limiting (Sprint 25)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/29/2025" + - gridcell "0%" + - gridcell "$475" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,905,825 $18,598,184": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,905,825" + - gridcell "$18,598,184" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/playwright-report/data/fbfb841b9b2c7a281b6ea5075318e491c3c98721.md b/playwright-report/data/fbfb841b9b2c7a281b6ea5075318e491c3c98721.md new file mode 100644 index 0000000..91e9673 --- /dev/null +++ b/playwright-report/data/fbfb841b9b2c7a281b6ea5075318e491c3c98721.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Absolute Date Mode >> should show date picker in absolute mode +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:124:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:116:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,490,500 +- img +- paragraph: Average Progress +- paragraph: 45.8% +- img +- paragraph: Budget Remaining +- paragraph: $22,563,242 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-2359] Configure load balancer (Security Audit) Backlog Critical ๐Ÿ”ง DevOps James Wilson James Wilson 9/2/2025 0% $4,550": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-2359] Configure load balancer (Security Audit)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$4,550" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-10585] Create deployment rollback (Performance Sprint) Todo Critical ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/2/2025 5% $950 $48": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-10585] Create deployment rollback (Performance Sprint)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/2/2025" + - gridcell "5%" + - gridcell "$950" + - gridcell "$48" + - row "Press Space to toggle row selection (unchecked) [UI-1458] Document component props Todo Low ๐Ÿ“ Documentation Amanda White Amanda White 9/18/2025 6% $6,800 $408": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-1458] Document component props" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/18/2025" + - gridcell "6%" + - gridcell "$6,800" + - gridcell "$408" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3828] Set up infrastructure as code (Performance Sprint) Testing High ๐Ÿ”ง DevOps Isabella Garcia Isabella Garcia 9/4/2025 84% $375 $315": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3828] Set up infrastructure as code (Performance Sprint)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/4/2025" + - gridcell "84%" + - gridcell "$375" + - gridcell "$315" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-4200] Build real-time notifications system In Review Medium โœจ Feature Ryan Thomas Ryan Thomas 9/15/2025 71% $150 $107": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-4200] Build real-time notifications system" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/15/2025" + - gridcell "71%" + - gridcell "$150" + - gridcell "$107" + - row "Press Space to toggle row selection (unchecked) [BACKEND-8895] Create architecture overview (Q2 Planning) In Progress Low ๐Ÿ“ Documentation Emily Jackson Emily Jackson 9/15/2025 28% $200 $56": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8895] Create architecture overview (Q2 Planning)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/15/2025" + - gridcell "28%" + - gridcell "$200" + - gridcell "$56" + - row "Press Space to toggle row selection (unchecked) [INFRA-10980] Create video tutorials (Q1 Goals) In Review High ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/5/2025 77% $14,825 $11,415": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-10980] Create video tutorials (Q1 Goals)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/5/2025" + - gridcell "77%" + - gridcell "$14,825" + - gridcell "$11,415" + - row "Press Space to toggle row selection (unchecked) [BACKEND-2119] Split monolithic components In Progress Critical โ™ป๏ธ Refactor John Robinson John Robinson 9/1/2025 52% $8,275 $4,303": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-2119] Split monolithic components" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/1/2025" + - gridcell "52%" + - gridcell "$8,275" + - gridcell "$4,303" + - row "Press Space to toggle row selection (unchecked) [API-3238] Consolidate duplicate code Todo Low โ™ป๏ธ Refactor Chris Martinez Chris Martinez 9/29/2025 17% $500 $85": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-3238] Consolidate duplicate code" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/29/2025" + - gridcell "17%" + - gridcell "$500" + - gridcell "$85" + - row "Press Space to toggle row selection (unchecked) [PROJ-4071] Refactor error handling (Sprint 25) Backlog High โ™ป๏ธ Refactor John Robinson John Robinson 9/6/2025 0% $3,100": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-4071] Refactor error handling (Sprint 25)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$3,100" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-9084] Create video tutorials (Q2 Planning) Todo Critical ๐Ÿ“ Documentation Daniel Kim Daniel Kim 9/2/2025 16% $3,025 $484": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-9084] Create video tutorials (Q2 Planning)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/2/2025" + - gridcell "16%" + - gridcell "$3,025" + - gridcell "$484" + - row "Press Space to toggle row selection (unchecked) [ADMIN-9172] Set up infrastructure as code (Sprint 26) In Progress Critical ๐Ÿ”ง DevOps Daniel Kim Daniel Kim 9/1/2025 24% $925 $222": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-9172] Set up infrastructure as code (Sprint 26)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/1/2025" + - gridcell "24%" + - gridcell "$925" + - gridcell "$222" + - row "Press Space to toggle row selection (unchecked) [DATA-9535] Write component snapshot tests (Sprint 25) Todo Medium ๐Ÿงช Testing Maya Patel Maya Patel 9/12/2025 11% $3,525 $388": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-9535] Write component snapshot tests (Sprint 25)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/12/2025" + - gridcell "11%" + - gridcell "$3,525" + - gridcell "$388" + - row "Press Space to toggle row selection (unchecked) [BACKEND-9772] Fix infinite scroll pagination bug (Security Audit) In Review Low ๐Ÿ› Bug Jessica Lopez Jessica Lopez 9/15/2025 70% $3,800 $2,660": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-9772] Fix infinite scroll pagination bug (Security Audit)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/15/2025" + - gridcell "70%" + - gridcell "$3,800" + - gridcell "$2,660" + - row "Press Space to toggle row selection (unchecked) [DATA-10060] Document security protocols (Security Audit) Todo High ๐Ÿ“ Documentation Emily Jackson Emily Jackson 9/7/2025 6% $650 $39": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-10060] Document security protocols (Security Audit)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/7/2025" + - gridcell "6%" + - gridcell "$650" + - gridcell "$39" + - row "Press Space to toggle row selection (unchecked) [INFRA-1047] Build analytics dashboard Backlog Low โœจ Feature David Lee David Lee 10/8/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-1047] Build analytics dashboard" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "10/8/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-3920] Write unit tests for auth module Testing High ๐Ÿงช Testing Sarah Johnson Sarah Johnson 9/3/2025 92% $825 $759": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-3920] Write unit tests for auth module" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/3/2025" + - gridcell "92%" + - gridcell "$825" + - gridcell "$759" + - row "Press Space to toggle row selection (unchecked) [ADMIN-4281] Set up log aggregation (Sprint 27) In Progress Low ๐Ÿ”ง DevOps Isabella Garcia Isabella Garcia 9/29/2025 46% $2,050 $943": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-4281] Set up log aggregation (Sprint 27)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/29/2025" + - gridcell "46%" + - gridcell "$2,050" + - gridcell "$943" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,490,500 $18,927,258": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,490,500" + - gridcell "$18,927,258" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 116 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { +``` \ No newline at end of file diff --git a/playwright-report/data/fd915f4e3291476700878a7996769f165e1b8eb2.md b/playwright-report/data/fd915f4e3291476700878a7996769f165e1b8eb2.md new file mode 100644 index 0000000..33618a3 --- /dev/null +++ b/playwright-report/data/fd915f4e3291476700878a7996769f165e1b8eb2.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should default to relative mode +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:53:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,581,500 +- img +- paragraph: Average Progress +- paragraph: 45.9% +- img +- paragraph: Budget Remaining +- paragraph: $22,020,006 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [BACKEND-1385] Implement two-factor authentication (Sprint 24) Backlog Medium โœจ Feature Alex Chen Alex Chen 9/21/2025 0% $1,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-1385] Implement two-factor authentication (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/21/2025" + - gridcell "0%" + - gridcell "$1,450" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-2323] Add database indexing (Sprint 23) Backlog Critical โšก Performance Michael Anderson Michael Anderson 9/2/2025 0% $975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-2323] Add database indexing (Sprint 23)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-3418] Add multi-language support (Performance Sprint) Todo Critical โœจ Feature Emma Davis Emma Davis 9/2/2025 17% $925 $157": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3418] Add multi-language support (Performance Sprint)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/2/2025" + - gridcell "17%" + - gridcell "$925" + - gridcell "$157" + - row "Press Space to toggle row selection (unchecked) [CORE-9768] Add encryption at rest (Performance Sprint) Todo High ๐Ÿ”’ Security Ryan Thomas Ryan Thomas 9/4/2025 8% $275 $22": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-9768] Add encryption at rest (Performance Sprint)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/4/2025" + - gridcell "8%" + - gridcell "$275" + - gridcell "$22" + - row "Press Space to toggle row selection (unchecked) [USER-4554] Create video tutorials (Sprint 27) Backlog High ๐Ÿ“ Documentation Olivia Brown Olivia Brown 9/8/2025 0% $625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-4554] Create video tutorials (Sprint 27)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$625" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-8676] Add request batching (Sprint 25) In Progress Critical โšก Performance Alex Chen Alex Chen 9/1/2025 25% $775 $194": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8676] Add request batching (Sprint 25)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/1/2025" + - gridcell "25%" + - gridcell "$775" + - gridcell "$194" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1228] Optimize render performance Backlog Medium โšก Performance James Wilson James Wilson 9/8/2025 0% $8,975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1228] Optimize render performance" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$8,975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-3663] Fix broken deep links in navigation In Review Critical ๐Ÿ› Bug Isabella Garcia Isabella Garcia 8/29/2025 72% $125 $90": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-3663] Fix broken deep links in navigation" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/29/2025" + - gridcell "72%" + - gridcell "$125" + - gridcell "$90" + - row "Press Space to toggle row selection (unchecked) [AUTH-4144] Optimize memory usage (Sprint 26) Backlog High โšก Performance Ryan Thomas Ryan Thomas 9/3/2025 0% $950": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-4144] Optimize memory usage (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$950" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-4168] Add visual regression tests (Sprint 27) Testing Medium ๐Ÿงช Testing Michael Anderson Michael Anderson 9/11/2025 90% $3,900 $3,510": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-4168] Add visual regression tests (Sprint 27)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/11/2025" + - gridcell "90%" + - gridcell "$3,900" + - gridcell "$3,510" + - row "Press Space to toggle row selection (unchecked) [BACKEND-5157] Create disaster recovery plan In Progress Low ๐Ÿ”ง DevOps Emily Jackson Emily Jackson 9/16/2025 20% $8,325 $1,665": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-5157] Create disaster recovery plan" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/16/2025" + - gridcell "20%" + - gridcell "$8,325" + - gridcell "$1,665" + - row "Press Space to toggle row selection (unchecked) [UI-6750] Configure CDN distribution (Sprint 26) Todo Low ๐Ÿ”ง DevOps Maya Patel Maya Patel 10/10/2025 5% $300 $15": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-6750] Configure CDN distribution (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "10/10/2025" + - gridcell "5%" + - gridcell "$300" + - gridcell "$15" + - row "Press Space to toggle row selection (unchecked) [APP-6818] Create load testing scenarios Todo Critical ๐Ÿงช Testing David Lee David Lee 8/31/2025 19% $675 $128": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-6818] Create load testing scenarios" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "8/31/2025" + - gridcell "19%" + - gridcell "$675" + - gridcell "$128" + - row "Press Space to toggle row selection (unchecked) [CORE-7865] Add export to PDF functionality (Security Audit) Testing High โœจ Feature Chris Martinez Chris Martinez 9/4/2025 80% $375 $300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-7865] Add export to PDF functionality (Security Audit)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/4/2025" + - gridcell "80%" + - gridcell "$375" + - gridcell "$300" + - row "Press Space to toggle row selection (unchecked) [WEB-9144] Test cross-browser compatibility (Sprint 23) Backlog Medium ๐Ÿงช Testing Daniel Kim Daniel Kim 9/17/2025 0% $2,100": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-9144] Test cross-browser compatibility (Sprint 23)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/17/2025" + - gridcell "0%" + - gridcell "$2,100" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-9163] Configure Docker containers Backlog High ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/2/2025 0% $1,775": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-9163] Configure Docker containers" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$1,775" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-3364] Implement secrets management (Q1 Goals) In Progress Low ๐Ÿ”ง DevOps Michael Anderson Michael Anderson 10/6/2025 54% $2,675 $1,445": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3364] Implement secrets management (Q1 Goals)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "10/6/2025" + - gridcell "54%" + - gridcell "$2,675" + - gridcell "$1,445" + - row "Press Space to toggle row selection (unchecked) [DASH-5805] Write component snapshot tests Backlog Critical ๐Ÿงช Testing John Robinson John Robinson 8/31/2025 0% $3,425": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-5805] Write component snapshot tests" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$3,425" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,581,500 $18,561,494": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,581,500" + - gridcell "$18,561,494" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/playwright-report/index.html b/playwright-report/index.html index ae066ae..2b85831 100644 --- a/playwright-report/index.html +++ b/playwright-report/index.html @@ -74,4 +74,4 @@ \ No newline at end of file +window.playwrightReportBase64 = "data:application/zip;base64,UEsDBBQAAAgIAFB971oYUGIXkxgAAD1NAQAZAAAAYTMxODJlNjBkMzVkNTllMDZkNjUuanNvbu2de2/bSJLAvwrhfyYDxHK/Hz6Mgezszu1gcTuH2TkccJO5Q78Y6yJLgiRPxpfNd79uUo7lIi1KNCnJCR0EtiSqWOxHdfWvq6s/nuXjSfjRn12eGYoVCQJ5yj3XAQkv+Nnr4vO/m5sQr/BmFc7j61VYnPvFbO5nH6aj5Ty40WoZr1yFZfx9+evH4q8nZZ4TpLzVJPfYGEY9ccy69PXxapLusrye3U58NpuHaZbumJV3zO7vmH24jp+4ydi9H0/fZbPp/QVjN5tGOfPF7H+DW611dteL2c349iZ+MJk5sxrHay4/Fk/V/EST8TRehenrMzeb3N7Eb/JPr8/87WIthyKs2OszM53OVsVb6fF/i49i3q3/mt2u3KxQ5HYa/oiCV8EnHc3qOl5w9ud4/x9K7f98/3jfz27ms2mYruJ1fzLLsct+uJ26JN1Mxqu7syh1EZa3k3VZV7RZrsxi9cu4uClBhJ8jeY75LwRdMnTJxYhw9V9nScZqcXd2idIXwnxdb+sq+FPIZ4uQ/XU2e5+KoVGiQEnihiZK6zq5tpD7F+Ous+soeyfRuCJa1YnOx3+sbhfhMrOL2YdlWOwkWz2WLbSo1bqU+MvdPIwmJtbF9U7CNRTOH4THOjSrVSyHm1jP6zfc7DbW+SWOV70fz+exnVzmZrIMn/a6+HVNkcR+sQp/rHbQWgv+WGsst5TIaBo+fL+HbAlk42MVyNy8C7torCjUuL5Zl8WxLopUKv++6w0YvIE6cJmkohi9m61mry58uJl926i1HGEEK1ILsl3ttqZXPVheLD49/UTx9TS9jp+dZVkms39m6Sc9XPZdloajVCP/8nYa31TrD80HM15lD8//9qwogbdn35bXxZ/ywo2f/y4+0VUJ6a8fZot/hEk08bNFFDYy784Xs9nq/MPCRM0WSe5ZpeTh9+C3mutDj5CGnRYJ2k996Hb1sWuRty7YhgrDqPjkU6qBLotDPBSH2r00ePbPQitRKJUa5+hhYHxllndTl736WDz+5ee2G5XPvrvKPlaetHzCp1p8/fPuYhiKMpktRoWj9erX+JznY//d26Jg3p79lqVquA7Gx/JxYTI5j+Jvz+3tajWbNjRafInQCEOfIQ6YqmGEbO3AbdQTYbGiwmIxW8Rv/yX9vswePepl9kssvGwVVY/OWzbLM4riz80yC3+4EHzwo7fT781kEr/27vLt9O0tQtj+Sm6y7DxLrTU5pbE276W++mavsvvm23uB5OZtcmd3bFSYf24ScbiPD5Du9dfiHrE9FF2prUJl78Li8w3K7vlwg3Ub2dINQXeUn694ZBHf5MkR3sHrxLG1RH8CDJ5k06EAdnbpFiFM49SiwVNZSwYGVTUMbx07H1EJOUIcOJCoQx128gi7VaNyMdpR6f+cLd7HZvH9JJjp7XwHlbEUwPWuneTsN2Ool8x1V6XRcHFhsdJ1Z2vzQPFNs51aX6rT7PfkbV36F20D+2wbLi6ynxIEWF2HrDTfWfpyccP0XgEHyg+Kb/ZqAa/2MYDb7d+G+Steqs0n/j5J2oAas3lqacV1Gtz/8SOlByiULr/xq1mMzfnE2DCJT7lmDN8XhbWMz/vNtxs6b1RrlL3KLv4jdoflxeLOTC/czIfzRZjPlhfvxqvrW1u8vZj939hdX8RbvluMffzcuNW5uwcXy/MPsc+uosVdXuTBrC5+J0XZTsJyuXHVRQGMLgIJF9uG8Th8x1H7oaUkABI76uo2doez1HT9T7fJklUozOMO9vFsWhKhR0NBYQinqzS3jx+Nb2KRXsyn7z4jmtQ+zAUhnKigbI6E1kw5QYTgCltstM25T3zLB+HCKH012a71rf6n6Lbna2t7jis3TG9f3JjF+/TA4KYcK8UQMSJXIjdeOxuIFdIFhFEQTCiv8jyPVunGRy8vGYnZ+03zuZXBYWa9D1H7PFCDo/CQ+yqD8+PlfGLu7tviKiqdLdeeeB+kjYinSRtJGO5kSFuhTTMDYp2TNlXBYbVOTxvStqPoNqRNYgjDWHekTVIovK27dlDSBlwJvI09Ppe0sWMVSGvSRuiW4uiCtJFDN5JWpE1B0sZ7IjsDaduFtEEbiZFugNgDaRtI25FJGxx8SXRiG5YZWjtw+ssnbUT1TNoInOi1J20U9TNnfBa2A44P4Z1hO30C2A4ioraLnM/EdlK+NGxHMFC5PoagBbYjGAzbTeZvwHb7YjsiK9huI3anuKJXs3m1j9XcbjT7spmFbPwI/VHyCP1dB/e+lrWcPKIj+tiITgtFtURGRwPMBPFOeyxD7nzgAnmsLM8ZszjvFNEJp43GNs63abDYGsIdd5QREhVAnAiGicwRxa0QHULcGaKDy3FuNaWa57gG0YXc3E6iMZhlizCJZft7yG5ig+gDz/FtgXCS9Innfr5/tnRh9m/pAbfFwUmyAzcqmUOXdE6BdUOK2CaLehaeq8hWsrNAOA1GXqZqi6MdntNg8GXy0DFOLfCc1NBLrcesbfCchMV98KCvffGcgq4Z2dpA9sdzCnpoRB5kZfW5eA7OrDGV29Ue8FyPeI4wEFOkyRAHt1lfXzOde91y9F1Hq8FYIyFw7QpF7zAPjktCCtFPI2dfAcxjfcM81h3M473BvE5bzYYxwGij1exOQLIP1/GG2eJ2Ok2t4u1Gh317VnTZx4xk17rmD4bGhzjHHNsQ7Wh1avH27HX2asPMsPvInyds1BMW6b7e2FY2Ul/6xyu09mRXSrg6Vu8l7k92pQIDu+qSqu5EdqOPClfVjxGQ2aEahyK7YqR5Zdm0dla8N9pNojUUfZBdRS3Z7l6dtCSrjJVuUjvrdbWf8YK2a7vpKq7oeQDdbfw8cTzKRGyXG3j0xWD9Y9f/1T7+03b3qS/vqZB9j/U/rV+T1GdPvVEendnTID21KP53kjiiPMXYC8WN5J4KqrQx3uZCdsrsc68xz1mgRGMmhURISWWk1nEipXMseMBWBUtaMXtGKOXKIeUcCUxyxb2qMvu5WSzDA64velT4Y76I9ZiKOXakxSLO8id3vUB8tQXip2imk4H4ZWhV02Z23XmILdxxjmT9xqI2MbYEgnbZwd6UtWxABmLL7g7iQ6dT6EPz2VYxthBbd7mbHTqeRyuQXWNs4ZIGRtuKY1+IL0cI4vBHbv7pQnxQkZSQnoDaAPF3IJyUgvqQeoD4m/U1QPxWEB+PMAWbDAhXtDbGrFeInxSprCagvlaqBog/QPwB4mcDxN81PBvupiP1KaBahGcr4B7KtrvSnhWefRpZFbpS43Dh2XE6DoMrOgrPxhrMipv2VA0If0D4A8IfEP6A8I+O8L3WSmrGJPOIacpRzpnk1nopnTbIEO2xEbzjzBjaW5Zzo2mwhIeAuOSOmzwqYI1gwmkiiMR5K4RvhLQkF54LHj+PH2pfkxkj/vqQ/W4mY1+Ua1Y8TtFzx9Pi7U2g3wfGT6EVT2J82mtS2j0xPt0lJy0RXWN8CnPSIq7rgfj+GL8iW9PaYMA2GJ+COH/eZSw+hfmrDh5m3QLjKwzB9bbcEPth/ErgOe7ME+8rFh82PsK3ZQ5pEYtPYVQ7P3Tm4hYYHym41oOHVBlHjcWHkzrSMKsbMP6A8XeLxeeQnotNC3XAFLbVWHw1xOIPGH/A+APGPzLGVwR4iZjV7hbeH+MrAhYvRZcIfddYfAWjb44Tiw+Z+Klj/BS3BCc8snZ9p00sfiUkSh5k4jCA/AHkDyB/APkDyH8GyDe5M0grQYNiHhkpLAmC5ybkubI60JRv2kgnOgX5AeeKM6zznAVtEbNGEOLjiCSYDAozaz1PuXTapbg2uaRI5o54ajhyClFdBfn3h8tFdcqD5eL8fXKXeu/j+Py1g9gDyU+r3U8nvVanQ/JJmaekCTF3nlWHSkjyY712RfKh7A5JPgORNHJrTuM9ST5jUPiLSHpdgbQ9BuQ3oJijk3ytoCuOt2VFb5H0GgbW4IOvbrQKyK+kXmpagBhIfp8kH8aqKd3QigaSP5D8nUi+rJwBJ3Utjeg9qw5cUpCoae/SQPIHkj+Q/IHk9x6QD4EtIbVeYouA/EqqctyQvbCXiHyYH/RIEfldqXHIiHzo3pPaSKBWIfnwSGFykJnDgPIHlD+g/AHlDyj/GShfiGCM8AgbZC0ygQuJJWHaoeCszUnA0nPMVKco3zgrFKdcYEuxFzoQxSxzSGlFcypzp51RuWuXVoc7KlmeTt+USiLiLJLoiZj8oh/NYxsKKRQ/M3YZW9eqv5z4OHljTyfF7/XMyjf3D7djUvztR1bGgV+NpOgwEL+QqCDOo0jx2liUPQFCIRvwZIVYB/i+lI0Bvlf1ovfF92vh8ITxpsThR8b3UWs9EjDZouzkzMpStgDFzU44n06hsYSbKeijiPPn8fv1HWBqGsxPG+DjS0pGGkGsp5vOSR8Afl8ZdSgfKZh1TKueTikYAP5XBPCpGCkOezpR9WuYfQL8QhECFdGqp1UqjMUXT/Ax5v3yh1iIXRF8jOVLIPgY0xNF+BiTWgZWnV4AhB8f6TkIH2P2FSB8nnxbSFPrY673RPiFZJiX89AEnyc39fiJ8btU40AEP6qs4CZJ1smRp4VkOJ06yPzycPweY1z6SS2t11XP1qu85DRG0RMnprEiXijHP34buHoRnlQp/GFJo3ytN8vuHx/GqzjxWM0eI9sX0HjFsXk/kYYxg5xDsbEhpAlxSCJkKddGGy6x5Sq3xHSbRt/mVjFstSVOmjjtsyIYjiSnWAWmsaNOK0laHn3LqIntl3jnmWM4rWA8Hbpv77JUGeN87Iqm3w/l11soP5cnRPm53Bk/d0n5Ca1Q/g6C9NeygfusST1obUP5IWJ9gl+0o/wMQ+GnHaS/pvzweFq6rUj2xPxwCUEfbd1jV8wP9/hSTOvPdG6N+WHoEcVN2aBPAvMTUJWMkQHzHwvzyxGtrM41HUkxYP4B8zdjfjVC8PhFEr2Mg59+WygCMT+WfR3WMWD+AfMPmH/A/Htgfg725GJRGx/TAvPDA1T5MTA/Pg3M35UaB8T8BAxbooND39aSQZPbjKwbMP+A+U+KlA6Yf8D8A+Zvi/lRbpHXRlHrrCZcMu1yywQxhEnOLEac4FzpbsP6qfU85fhn2mLiJTVOYW5zRLEI1AanrY1/ctYK8wthciEED4EgwRBSDOVPYv7YcK6zb0rz/U02i1P+1Fp7gf3bjsilKc9Kf7B//dlP68dbbkP9tEz5slOIfJeoH6ZMpxTT5x+Qu0b9qILjOwmJKGTD5DNabks/syfrJ3CbrpZHSyW/ozdN8UjBIHYhtsHtPWA/JSMKU9Vj0fbIr4NMcqLKTAOIKuqPP2sH++MNOIJzAXzyrJ+O4iheWQQZcvIci/WLEVFgSVSohp41sP6B9e8S0h/HRDCOMS1rt+v1HNJfSV5GeGM+4fYeH/vyWT+nPVMKzjqboXL+Ilg/x6fK+tfb8iEtg9MLSPo/77hvx8o4+eJJP0kHeGu4o47U72jei/SvJVfOozpsev2oBRkhmA/t4Ki/WzUOgvoLlSnc6kHrz13Yb/5aiGZw4YPoLyy9Pk5ZSUpD0sJ8XfVsvspLTmMQPXVayvFLRf1HbwNXL8KRKoXfL0l8un9DvoAEPbF4j43ypWMMWx58nMcrGRR3Js+x8SRITTmhATmC8qhulygfaSS1NbGSJBUKI6Owi21ZUku0yI1wRmDEbctk+5ooZqRFRBMhkBVcPx2xX6J8k1yunkl+mjA+RfJFCvA6DZIvylzlTdwddx60D8+xpaj+JL0ugvYprhXdKmgfut/bKe2eJJ8y6NyzQyPaFiSfYwwLvD7L0v4kH49kBYufdnqeRPIZDIdG2w5SbkPyMSyTQ+9laEPyOdwYTFRPB7MOJH+HqH0Gd61L1NOxxQPJ/5pIvhphuPuMRF/v8Ml5kiIULimg3qL2B5I/kPyB5A8kf0eSryBiprg2JqgFyYcBQZi0DX55Fsmnp0Hy2Usj+VjBo+FoB9n1nxJ9kAnmQPIHkj+Q/IHkDyS/M5JvnQ86IIZEOhyXIZ0rJhUjASEnueWIU644yjsl+UKGXDLDiRc+t8RLq2IXk9ZbLYlURiEX725pK5Ivc0q9U1TG5/DRGyJOhAaSP57+bKbv+o7K12RLCh7aawqefVg+prsk4ClzZ3TJ8mnFkUWoNnS+BcuHQeKKoG5OGlLVFIhabwtA3zcBD4PCTz0mn+hqTiJRf+JXqwQ8ioG6lEdLSbQTyEcjJirrMXjbysa+JB+NROX4R9p0+uMpoHyEQMHQAeUfNygfdi3eE+UcUP7XhPLlCMFBkhCFaofJXlF+VASuHhKiyRCUP6D8AeUPKP/I6XcUg1n2WUdZ9ivHnIiGcb2P9DsabsFscPV6Sr+jYczYSZP8UmW9JRf+s9LvaA08cNa2YQwcv4XtGjj+wPEHjj9w/A44PqNBMcIpUVxTinPk48TGBJ6nJPZEMIlFrojHnXJ8wp3OKeWYOaO0ltpYZFnOlGDeEyWMVw5Lolpx/NxLZNNqhONIIM5pIKzK8W/nG32pSMU0icNE7GLrd8bLLM7uJ+MSl3fN9EkK236S6adM7P0x/R9jLb0r71YuY/xrbOhbwX6ZGb7h/FzWdZC+hNFzUpKOsu1IiMej6E4yExayQfiLQN0l25Ewtlu03iV7QK5PK6clbjsudj+sTytJ+08a6yeNYWQSUR1m2iluANcN1EG882dA/bpzkLkSDTk9B6jf4+G5HC7G9cY7B6j/4qB+W7vQc+ocBpNIEKJ1T0tRJHkMXzilJxs5THthDLEQu5pfEoL7ovStyWyc4QDnBHeUGJ3C9Shx2GwphRIMHztbSrdqHI7MMnh8bX0e0RZktir5IBOElmT28dLIyRvOEsyRjUzPT4C5ng3n1YswnKXwB4hZvqabZfdmPp/cZeZzyZ04r4ulfmxeJ7Rw2uMgpJOeeZ0jpbnHLndEy/iCBuekUt1m0OAqd0YFlysWmEW54oYa7jlRxOY6EIytdQqHdrxOEGscRt4ElpJ0GJ7X8DoXbevic/RtAnWLsAyrxOmK9tYTp6Nb8mjgZFpPidOVpn77FhxVxs51w+lKiXD4pZrUA419ON1aNBzMHk1Cn7UXSXGYj7ibpNilcDgREfwgKcues1mNjjhMXVIPRffldGvZkNMdmkntt4MwagwDhjGuDytvwenWN4BFgk87j0ahtZBwe6eiA6c7CqeL9ZE4HYz+IaihGQ2gbgB1RwN1sdGK6iIZEUo1TFTb+3Dqywd1VPYM6qjqbL5J9SmBOpJ2lHAEBzXWRTaEJBnDEMq2O97bujJJCXnsEwzXaqgXBOoKlQVcuu4mF0KT5AHUdQLqqNiETT+MF1FBA5BT78bz6kUYz0I4Q49hHcOgYMbTeazbSpkkSPSA09Zlcz8wF98pbnb60aKxpo4N+Ih0GAUtHJHSWZW6DlZOI+p84EF4Y4RkQfFOAZ9D2mufa6S0MZhKaRU1KFjNiMFBx57snFG03cZ6KrCyzOd5LikiuWfa1AC+5e18Plussvfhzs7MwmdT8/v4XWkb+yB7gm4je71G4P3t/hH//vCIW7ne9vi7YlqOylj/zrgeHWFE4QAlOuF66VQtuIFX8G5yDEXZBMStcNLJvvpSOMVQ+GnH35XIBqLOeue2FdcTHB6QdrSUwTtyPQH3ruCtWQb253pCV4jMaZ90V2hdPccR8YZUxwPX65HrVba9Kd4TIBmw3oD1OsJ6EiyZEImaEoq0d+D4l4/1BOsZ6wm4Kav9zFTAc9qPj/VEZYWt/lCq/bGeqOzyaLu++wysJwk5BaxXUaPtBu3DYT2pgaHiHeyMbpY8YL1OsJ64jyFLI2J0HpoJQtqdXdl43bN1vXoR1rUULh9zP6G+Nu4n+LG5H1LaaUE4CoZjTrTx2jsV/7HgFNIoMK6s5KRT7iexoAJZarCljmrOggmaICYN8VQGnXssnXS6FfcjznrMqPc8CteGS+Zdlftdm99DNl+kDJrZm59/fJMVrXbZC/NTbAvzSxFa/TG/N87Fpjm248l4dbeV9pWRYk0cCnVN++A+ShrbWke0j6uK6A7C3UvZMNw99pzuaJ9EUPjRgtb2oH0aOr3btpfuSfvgcVinvNu20FhC1BwNVae0L5pQWNwvIIpPo8pBzk2HeA20rzfaJ0aMw4RKTQHDA+0baN9xaZ+GBy8SoZtWf9q7buLLp32K90z7FJxEtp+PKnl6tK+ysCc6CuKruFStc4c/h/bJ06B9XalxONqnONyhVLvg24L2KS6Osfr9VdE+xWpp3xPcoJ709WtZr16EZS2Fq8ekT8F9yqs4Q7731PYEfumr58v1d18K+FPi2OCPaiytQYgqhVWucsw9D1yonFkfJ2VG5gwFTlCn4A97hXKqnBeYkuA5zin3ilnLFSMIx7eFsM7ZOvD326f/B1BLAwQUAAAICABQfe9aYHewgrEHAAB8JAAACwAAAHJlcG9ydC5qc29u3Zpbb9vYEce/CqGXfXGSc7/4Le1ii6DoFggW2IciKGbmzLFZU6JAUckagb9750i24zax4gCSFzAEwxR5eC4zP87851CfF0ueocAMi/PPC6B5C8Pv43TF02ZxHm7OFpsZpvm3fsmLcx29Cdoo773RZ4uynWDux9XiPCcb42sf3Nmi9gPLnf/6vDt6VxbnC7A6GQ6qWF98ZhVK8It9y1+h9buQ4fmVfJ95elWmcV3GT6vXmzXT63kjLWfezPs+29Gjfb4yKhXMphYN4Gwx5JDa7f08tFE2l+N2KN245lXXRuz2I3Z3I3afLuUKDT1d9auLblzdNehJFnm2WE/jf5jm2znT5TQu++1SLgwj3Rpiv+rvr2joV82e9mxB47Bdyp3+5qFBrdJJjAmr1TjvTrXlf5ClwMXt0bidadxNZLviP6TjmUubI8yX0mDxs4z/y372P98t76/jcj2ueDVLu7/Apqful+2KWu8w9PP1ovV6tTivMGz4bDHxZjvcmh3mGehyKbfuv6/2JtjQxLwSs7YexUazNPjtet0u9Uu44Dfr1cX9nJpJ4I0x3iROWFXI2SUKJgSfNGrIWH1pDi0ciF+3W2/O7of6N0/TOL3aDfLH/Ep/NWA7/WYJ01Vb6v8N6nVKThkINYUKJROywRCJlVYcXEgl1VpNfL0si5sP8jn7HmnaYSksU65sQUuPXMvXpJV+sx7g+g6jWWbabXgQX43TKXgy4XGeTIPt5fGUQ7I5KsgqiiNNoVx05EqFvbhMJ/TVOdT1qDwFypA15hAto0YwnjxZZ4xMQEmIdNrEqqx+Ok9KeQKTmaqumK3Nvupv8MQVxIbdPHYTD+LHj9wtx8KnYMkfik3RnJKl93draw27f7QFPgdKlmOxKH5BioZMKlbrEpKH6IsNNmWAgjXEo6JUS9aCKFuTtYshKpVigpiFrZCrDp41JkbzdJScsdYnUonIsIs++ZK+RmkN04a/ULRLh+IqseymebSjcZrEb8P1SdhKB9jK+gWyVXJOMTsXXVEuW6+qF9cglhgllih59EWziLOPm/ZyQVc9ZIlSxjMrHyVQQZUJIEi0pCwBK0psfDJbECKaGooPXq7LxVy+kfbk36fuo+SAsnNht1tDV+WvX+1OPyTtFHwldYAve1Jd9SfxBZVA5RQsJyEMYkDxna/AtSbMbJvGgUjhqHyxrsk7navEr4zKCVTGSPqVTBw5iUTC4ltK/AFZBTVaFSuZYsErSsrmr/m6k+0yh71kh/V6uG6S/X/j2b7dKQBrMepxoZVeIGAhMEAoSoNCVCDqKooKcJkUE2I1rGPx2qWjAgaEkn+tDxqtpOLMJjl0ktqk3qxWMMkESWB5OmAi06KrrfiIKSpDqKJ6JIDtEFpLLdgKQGEMN+Lw+XSCSxt3SHGdVL2/vVvc80JlIjgHikhp7ZXKxpD4Q6H1oq/BR40+VTRwXMWFFZMT9Y6GIhipPQVtr6IXXthlTZYkV5sfEe/OijRkKT6KI6fbs/F41MLrrnm+r1IuNS5Og1I+gJKPLxAlVUW5Z0gi3jEbHyUyVZSCEIzoLCkApSyTbJWPG5+sJLim7FxGbUq0QEl7bJVfYItMGSVuBe+ejlIIUEMQIchGBSfFgFP1UZQ+9fNl9xOyKCv+qW1riZNPs7GgDyl2a05aDd5e++ft8jbPglMkJyHCczHJJxEzUp3XqqEYjqLejWVFRlUx0jFxUlnFjCAPaLQhaQVJk/Y2WjQ5VAgEQTjGH9FTWTImRFRGpH5QGHx+PDLtcYIqxyemKfrHaQo6vDiakAqLS5wKTYM7lWtyMTnDSpFUgV6JxklSEx53kypyjQ68KaFIEi0RExeOWDBHExMkRTI62qfTFKu1hZIoqLjbHDEU+Ds09av3sLo4dXTK5lC9d9J096fw5FqZZ7yV4JSt1VUVeb5Fk9cmXIxUXzrUJJXYUXkynrIAICJfRHfOMQMqdNWl4IqEyQAlkZQE6ek81RIVtkeBvArKe8vGfc3Tdv3wXU1T38O+6rt7ObPZ1X/93m1H31LX8QBb+qR7Ce/ENRf70faP09+mvjxPtZdD20jnECkWV3KVkssXTVJr5ShfLBPFlI6b/kTrC1lMQgQ7VDV5sCC4mGSwSu2nNaIILP4BwIJBIK0KsGtpFXz9BmA0MEz3YauRJUbluYG1exd4IrDsgSSorXqZYJko7mChy8RImIi56ERZ2fbChkMBCNGJ3DoqWKRyyaVm1bbwJR9IJrSgGLMzoDlbycICnv2BTGiDTuhKrW27ytTiMnwDrM12vR6nubviaxxhKt0KPvYXeyef5O3foVc2p932/PvdEn/9ssRnKftSphyMV1LCa28yiKMpyccxJdHT7HzC6M1ReZL0akVMW9BoyWbvGDgb5SKYYiPnWrTETcpP58kQFu1sKV56bDsfrnzjhwuX8JE7wUa0Rvf2/bu33QDIw0l20E06tBnl/Ul3EIjauwHsn+0lss06IihlU9KppqrFNexDqk4KfHFrrE6xN+qoFOmSVLWJStDWcPG6ChHJIXrRdkrL6RCQCO8p+rD7LU5brOAkth9aXX62uLfwueSMBwbfXawDXF3vrmyu+vX6ttW9QW9apw/gaYb8gs8pBpTbm812pNz8F1BLAQI/AxQAAAgIAFB971oYUGIXkxgAAD1NAQAZAAAAAAAAAAAAAAC0gQAAAABhMzE4MmU2MGQzNWQ1OWUwNmQ2NS5qc29uUEsBAj8DFAAACAgAUH3vWmB3sIKxBwAAfCQAAAsAAAAAAAAAAAAAALSByhgAAHJlcG9ydC5qc29uUEsFBgAAAAACAAIAgAAAAKQgAAAAAA=="; \ No newline at end of file diff --git a/src/components/DateFilter/AGGridDateFilter.tsx b/src/components/DateFilter/AGGridDateFilter.tsx deleted file mode 100644 index a46051e..0000000 --- a/src/components/DateFilter/AGGridDateFilter.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import React, { Component } from "react"; -import type { - IDoesFilterPassParams, - IFilterParams, - IFilter, -} from "ag-grid-community"; -import type { DateFilterModel } from "../interfaces"; -import { DateFilter } from "./index"; -import { parseRelativeDate } from "./utils"; - -/** - * AG Grid compatible wrapper for the headless DateFilter component. - * This class component properly exposes the filter API that AG Grid expects. - */ -export class AGGridDateFilter - extends Component - implements IFilter -{ - private model: DateFilterModel | null = null; - - constructor(props: IFilterParams) { - super(props); - console.log("[AGGridDateFilter] Constructor called"); - - // Bind methods to ensure they're accessible - this.doesFilterPass = this.doesFilterPass.bind(this); - this.isFilterActive = this.isFilterActive.bind(this); - this.getModel = this.getModel.bind(this); - this.setModel = this.setModel.bind(this); - } - - // AG Grid lifecycle methods - doesFilterPass(params: IDoesFilterPassParams): boolean { - console.log( - "[AGGridDateFilter] doesFilterPass called with model:", - this.model, - ); - - if (!this.model || !this.model.filterType) { - return true; // No filter applied - } - - const columnId = - (params as any).column?.getColId() || (params as any).colDef?.field; - const cellValue = params.data[columnId]; - - console.log( - "[AGGridDateFilter] Checking cell value:", - cellValue, - "for column:", - columnId, - ); - - if (!cellValue) { - return false; // No value fails all filters except when no filter is applied - } - - let cellDate: Date; - try { - cellDate = new Date(cellValue); - if (isNaN(cellDate.getTime())) { - return false; - } - } catch { - return false; - } - - // Parse dates from model - let dateFrom: Date | null = null; - let dateTo: Date | null = null; - - if (this.model.dateFrom) { - if ( - this.model.dateFrom.includes("-") || - this.model.dateFrom.toLowerCase().includes("today") || - this.model.dateFrom.toLowerCase().includes("month") - ) { - // Relative date - dateFrom = parseRelativeDate(this.model.dateFrom); - } else { - // Absolute date - dateFrom = new Date(this.model.dateFrom); - } - } - - if (this.model.dateTo) { - if ( - this.model.dateTo.includes("-") || - this.model.dateTo.toLowerCase().includes("today") || - this.model.dateTo.toLowerCase().includes("month") - ) { - // Relative date - dateTo = parseRelativeDate(this.model.dateTo); - } else { - // Absolute date - dateTo = new Date(this.model.dateTo); - } - } - - // Apply filter logic based on type - switch (this.model.filterType) { - case "equals": - if (!dateFrom) return false; - return cellDate.toDateString() === dateFrom.toDateString(); - - case "notEqual": - if (!dateFrom) return false; - return cellDate.toDateString() !== dateFrom.toDateString(); - - case "before": - if (!dateFrom) return false; - return cellDate < dateFrom; - - case "after": - if (!dateFrom) return false; - return cellDate > dateFrom; - - case "inRange": - // Handle open-ended ranges - if (dateFrom && dateTo) { - return cellDate >= dateFrom && cellDate <= dateTo; - } else if (dateFrom) { - return cellDate >= dateFrom; - } else if (dateTo) { - return cellDate <= dateTo; - } - return false; - - default: - return true; - } - } - - isFilterActive(): boolean { - console.log( - "[AGGridDateFilter] isFilterActive called:", - this.model !== null, - ); - return this.model !== null; - } - - getModel(): DateFilterModel | null { - console.log("[AGGridDateFilter] getModel called:", this.model); - return this.model; - } - - setModel(model: DateFilterModel | null): void { - console.log("[AGGridDateFilter] setModel called with:", model); - this.model = model; - - // Force re-render to update the UI - this.forceUpdate(); - - // Notify AG Grid that the filter has changed - if (this.props.filterChangedCallback) { - console.log("[AGGridDateFilter] Calling filterChangedCallback"); - this.props.filterChangedCallback(); - } - } - - // Additional AG Grid methods that might be needed - afterGuiAttached?(): void { - console.log("[AGGridDateFilter] afterGuiAttached called"); - } - - // React render method - render() { - return React.createElement(DateFilter, { - ...this.props, - model: this.model, - onModelChange: (newModel: DateFilterModel | null) => { - this.setModel(newModel); - }, - }); - } -} - -// Mark as AG Grid component -(AGGridDateFilter as any).__AG_GRID_COMPONENT = true; diff --git a/src/components/DateFilter/AGGridFilterAdapter.tsx b/src/components/DateFilter/AGGridFilterAdapter.tsx index a741a1d..7f015f9 100644 --- a/src/components/DateFilter/AGGridFilterAdapter.tsx +++ b/src/components/DateFilter/AGGridFilterAdapter.tsx @@ -1,274 +1,4 @@ -import React, { Component } from "react"; -import type { - IDoesFilterPassParams, - IFilterParams, - IAfterGuiAttachedParams, -} from "ag-grid-community"; -import type { DateFilterModel } from "../interfaces"; -import { DateFilter } from "./index"; -import { parseRelativeDate } from "./utils"; - -/** - * AG Grid Filter Adapter that properly implements the IFilter interface - * This follows AG Grid's official pattern for custom filter components - */ -export class AGGridFilterAdapter extends Component< - IFilterParams, - { model: DateFilterModel | null } -> { - private filterInstance: any = null; - private _isMounted = false; - private _logCount = 0; - private _passCount = 0; - private _failCount = 0; - - private _props: IFilterParams; - - constructor(props: IFilterParams) { - super(props || ({} as IFilterParams)); - this._props = props; - this.state = { - model: null, - }; - - console.log("[AGGridFilterAdapter] Constructor called with props:", props); - - // Bind all filter methods - this.doesFilterPass = this.doesFilterPass.bind(this); - this.isFilterActive = this.isFilterActive.bind(this); - this.getModel = this.getModel.bind(this); - this.setModel = this.setModel.bind(this); - - // Bind optional methods if they exist - if (this.afterGuiAttached) { - this.afterGuiAttached = this.afterGuiAttached.bind(this); - } - if (this.onFloatingFilterChanged) { - this.onFloatingFilterChanged = this.onFloatingFilterChanged.bind(this); - } - if (this.onNewRowsLoaded) { - this.onNewRowsLoaded = this.onNewRowsLoaded.bind(this); - } - } - - componentDidMount() { - console.log("[AGGridFilterAdapter] componentDidMount"); - this._isMounted = true; - // If we have a model that was set before mount, notify the grid - if (this.state.model && this._props?.filterChangedCallback) { - console.log("[AGGridFilterAdapter] Notifying grid of initial model"); - this._props.filterChangedCallback(); - } - } - - componentWillUnmount() { - this._isMounted = false; - } - - // AG Grid IFilter methods - doesFilterPass(params: IDoesFilterPassParams): boolean { - const model = this.state.model; - - // Check for both 'type' and 'filterType' as different parts of the code use different names - if (!model) { - return true; // No filter applied - } - - const filterType = (model as any).type || model.filterType; - if (!filterType) { - return true; // No filter applied - } - - // Get the field name from params - const field = this._props?.colDef?.field; - if (!field) { - console.error("[AGGridFilterAdapter] No field found in colDef", { - props: this.props, - _props: this._props, - params: params, - }); - return true; - } - - const cellValue = params.data[field]; - - if (!cellValue) { - console.log("[AGGridFilterAdapter] No value for field:", field); - return false; // No value fails all filters - } - - let cellDate: Date; - try { - cellDate = new Date(cellValue); - if (isNaN(cellDate.getTime())) { - return false; - } - } catch { - return false; - } - - // Parse dates from model - let dateFrom: Date | null = null; - let dateTo: Date | null = null; - - if (model.dateFrom) { - const isRelative = - model.dateFrom.includes("-") || - model.dateFrom.toLowerCase().includes("today") || - model.dateFrom.toLowerCase().includes("month"); - dateFrom = isRelative - ? parseRelativeDate(model.dateFrom) - : new Date(model.dateFrom); - } - - if (model.dateTo) { - const isRelative = - model.dateTo.includes("-") || - model.dateTo.toLowerCase().includes("today") || - model.dateTo.toLowerCase().includes("month"); - dateTo = isRelative - ? parseRelativeDate(model.dateTo) - : new Date(model.dateTo); - } - - // Apply filter logic - let result = true; - - switch (filterType) { - case "equals": - result = dateFrom - ? cellDate.toDateString() === dateFrom.toDateString() - : false; - break; - case "notEqual": - result = dateFrom - ? cellDate.toDateString() !== dateFrom.toDateString() - : false; - break; - case "before": - result = dateFrom ? cellDate < dateFrom : false; - break; - case "after": - result = dateFrom ? cellDate > dateFrom : false; - break; - case "inRange": - if (dateFrom && dateTo) { - result = cellDate >= dateFrom && cellDate <= dateTo; - } else if (dateFrom) { - result = cellDate >= dateFrom; - } else if (dateTo) { - result = cellDate <= dateTo; - } else { - result = false; - } - break; - default: - result = true; - } - - // Log the first few calls and then summarize - this._logCount++; - if (result) { - this._passCount++; - } else { - this._failCount++; - } - - if (this._logCount <= 5) { - console.log("[AGGridFilterAdapter] Filter result:", { - cellValue, - cellDate: cellDate.toISOString(), - dateFrom: dateFrom?.toISOString() || null, - dateTo: dateTo?.toISOString() || null, - filterType: filterType, - result, - }); - } else if (this._logCount === 100) { - console.log("[AGGridFilterAdapter] Filter summary after 100 calls:", { - total: this._logCount, - passed: this._passCount, - failed: this._failCount, - passRate: `${((this._passCount / this._logCount) * 100).toFixed(1)}%`, - }); - } - - return result; - } - - isFilterActive(): boolean { - const isActive = this.state.model !== null; - console.log("[AGGridFilterAdapter] isFilterActive:", isActive); - return isActive; - } - - getModel(): DateFilterModel | null { - console.log("[AGGridFilterAdapter] getModel:", this.state.model); - return this.state.model; - } - - setModel(model: DateFilterModel | null): void { - console.log("[AGGridFilterAdapter] setModel called with:", model); - - // Check if component is mounted - if (!this._isMounted) { - console.log( - "[AGGridFilterAdapter] Component not mounted yet, storing model directly", - ); - this.state = { model }; - return; - } - - this.setState({ model }, () => { - // Notify AG Grid that the filter has changed - if (this._props?.filterChangedCallback) { - console.log("[AGGridFilterAdapter] Calling filterChangedCallback"); - this._props.filterChangedCallback(); - } - }); - } - - // Optional AG Grid methods - afterGuiAttached?(_params?: IAfterGuiAttachedParams): void { - console.log("[AGGridFilterAdapter] afterGuiAttached called"); - } - - onFloatingFilterChanged?(type: string, value: any): void { - console.log("[AGGridFilterAdapter] onFloatingFilterChanged:", type, value); - } - - onNewRowsLoaded?(): void { - console.log("[AGGridFilterAdapter] onNewRowsLoaded called"); - } - - // Ref handling for AG Grid - getGui() { - return this.filterInstance; - } - - setFilterInstance = (ref: any) => { - this.filterInstance = ref; - }; - - render() { - return React.createElement( - "div", - { ref: this.setFilterInstance }, - React.createElement(DateFilter, { - ...(this._props || {}), - model: this.state.model, - onModelChange: (newModel: DateFilterModel | null) => { - this.setModel(newModel); - }, - }), - ); - } -} - -// Export a factory function that AG Grid can use -export function AGGridDateFilter(props: IFilterParams) { - return ; -} - -// Mark as AG Grid component for both the class and factory -(AGGridFilterAdapter as any).__AG_GRID_COMPONENT = true; -(AGGridDateFilter as any).__AG_GRID_COMPONENT = true; +// Re-export the AGGridFilterWrapper for compatibility +export { AGGridFilterWrapper as AGGridFilterAdapter } from "./AGGridFilterWrapper"; +export { AGGridFilterWrapper as AGGridDateFilter } from "./AGGridFilterWrapper"; +export { default as AGGridFilterWrapper } from "./AGGridFilterWrapper"; diff --git a/src/components/DateFilter/AGGridFilterWrapper.tsx b/src/components/DateFilter/AGGridFilterWrapper.tsx index 4029241..86bfb37 100644 --- a/src/components/DateFilter/AGGridFilterWrapper.tsx +++ b/src/components/DateFilter/AGGridFilterWrapper.tsx @@ -1,201 +1,9 @@ -import { - IDoesFilterPassParams, - IFilterParams, - IAfterGuiAttachedParams, - IFilter, -} from "ag-grid-community"; -import type { DateFilterModel } from "../interfaces"; -import { parseRelativeDate } from "./utils"; +import DateFilter from "./index"; /** - * AG Grid Filter Wrapper that properly implements the IFilter interface - * This is instantiated directly by AG Grid, not through React + * Direct export of DateFilter for AG Grid integration + * The DateFilter component already handles AG Grid integration internally */ -export class AGGridFilterWrapper implements IFilter { - private params: IFilterParams; - private model: DateFilterModel | null = null; - private gui!: HTMLElement; - private _logCount = 0; - private _passCount = 0; - private _failCount = 0; +export const AGGridFilterWrapper = DateFilter; - constructor(params: IFilterParams) { - this.params = params; - console.log( - "[AGGridFilterWrapper] Constructor called with params:", - params, - ); - } - - // Required by AG Grid - init(params: IFilterParams): void { - console.log("[AGGridFilterWrapper] init called"); - this.params = params; - this.gui = document.createElement("div"); - this.gui.innerHTML = "
Date Filter
"; - } - - // Required by AG Grid - getGui(): HTMLElement { - return this.gui; - } - - doesFilterPass(params: IDoesFilterPassParams): boolean { - // Check for both 'type' and 'filterType' as different parts of the code use different names - if (!this.model) { - return true; // No filter applied - } - - const filterType = (this.model as any).type || this.model.filterType; - if (!filterType) { - return true; // No filter applied - } - - // Get the field name from params - const field = this.params?.colDef?.field; - if (!field) { - console.error("[AGGridFilterWrapper] No field found in colDef", { - params: this.params, - data: params, - }); - return true; - } - - const cellValue = params.data[field]; - - if (!cellValue) { - console.log("[AGGridFilterWrapper] No value for field:", field); - return false; // No value fails all filters - } - - let cellDate: Date; - try { - cellDate = new Date(cellValue); - if (isNaN(cellDate.getTime())) { - return false; - } - } catch { - return false; - } - - // Parse dates from model - let dateFrom: Date | null = null; - let dateTo: Date | null = null; - - if ((this.model as any).dateFrom || (this.model as any).expressionFrom) { - const fromValue = - (this.model as any).dateFrom || (this.model as any).expressionFrom; - const isRelative = - fromValue.includes("-") || - fromValue.toLowerCase().includes("today") || - fromValue.toLowerCase().includes("month"); - dateFrom = isRelative - ? parseRelativeDate(fromValue) - : new Date(fromValue); - } - - if ((this.model as any).dateTo || (this.model as any).expressionTo) { - const toValue = - (this.model as any).dateTo || (this.model as any).expressionTo; - const isRelative = - toValue.includes("-") || - toValue.toLowerCase().includes("today") || - toValue.toLowerCase().includes("month"); - dateTo = isRelative ? parseRelativeDate(toValue) : new Date(toValue); - } - - // Apply filter logic - let result = true; - - switch (filterType) { - case "equals": - result = dateFrom - ? cellDate.toDateString() === dateFrom.toDateString() - : false; - break; - case "notEqual": - result = dateFrom - ? cellDate.toDateString() !== dateFrom.toDateString() - : false; - break; - case "before": - result = dateFrom ? cellDate < dateFrom : false; - break; - case "after": - result = dateFrom ? cellDate > dateFrom : false; - break; - case "inRange": - if (dateFrom && dateTo) { - result = cellDate >= dateFrom && cellDate <= dateTo; - } else if (dateFrom) { - result = cellDate >= dateFrom; - } else if (dateTo) { - result = cellDate <= dateTo; - } else { - result = false; - } - break; - default: - result = true; - } - - // Log the first few calls and then summarize - this._logCount++; - if (result) { - this._passCount++; - } else { - this._failCount++; - } - - if (this._logCount <= 5) { - console.log("[AGGridFilterWrapper] Filter result:", { - cellValue, - cellDate: cellDate.toISOString(), - dateFrom: dateFrom?.toISOString() || null, - dateTo: dateTo?.toISOString() || null, - filterType: filterType, - result, - }); - } else if (this._logCount === 100) { - console.log("[AGGridFilterWrapper] Filter summary after 100 calls:", { - total: this._logCount, - passed: this._passCount, - failed: this._failCount, - passRate: `${((this._passCount / this._logCount) * 100).toFixed(1)}%`, - }); - } - - return result; - } - - isFilterActive(): boolean { - const isActive = this.model !== null; - console.log("[AGGridFilterWrapper] isFilterActive:", isActive); - return isActive; - } - - getModel(): DateFilterModel | null { - console.log("[AGGridFilterWrapper] getModel:", this.model); - return this.model; - } - - setModel(model: DateFilterModel | null): void { - console.log("[AGGridFilterWrapper] setModel called with:", model); - this.model = model; - - // Notify AG Grid that the filter has changed - if (this.params?.filterChangedCallback) { - console.log("[AGGridFilterWrapper] Calling filterChangedCallback"); - this.params.filterChangedCallback(); - } - } - - // Optional AG Grid methods - afterGuiAttached?(_params?: IAfterGuiAttachedParams): void { - console.log("[AGGridFilterWrapper] afterGuiAttached called"); - } - - destroy?(): void { - console.log("[AGGridFilterWrapper] destroy called"); - } -} +export default AGGridFilterWrapper; diff --git a/src/components/DateFilter/DateFilter.test.tsx b/src/components/DateFilter/DateFilter.test.tsx new file mode 100644 index 0000000..005885f --- /dev/null +++ b/src/components/DateFilter/DateFilter.test.tsx @@ -0,0 +1,175 @@ +import React from "react"; +import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import { describe, it, expect, vi, beforeEach } from "vitest"; +import DateFilter from "./index"; +import type { IFilterParams } from "ag-grid-community"; + +describe("DateFilter", () => { + const mockOnFilterChanged = vi.fn(); + const mockApi = { + onFilterChanged: mockOnFilterChanged, + }; + + const defaultParams: IFilterParams = { + api: mockApi as any, + column: { getColId: () => "date" } as any, + colDef: {} as any, + rowModel: {} as any, + filterChangedCallback: vi.fn(), + filterModifiedCallback: vi.fn(), + valueGetter: vi.fn(), + doesRowPassOtherFilter: vi.fn(), + suppressFilterDropdown: false, + }; + + beforeEach(() => { + vi.clearAllMocks(); + }); + + describe("Basic Rendering", () => { + it("renders without crashing", () => { + render(); + expect(screen.getByRole("combobox")).toBeInTheDocument(); + }); + + it("displays filter type selector", () => { + render(); + const typeSelector = screen.getByRole("combobox"); + expect(typeSelector).toHaveValue("equals"); + }); + + it("displays mode toggle button", () => { + render(); + const modeToggle = screen.getByRole("button", { name: /relative/i }); + expect(modeToggle).toBeInTheDocument(); + }); + }); + + describe("Relative Mode", () => { + it("shows relative input by default", () => { + render(); + const input = screen.getByPlaceholderText(/e\.g\./i); + expect(input).toBeInTheDocument(); + }); + + it("validates relative date expressions", async () => { + render(); + const input = screen.getByPlaceholderText(/e\.g\./i); + + fireEvent.change(input, { target: { value: "-7d" } }); + await waitFor(() => { + expect(screen.queryByText(/invalid/i)).not.toBeInTheDocument(); + }); + }); + + it("shows error for invalid expressions", async () => { + render(); + const input = screen.getByPlaceholderText(/e\.g\./i); + + fireEvent.change(input, { target: { value: "invalid" } }); + await waitFor(() => { + expect( + screen.getByText(/invalid date expression/i), + ).toBeInTheDocument(); + }); + }); + }); + + describe("Absolute Mode", () => { + it("switches to date picker when mode is toggled", async () => { + render(); + const modeToggle = screen.getByRole("button", { name: /relative/i }); + + fireEvent.click(modeToggle); + + await waitFor(() => { + expect( + screen.getByRole("button", { name: /absolute/i }), + ).toBeInTheDocument(); + expect(screen.getByLabelText(/select date/i)).toBeInTheDocument(); + }); + }); + }); + + describe("Filter Types", () => { + it("shows single input for basic operators", () => { + render(); + const inputs = screen.getAllByRole("textbox"); + expect(inputs).toHaveLength(1); + }); + + it("shows two inputs for inRange operator", async () => { + render(); + const typeSelector = screen.getByRole("combobox"); + + fireEvent.change(typeSelector, { target: { value: "inRange" } }); + + await waitFor(() => { + const inputs = screen.getAllByRole("textbox"); + expect(inputs).toHaveLength(2); + }); + }); + }); + + describe("Filter Application", () => { + it("calls filterChangedCallback when filter is applied", async () => { + const filterChangedCallback = vi.fn(); + render( + , + ); + + const input = screen.getByPlaceholderText(/e\.g\./i); + fireEvent.change(input, { target: { value: "today" } }); + + await waitFor(() => { + expect(filterChangedCallback).toHaveBeenCalled(); + }); + }); + }); + + describe("AG Grid Integration", () => { + it("implements getModel correctly", () => { + const ref = React.createRef(); + render(); + + const model = ref.current?.getModel(); + expect(model).toBeDefined(); + }); + + it("implements setModel correctly", () => { + const ref = React.createRef(); + render(); + + const model = { + type: "after", + mode: "relative", + expressionFrom: "-7d", + }; + + ref.current?.setModel(model); + expect(ref.current?.getModel()).toEqual(model); + }); + + it("implements doesFilterPass correctly", () => { + const ref = React.createRef(); + render(); + + ref.current?.setModel({ + type: "equals", + mode: "relative", + expressionFrom: "today", + }); + + const today = new Date(); + const params = { + data: { date: today.toISOString() }, + node: {} as any, + }; + + expect(ref.current?.doesFilterPass(params)).toBe(true); + }); + }); +}); diff --git a/src/components/DateFilter/context.tsx b/src/components/DateFilter/context.tsx index 6cbf7ca..9e9c37e 100644 --- a/src/components/DateFilter/context.tsx +++ b/src/components/DateFilter/context.tsx @@ -70,37 +70,37 @@ export function DateFilterProvider({ dateParser, }: DateFilterProviderProps) { // Initialize state from model - const [mode, setMode] = useState(() => { - if (!model?.dateFrom) return "relative"; - // Check if it's a relative date expression - return model.dateFrom.includes("-") || - model.dateFrom.toLowerCase().includes("today") || - model.dateFrom.toLowerCase().includes("month") + const [mode, setMode] = useState(() => + model?.dateFrom && + typeof model.dateFrom === "string" && + model.dateFrom.includes("-") ? "relative" - : "absolute"; - }); + : "absolute", + ); const [filterType, setFilterType] = useState( () => model?.filterType || "equals", ); - const [relativeValue, setRelativeValue] = useState(() => { - if (!model?.dateFrom) return ""; - const isRelative = - model.dateFrom.includes("-") || - model.dateFrom.toLowerCase().includes("today") || - model.dateFrom.toLowerCase().includes("month"); - return isRelative ? model.dateFrom : ""; - }); + const [relativeValue, setRelativeValue] = useState(() => + model?.filterType === "inRange" && + model?.dateFrom && + typeof model.dateFrom === "string" && + model.dateFrom.includes("-") + ? model.dateFrom + : "", + ); const [startDate, setStartDate] = useState(() => { - if (!model?.dateFrom) return null; - const isRelative = - model.dateFrom.includes("-") || - model.dateFrom.toLowerCase().includes("today") || - model.dateFrom.toLowerCase().includes("month"); - if (isRelative) return null; - const date = new Date(model.dateFrom); + if ( + !model?.dateFrom || + (typeof model.dateFrom === "string" && model.dateFrom.includes("-")) + ) + return null; + const date = + model.dateFrom instanceof Date + ? model.dateFrom + : new Date(model.dateFrom); return isNaN(date.getTime()) ? null : date; }); @@ -116,7 +116,7 @@ export function DateFilterProvider({ const isValid = useMemo(() => { if (mode === "relative") { if (!relativeValue) return false; - const parsed = parseRelativeDate(relativeValue); + const parsed = parseRelativeDate(relativeValue as string); return parsed !== null; } else { if (filterType === "inRange") { @@ -200,7 +200,7 @@ export function DateFilterProvider({ setMode, filterType, setFilterType, - relativeValue, + relativeValue: relativeValue as string, setRelativeValue, startDate, setStartDate, diff --git a/src/components/DateFilter/hooks/index.ts b/src/components/DateFilter/hooks/index.ts deleted file mode 100644 index 26cce02..0000000 --- a/src/components/DateFilter/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useGridFilter } from "./useGridFilter"; diff --git a/src/components/DateFilter/hooks/useDebounce.ts.bak b/src/components/DateFilter/hooks/useDebounce.ts.bak deleted file mode 100644 index e73b0da..0000000 --- a/src/components/DateFilter/hooks/useDebounce.ts.bak +++ /dev/null @@ -1,62 +0,0 @@ -import { useState, useEffect } from "react"; - -/** - * Custom hook for debouncing values to improve performance by reducing - * expensive operations like validation or API calls. - * - * @param value - The value to debounce - * @param delay - The delay in milliseconds (default: 300ms) - * @returns The debounced value - */ -export function useDebounce(value: T, delay: number = 300): T { - const [debouncedValue, setDebouncedValue] = useState(value); - - useEffect(() => { - const handler = setTimeout(() => { - setDebouncedValue(value); - }, delay); - - return () => { - clearTimeout(handler); - }; - }, [value, delay]); - - return debouncedValue; -} - -/** - * Custom hook for debouncing callbacks to prevent excessive function calls. - * Useful for form validation, search queries, etc. - * - * @param callback - The function to debounce - * @param delay - The delay in milliseconds (default: 300ms) - * @param dependencies - Dependencies array for useCallback - * @returns The debounced callback function - */ -export function useDebouncedCallback( - callback: (...args: TArgs) => void, - delay: number = 300, - _dependencies: React.DependencyList = [], -): (...args: TArgs) => void { - const [timeoutId, setTimeoutId] = useState(null); - - useEffect(() => { - return () => { - if (timeoutId) { - clearTimeout(timeoutId); - } - }; - }, [timeoutId]); - - return (...args: TArgs) => { - if (timeoutId) { - clearTimeout(timeoutId); - } - - const newTimeoutId = setTimeout(() => { - callback(...args); - }, delay); - - setTimeoutId(newTimeoutId); - }; -} diff --git a/src/components/DateFilter/hooks/useDebouncedValidation.ts.bak b/src/components/DateFilter/hooks/useDebouncedValidation.ts.bak deleted file mode 100644 index 6ba0a37..0000000 --- a/src/components/DateFilter/hooks/useDebouncedValidation.ts.bak +++ /dev/null @@ -1,90 +0,0 @@ -import { useEffect } from "react"; -import { useDebounce } from "./useDebounce"; -import { parseDateExpression } from "../../../utils/dateExpressionParser"; - -interface UseDebouncedValidationProps { - expressionFrom: string; - expressionTo: string; - filterMode: "absolute" | "relative"; - onFromValidityChange: (valid: boolean) => void; - onToValidityChange: (valid: boolean) => void; - onToErrorChange: (error: string) => void; - validateToExpression: (expression: string) => { - isValid: boolean; - error: string; - }; - debounceDelay?: number; -} - -/** - * Custom hook that provides debounced validation for date expressions. - * This prevents expensive validation from running on every keystroke. - * - * @param props - Configuration for debounced validation - */ -export const useDebouncedValidation = ({ - expressionFrom, - expressionTo, - filterMode, - onFromValidityChange, - onToValidityChange, - onToErrorChange, - validateToExpression, - debounceDelay = 300, -}: UseDebouncedValidationProps): void => { - // Debounce the expression values to avoid validating on every keystroke - const debouncedExpressionFrom = useDebounce(expressionFrom, debounceDelay); - const debouncedExpressionTo = useDebounce(expressionTo, debounceDelay); - - // Validate from expression when it changes (debounced) - useEffect(() => { - if (filterMode !== "relative") return; - - if (!debouncedExpressionFrom.trim()) { - onFromValidityChange(true); // Empty is considered valid (no error state) - return; - } - - const parseResult = parseDateExpression(debouncedExpressionFrom); - onFromValidityChange(parseResult.isValid); - }, [debouncedExpressionFrom, filterMode, onFromValidityChange]); - - // Validate to expression when it changes (debounced) - useEffect(() => { - if (filterMode !== "relative") return; - - if (!debouncedExpressionTo.trim()) { - onToValidityChange(true); // Empty is considered valid - onToErrorChange(""); - return; - } - - const validationResult = validateToExpression(debouncedExpressionTo); - onToValidityChange(validationResult.isValid); - onToErrorChange(validationResult.error); - }, [ - debouncedExpressionTo, - filterMode, - validateToExpression, - onToValidityChange, - onToErrorChange, - ]); - - // Immediate validation for empty expressions (don't wait for debounce) - useEffect(() => { - if (filterMode !== "relative") return; - - if (!expressionFrom.trim()) { - onFromValidityChange(true); - } - }, [expressionFrom, filterMode, onFromValidityChange]); - - useEffect(() => { - if (filterMode !== "relative") return; - - if (!expressionTo.trim()) { - onToValidityChange(true); - onToErrorChange(""); - } - }, [expressionTo, filterMode, onToValidityChange, onToErrorChange]); -}; diff --git a/src/components/DateFilter/hooks/useFilterState.ts.bak b/src/components/DateFilter/hooks/useFilterState.ts.bak deleted file mode 100644 index d0887f4..0000000 --- a/src/components/DateFilter/hooks/useFilterState.ts.bak +++ /dev/null @@ -1,229 +0,0 @@ -import { useState, useCallback } from "react"; -import { - DateFilterType, - DateFilterMode, - DateFilterModel, -} from "../../interfaces"; - -interface UseFilterStateReturn { - // Filter state - filterType: DateFilterType; - filterMode: DateFilterMode; - - // Date values - absoluteDateFrom: Date | null; - absoluteDateTo: Date | null; - - // Expression values - expressionFrom: string; - expressionTo: string; - - // Validation state - fromExpressionValid: boolean; - toExpressionValid: boolean; - toExpressionError: string; - - // Inclusivity flags - fromInclusive: boolean; - toInclusive: boolean; - - // State setters - setFilterType: (type: DateFilterType) => void; - setFilterMode: (mode: DateFilterMode) => void; - setAbsoluteDateFrom: (date: Date | null) => void; - setAbsoluteDateTo: (date: Date | null) => void; - setExpressionFrom: (expr: string) => void; - setExpressionTo: (expr: string) => void; - setFromExpressionValid: (valid: boolean) => void; - setToExpressionValid: (valid: boolean) => void; - setToExpressionError: (error: string) => void; - setFromInclusive: (inclusive: boolean) => void; - setToInclusive: (inclusive: boolean) => void; - - // Actions - toggleFilterMode: () => void; - resetState: () => void; - initializeFromModel: (model: DateFilterModel | null) => void; -} - -// Helper functions to validate filter types and modes -const isValidFilterType = (type: unknown): type is DateFilterType => { - return ( - typeof type === "string" && - ["equals", "notEqual", "after", "before", "inRange"].includes(type) - ); -}; - -const isValidFilterMode = (mode: unknown): mode is DateFilterMode => { - return typeof mode === "string" && ["absolute", "relative"].includes(mode); -}; - -export const useFilterState = ( - initialModel?: DateFilterModel | null, - defaultMode?: DateFilterMode, -): UseFilterStateReturn => { - console.log("[useFilterState] Initializing with model:", initialModel); - - // Filter state with validation - const [filterType, setFilterType] = useState( - isValidFilterType(initialModel?.type) ? initialModel.type : "equals", - ); - const [filterMode, setFilterMode] = useState( - isValidFilterMode(initialModel?.mode) - ? initialModel.mode - : defaultMode || "absolute", - ); - - // Date values - const [absoluteDateFrom, setAbsoluteDateFrom] = useState( - filterMode === "absolute" && initialModel?.dateFrom - ? initialModel.dateFrom instanceof Date - ? initialModel.dateFrom - : new Date(initialModel.dateFrom) - : null, - ); - const [absoluteDateTo, setAbsoluteDateTo] = useState( - filterMode === "absolute" && initialModel?.dateTo - ? initialModel.dateTo instanceof Date - ? initialModel.dateTo - : new Date(initialModel.dateTo) - : null, - ); - - // Expression values - const [expressionFrom, setExpressionFrom] = useState( - initialModel && filterMode === "relative" && initialModel.expressionFrom - ? initialModel.expressionFrom - : "", - ); - const [expressionTo, setExpressionTo] = useState( - initialModel && filterMode === "relative" && initialModel.expressionTo - ? initialModel.expressionTo - : "", - ); - - // Validation state - const [fromExpressionValid, setFromExpressionValid] = useState(true); - const [toExpressionValid, setToExpressionValid] = useState(true); - const [toExpressionError, setToExpressionError] = useState(""); - - // Inclusivity flags - const [fromInclusive, setFromInclusive] = useState( - initialModel?.fromInclusive ?? false, - ); - const [toInclusive, setToInclusive] = useState( - initialModel?.toInclusive ?? false, - ); - - // Toggle filter mode - const toggleFilterMode = useCallback(() => { - setFilterMode((prevMode) => - prevMode === "absolute" ? "relative" : "absolute", - ); - }, []); - - // Reset all state to defaults - const resetState = useCallback(() => { - setFilterType("equals"); - setFilterMode(defaultMode || "absolute"); - setAbsoluteDateFrom(null); - setAbsoluteDateTo(null); - setExpressionFrom(""); - setExpressionTo(""); - setFromExpressionValid(true); - setToExpressionValid(true); - setToExpressionError(""); - setFromInclusive(false); - setToInclusive(false); - }, [defaultMode]); - - // Initialize state from a model - const initializeFromModel = useCallback( - (model: DateFilterModel | null) => { - console.log("[useFilterState] initializeFromModel called with:", model); - - if (!model) { - console.log("[useFilterState] No model, resetting state"); - resetState(); - return; - } - - console.log("[useFilterState] Setting filter type to:", model.type); - setFilterType(model.type); - - console.log("[useFilterState] Setting filter mode to:", model.mode); - setFilterMode(model.mode); - - if (model.mode === "absolute") { - console.log("[useFilterState] Setting absolute dates:", { - from: model.dateFrom, - to: model.dateTo, - }); - setAbsoluteDateFrom(model.dateFrom || null); - setAbsoluteDateTo(model.dateTo || null); - setExpressionFrom(""); - setExpressionTo(""); - } else { - console.log("[useFilterState] Setting relative expressions:", { - from: model.expressionFrom, - to: model.expressionTo, - }); - setExpressionFrom(model.expressionFrom || ""); - setExpressionTo(model.expressionTo || ""); - setAbsoluteDateFrom(null); - setAbsoluteDateTo(null); - } - - // Reset validation state - setFromExpressionValid(true); - setToExpressionValid(true); - setToExpressionError(""); - - // Set inclusivity flags from model - setFromInclusive(model.fromInclusive ?? false); - setToInclusive(model.toInclusive ?? false); - }, - [resetState], - ); - - return { - // Filter state - filterType, - filterMode, - - // Date values - absoluteDateFrom, - absoluteDateTo, - - // Expression values - expressionFrom, - expressionTo, - - // Validation state - fromExpressionValid, - toExpressionValid, - toExpressionError, - - // Inclusivity flags - fromInclusive, - toInclusive, - - // State setters - setFilterType, - setFilterMode, - setAbsoluteDateFrom, - setAbsoluteDateTo, - setExpressionFrom, - setExpressionTo, - setFromExpressionValid, - setToExpressionValid, - setToExpressionError, - setFromInclusive, - setToInclusive, - - // Actions - toggleFilterMode, - resetState, - initializeFromModel, - }; -}; diff --git a/src/components/DateFilter/hooks/useFilterValidation.ts.bak b/src/components/DateFilter/hooks/useFilterValidation.ts.bak deleted file mode 100644 index 3f4e592..0000000 --- a/src/components/DateFilter/hooks/useFilterValidation.ts.bak +++ /dev/null @@ -1,154 +0,0 @@ -import { useMemo, useCallback } from "react"; -import { DateFilterType, DateFilterMode } from "../../interfaces"; -import { - parseDateExpression, - resolveDateExpression, -} from "../../../utils/dateExpressionParser"; - -interface UseFilterValidationProps { - filterType: DateFilterType; - filterMode: DateFilterMode; - absoluteDateFrom: Date | null; - absoluteDateTo: Date | null; - expressionFrom: string; - expressionTo: string; - fromExpressionValid: boolean; - toExpressionValid: boolean; -} - -interface UseFilterValidationReturn { - isFilterValid: boolean; - resolvedDateFrom: Date | null; - resolvedDateTo: Date | null; - effectiveDateFrom: Date | null; - effectiveDateTo: Date | null; - validateToExpression: (expression: string) => { - isValid: boolean; - error: string; - resolvedDate: Date | null; - }; -} - -export const useFilterValidation = ({ - filterType, - filterMode, - absoluteDateFrom, - absoluteDateTo, - expressionFrom, - expressionTo, - fromExpressionValid, - toExpressionValid, -}: UseFilterValidationProps): UseFilterValidationReturn => { - // Resolved dates based on expressions - const resolvedDateFrom = useMemo(() => { - if (filterMode === "relative" && expressionFrom) { - const resolved = resolveDateExpression(expressionFrom); - console.log( - `[useFilterValidation] Resolved expressionFrom "${expressionFrom}" to:`, - resolved, - ); - return resolved; - } - return null; - }, [filterMode, expressionFrom]); - - const resolvedDateTo = useMemo(() => { - if (filterMode === "relative" && expressionTo) { - const resolved = resolveDateExpression(expressionTo); - console.log( - `[useFilterValidation] Resolved expressionTo "${expressionTo}" to:`, - resolved, - ); - return resolved; - } - return null; - }, [filterMode, expressionTo]); - - // Effective dates (either absolute or resolved from expressions) - const effectiveDateFrom = useMemo(() => { - return filterMode === "absolute" ? absoluteDateFrom : resolvedDateFrom; - }, [filterMode, absoluteDateFrom, resolvedDateFrom]); - - const effectiveDateTo = useMemo(() => { - return filterMode === "absolute" ? absoluteDateTo : resolvedDateTo; - }, [filterMode, absoluteDateTo, resolvedDateTo]); - - // Validate "to" expression with additional business logic - const validateToExpression = useCallback( - (expression: string) => { - const parseResult = parseDateExpression(expression); - if (!parseResult.isValid) { - return { - isValid: false, - error: "Invalid expression", - resolvedDate: null, - }; - } - - const resolvedDate = resolveDateExpression(expression); - - // Additional validation for range filters - if (filterType === "inRange" && expressionFrom && expression) { - const fromDate = resolveDateExpression(expressionFrom); - - if (fromDate && resolvedDate && resolvedDate <= fromDate) { - return { - isValid: false, - error: "End date must be after start date", - resolvedDate: null, - }; - } - } - - return { isValid: true, error: "", resolvedDate }; - }, - [filterType, expressionFrom], - ); - - // Overall filter validity - const isFilterValid = useMemo(() => { - if (filterMode === "absolute") { - // For absolute mode, we need at least one date - if (filterType === "inRange") { - // Allow open-ended ranges - at least one date must be present - return effectiveDateFrom !== null || effectiveDateTo !== null; - } - return effectiveDateFrom !== null; - } else { - // For relative mode, check expression validity - if (filterType === "inRange") { - // Allow open-ended ranges - at least one expression must be valid - const hasValidFrom = Boolean( - expressionFrom && fromExpressionValid && resolvedDateFrom !== null, - ); - const hasValidTo = Boolean( - expressionTo && toExpressionValid && resolvedDateTo !== null, - ); - return hasValidFrom || hasValidTo; - } - return Boolean( - expressionFrom && fromExpressionValid && resolvedDateFrom !== null, - ); - } - }, [ - filterMode, - filterType, - effectiveDateFrom, - effectiveDateTo, - expressionFrom, - expressionTo, - fromExpressionValid, - toExpressionValid, - resolvedDateFrom, - resolvedDateTo, - ]); - - return { - isFilterValid, - resolvedDateFrom, - resolvedDateTo, - effectiveDateFrom, - effectiveDateTo, - validateToExpression, - }; -}; diff --git a/src/components/DateFilter/hooks/useGridFilter.ts b/src/components/DateFilter/hooks/useGridFilter.ts index df65e44..13cf8d1 100644 --- a/src/components/DateFilter/hooks/useGridFilter.ts +++ b/src/components/DateFilter/hooks/useGridFilter.ts @@ -1,163 +1,40 @@ -import { useCallback, useImperativeHandle, useRef } from "react"; -import type { IDoesFilterPassParams, IFilterParams } from "ag-grid-community"; -import type { DateFilterModel } from "../../interfaces"; -import { parseRelativeDate } from "../utils"; - -/** - * Hook to integrate the date filter with AG Grid's filter API - */ -export const useGridFilter = (ref: React.Ref, params: IFilterParams) => { - const filterRef = useRef({}); - - // Check if a value passes the filter - const doesFilterPass = useCallback( - (params: IDoesFilterPassParams): boolean => { - const model = filterRef.current.model as DateFilterModel | null; - - console.log("[DateFilter] doesFilterPass called with model:", model); - - if (!model || !model.filterType) { - return true; // No filter applied - } - - const columnId = - (params as any).column?.getColId() || (params as any).colDef?.field; - const cellValue = params.data[columnId]; - - console.log( - "[DateFilter] Checking cell value:", - cellValue, - "for column:", - columnId, - ); - - if (!cellValue) { - return false; // No value fails all filters except when no filter is applied - } - - let cellDate: Date; - try { - cellDate = new Date(cellValue); - if (isNaN(cellDate.getTime())) { - return false; - } - } catch { - return false; - } - - // Parse dates from model - let dateFrom: Date | null = null; - let dateTo: Date | null = null; - - if (model.dateFrom) { - if ( - model.dateFrom.includes("-") || - model.dateFrom.toLowerCase().includes("today") - ) { - // Relative date - dateFrom = parseRelativeDate(model.dateFrom); - } else { - // Absolute date - dateFrom = new Date(model.dateFrom); - } - } - - if (model.dateTo) { - if ( - model.dateTo.includes("-") || - model.dateTo.toLowerCase().includes("today") - ) { - // Relative date - dateTo = parseRelativeDate(model.dateTo); - } else { - // Absolute date - dateTo = new Date(model.dateTo); - } - } - - // Apply filter logic based on type - switch (model.filterType) { - case "equals": - if (!dateFrom) return false; - return cellDate.toDateString() === dateFrom.toDateString(); - - case "notEqual": - if (!dateFrom) return false; - return cellDate.toDateString() !== dateFrom.toDateString(); - - case "before": - if (!dateFrom) return false; - return cellDate < dateFrom; - - case "after": - if (!dateFrom) return false; - return cellDate > dateFrom; - - case "inRange": - // Handle open-ended ranges - if (dateFrom && dateTo) { - return cellDate >= dateFrom && cellDate <= dateTo; - } else if (dateFrom) { - return cellDate >= dateFrom; - } else if (dateTo) { - return cellDate <= dateTo; - } - return false; - - default: - return true; - } - }, - [], - ); - - // Get the current filter model - const getModel = useCallback((): DateFilterModel | null => { - return filterRef.current.model || null; - }, []); - - // Set the filter model - const setModel = useCallback( - (model: DateFilterModel | null): void => { - console.log("[DateFilter] setModel called with:", model); - filterRef.current.model = model; - - // Notify parent component if callback provided - if (params.filterChangedCallback) { - params.filterChangedCallback(); - } - }, - [params], - ); - - // Is the filter active? - const isFilterActive = useCallback((): boolean => { - return filterRef.current.model !== null; - }, []); - - // Expose filter API to AG Grid - useImperativeHandle(ref, () => { - console.log("[DateFilter] Creating imperative handle"); - const filterApi = { - ...filterRef.current, - doesFilterPass, - getModel, - setModel, - isFilterActive, - // AG Grid v33 compatibility - __AG_GRID_COMPONENT: true, +import { useState, useCallback, useEffect } from "react"; +import { IFilterParams } from "ag-grid-community"; +import { DateFilterModel } from "../../interfaces"; + +export function useGridFilter(filterParams: IFilterParams) { + const [model, setModel] = useState(null); + + const applyFilter = useCallback(() => { + if (filterParams.filterChangedCallback) { + filterParams.filterChangedCallback(); + } + }, [filterParams]); + + const resetFilter = useCallback(() => { + setModel(null); + applyFilter(); + }, [applyFilter]); + + const isFilterActive = useCallback(() => { + return model !== null && model.dateFrom !== null; + }, [model]); + + // Notify AG Grid when model changes + useEffect(() => { + const params = filterParams as { + onModelChange?: (model: DateFilterModel | null) => void; }; - - // Store the API on the ref so the workaround can access it - filterRef.current = filterApi; - - return filterApi; - }, [doesFilterPass, getModel, setModel, isFilterActive]); + if (params.onModelChange) { + params.onModelChange(model); + } + }, [model, filterParams]); return { - doesFilterPass, - getModel, + model, setModel, + applyFilter, + resetFilter, isFilterActive, }; -}; +} diff --git a/src/components/DateFilter/index.tsx b/src/components/DateFilter/index.tsx index 3955973..6f936b0 100644 --- a/src/components/DateFilter/index.tsx +++ b/src/components/DateFilter/index.tsx @@ -1,5 +1,5 @@ -import React, { forwardRef, useCallback } from "react"; -import { IFilterParams } from "ag-grid-community"; +import React, { forwardRef, useImperativeHandle } from "react"; +import { IDoesFilterPassParams, IFilterParams } from "ag-grid-community"; import { DateFilterProvider } from "./context"; import { DateFilterModel } from "../interfaces"; import * as Components from "./components"; @@ -9,8 +9,6 @@ export interface DateFilterProps extends IFilterParams { children?: React.ReactNode; dateParser?: (value: string) => Date | null; className?: string; - model?: DateFilterModel | null; - onModelChange?: (model: DateFilterModel | null) => void; } export interface DateFilterCompound { @@ -32,42 +30,84 @@ export interface DateFilterCompound { } const DateFilterComponent = forwardRef((props, ref) => { - const { children, model, onModelChange, ...filterParams } = props; + const { children, ...filterParams } = props; - // Use the AG Grid filter hook only if not controlled by external model - const { getModel, setModel } = useGridFilter(ref, filterParams); + // Use the AG Grid filter hook + const { model, setModel, applyFilter, resetFilter, isFilterActive } = + useGridFilter(filterParams); - // Use external model if provided, otherwise use internal state - const currentModel = model !== undefined ? model : getModel(); + // Implement AG Grid filter interface + useImperativeHandle( + ref, + () => ({ + isFilterActive: () => isFilterActive(), - // Create wrapper functions for the provider - const handleSetModel = useCallback( - (newModel: DateFilterModel | null) => { - if (onModelChange) { - onModelChange(newModel); - } else { + doesFilterPass: (params: IDoesFilterPassParams) => { + if (!isFilterActive()) return true; + + const value = filterParams.getValue(params.node); + if (value == null) return false; + + const date = value instanceof Date ? value : new Date(value); + if (isNaN(date.getTime())) return false; + + const filterModel = model as DateFilterModel; + + switch (filterModel.filterType) { + case "equals": + return filterModel.dateFrom + ? date.toDateString() === + new Date(filterModel.dateFrom).toDateString() + : false; + case "notEqual": + return filterModel.dateFrom + ? date.toDateString() !== + new Date(filterModel.dateFrom).toDateString() + : true; + case "before": + return filterModel.dateFrom + ? date < new Date(filterModel.dateFrom) + : false; + case "after": + return filterModel.dateFrom + ? date > new Date(filterModel.dateFrom) + : false; + case "inRange": + if (!filterModel.dateFrom || !filterModel.dateTo) return false; + return ( + date >= new Date(filterModel.dateFrom) && + date <= new Date(filterModel.dateTo) + ); + default: + return true; + } + }, + + getModel: () => model, + + setModel: (newModel: DateFilterModel | null) => { setModel(newModel); - } - }, - [setModel, onModelChange], - ); + }, - const applyFilter = useCallback(() => { - // The context will call handleSetModel which updates the grid filter - // AG Grid will be notified through the setModel callback - }, []); + getModelAsString: () => { + if (!model) return ""; + const filterModel = model as DateFilterModel; + return filterModel.filterType || ""; + }, - const resetFilter = useCallback(() => { - // The context will call handleSetModel(null) which updates the grid filter - // AG Grid will be notified through the setModel callback - }, []); + destroy: () => { + // Cleanup if needed + }, + }), + [model, setModel, isFilterActive, filterParams], + ); if (!children) { // Default structure for backward compatibility return ( ((props, ref) => { return ( > Basic Functionality >> should display filter type selector +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:26:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:29:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,999,275 +- img +- paragraph: Average Progress +- paragraph: 45.7% +- img +- paragraph: Budget Remaining +- paragraph: $22,309,635 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-3786] Reduce API call frequency In Progress High โšก Performance Emily Jackson Emily Jackson 9/7/2025 52% $1,000 $520": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-3786] Reduce API call frequency" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/7/2025" + - gridcell "52%" + - gridcell "$1,000" + - gridcell "$520" + - row "Press Space to toggle row selection (unchecked) [WEB-2827] Build real-time notifications system (Sprint 24) Backlog High โœจ Feature Ryan Thomas Ryan Thomas 9/9/2025 0% $1,800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-2827] Build real-time notifications system (Sprint 24)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$1,800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-5687] Create load testing scenarios Backlog High ๐Ÿงช Testing John Robinson John Robinson 9/9/2025 0% $10,800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-5687] Create load testing scenarios" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$10,800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-5761] Add audit logging Backlog High ๐Ÿ”’ Security Marcus Williams Marcus Williams 9/5/2025 0% $525": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-5761] Add audit logging" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$525" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-7292] Set up penetration testing (Sprint 23) Backlog Critical ๐Ÿ”’ Security Emily Jackson Emily Jackson 9/2/2025 0% $625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7292] Set up penetration testing (Sprint 23)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$625" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-7351] Add encryption at rest (Tech Debt) Todo High ๐Ÿ”’ Security Amanda White Amanda White 9/3/2025 12% $475 $57": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-7351] Add encryption at rest (Tech Debt)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/3/2025" + - gridcell "12%" + - gridcell "$475" + - gridcell "$57" + - row "Press Space to toggle row selection (unchecked) [API-8513] Configure health checks (Sprint 25) In Progress Critical ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/2/2025 22% $8,950 $1,969": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-8513] Configure health checks (Sprint 25)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/2/2025" + - gridcell "22%" + - gridcell "$8,950" + - gridcell "$1,969" + - row "Press Space to toggle row selection (unchecked) [ADMIN-5868] Configure CDN distribution (Sprint 24) Todo High ๐Ÿ”ง DevOps Priya Sharma Priya Sharma 9/9/2025 12% $1,525 $183": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-5868] Configure CDN distribution (Sprint 24)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/9/2025" + - gridcell "12%" + - gridcell "$1,525" + - gridcell "$183" + - row "Press Space to toggle row selection (unchecked) [WEB-1922] Implement rate limiting Backlog Medium ๐Ÿ”’ Security Olivia Brown Olivia Brown 9/5/2025 0% $175": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1922] Implement rate limiting" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$175" + - gridcell + - row "Press Space to toggle row selection (unchecked) [APP-3601] Implement virtual scrolling (Sprint 24) Backlog Critical โšก Performance Emma Davis Emma Davis 9/1/2025 0% $2,325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-3601] Implement virtual scrolling (Sprint 24)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$2,325" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-8040] Add audit logging (Performance Sprint) Todo Critical ๐Ÿ”’ Security Isabella Garcia Isabella Garcia 8/31/2025 11% $2,200 $242": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8040] Add audit logging (Performance Sprint)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/31/2025" + - gridcell "11%" + - gridcell "$2,200" + - gridcell "$242" + - row "Press Space to toggle row selection (unchecked) [DASH-8526] Add progressive web app features (Security Audit) Testing High โšก Performance Maya Patel Maya Patel 9/7/2025 87% $775 $674": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-8526] Add progressive web app features (Security Audit)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/7/2025" + - gridcell "87%" + - gridcell "$775" + - gridcell "$674" + - row "Press Space to toggle row selection (unchecked) [CORE-3302] Configure load balancer Todo Low ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/26/2025 13% $1,825 $237": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3302] Configure load balancer" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/26/2025" + - gridcell "13%" + - gridcell "$1,825" + - gridcell "$237" + - row "Press Space to toggle row selection (unchecked) [INFRA-4958] Test mobile responsiveness (Q1 Goals) In Review High ๐Ÿงช Testing Daniel Kim Daniel Kim 9/3/2025 60% $5,275 $3,165": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4958] Test mobile responsiveness (Q1 Goals)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/3/2025" + - gridcell "60%" + - gridcell "$5,275" + - gridcell "$3,165" + - row "Press Space to toggle row selection (unchecked) [WEB-5178] Create backup automation (Security Audit) Todo Low ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/26/2025 15% $475 $71": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5178] Create backup automation (Security Audit)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/26/2025" + - gridcell "15%" + - gridcell "$475" + - gridcell "$71" + - row "Press Space to toggle row selection (unchecked) [WEB-5276] Create troubleshooting guide (Sprint 26) In Progress Critical ๐Ÿ“ Documentation Isabella Garcia Isabella Garcia 8/31/2025 49% $650 $319": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5276] Create troubleshooting guide (Sprint 26)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/31/2025" + - gridcell "49%" + - gridcell "$650" + - gridcell "$319" + - row "Press Space to toggle row selection (unchecked) [API-7166] Set up SSL certificates (Sprint 24) Backlog Medium ๐Ÿ”’ Security Alex Chen Alex Chen 9/6/2025 0% $14,800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7166] Set up SSL certificates (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$14,800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-8065] Optimize image loading (Sprint 25) In Review Medium โšก Performance Emma Davis Emma Davis 9/7/2025 60% $3,900 $2,340": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-8065] Optimize image loading (Sprint 25)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/7/2025" + - gridcell "60%" + - gridcell "$3,900" + - gridcell "$2,340" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,999,275 $18,689,640": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,999,275" + - gridcell "$18,689,640" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 29 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-09423-isplay-filter-type-selector-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-09423-isplay-filter-type-selector-chromium/test-failed-1.png new file mode 100644 index 0000000..8a1ddfa Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-09423-isplay-filter-type-selector-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-19abd-ate-picker-in-absolute-mode-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-19abd-ate-picker-in-absolute-mode-chromium/error-context.md new file mode 100644 index 0000000..91e9673 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-19abd-ate-picker-in-absolute-mode-chromium/error-context.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Absolute Date Mode >> should show date picker in absolute mode +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:124:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:116:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,490,500 +- img +- paragraph: Average Progress +- paragraph: 45.8% +- img +- paragraph: Budget Remaining +- paragraph: $22,563,242 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-2359] Configure load balancer (Security Audit) Backlog Critical ๐Ÿ”ง DevOps James Wilson James Wilson 9/2/2025 0% $4,550": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-2359] Configure load balancer (Security Audit)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$4,550" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-10585] Create deployment rollback (Performance Sprint) Todo Critical ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/2/2025 5% $950 $48": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-10585] Create deployment rollback (Performance Sprint)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/2/2025" + - gridcell "5%" + - gridcell "$950" + - gridcell "$48" + - row "Press Space to toggle row selection (unchecked) [UI-1458] Document component props Todo Low ๐Ÿ“ Documentation Amanda White Amanda White 9/18/2025 6% $6,800 $408": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-1458] Document component props" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/18/2025" + - gridcell "6%" + - gridcell "$6,800" + - gridcell "$408" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3828] Set up infrastructure as code (Performance Sprint) Testing High ๐Ÿ”ง DevOps Isabella Garcia Isabella Garcia 9/4/2025 84% $375 $315": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3828] Set up infrastructure as code (Performance Sprint)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/4/2025" + - gridcell "84%" + - gridcell "$375" + - gridcell "$315" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-4200] Build real-time notifications system In Review Medium โœจ Feature Ryan Thomas Ryan Thomas 9/15/2025 71% $150 $107": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-4200] Build real-time notifications system" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/15/2025" + - gridcell "71%" + - gridcell "$150" + - gridcell "$107" + - row "Press Space to toggle row selection (unchecked) [BACKEND-8895] Create architecture overview (Q2 Planning) In Progress Low ๐Ÿ“ Documentation Emily Jackson Emily Jackson 9/15/2025 28% $200 $56": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8895] Create architecture overview (Q2 Planning)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/15/2025" + - gridcell "28%" + - gridcell "$200" + - gridcell "$56" + - row "Press Space to toggle row selection (unchecked) [INFRA-10980] Create video tutorials (Q1 Goals) In Review High ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/5/2025 77% $14,825 $11,415": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-10980] Create video tutorials (Q1 Goals)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/5/2025" + - gridcell "77%" + - gridcell "$14,825" + - gridcell "$11,415" + - row "Press Space to toggle row selection (unchecked) [BACKEND-2119] Split monolithic components In Progress Critical โ™ป๏ธ Refactor John Robinson John Robinson 9/1/2025 52% $8,275 $4,303": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-2119] Split monolithic components" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/1/2025" + - gridcell "52%" + - gridcell "$8,275" + - gridcell "$4,303" + - row "Press Space to toggle row selection (unchecked) [API-3238] Consolidate duplicate code Todo Low โ™ป๏ธ Refactor Chris Martinez Chris Martinez 9/29/2025 17% $500 $85": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-3238] Consolidate duplicate code" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/29/2025" + - gridcell "17%" + - gridcell "$500" + - gridcell "$85" + - row "Press Space to toggle row selection (unchecked) [PROJ-4071] Refactor error handling (Sprint 25) Backlog High โ™ป๏ธ Refactor John Robinson John Robinson 9/6/2025 0% $3,100": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-4071] Refactor error handling (Sprint 25)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$3,100" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-9084] Create video tutorials (Q2 Planning) Todo Critical ๐Ÿ“ Documentation Daniel Kim Daniel Kim 9/2/2025 16% $3,025 $484": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-9084] Create video tutorials (Q2 Planning)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/2/2025" + - gridcell "16%" + - gridcell "$3,025" + - gridcell "$484" + - row "Press Space to toggle row selection (unchecked) [ADMIN-9172] Set up infrastructure as code (Sprint 26) In Progress Critical ๐Ÿ”ง DevOps Daniel Kim Daniel Kim 9/1/2025 24% $925 $222": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-9172] Set up infrastructure as code (Sprint 26)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/1/2025" + - gridcell "24%" + - gridcell "$925" + - gridcell "$222" + - row "Press Space to toggle row selection (unchecked) [DATA-9535] Write component snapshot tests (Sprint 25) Todo Medium ๐Ÿงช Testing Maya Patel Maya Patel 9/12/2025 11% $3,525 $388": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-9535] Write component snapshot tests (Sprint 25)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/12/2025" + - gridcell "11%" + - gridcell "$3,525" + - gridcell "$388" + - row "Press Space to toggle row selection (unchecked) [BACKEND-9772] Fix infinite scroll pagination bug (Security Audit) In Review Low ๐Ÿ› Bug Jessica Lopez Jessica Lopez 9/15/2025 70% $3,800 $2,660": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-9772] Fix infinite scroll pagination bug (Security Audit)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/15/2025" + - gridcell "70%" + - gridcell "$3,800" + - gridcell "$2,660" + - row "Press Space to toggle row selection (unchecked) [DATA-10060] Document security protocols (Security Audit) Todo High ๐Ÿ“ Documentation Emily Jackson Emily Jackson 9/7/2025 6% $650 $39": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-10060] Document security protocols (Security Audit)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/7/2025" + - gridcell "6%" + - gridcell "$650" + - gridcell "$39" + - row "Press Space to toggle row selection (unchecked) [INFRA-1047] Build analytics dashboard Backlog Low โœจ Feature David Lee David Lee 10/8/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-1047] Build analytics dashboard" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "10/8/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-3920] Write unit tests for auth module Testing High ๐Ÿงช Testing Sarah Johnson Sarah Johnson 9/3/2025 92% $825 $759": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-3920] Write unit tests for auth module" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/3/2025" + - gridcell "92%" + - gridcell "$825" + - gridcell "$759" + - row "Press Space to toggle row selection (unchecked) [ADMIN-4281] Set up log aggregation (Sprint 27) In Progress Low ๐Ÿ”ง DevOps Isabella Garcia Isabella Garcia 9/29/2025 46% $2,050 $943": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-4281] Set up log aggregation (Sprint 27)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/29/2025" + - gridcell "46%" + - gridcell "$2,050" + - gridcell "$943" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,490,500 $18,927,258": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,490,500" + - gridcell "$18,927,258" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 116 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-19abd-ate-picker-in-absolute-mode-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-19abd-ate-picker-in-absolute-mode-chromium/test-failed-1.png new file mode 100644 index 0000000..99af214 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-19abd-ate-picker-in-absolute-mode-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-30891-odel-when-filter-is-applied-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-30891-odel-when-filter-is-applied-chromium/error-context.md new file mode 100644 index 0000000..9638784 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-30891-odel-when-filter-is-applied-chromium/error-context.md @@ -0,0 +1,535 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Integration with Grid >> should update filter model when filter is applied +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:217:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:220:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,940,450 +- img +- paragraph: Average Progress +- paragraph: 46.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,055,007 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-1745] Write unit tests for auth module (Sprint 26) Testing Medium ๐Ÿงช Testing John Robinson John Robinson 9/15/2025 84% $3,475 $2,919": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1745] Write unit tests for auth module (Sprint 26)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/15/2025" + - gridcell "84%" + - gridcell "$3,475" + - gridcell "$2,919" + - row "Press Space to toggle row selection (unchecked) [ADMIN-6305] Debug performance regression in search (Q2 Planning) Todo High ๐Ÿ› Bug James Wilson James Wilson 9/5/2025 7% $625 $44": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-6305] Debug performance regression in search (Q2 Planning)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/5/2025" + - gridcell "7%" + - gridcell "$625" + - gridcell "$44" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-8056] Test cross-browser compatibility (Sprint 27) In Progress Medium ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/13/2025 29% $9,675 $2,806": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-8056] Test cross-browser compatibility (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/13/2025" + - gridcell "29%" + - gridcell "$9,675" + - gridcell "$2,806" + - row "Press Space to toggle row selection (unchecked) [CORE-3043] Update README with examples (Performance Sprint) In Progress High ๐Ÿ“ Documentation John Robinson John Robinson 9/5/2025 36% $1,925 $693": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3043] Update README with examples (Performance Sprint)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/5/2025" + - gridcell "36%" + - gridcell "$1,925" + - gridcell "$693" + - row "Press Space to toggle row selection (unchecked) [APP-4852] Implement two-factor authentication (Sprint 26) Backlog High โœจ Feature Maya Patel Maya Patel 9/4/2025 0% $8,325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-4852] Implement two-factor authentication (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/4/2025" + - gridcell "0%" + - gridcell "$8,325" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-5743] Write performance optimization tips (Sprint 24) Backlog Medium ๐Ÿ“ Documentation Michael Anderson Michael Anderson 9/9/2025 0% $3,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-5743] Write performance optimization tips (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$3,450" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-7960] Set up monitoring alerts (Sprint 27) Testing Medium ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 9/12/2025 92% $4,625 $4,255": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-7960] Set up monitoring alerts (Sprint 27)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/12/2025" + - gridcell "92%" + - gridcell "$4,625" + - gridcell "$4,255" + - row "Press Space to toggle row selection (unchecked) [INFRA-7997] Optimize render performance In Progress High โšก Performance Jessica Lopez Jessica Lopez 9/6/2025 35% $300 $105": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7997] Optimize render performance" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/6/2025" + - gridcell "35%" + - gridcell "$300" + - gridcell "$105" + - row "Press Space to toggle row selection (unchecked) [WEB-9279] Handle null pointer exception in API client (Tech Debt) In Review Medium ๐Ÿ› Bug Kevin Zhang Kevin Zhang 9/7/2025 73% $750 $548": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-9279] Handle null pointer exception in API client (Tech Debt)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/7/2025" + - gridcell "73%" + - gridcell "$750" + - gridcell "$548" + - row "Press Space to toggle row selection (unchecked) [DATA-9507] Set up penetration testing (Sprint 25) Backlog Medium ๐Ÿ”’ Security Sophia Taylor Sophia Taylor 9/8/2025 0% $8,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-9507] Set up penetration testing (Sprint 25)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$8,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-10347] Create onboarding tutorial In Review High ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/3/2025 66% $800 $528": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-10347] Create onboarding tutorial" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/3/2025" + - gridcell "66%" + - gridcell "$800" + - gridcell "$528" + - row "Press Space to toggle row selection (unchecked) [CORE-10415] Update README with examples (Performance Sprint) Backlog High ๐Ÿ“ Documentation Kevin Zhang Kevin Zhang 9/5/2025 0% $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-10415] Update README with examples (Performance Sprint)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$350" + - gridcell + - row "Press Space to toggle row selection (unchecked) [WEB-7571] Optimize render performance (Performance Sprint) In Progress Low โšก Performance Jessica Lopez Jessica Lopez 9/27/2025 59% $17,525 $10,340": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-7571] Optimize render performance (Performance Sprint)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/27/2025" + - gridcell "59%" + - gridcell "$17,525" + - gridcell "$10,340" + - row "Press Space to toggle row selection (unchecked) [DATA-7842] Fix broken deep links in navigation (Security Audit) Todo Medium ๐Ÿ› Bug Amanda White Amanda White 9/2/2025 17% $14,850 $2,525": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-7842] Fix broken deep links in navigation (Security Audit)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/2/2025" + - gridcell "17%" + - gridcell "$14,850" + - gridcell "$2,525" + - row "Press Space to toggle row selection (unchecked) [INFRA-9290] Test offline functionality Todo Low ๐Ÿงช Testing Priya Sharma Priya Sharma 10/3/2025 16% $18,600 $2,976": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-9290] Test offline functionality" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿงช Testing" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "10/3/2025" + - gridcell "16%" + - gridcell "$18,600" + - gridcell "$2,976" + - row "Press Space to toggle row selection (unchecked) [DASH-1315] Configure CDN distribution Testing Critical ๐Ÿ”ง DevOps Alex Chen Alex Chen 9/1/2025 83% $8,500 $7,055": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-1315] Configure CDN distribution" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/1/2025" + - gridcell "83%" + - gridcell "$8,500" + - gridcell "$7,055" + - row "Press Space to toggle row selection (unchecked) [UI-3567] Test offline functionality (Sprint 25) In Progress Critical ๐Ÿงช Testing Daniel Kim Daniel Kim 9/1/2025 30% $3,950 $1,185": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3567] Test offline functionality (Sprint 25)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/1/2025" + - gridcell "30%" + - gridcell "$3,950" + - gridcell "$1,185" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3951] Document component props Backlog Low ๐Ÿ“ Documentation Priya Sharma Priya Sharma 9/27/2025 0% $4,350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3951] Document component props" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/27/2025" + - gridcell "0%" + - gridcell "$4,350" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,940,450 $18,885,443": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,940,450" + - gridcell "$18,885,443" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 220 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 265 | await dateHeader.click(); + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 286 | await dateHeader.click(); + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-30891-odel-when-filter-is-applied-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-30891-odel-when-filter-is-applied-chromium/test-failed-1.png new file mode 100644 index 0000000..075feb8 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-30891-odel-when-filter-is-applied-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-34160-uld-have-proper-ARIA-labels-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-34160-uld-have-proper-ARIA-labels-chromium/error-context.md new file mode 100644 index 0000000..047a80a --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-34160-uld-have-proper-ARIA-labels-chromium/error-context.md @@ -0,0 +1,469 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Accessibility >> should have proper ARIA labels +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:284:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:286:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,967,825 +- img +- paragraph: Average Progress +- paragraph: 46.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,114,956 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [UI-3315] Build real-time notifications system Testing Medium โœจ Feature David Lee David Lee 9/19/2025 94% $825 $776": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3315] Build real-time notifications system" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/19/2025" + - gridcell "94%" + - gridcell "$825" + - gridcell "$776" + - row "Press Space to toggle row selection (unchecked) [APP-2260] Modernize legacy jQuery code (Sprint 26) Backlog High โ™ป๏ธ Refactor Chris Martinez Chris Martinez 9/8/2025 0% $12,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-2260] Modernize legacy jQuery code (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$12,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-8808] Configure load balancer In Progress Medium ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/18/2025 29% $3,800 $1,102": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-8808] Configure load balancer" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/18/2025" + - gridcell "29%" + - gridcell "$3,800" + - gridcell "$1,102" + - row "Press Space to toggle row selection (unchecked) [AUTH-10120] Build custom report generator (Sprint 26) In Progress Low โœจ Feature Alex Chen Alex Chen 9/18/2025 49% $6,150 $3,014": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-10120] Build custom report generator (Sprint 26)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/18/2025" + - gridcell "49%" + - gridcell "$6,150" + - gridcell "$3,014" + - row "Press Space to toggle row selection (unchecked) [CORE-1851] Add CDN for static assets (Q2 Planning) In Progress Critical โšก Performance Jessica Lopez Jessica Lopez 9/2/2025 46% $4,000 $1,840": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-1851] Add CDN for static assets (Q2 Planning)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "46%" + - gridcell "$4,000" + - gridcell "$1,840" + - row "Press Space to toggle row selection (unchecked) [AUTH-5606] Test mobile responsiveness In Review Critical ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/2/2025 79% $13,525 $10,685": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-5606] Test mobile responsiveness" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/2/2025" + - gridcell "79%" + - gridcell "$13,525" + - gridcell "$10,685" + - row "Press Space to toggle row selection (unchecked) [DATA-6061] Create integration test suite (Sprint 25) In Review High ๐Ÿงช Testing Sarah Johnson Sarah Johnson 9/7/2025 72% $9,750 $7,020": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6061] Create integration test suite (Sprint 25)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/7/2025" + - gridcell "72%" + - gridcell "$9,750" + - gridcell "$7,020" + - row "Press Space to toggle row selection (unchecked) [API-7531] Implement secure file upload (Sprint 23) Testing Medium ๐Ÿ”’ Security Isabella Garcia Isabella Garcia 9/9/2025 85% $4,125 $3,506": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7531] Implement secure file upload (Sprint 23)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”’ Security" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/9/2025" + - gridcell "85%" + - gridcell "$4,125" + - gridcell "$3,506" + - row "Press Space to toggle row selection (unchecked) [API-8009] Create troubleshooting guide (Sprint 23) Testing Low ๐Ÿ“ Documentation James Wilson James Wilson 9/29/2025 87% $550 $479": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-8009] Create troubleshooting guide (Sprint 23)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/29/2025" + - gridcell "87%" + - gridcell "$550" + - gridcell "$479" + - row "Press Space to toggle row selection (unchecked) [USER-10761] Set up monitoring alerts (Security Audit) Backlog Critical ๐Ÿ”ง DevOps Sarah Johnson Sarah Johnson 9/3/2025 0% $7,900": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-10761] Set up monitoring alerts (Security Audit)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$7,900" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-4557] Add request batching (Performance Sprint) Testing Medium โšก Performance Daniel Kim Daniel Kim 9/14/2025 94% $825 $776": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-4557] Add request batching (Performance Sprint)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/14/2025" + - gridcell "94%" + - gridcell "$825" + - gridcell "$776" + - row "Press Space to toggle row selection (unchecked) [DATA-6483] Create backup automation In Review Critical ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 8/31/2025 77% $3,025 $2,329": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6483] Create backup automation" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "8/31/2025" + - gridcell "77%" + - gridcell "$3,025" + - gridcell "$2,329" + - row "Press Space to toggle row selection (unchecked) [MOBILE-6649] Create data visualization charts Todo Critical โœจ Feature Daniel Kim Daniel Kim 9/2/2025 12% $6,825 $819": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-6649] Create data visualization charts" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/2/2025" + - gridcell "12%" + - gridcell "$6,825" + - gridcell "$819" + - row "Press Space to toggle row selection (unchecked) [UI-7483] Create video tutorials (Q1 Goals) In Progress Medium ๐Ÿ“ Documentation Maya Patel Maya Patel 9/7/2025 31% $925 $287": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-7483] Create video tutorials (Q1 Goals)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/7/2025" + - gridcell "31%" + - gridcell "$925" + - gridcell "$287" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1178] Extract business logic layer (Security Audit) Backlog High โ™ป๏ธ Refactor Jessica Lopez Jessica Lopez 9/2/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1178] Extract business logic layer (Security Audit)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-6440] Add database indexing (Q2 Planning) Todo High โšก Performance Daniel Kim Daniel Kim 9/7/2025 16% $4,150 $664": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6440] Add database indexing (Q2 Planning)" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/7/2025" + - gridcell "16%" + - gridcell "$4,150" + - gridcell "$664" + - row "Press Space to toggle row selection (unchecked) [USER-6714] Implement service workers In Progress Critical โšก Performance David Lee David Lee 8/30/2025 58% $2,100 $1,218": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-6714] Implement service workers" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "8/30/2025" + - gridcell "58%" + - gridcell "$2,100" + - gridcell "$1,218" + - row "Press Space to toggle row selection (unchecked) [INFRA-7899] Implement session management In Progress Critical ๐Ÿ”’ Security Priya Sharma Priya Sharma 8/30/2025 52% $950 $494": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7899] Implement session management" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/30/2025" + - gridcell "52%" + - gridcell "$950" + - gridcell "$494" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,967,825 $18,852,869": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,967,825" + - gridcell "$18,852,869" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 265 | await dateHeader.click(); + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 286 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-34160-uld-have-proper-ARIA-labels-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-34160-uld-have-proper-ARIA-labels-chromium/test-failed-1.png new file mode 100644 index 0000000..86f32ab Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-34160-uld-have-proper-ARIA-labels-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-438cd--filter-with-after-operator-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-438cd--filter-with-after-operator-chromium/error-context.md new file mode 100644 index 0000000..d65c0f5 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-438cd--filter-with-after-operator-chromium/error-context.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Filter Operators >> should filter with 'after' operator +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:175:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:154:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,307,925 +- img +- paragraph: Average Progress +- paragraph: 46.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,404,326 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [UI-2927] Optimize image loading (Sprint 27) Todo Low โšก Performance Kevin Zhang Kevin Zhang 10/2/2025 18% $4,975 $896": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-2927] Optimize image loading (Sprint 27)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "10/2/2025" + - gridcell "18%" + - gridcell "$4,975" + - gridcell "$896" + - row "Press Space to toggle row selection (unchecked) [UI-4550] Split monolithic components (Sprint 27) Todo Critical โ™ป๏ธ Refactor James Wilson James Wilson 9/4/2025 12% $6,900 $828": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4550] Split monolithic components (Sprint 27)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/4/2025" + - gridcell "12%" + - gridcell "$6,900" + - gridcell "$828" + - row "Press Space to toggle row selection (unchecked) [USER-5097] Implement blue-green deployment In Progress Medium ๐Ÿ”ง DevOps Jessica Lopez Jessica Lopez 9/19/2025 27% $1,825 $493": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-5097] Implement blue-green deployment" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/19/2025" + - gridcell "27%" + - gridcell "$1,825" + - gridcell "$493" + - row "Press Space to toggle row selection (unchecked) [AUTH-4205] Create user profile dashboard Todo High โœจ Feature Chris Martinez Chris Martinez 9/5/2025 7% $725 $51": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-4205] Create user profile dashboard" + - gridcell "Todo" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/5/2025" + - gridcell "7%" + - gridcell "$725" + - gridcell "$51" + - row "Press Space to toggle row selection (unchecked) [CORE-2210] Add drag-and-drop file upload (Tech Debt) Testing Critical โœจ Feature Emma Davis Emma Davis 9/2/2025 84% $725 $609": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-2210] Add drag-and-drop file upload (Tech Debt)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/2/2025" + - gridcell "84%" + - gridcell "$725" + - gridcell "$609" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-3005] Debug crash on mobile Safari (Tech Debt) In Progress Critical ๐Ÿ› Bug James Wilson James Wilson 8/31/2025 58% $4,350 $2,523": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-3005] Debug crash on mobile Safari (Tech Debt)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "8/31/2025" + - gridcell "58%" + - gridcell "$4,350" + - gridcell "$2,523" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3460] Add drag-and-drop file upload (Sprint 26) Backlog Medium โœจ Feature Chris Martinez Chris Martinez 9/15/2025 0% $600": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3460] Add drag-and-drop file upload (Sprint 26)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/15/2025" + - gridcell "0%" + - gridcell "$600" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-6053] Handle null pointer exception in API client (Sprint 27) In Progress Medium ๐Ÿ› Bug David Lee David Lee 9/4/2025 49% $9,125 $4,471": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-6053] Handle null pointer exception in API client (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/4/2025" + - gridcell "49%" + - gridcell "$9,125" + - gridcell "$4,471" + - row "Press Space to toggle row selection (unchecked) [UI-6545] Fix login form validation error (Sprint 27) Todo Medium ๐Ÿ› Bug Michael Anderson Michael Anderson 9/4/2025 17% $5,925 $1,007": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-6545] Fix login form validation error (Sprint 27)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/4/2025" + - gridcell "17%" + - gridcell "$5,925" + - gridcell "$1,007" + - row "Press Space to toggle row selection (unchecked) [ADMIN-10067] Implement code splitting (Sprint 26) Backlog Medium โšก Performance James Wilson James Wilson 9/18/2025 0% $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-10067] Implement code splitting (Sprint 26)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/18/2025" + - gridcell "0%" + - gridcell "$350" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-5412] Create data visualization charts (Tech Debt) In Review Critical โœจ Feature Emily Jackson Emily Jackson 8/31/2025 71% $6,825 $4,846": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-5412] Create data visualization charts (Tech Debt)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "8/31/2025" + - gridcell "71%" + - gridcell "$6,825" + - gridcell "$4,846" + - row "Press Space to toggle row selection (unchecked) [BACKEND-5482] Build custom report generator (Tech Debt) Testing Critical โœจ Feature Michael Anderson Michael Anderson 9/1/2025 87% $3,200 $2,784": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-5482] Build custom report generator (Tech Debt)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/1/2025" + - gridcell "87%" + - gridcell "$3,200" + - gridcell "$2,784" + - row "Press Space to toggle row selection (unchecked) [CORE-5486] Test error boundary behavior Todo Critical ๐Ÿงช Testing Alex Chen Alex Chen 9/1/2025 13% $3,950 $514": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-5486] Test error boundary behavior" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/1/2025" + - gridcell "13%" + - gridcell "$3,950" + - gridcell "$514" + - row "Press Space to toggle row selection (unchecked) [WEB-5505] Add multi-language support (Security Audit) In Review Medium โœจ Feature John Robinson John Robinson 9/11/2025 75% $16,300 $12,225": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5505] Add multi-language support (Security Audit)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/11/2025" + - gridcell "75%" + - gridcell "$16,300" + - gridcell "$12,225" + - row "Press Space to toggle row selection (unchecked) [ADMIN-6448] Configure load balancer (Q1 Goals) Testing Medium ๐Ÿ”ง DevOps Michael Anderson Michael Anderson 9/13/2025 85% $9,850 $8,373": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-6448] Configure load balancer (Q1 Goals)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/13/2025" + - gridcell "85%" + - gridcell "$9,850" + - gridcell "$8,373" + - row "Press Space to toggle row selection (unchecked) [INFRA-7129] Add drag-and-drop file upload (Tech Debt) In Review High โœจ Feature Kevin Zhang Kevin Zhang 9/1/2025 60% $550 $330": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7129] Add drag-and-drop file upload (Tech Debt)" + - gridcell "In Review" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/1/2025" + - gridcell "60%" + - gridcell "$550" + - gridcell "$330" + - row "Press Space to toggle row selection (unchecked) [WEB-7967] Clean up deprecated APIs (Sprint 26) In Progress High โ™ป๏ธ Refactor Ryan Thomas Ryan Thomas 9/3/2025 47% $975 $458": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-7967] Clean up deprecated APIs (Sprint 26)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/3/2025" + - gridcell "47%" + - gridcell "$975" + - gridcell "$458" + - row "Press Space to toggle row selection (unchecked) [APP-8113] Set up vulnerability scanning Testing Critical ๐Ÿ”’ Security Emma Davis Emma Davis 8/30/2025 92% $1,500 $1,380": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-8113] Set up vulnerability scanning" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "8/30/2025" + - gridcell "92%" + - gridcell "$1,500" + - gridcell "$1,380" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,307,925 $18,903,599": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,307,925" + - gridcell "$18,903,599" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 154 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-438cd--filter-with-after-operator-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-438cd--filter-with-after-operator-chromium/test-failed-1.png new file mode 100644 index 0000000..44088f1 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-438cd--filter-with-after-operator-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-45fb1-ilter-when-reset-is-clicked-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-45fb1-ilter-when-reset-is-clicked-chromium/error-context.md new file mode 100644 index 0000000..913c94f --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-45fb1-ilter-when-reset-is-clicked-chromium/error-context.md @@ -0,0 +1,517 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Integration with Grid >> should clear filter when reset is clicked +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:235:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:238:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,600,325 +- img +- paragraph: Average Progress +- paragraph: 45.7% +- img +- paragraph: Budget Remaining +- paragraph: $22,671,422 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [INFRA-1026] Optimize database queries (Sprint 27) Backlog High โšก Performance Jessica Lopez Jessica Lopez 9/6/2025 0% $1,425": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-1026] Optimize database queries (Sprint 27)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$1,425" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-5037] Test mobile responsiveness (Performance Sprint) Backlog Medium ๐Ÿงช Testing Olivia Brown Olivia Brown 9/14/2025 0% $800": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-5037] Test mobile responsiveness (Performance Sprint)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/14/2025" + - gridcell "0%" + - gridcell "$800" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-4971] Resolve CORS issue with external API (Sprint 24) Backlog Critical ๐Ÿ› Bug Priya Sharma Priya Sharma 8/31/2025 0% $550": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-4971] Resolve CORS issue with external API (Sprint 24)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$550" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-5319] Set up staging environment (Security Audit) Testing Low ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/16/2025 91% $6,600 $6,006": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-5319] Set up staging environment (Security Audit)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/16/2025" + - gridcell "91%" + - gridcell "$6,600" + - gridcell "$6,006" + - row "Press Space to toggle row selection (unchecked) [ADMIN-8236] Optimize image loading (Sprint 25) In Progress Low โšก Performance Emily Jackson Emily Jackson 10/4/2025 22% $150 $33": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-8236] Optimize image loading (Sprint 25)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "10/4/2025" + - gridcell "22%" + - gridcell "$150" + - gridcell "$33" + - row "Press Space to toggle row selection (unchecked) [DATA-8486] Implement auto-scaling (Sprint 26) In Review Critical ๐Ÿ”ง DevOps Sophia Taylor Sophia Taylor 9/1/2025 65% $1,000 $650": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-8486] Implement auto-scaling (Sprint 26)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/1/2025" + - gridcell "65%" + - gridcell "$1,000" + - gridcell "$650" + - row "Press Space to toggle row selection (unchecked) [WEB-10674] Implement dark mode toggle (Sprint 24) Backlog Medium โœจ Feature James Wilson James Wilson 9/8/2025 0% $8,200": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-10674] Implement dark mode toggle (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$8,200" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DASH-2313] Write migration guide for v2 Backlog Medium ๐Ÿ“ Documentation Sarah Johnson Sarah Johnson 9/14/2025 0% $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-2313] Write migration guide for v2" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/14/2025" + - gridcell "0%" + - gridcell "$350" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-4489] Add CDN for static assets (Sprint 27) In Progress High โšก Performance Maya Patel Maya Patel 9/6/2025 33% $2,350 $776": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-4489] Add CDN for static assets (Sprint 27)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/6/2025" + - gridcell "33%" + - gridcell "$2,350" + - gridcell "$776" + - row "Press Space to toggle row selection (unchecked) [DASH-4908] Write unit tests for auth module (Performance Sprint) Todo Low ๐Ÿงช Testing Marcus Williams Marcus Williams 10/3/2025 13% $550 $72": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-4908] Write unit tests for auth module (Performance Sprint)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿงช Testing" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "10/3/2025" + - gridcell "13%" + - gridcell "$550" + - gridcell "$72" + - row "Press Space to toggle row selection (unchecked) [DASH-5272] Create architecture overview (Tech Debt) In Review Medium ๐Ÿ“ Documentation Chris Martinez Chris Martinez 9/12/2025 72% $525 $378": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-5272] Create architecture overview (Tech Debt)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/12/2025" + - gridcell "72%" + - gridcell "$525" + - gridcell "$378" + - row "Press Space to toggle row selection (unchecked) [DATA-6362] Implement lazy loading (Security Audit) Backlog High โšก Performance Ryan Thomas Ryan Thomas 9/6/2025 0% $4,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-6362] Implement lazy loading (Security Audit)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$4,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-8330] Split monolithic components (Tech Debt) Backlog Medium โ™ป๏ธ Refactor David Lee David Lee 9/11/2025 0% $8,625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8330] Split monolithic components (Tech Debt)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/11/2025" + - gridcell "0%" + - gridcell "$8,625" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-8437] Optimize memory usage (Sprint 23) In Review Low โšก Performance Isabella Garcia Isabella Garcia 9/17/2025 77% $5,875 $4,524": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-8437] Optimize memory usage (Sprint 23)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/17/2025" + - gridcell "77%" + - gridcell "$5,875" + - gridcell "$4,524" + - row "Press Space to toggle row selection (unchecked) [CORE-9546] Document component props (Sprint 25) Backlog Medium ๐Ÿ“ Documentation Olivia Brown Olivia Brown 9/13/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-9546] Document component props (Sprint 25)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/13/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-9864] Implement auto-scaling (Q1 Goals) Backlog High ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 9/8/2025 0% $10,225": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-9864] Implement auto-scaling (Q1 Goals)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$10,225" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-10536] Configure Docker containers Testing Critical ๐Ÿ”ง DevOps Priya Sharma Priya Sharma 8/31/2025 89% $8,100 $7,209": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-10536] Configure Docker containers" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/31/2025" + - gridcell "89%" + - gridcell "$8,100" + - gridcell "$7,209" + - row "Press Space to toggle row selection (unchecked) [AUTH-3709] Document error handling patterns (Tech Debt) In Review Medium ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/18/2025 79% $14,200 $11,218": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-3709] Document error handling patterns (Tech Debt)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/18/2025" + - gridcell "79%" + - gridcell "$14,200" + - gridcell "$11,218" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,600,325 $18,928,903": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,600,325" + - gridcell "$18,928,903" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 238 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 265 | await dateHeader.click(); + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 286 | await dateHeader.click(); + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-45fb1-ilter-when-reset-is-clicked-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-45fb1-ilter-when-reset-is-clicked-chromium/test-failed-1.png new file mode 100644 index 0000000..32325f1 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-45fb1-ilter-when-reset-is-clicked-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-5dac7-ror-for-invalid-expressions-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-5dac7-ror-for-invalid-expressions-chromium/error-context.md new file mode 100644 index 0000000..6480ee0 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-5dac7-ror-for-invalid-expressions-chromium/error-context.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should show validation error for invalid expressions +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:80:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,905,825 +- img +- paragraph: Average Progress +- paragraph: 45.7% +- img +- paragraph: Budget Remaining +- paragraph: $22,307,641 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [WEB-1563] Update to ES6 modules (Q2 Planning) Backlog Medium โ™ป๏ธ Refactor Jessica Lopez Jessica Lopez 9/10/2025 0% $1,025": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1563] Update to ES6 modules (Q2 Planning)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/10/2025" + - gridcell "0%" + - gridcell "$1,025" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-1912] Fix date picker timezone issue (Q2 Planning) Backlog Medium ๐Ÿ› Bug Emma Davis Emma Davis 9/5/2025 0% $7,325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-1912] Fix date picker timezone issue (Q2 Planning)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$7,325" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-5113] Fix broken unit tests in CI pipeline (Performance Sprint) In Review High ๐Ÿ› Bug Alex Chen Alex Chen 9/3/2025 68% $9,225 $6,273": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-5113] Fix broken unit tests in CI pipeline (Performance Sprint)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/3/2025" + - gridcell "68%" + - gridcell "$9,225" + - gridcell "$6,273" + - row "Press Space to toggle row selection (unchecked) [ADMIN-10264] Configure Docker containers (Performance Sprint) In Progress Low ๐Ÿ”ง DevOps Michael Anderson Michael Anderson 10/12/2025 32% $8,925 $2,856": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-10264] Configure Docker containers (Performance Sprint)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "10/12/2025" + - gridcell "32%" + - gridcell "$8,925" + - gridcell "$2,856" + - row "Press Space to toggle row selection (unchecked) [APP-7392] Set up CI/CD pipeline (Sprint 24) Testing Medium ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/18/2025 82% $675 $554": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-7392] Set up CI/CD pipeline (Sprint 24)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/18/2025" + - gridcell "82%" + - gridcell "$675" + - gridcell "$554" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1854] Clean up deprecated APIs (Sprint 26) Todo Low โ™ป๏ธ Refactor David Lee David Lee 10/1/2025 15% $13,100 $1,965": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1854] Clean up deprecated APIs (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "10/1/2025" + - gridcell "15%" + - gridcell "$13,100" + - gridcell "$1,965" + - row "Press Space to toggle row selection (unchecked) [APP-1921] Add database indexing Todo High โšก Performance Daniel Kim Daniel Kim 9/4/2025 7% $8,775 $614": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-1921] Add database indexing" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/4/2025" + - gridcell "7%" + - gridcell "$8,775" + - gridcell "$614" + - row "Press Space to toggle row selection (unchecked) [APP-3837] Add E2E tests for checkout flow (Sprint 26) Todo Medium ๐Ÿงช Testing Jessica Lopez Jessica Lopez 9/6/2025 7% $8,525 $597": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-3837] Add E2E tests for checkout flow (Sprint 26)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/6/2025" + - gridcell "7%" + - gridcell "$8,525" + - gridcell "$597" + - row "Press Space to toggle row selection (unchecked) [BACKEND-4920] Implement secrets management Backlog High ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/2/2025 0% $3,400": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-4920] Implement secrets management" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$3,400" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-4962] Fix login form validation error (Security Audit) In Progress High ๐Ÿ› Bug Jessica Lopez Jessica Lopez 9/2/2025 38% $14,725 $5,596": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-4962] Fix login form validation error (Security Audit)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "38%" + - gridcell "$14,725" + - gridcell "$5,596" + - row "Press Space to toggle row selection (unchecked) [API-5091] Update to ES6 modules (Sprint 27) In Progress Low โ™ป๏ธ Refactor David Lee David Lee 10/2/2025 54% $7,475 $4,037": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-5091] Update to ES6 modules (Sprint 27)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "10/2/2025" + - gridcell "54%" + - gridcell "$7,475" + - gridcell "$4,037" + - row "Press Space to toggle row selection (unchecked) [CORE-6865] Debug performance regression in search In Progress Critical ๐Ÿ› Bug Kevin Zhang Kevin Zhang 8/29/2025 57% $7,750 $4,418": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-6865] Debug performance regression in search" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "8/29/2025" + - gridcell "57%" + - gridcell "$7,750" + - gridcell "$4,418" + - row "Press Space to toggle row selection (unchecked) [WEB-8240] Document component props (Sprint 27) Backlog High ๐Ÿ“ Documentation Emma Davis Emma Davis 9/1/2025 0% $6,150": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-8240] Document component props (Sprint 27)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$6,150" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-8510] Debug WebSocket connection timeout (Sprint 25) Testing Low ๐Ÿ› Bug Alex Chen Alex Chen 9/12/2025 93% $3,425 $3,185": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8510] Debug WebSocket connection timeout (Sprint 25)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/12/2025" + - gridcell "93%" + - gridcell "$3,425" + - gridcell "$3,185" + - row "Press Space to toggle row selection (unchecked) [MOBILE-8891] Test cross-browser compatibility (Sprint 23) Todo Critical ๐Ÿงช Testing Emily Jackson Emily Jackson 9/1/2025 14% $4,300 $602": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8891] Test cross-browser compatibility (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/1/2025" + - gridcell "14%" + - gridcell "$4,300" + - gridcell "$602" + - row "Press Space to toggle row selection (unchecked) [USER-10598] Modernize legacy jQuery code (Sprint 27) In Progress Medium โ™ป๏ธ Refactor David Lee David Lee 9/10/2025 58% $4,375 $2,538": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-10598] Modernize legacy jQuery code (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/10/2025" + - gridcell "58%" + - gridcell "$4,375" + - gridcell "$2,538" + - row "Press Space to toggle row selection (unchecked) [DASH-1144] Write deployment guide Backlog Low ๐Ÿ“ Documentation John Robinson John Robinson 10/3/2025 0% $975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-1144] Write deployment guide" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "10/3/2025" + - gridcell "0%" + - gridcell "$975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-1387] Implement rate limiting (Sprint 25) Backlog Critical ๐Ÿ”’ Security Priya Sharma Priya Sharma 8/29/2025 0% $475": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1387] Implement rate limiting (Sprint 25)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/29/2025" + - gridcell "0%" + - gridcell "$475" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,905,825 $18,598,184": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,905,825" + - gridcell "$18,598,184" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-5dac7-ror-for-invalid-expressions-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-5dac7-ror-for-invalid-expressions-chromium/test-failed-1.png new file mode 100644 index 0000000..63a9bf2 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-5dac7-ror-for-invalid-expressions-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-68986-uld-filter-by-specific-date-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-68986-uld-filter-by-specific-date-chromium/error-context.md new file mode 100644 index 0000000..8dc53df --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-68986-uld-filter-by-specific-date-chromium/error-context.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Absolute Date Mode >> should filter by specific date +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:129:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:116:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,141,725 +- img +- paragraph: Average Progress +- paragraph: 46.2% +- img +- paragraph: Budget Remaining +- paragraph: $22,201,297 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [API-1850] Fix responsive layout on tablets (Sprint 25) In Progress High ๐Ÿ› Bug Maya Patel Maya Patel 9/4/2025 29% $6,925 $2,008": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-1850] Fix responsive layout on tablets (Sprint 25)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/4/2025" + - gridcell "29%" + - gridcell "$6,925" + - gridcell "$2,008" + - row "Press Space to toggle row selection (unchecked) [DATA-5874] Resolve memory leak in data grid (Sprint 23) Todo Low ๐Ÿ› Bug Sophia Taylor Sophia Taylor 9/14/2025 5% $4,425 $221": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-5874] Resolve memory leak in data grid (Sprint 23)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/14/2025" + - gridcell "5%" + - gridcell "$4,425" + - gridcell "$221" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-5966] Document component props (Performance Sprint) In Review Medium ๐Ÿ“ Documentation Isabella Garcia Isabella Garcia 9/19/2025 68% $1,525 $1,037": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-5966] Document component props (Performance Sprint)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/19/2025" + - gridcell "68%" + - gridcell "$1,525" + - gridcell "$1,037" + - row "Press Space to toggle row selection (unchecked) [ADMIN-6814] Implement social media sharing (Tech Debt) In Progress Low โœจ Feature John Robinson John Robinson 9/24/2025 46% $725 $334": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-6814] Implement social media sharing (Tech Debt)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/24/2025" + - gridcell "46%" + - gridcell "$725" + - gridcell "$334" + - row "Press Space to toggle row selection (unchecked) [UI-4598] Add brute force protection (Q2 Planning) In Progress High ๐Ÿ”’ Security Emily Jackson Emily Jackson 8/31/2025 21% $1,525 $320": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4598] Add brute force protection (Q2 Planning)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "8/31/2025" + - gridcell "21%" + - gridcell "$1,525" + - gridcell "$320" + - row "Press Space to toggle row selection (unchecked) [INFRA-4715] Implement secrets management (Sprint 25) Backlog High ๐Ÿ”ง DevOps Jessica Lopez Jessica Lopez 9/3/2025 0% $1,300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4715] Implement secrets management (Sprint 25)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$1,300" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-5529] Test error boundary behavior (Tech Debt) Backlog Critical ๐Ÿงช Testing Amanda White Amanda White 9/2/2025 0% $4,975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-5529] Test error boundary behavior (Tech Debt)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$4,975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-5864] Implement caching strategy Testing Medium โšก Performance Jessica Lopez Jessica Lopez 9/9/2025 81% $400 $324": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-5864] Implement caching strategy" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/9/2025" + - gridcell "81%" + - gridcell "$400" + - gridcell "$324" + - row "Press Space to toggle row selection (unchecked) [AUTH-8154] Extract business logic layer (Security Audit) In Review Medium โ™ป๏ธ Refactor James Wilson James Wilson 9/12/2025 67% $3,550 $2,379": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-8154] Extract business logic layer (Security Audit)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/12/2025" + - gridcell "67%" + - gridcell "$3,550" + - gridcell "$2,379" + - row "Press Space to toggle row selection (unchecked) [USER-8989] Add keyboard shortcuts (Q2 Planning) Testing High โœจ Feature Emily Jackson Emily Jackson 9/6/2025 84% $350 $294": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-8989] Add keyboard shortcuts (Q2 Planning)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/6/2025" + - gridcell "84%" + - gridcell "$350" + - gridcell "$294" + - row "Press Space to toggle row selection (unchecked) [DATA-10874] Add visual regression tests (Q1 Goals) Todo High ๐Ÿงช Testing James Wilson James Wilson 9/2/2025 10% $4,025 $403": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-10874] Add visual regression tests (Q1 Goals)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/2/2025" + - gridcell "10%" + - gridcell "$4,025" + - gridcell "$403" + - row "Press Space to toggle row selection (unchecked) [DASH-2012] Refactor error handling Testing Low โ™ป๏ธ Refactor Alex Chen Alex Chen 10/1/2025 90% $525 $473": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-2012] Refactor error handling" + - gridcell "Testing" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "10/1/2025" + - gridcell "90%" + - gridcell "$525" + - gridcell "$473" + - row "Press Space to toggle row selection (unchecked) [INFRA-4297] Implement API key rotation (Security Audit) In Progress High ๐Ÿ”’ Security Daniel Kim Daniel Kim 8/29/2025 33% $3,400 $1,122": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4297] Implement API key rotation (Security Audit)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "8/29/2025" + - gridcell "33%" + - gridcell "$3,400" + - gridcell "$1,122" + - row "Press Space to toggle row selection (unchecked) [UI-5330] Clean up deprecated APIs Testing Critical โ™ป๏ธ Refactor Priya Sharma Priya Sharma 8/30/2025 92% $800 $736": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-5330] Clean up deprecated APIs" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "8/30/2025" + - gridcell "92%" + - gridcell "$800" + - gridcell "$736" + - row "Press Space to toggle row selection (unchecked) [WEB-5335] Refactor error handling (Sprint 24) In Review Low โ™ป๏ธ Refactor Maya Patel Maya Patel 9/14/2025 78% $8,275 $6,455": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5335] Refactor error handling (Sprint 24)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/14/2025" + - gridcell "78%" + - gridcell "$8,275" + - gridcell "$6,455" + - row "Press Space to toggle row selection (unchecked) [APP-5872] Refactor authentication flow (Sprint 24) Backlog Low โ™ป๏ธ Refactor Amanda White Amanda White 10/4/2025 0% $4,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-5872] Refactor authentication flow (Sprint 24)" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "10/4/2025" + - gridcell "0%" + - gridcell "$4,450" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-6132] Implement secrets management (Q1 Goals) Todo Medium ๐Ÿ”ง DevOps Marcus Williams Marcus Williams 9/10/2025 15% $1,750 $263": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-6132] Implement secrets management (Q1 Goals)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/10/2025" + - gridcell "15%" + - gridcell "$1,750" + - gridcell "$263" + - row "Press Space to toggle row selection (unchecked) [API-6971] Add encryption at rest (Sprint 27) In Review High ๐Ÿ”’ Security Amanda White Amanda White 8/29/2025 65% $2,975 $1,934": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-6971] Add encryption at rest (Sprint 27)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "8/29/2025" + - gridcell "65%" + - gridcell "$2,975" + - gridcell "$1,934" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,141,725 $18,940,428": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,141,725" + - gridcell "$18,940,428" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 116 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 154 | await dateHeader.click(); + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-68986-uld-filter-by-specific-date-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-68986-uld-filter-by-specific-date-chromium/test-failed-1.png new file mode 100644 index 0000000..01bf5cb Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-68986-uld-filter-by-specific-date-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-6bc6a-support-keyboard-navigation-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-6bc6a-support-keyboard-navigation-chromium/error-context.md new file mode 100644 index 0000000..eb9dc5c --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-6bc6a-support-keyboard-navigation-chromium/error-context.md @@ -0,0 +1,490 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Keyboard Navigation >> should support keyboard navigation +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:263:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:265:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,380,525 +- img +- paragraph: Average Progress +- paragraph: 45.9% +- img +- paragraph: Budget Remaining +- paragraph: $22,374,322 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [ADMIN-1109] Modernize legacy jQuery code (Sprint 23) In Progress Medium โ™ป๏ธ Refactor Michael Anderson Michael Anderson 9/14/2025 27% $700 $189": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1109] Modernize legacy jQuery code (Sprint 23)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/14/2025" + - gridcell "27%" + - gridcell "$700" + - gridcell "$189" + - row "Press Space to toggle row selection (unchecked) [CORE-9655] Create user profile dashboard In Review Critical โœจ Feature Chris Martinez Chris Martinez 9/4/2025 74% $12,325 $9,121": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-9655] Create user profile dashboard" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/4/2025" + - gridcell "74%" + - gridcell "$12,325" + - gridcell "$9,121" + - row "Press Space to toggle row selection (unchecked) [BACKEND-4131] Add progressive web app features (Q1 Goals) Backlog Critical โšก Performance David Lee David Lee 9/4/2025 0% $125": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-4131] Add progressive web app features (Q1 Goals)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/4/2025" + - gridcell "0%" + - gridcell "$125" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DATA-4447] Fix infinite scroll pagination bug (Sprint 27) Testing Medium ๐Ÿ› Bug Emily Jackson Emily Jackson 9/7/2025 89% $225 $200": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-4447] Fix infinite scroll pagination bug (Sprint 27)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/7/2025" + - gridcell "89%" + - gridcell "$225" + - gridcell "$200" + - row "Press Space to toggle row selection (unchecked) [MOBILE-8714] Fix infinite scroll pagination bug (Performance Sprint) In Review High ๐Ÿ› Bug Michael Anderson Michael Anderson 9/4/2025 73% $18,750 $13,688": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8714] Fix infinite scroll pagination bug (Performance Sprint)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/4/2025" + - gridcell "73%" + - gridcell "$18,750" + - gridcell "$13,688" + - row "Press Space to toggle row selection (unchecked) [WEB-5129] Correct CSS overflow in sidebar (Performance Sprint) Blocked Critical ๐Ÿ› Bug Michael Anderson Michael Anderson 8/30/2025 23% $6,575 $1,512": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-5129] Correct CSS overflow in sidebar (Performance Sprint)" + - gridcell "Blocked" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "8/30/2025" + - gridcell "23%" + - gridcell "$6,575" + - gridcell "$1,512" + - row "Press Space to toggle row selection (unchecked) [INFRA-5235] Create integration test suite (Performance Sprint) In Review Critical ๐Ÿงช Testing Jessica Lopez Jessica Lopez 9/2/2025 68% $13,650 $9,282": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-5235] Create integration test suite (Performance Sprint)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "68%" + - gridcell "$13,650" + - gridcell "$9,282" + - row "Press Space to toggle row selection (unchecked) [CORE-7389] Create security penetration tests (Sprint 23) Todo High ๐Ÿงช Testing Ryan Thomas Ryan Thomas 9/3/2025 12% $825 $99": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-7389] Create security penetration tests (Sprint 23)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/3/2025" + - gridcell "12%" + - gridcell "$825" + - gridcell "$99" + - row "Press Space to toggle row selection (unchecked) [PROJ-7893] Write testing best practices (Sprint 27) Testing High ๐Ÿ“ Documentation Sophia Taylor Sophia Taylor 9/5/2025 90% $2,400 $2,160": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-7893] Write testing best practices (Sprint 27)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/5/2025" + - gridcell "90%" + - gridcell "$2,400" + - gridcell "$2,160" + - row "Press Space to toggle row selection (unchecked) [ADMIN-1556] Optimize image loading (Sprint 23) Todo Critical โšก Performance Sarah Johnson Sarah Johnson 9/1/2025 9% $8,225 $740": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1556] Optimize image loading (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/1/2025" + - gridcell "9%" + - gridcell "$8,225" + - gridcell "$740" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-5737] Implement rate limiting (Sprint 24) Backlog High ๐Ÿ”’ Security Emma Davis Emma Davis 9/2/2025 0% $6,475": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-5737] Implement rate limiting (Sprint 24)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$6,475" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-6972] Implement code splitting In Progress Medium โšก Performance Ryan Thomas Ryan Thomas 9/9/2025 22% $4,600 $1,012": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-6972] Implement code splitting" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/9/2025" + - gridcell "22%" + - gridcell "$4,600" + - gridcell "$1,012" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-7063] Add CDN for static assets (Sprint 26) In Review Medium โšก Performance Amanda White Amanda White 9/12/2025 70% $3,800 $2,660": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-7063] Add CDN for static assets (Sprint 26)" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/12/2025" + - gridcell "70%" + - gridcell "$3,800" + - gridcell "$2,660" + - row "Press Space to toggle row selection (unchecked) [AUTH-7437] Document error handling patterns (Security Audit) In Progress High ๐Ÿ“ Documentation Sarah Johnson Sarah Johnson 9/7/2025 42% $200 $84": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-7437] Document error handling patterns (Security Audit)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/7/2025" + - gridcell "42%" + - gridcell "$200" + - gridcell "$84" + - row "Press Space to toggle row selection (unchecked) [INFRA-7666] Reduce API call frequency (Sprint 24) In Progress Low โšก Performance Isabella Garcia Isabella Garcia 9/18/2025 20% $19,375 $3,875": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-7666] Reduce API call frequency (Sprint 24)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/18/2025" + - gridcell "20%" + - gridcell "$19,375" + - gridcell "$3,875" + - row "Press Space to toggle row selection (unchecked) [AUTH-8730] Set up infrastructure as code (Sprint 25) Backlog Low ๐Ÿ”ง DevOps Maya Patel Maya Patel 9/24/2025 0% $250": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-8730] Set up infrastructure as code (Sprint 25)" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/24/2025" + - gridcell "0%" + - gridcell "$250" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-2131] Refactor state management In Progress Medium โ™ป๏ธ Refactor Chris Martinez Chris Martinez 9/13/2025 57% $500 $285": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-2131] Refactor state management" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/13/2025" + - gridcell "57%" + - gridcell "$500" + - gridcell "$285" + - row "Press Space to toggle row selection (unchecked) [USER-3258] Optimize memory usage In Review Critical โšก Performance David Lee David Lee 8/31/2025 63% $10,450 $6,584": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-3258] Optimize memory usage" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "8/31/2025" + - gridcell "63%" + - gridcell "$10,450" + - gridcell "$6,584" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,380,525 $19,006,203": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,380,525" + - gridcell "$19,006,203" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); + 255 | + 256 | // Filter icon should not be visible + 257 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 258 | await expect(filterIcon).not.toBeVisible(); + 259 | }); + 260 | }); + 261 | + 262 | test.describe("Keyboard Navigation", () => { + 263 | test("should support keyboard navigation", async () => { + 264 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 265 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 266 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 267 | + 268 | const input = page.locator('[data-component="date-filter-input"]'); + 269 | await input.focus(); + 270 | + 271 | // Tab to type selector + 272 | await page.keyboard.press('Tab'); + 273 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 274 | await expect(typeSelector).toBeFocused(); + 275 | + 276 | // Tab to mode toggle + 277 | await page.keyboard.press('Tab'); + 278 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 279 | await expect(modeToggle).toBeFocused(); + 280 | }); + 281 | }); + 282 | + 283 | test.describe("Accessibility", () => { + 284 | test("should have proper ARIA labels", async () => { + 285 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 286 | await dateHeader.click(); + 287 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 288 | + 289 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 290 | await expect(typeSelector).toHaveAttribute('aria-label', /filter type/i); + 291 | + 292 | const input = page.locator('[data-component="date-filter-input"]'); + 293 | await expect(input).toHaveAttribute('aria-label', /date value/i); + 294 | }); + 295 | }); + 296 | }); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-6bc6a-support-keyboard-navigation-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-6bc6a-support-keyboard-navigation-chromium/test-failed-1.png new file mode 100644 index 0000000..5553b54 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-6bc6a-support-keyboard-navigation-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-775ab-hen-clicking-on-filter-icon-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-775ab-hen-clicking-on-filter-icon-chromium/error-context.md new file mode 100644 index 0000000..129a684 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-775ab-hen-clicking-on-filter-icon-chromium/error-context.md @@ -0,0 +1,474 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Basic Functionality >> should open date filter dropdown when clicking on filter icon +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:13:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:16:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,678,275 +- img +- paragraph: Average Progress +- paragraph: 46.2% +- img +- paragraph: Budget Remaining +- paragraph: $22,630,379 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [WEB-1498] Add keyboard shortcuts (Performance Sprint) In Review High โœจ Feature Maya Patel Maya Patel 9/5/2025 70% $800 $560": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1498] Add keyboard shortcuts (Performance Sprint)" + - gridcell "In Review" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/5/2025" + - gridcell "70%" + - gridcell "$800" + - gridcell "$560" + - row "Press Space to toggle row selection (unchecked) [API-2031] Implement two-factor authentication Testing High โœจ Feature Alex Chen Alex Chen 9/6/2025 88% $5,075 $4,466": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-2031] Implement two-factor authentication" + - gridcell "Testing" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/6/2025" + - gridcell "88%" + - gridcell "$5,075" + - gridcell "$4,466" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-4407] Optimize render performance (Tech Debt) Todo High โšก Performance Kevin Zhang Kevin Zhang 9/4/2025 5% $100 $5": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-4407] Optimize render performance (Tech Debt)" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/4/2025" + - gridcell "5%" + - gridcell "$100" + - gridcell "$5" + - row "Press Space to toggle row selection (unchecked) [API-7201] Fix infinite scroll pagination bug (Sprint 27) In Progress Critical ๐Ÿ› Bug Emma Davis Emma Davis 9/1/2025 24% $14,150 $3,396": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7201] Fix infinite scroll pagination bug (Sprint 27)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/1/2025" + - gridcell "24%" + - gridcell "$14,150" + - gridcell "$3,396" + - row "Press Space to toggle row selection (unchecked) [DATA-8667] Extract business logic layer Backlog Low โ™ป๏ธ Refactor Chris Martinez Chris Martinez 10/12/2025 0% $300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-8667] Extract business logic layer" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "10/12/2025" + - gridcell "0%" + - gridcell "$300" + - gridcell + - row "Press Space to toggle row selection (unchecked) [WEB-8730] Fix broken deep links in navigation In Review Low ๐Ÿ› Bug Alex Chen Alex Chen 9/16/2025 73% $14,125 $10,311": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-8730] Fix broken deep links in navigation" + - gridcell "In Review" + - gridcell "Low" + - gridcell "๐Ÿ› Bug" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/16/2025" + - gridcell "73%" + - gridcell "$14,125" + - gridcell "$10,311" + - row "Press Space to toggle row selection (unchecked) [WEB-2629] Optimize image loading In Review Medium โšก Performance Michael Anderson Michael Anderson 9/10/2025 68% $800 $544": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-2629] Optimize image loading" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/10/2025" + - gridcell "68%" + - gridcell "$800" + - gridcell "$544" + - row "Press Space to toggle row selection (unchecked) [PROJ-2937] Implement auto-scaling (Sprint 26) Todo Low ๐Ÿ”ง DevOps David Lee David Lee 9/22/2025 18% $12,450 $2,241": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-2937] Implement auto-scaling (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/22/2025" + - gridcell "18%" + - gridcell "$12,450" + - gridcell "$2,241" + - row "Press Space to toggle row selection (unchecked) [DATA-3204] Add database indexing (Sprint 27) Testing Critical โšก Performance John Robinson John Robinson 9/1/2025 87% $5,425 $4,720": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-3204] Add database indexing (Sprint 27)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/1/2025" + - gridcell "87%" + - gridcell "$5,425" + - gridcell "$4,720" + - row "Press Space to toggle row selection (unchecked) [MOBILE-4054] Document error handling patterns Backlog Medium ๐Ÿ“ Documentation Emma Davis Emma Davis 9/9/2025 0% $2,300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-4054] Document error handling patterns" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/9/2025" + - gridcell "0%" + - gridcell "$2,300" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-6615] Write API contract tests (Sprint 25) Todo High ๐Ÿงช Testing Isabella Garcia Isabella Garcia 9/4/2025 17% $775 $132": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-6615] Write API contract tests (Sprint 25)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/4/2025" + - gridcell "17%" + - gridcell "$775" + - gridcell "$132" + - row "Press Space to toggle row selection (unchecked) [CORE-7613] Optimize render performance (Sprint 24) Backlog Critical โšก Performance Emily Jackson Emily Jackson 8/31/2025 0% $200": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-7613] Optimize render performance (Sprint 24)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$200" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-2780] Add internationalization tests (Q1 Goals) Backlog Critical ๐Ÿงช Testing Amanda White Amanda White 8/30/2025 0% $500": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-2780] Add internationalization tests (Q1 Goals)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "8/30/2025" + - gridcell "0%" + - gridcell "$500" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-4660] Implement dark mode toggle Backlog Critical โœจ Feature Olivia Brown Olivia Brown 8/31/2025 0% $600": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4660] Implement dark mode toggle" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$600" + - gridcell + - row "Press Space to toggle row selection (unchecked) [APP-7011] Add SQL injection prevention In Review Low ๐Ÿ”’ Security Sophia Taylor Sophia Taylor 9/13/2025 72% $1,275 $918": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-7011] Add SQL injection prevention" + - gridcell "In Review" + - gridcell "Low" + - gridcell "๐Ÿ”’ Security" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/13/2025" + - gridcell "72%" + - gridcell "$1,275" + - gridcell "$918" + - row "Press Space to toggle row selection (unchecked) [INFRA-1288] Fix infinite scroll pagination bug (Sprint 24) Backlog Medium ๐Ÿ› Bug Marcus Williams Marcus Williams 9/6/2025 0% $11,025": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-1288] Fix infinite scroll pagination bug (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$11,025" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-3206] Optimize database queries (Sprint 24) Todo Critical โ™ป๏ธ Refactor Isabella Garcia Isabella Garcia 8/29/2025 16% $250 $40": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-3206] Optimize database queries (Sprint 24)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/29/2025" + - gridcell "16%" + - gridcell "$250" + - gridcell "$40" + - row "Press Space to toggle row selection (unchecked) [ADMIN-3226] Add export to PDF functionality (Sprint 25) In Progress High โœจ Feature Chris Martinez Chris Martinez 9/3/2025 23% $6,075 $1,397": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3226] Add export to PDF functionality (Sprint 25)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/3/2025" + - gridcell "23%" + - gridcell "$6,075" + - gridcell "$1,397" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,678,275 $19,047,896": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,678,275" + - gridcell "$19,047,896" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 16 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 49 | await dateHeader.click(); + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-775ab-hen-clicking-on-filter-icon-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-775ab-hen-clicking-on-filter-icon-chromium/test-failed-1.png new file mode 100644 index 0000000..2cf7705 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-775ab-hen-clicking-on-filter-icon-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-7e683-plying-relative-date-filter-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-7e683-plying-relative-date-filter-chromium/error-context.md new file mode 100644 index 0000000..c06ca46 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-7e683-plying-relative-date-filter-chromium/error-context.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should filter data when applying relative date filter +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:91:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $41,317,700 +- img +- paragraph: Average Progress +- paragraph: 46.1% +- img +- paragraph: Budget Remaining +- paragraph: $22,229,711 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [INFRA-10822] Implement API key rotation In Progress Critical ๐Ÿ”’ Security John Robinson John Robinson 9/1/2025 26% $275 $72": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-10822] Implement API key rotation" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/1/2025" + - gridcell "26%" + - gridcell "$275" + - gridcell "$72" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1786] Implement dark mode toggle (Tech Debt) Backlog Medium โœจ Feature David Lee David Lee 9/14/2025 0% $875": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1786] Implement dark mode toggle (Tech Debt)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/14/2025" + - gridcell "0%" + - gridcell "$875" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-3304] Create load testing scenarios (Sprint 23) Testing High ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/4/2025 83% $9,075 $7,532": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3304] Create load testing scenarios (Sprint 23)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/4/2025" + - gridcell "83%" + - gridcell "$9,075" + - gridcell "$7,532" + - row "Press Space to toggle row selection (unchecked) [BACKEND-10625] Add export to PDF functionality (Sprint 24) Backlog High โœจ Feature Kevin Zhang Kevin Zhang 9/3/2025 0% $175": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-10625] Add export to PDF functionality (Sprint 24)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$175" + - gridcell + - row "Press Space to toggle row selection (unchecked) [PROJ-6726] Configure Docker containers (Q1 Goals) Todo Low ๐Ÿ”ง DevOps Chris Martinez Chris Martinez 10/8/2025 7% $775 $54": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-6726] Configure Docker containers (Q1 Goals)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "10/8/2025" + - gridcell "7%" + - gridcell "$775" + - gridcell "$54" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-7026] Implement service workers (Q2 Planning) Testing Medium โšก Performance Priya Sharma Priya Sharma 9/12/2025 84% $3,125 $2,625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-7026] Implement service workers (Q2 Planning)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/12/2025" + - gridcell "84%" + - gridcell "$3,125" + - gridcell "$2,625" + - row "Press Space to toggle row selection (unchecked) [API-7853] Optimize bundle size (Sprint 23) Todo Critical โšก Performance John Robinson John Robinson 8/31/2025 19% $850 $162": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-7853] Optimize bundle size (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "8/31/2025" + - gridcell "19%" + - gridcell "$850" + - gridcell "$162" + - row "Press Space to toggle row selection (unchecked) [APP-8115] Add E2E tests for checkout flow Backlog Critical ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/1/2025 0% $750": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-8115] Add E2E tests for checkout flow" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$750" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-9657] Fix infinite scroll pagination bug (Sprint 23) In Progress High ๐Ÿ› Bug Chris Martinez Chris Martinez 8/31/2025 53% $3,600 $1,908": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-9657] Fix infinite scroll pagination bug (Sprint 23)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "8/31/2025" + - gridcell "53%" + - gridcell "$3,600" + - gridcell "$1,908" + - row "Press Space to toggle row selection (unchecked) [BACKEND-4725] Reduce API call frequency (Sprint 24) In Review Low โšก Performance Chris Martinez Chris Martinez 10/10/2025 75% $4,175 $3,131": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-4725] Reduce API call frequency (Sprint 24)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "10/10/2025" + - gridcell "75%" + - gridcell "$4,175" + - gridcell "$3,131" + - row "Press Space to toggle row selection (unchecked) [MOBILE-7209] Set up monitoring alerts (Sprint 24) In Progress Medium ๐Ÿ”ง DevOps Alex Chen Alex Chen 9/5/2025 22% $9,675 $2,129": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-7209] Set up monitoring alerts (Sprint 24)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/5/2025" + - gridcell "22%" + - gridcell "$9,675" + - gridcell "$2,129" + - row "Press Space to toggle row selection (unchecked) [DASH-7362] Set up monitoring alerts In Progress Critical ๐Ÿ”ง DevOps Daniel Kim Daniel Kim 8/30/2025 50% $225 $113": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-7362] Set up monitoring alerts" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "8/30/2025" + - gridcell "50%" + - gridcell "$225" + - gridcell "$113" + - row "Press Space to toggle row selection (unchecked) [AUTH-7376] Optimize memory usage In Review High โšก Performance Olivia Brown Olivia Brown 9/6/2025 66% $800 $528": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-7376] Optimize memory usage" + - gridcell "In Review" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/6/2025" + - gridcell "66%" + - gridcell "$800" + - gridcell "$528" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-8095] Build real-time notifications system (Tech Debt) Backlog High โœจ Feature Jessica Lopez Jessica Lopez 9/5/2025 0% $375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-8095] Build real-time notifications system (Tech Debt)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-9181] Add database indexing (Q1 Goals) In Review Low โšก Performance Sarah Johnson Sarah Johnson 10/1/2025 64% $950 $608": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-9181] Add database indexing (Q1 Goals)" + - gridcell "In Review" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "10/1/2025" + - gridcell "64%" + - gridcell "$950" + - gridcell "$608" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-10236] Update API documentation (Q2 Planning) Backlog Medium ๐Ÿ“ Documentation Daniel Kim Daniel Kim 9/13/2025 0% $3,525": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-10236] Update API documentation (Q2 Planning)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/13/2025" + - gridcell "0%" + - gridcell "$3,525" + - gridcell + - row "Press Space to toggle row selection (unchecked) [DASH-10516] Fix responsive layout on tablets In Progress Medium ๐Ÿ› Bug Emily Jackson Emily Jackson 9/3/2025 26% $425 $111": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-10516] Fix responsive layout on tablets" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/3/2025" + - gridcell "26%" + - gridcell "$425" + - gridcell "$111" + - row "Press Space to toggle row selection (unchecked) [ADMIN-1027] Implement rate limiting (Q1 Goals) In Progress Critical ๐Ÿ”’ Security Maya Patel Maya Patel 8/29/2025 35% $8,925 $3,124": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1027] Implement rate limiting (Q1 Goals)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "8/29/2025" + - gridcell "35%" + - gridcell "$8,925" + - gridcell "$3,124" + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $41,317,700 $19,087,989": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$41,317,700" + - gridcell "$19,087,989" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-7e683-plying-relative-date-filter-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-7e683-plying-relative-date-filter-chromium/test-failed-1.png new file mode 100644 index 0000000..c8773c6 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-7e683-plying-relative-date-filter-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-a963d-ld-default-to-relative-mode-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-a963d-ld-default-to-relative-mode-chromium/error-context.md new file mode 100644 index 0000000..33618a3 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-a963d-ld-default-to-relative-mode-chromium/error-context.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should default to relative mode +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:53:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,581,500 +- img +- paragraph: Average Progress +- paragraph: 45.9% +- img +- paragraph: Budget Remaining +- paragraph: $22,020,006 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [BACKEND-1385] Implement two-factor authentication (Sprint 24) Backlog Medium โœจ Feature Alex Chen Alex Chen 9/21/2025 0% $1,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-1385] Implement two-factor authentication (Sprint 24)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/21/2025" + - gridcell "0%" + - gridcell "$1,450" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-2323] Add database indexing (Sprint 23) Backlog Critical โšก Performance Michael Anderson Michael Anderson 9/2/2025 0% $975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-2323] Add database indexing (Sprint 23)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [ADMIN-3418] Add multi-language support (Performance Sprint) Todo Critical โœจ Feature Emma Davis Emma Davis 9/2/2025 17% $925 $157": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-3418] Add multi-language support (Performance Sprint)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Emma Davis Emma Davis": + - img "Emma Davis" + - text: Emma Davis + - gridcell "9/2/2025" + - gridcell "17%" + - gridcell "$925" + - gridcell "$157" + - row "Press Space to toggle row selection (unchecked) [CORE-9768] Add encryption at rest (Performance Sprint) Todo High ๐Ÿ”’ Security Ryan Thomas Ryan Thomas 9/4/2025 8% $275 $22": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-9768] Add encryption at rest (Performance Sprint)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/4/2025" + - gridcell "8%" + - gridcell "$275" + - gridcell "$22" + - row "Press Space to toggle row selection (unchecked) [USER-4554] Create video tutorials (Sprint 27) Backlog High ๐Ÿ“ Documentation Olivia Brown Olivia Brown 9/8/2025 0% $625": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-4554] Create video tutorials (Sprint 27)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$625" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-8676] Add request batching (Sprint 25) In Progress Critical โšก Performance Alex Chen Alex Chen 9/1/2025 25% $775 $194": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8676] Add request batching (Sprint 25)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/1/2025" + - gridcell "25%" + - gridcell "$775" + - gridcell "$194" + - row "Press Space to toggle row selection (unchecked) [MOBILE-1228] Optimize render performance Backlog Medium โšก Performance James Wilson James Wilson 9/8/2025 0% $8,975": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1228] Optimize render performance" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/8/2025" + - gridcell "0%" + - gridcell "$8,975" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-3663] Fix broken deep links in navigation In Review Critical ๐Ÿ› Bug Isabella Garcia Isabella Garcia 8/29/2025 72% $125 $90": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-3663] Fix broken deep links in navigation" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ› Bug" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/29/2025" + - gridcell "72%" + - gridcell "$125" + - gridcell "$90" + - row "Press Space to toggle row selection (unchecked) [AUTH-4144] Optimize memory usage (Sprint 26) Backlog High โšก Performance Ryan Thomas Ryan Thomas 9/3/2025 0% $950": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-4144] Optimize memory usage (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$950" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-4168] Add visual regression tests (Sprint 27) Testing Medium ๐Ÿงช Testing Michael Anderson Michael Anderson 9/11/2025 90% $3,900 $3,510": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-4168] Add visual regression tests (Sprint 27)" + - gridcell "Testing" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/11/2025" + - gridcell "90%" + - gridcell "$3,900" + - gridcell "$3,510" + - row "Press Space to toggle row selection (unchecked) [BACKEND-5157] Create disaster recovery plan In Progress Low ๐Ÿ”ง DevOps Emily Jackson Emily Jackson 9/16/2025 20% $8,325 $1,665": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-5157] Create disaster recovery plan" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/16/2025" + - gridcell "20%" + - gridcell "$8,325" + - gridcell "$1,665" + - row "Press Space to toggle row selection (unchecked) [UI-6750] Configure CDN distribution (Sprint 26) Todo Low ๐Ÿ”ง DevOps Maya Patel Maya Patel 10/10/2025 5% $300 $15": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-6750] Configure CDN distribution (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "10/10/2025" + - gridcell "5%" + - gridcell "$300" + - gridcell "$15" + - row "Press Space to toggle row selection (unchecked) [APP-6818] Create load testing scenarios Todo Critical ๐Ÿงช Testing David Lee David Lee 8/31/2025 19% $675 $128": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-6818] Create load testing scenarios" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "8/31/2025" + - gridcell "19%" + - gridcell "$675" + - gridcell "$128" + - row "Press Space to toggle row selection (unchecked) [CORE-7865] Add export to PDF functionality (Security Audit) Testing High โœจ Feature Chris Martinez Chris Martinez 9/4/2025 80% $375 $300": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-7865] Add export to PDF functionality (Security Audit)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/4/2025" + - gridcell "80%" + - gridcell "$375" + - gridcell "$300" + - row "Press Space to toggle row selection (unchecked) [WEB-9144] Test cross-browser compatibility (Sprint 23) Backlog Medium ๐Ÿงช Testing Daniel Kim Daniel Kim 9/17/2025 0% $2,100": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-9144] Test cross-browser compatibility (Sprint 23)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿงช Testing" + - gridcell "Daniel Kim Daniel Kim": + - img "Daniel Kim" + - text: Daniel Kim + - gridcell "9/17/2025" + - gridcell "0%" + - gridcell "$2,100" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-9163] Configure Docker containers Backlog High ๐Ÿ”ง DevOps Ryan Thomas Ryan Thomas 9/2/2025 0% $1,775": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-9163] Configure Docker containers" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$1,775" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-3364] Implement secrets management (Q1 Goals) In Progress Low ๐Ÿ”ง DevOps Michael Anderson Michael Anderson 10/6/2025 54% $2,675 $1,445": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-3364] Implement secrets management (Q1 Goals)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "10/6/2025" + - gridcell "54%" + - gridcell "$2,675" + - gridcell "$1,445" + - row "Press Space to toggle row selection (unchecked) [DASH-5805] Write component snapshot tests Backlog Critical ๐Ÿงช Testing John Robinson John Robinson 8/31/2025 0% $3,425": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-5805] Write component snapshot tests" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "8/31/2025" + - gridcell "0%" + - gridcell "$3,425" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,581,500 $18,561,494": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,581,500" + - gridcell "$18,561,494" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-a963d-ld-default-to-relative-mode-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-a963d-ld-default-to-relative-mode-chromium/test-failed-1.png new file mode 100644 index 0000000..e13120e Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-a963d-ld-default-to-relative-mode-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-bda15--date-expressions-correctly-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-bda15--date-expressions-correctly-chromium/error-context.md new file mode 100644 index 0000000..9c116d0 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-bda15--date-expressions-correctly-chromium/error-context.md @@ -0,0 +1,507 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Relative Date Mode >> should parse relative date expressions correctly +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:58:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:49:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,604,650 +- img +- paragraph: Average Progress +- paragraph: 46.3% +- img +- paragraph: Budget Remaining +- paragraph: $21,912,371 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [MOBILE-4088] Write deployment guide (Sprint 23) Todo Critical ๐Ÿ“ Documentation Emily Jackson Emily Jackson 9/4/2025 8% $775 $62": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-4088] Write deployment guide (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/4/2025" + - gridcell "8%" + - gridcell "$775" + - gridcell "$62" + - row "Press Space to toggle row selection (unchecked) [DASH-6138] Implement caching strategy Todo High โšก Performance Amanda White Amanda White 9/6/2025 19% $650 $124": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-6138] Implement caching strategy" + - gridcell "Todo" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/6/2025" + - gridcell "19%" + - gridcell "$650" + - gridcell "$124" + - row "Press Space to toggle row selection (unchecked) [DASH-7749] Set up CI/CD pipeline (Security Audit) In Review Critical ๐Ÿ”ง DevOps Olivia Brown Olivia Brown 9/3/2025 73% $4,900 $3,577": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-7749] Set up CI/CD pipeline (Security Audit)" + - gridcell "In Review" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/3/2025" + - gridcell "73%" + - gridcell "$4,900" + - gridcell "$3,577" + - row "Press Space to toggle row selection (unchecked) [WEB-4498] Optimize database queries (Sprint 25) In Progress Medium โšก Performance James Wilson James Wilson 9/13/2025 28% $550 $154": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-4498] Optimize database queries (Sprint 25)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/13/2025" + - gridcell "28%" + - gridcell "$550" + - gridcell "$154" + - row "Press Space to toggle row selection (unchecked) [API-6185] Optimize bundle size (Sprint 24) In Progress Critical โšก Performance Amanda White Amanda White 9/1/2025 27% $10,125 $2,734": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-6185] Optimize bundle size (Sprint 24)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/1/2025" + - gridcell "27%" + - gridcell "$10,125" + - gridcell "$2,734" + - row "Press Space to toggle row selection (unchecked) [BACKEND-8135] Reduce API call frequency (Sprint 24) Testing High โšก Performance David Lee David Lee 9/4/2025 84% $8,675 $7,287": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8135] Reduce API call frequency (Sprint 24)" + - gridcell "Testing" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/4/2025" + - gridcell "84%" + - gridcell "$8,675" + - gridcell "$7,287" + - row "Press Space to toggle row selection (unchecked) [BACKEND-8576] Update to React 18 patterns In Review High โ™ป๏ธ Refactor Maya Patel Maya Patel 9/5/2025 77% $575 $443": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-8576] Update to React 18 patterns" + - gridcell "In Review" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/5/2025" + - gridcell "77%" + - gridcell "$575" + - gridcell "$443" + - row "Press Space to toggle row selection (unchecked) [ADMIN-8758] Implement blue-green deployment (Tech Debt) Backlog High ๐Ÿ”ง DevOps Sophia Taylor Sophia Taylor 9/7/2025 0% $1,400": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-8758] Implement blue-green deployment (Tech Debt)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$1,400" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-1564] Set up CI/CD pipeline (Sprint 25) Todo High ๐Ÿ”ง DevOps Sophia Taylor Sophia Taylor 9/3/2025 14% $7,600 $1,064": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-1564] Set up CI/CD pipeline (Sprint 25)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/3/2025" + - gridcell "14%" + - gridcell "$7,600" + - gridcell "$1,064" + - row "Press Space to toggle row selection (unchecked) [PROJ-3800] Implement social media sharing Backlog Medium โœจ Feature James Wilson James Wilson 9/19/2025 0% $2,850": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-3800] Implement social media sharing" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โœจ Feature" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/19/2025" + - gridcell "0%" + - gridcell "$2,850" + - gridcell + - row "Press Space to toggle row selection (unchecked) [FRONTEND-4395] Implement CSRF protection (Sprint 27) In Review High ๐Ÿ”’ Security Chris Martinez Chris Martinez 9/3/2025 62% $4,400 $2,728": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-4395] Implement CSRF protection (Sprint 27)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/3/2025" + - gridcell "62%" + - gridcell "$4,400" + - gridcell "$2,728" + - row "Press Space to toggle row selection (unchecked) [ADMIN-5439] Write migration guide for v2 (Sprint 25) In Progress Low ๐Ÿ“ Documentation Marcus Williams Marcus Williams 10/6/2025 22% $6,775 $1,491": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-5439] Write migration guide for v2 (Sprint 25)" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "10/6/2025" + - gridcell "22%" + - gridcell "$6,775" + - gridcell "$1,491" + - row "Press Space to toggle row selection (unchecked) [AUTH-6864] Add input sanitization (Tech Debt) In Progress Critical ๐Ÿ”’ Security Sarah Johnson Sarah Johnson 8/30/2025 56% $625 $350": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-6864] Add input sanitization (Tech Debt)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ”’ Security" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "8/30/2025" + - gridcell "56%" + - gridcell "$625" + - gridcell "$350" + - row "Press Space to toggle row selection (unchecked) [PROJ-7850] Write testing best practices (Sprint 23) Todo Critical ๐Ÿ“ Documentation Jessica Lopez Jessica Lopez 9/2/2025 16% $3,375 $540": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[PROJ-7850] Write testing best practices (Sprint 23)" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/2/2025" + - gridcell "16%" + - gridcell "$3,375" + - gridcell "$540" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-10547] Refactor error handling (Q1 Goals) Todo Medium โ™ป๏ธ Refactor Olivia Brown Olivia Brown 9/15/2025 16% $18,975 $3,036": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-10547] Refactor error handling (Q1 Goals)" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/15/2025" + - gridcell "16%" + - gridcell "$18,975" + - gridcell "$3,036" + - row "Press Space to toggle row selection (unchecked) [MOBILE-3033] Add request batching (Sprint 26) Backlog High โšก Performance James Wilson James Wilson 9/1/2025 0% $13,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-3033] Add request batching (Sprint 26)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$13,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-4514] Create integration test suite Backlog High ๐Ÿงช Testing Priya Sharma Priya Sharma 9/7/2025 0% $475": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4514] Create integration test suite" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$475" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-4902] Implement secrets management (Security Audit) Backlog High ๐Ÿ”ง DevOps James Wilson James Wilson 9/7/2025 0% $8,450": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-4902] Implement secrets management (Security Audit)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$8,450" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,604,650 $18,692,279": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,604,650" + - gridcell "$18,692,279" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 1 | import { test, expect, Page } from "@playwright/test"; + 2 | + 3 | test.describe("DateFilter Dropdown Component", () => { + 4 | let page: Page; + 5 | + 6 | test.beforeEach(async ({ page: testPage }) => { + 7 | page = testPage; + 8 | await page.goto("/demo"); + 9 | await page.waitForSelector(".ag-root-wrapper"); + 10 | }); + 11 | + 12 | test.describe("Basic Functionality", () => { + 13 | test("should open date filter dropdown when clicking on filter icon", async () => { + 14 | // Open the column menu for the date column + 15 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 16 | await dateHeader.click(); + 17 | + 18 | // Click on filter option + 19 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 20 | + 21 | // Verify the date filter is visible + 22 | const dateFilter = page.locator('[data-component="date-filter-root"]'); + 23 | await expect(dateFilter).toBeVisible(); + 24 | }); + 25 | + 26 | test("should display filter type selector", async () => { + 27 | // Open date filter + 28 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 29 | await dateHeader.click(); + 30 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 31 | + 32 | // Check filter type selector + 33 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 34 | await expect(typeSelector).toBeVisible(); + 35 | + 36 | // Verify all filter types are available + 37 | await typeSelector.click(); + 38 | const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + 39 | for (const type of filterTypes) { + 40 | await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + 41 | } + 42 | }); + 43 | }); + 44 | + 45 | test.describe("Relative Date Mode", () => { + 46 | test.beforeEach(async () => { + 47 | // Open date filter + 48 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 49 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 50 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 51 | }); + 52 | + 53 | test("should default to relative mode", async () => { + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-bda15--date-expressions-correctly-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-bda15--date-expressions-correctly-chromium/test-failed-1.png new file mode 100644 index 0000000..b0d7826 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-bda15--date-expressions-correctly-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-e5582-filter-with-before-operator-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-e5582-filter-with-before-operator-chromium/error-context.md new file mode 100644 index 0000000..357e55c --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-e5582-filter-with-before-operator-chromium/error-context.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Filter Operators >> should filter with 'before' operator +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:158:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:154:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,923,050 +- img +- paragraph: Average Progress +- paragraph: 45.0% +- img +- paragraph: Budget Remaining +- paragraph: $22,625,958 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [DASH-10680] Add progressive web app features (Sprint 27) In Progress Medium โšก Performance Emily Jackson Emily Jackson 9/11/2025 30% $700 $210": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-10680] Add progressive web app features (Sprint 27)" + - gridcell "In Progress" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/11/2025" + - gridcell "30%" + - gridcell "$700" + - gridcell "$210" + - row "Press Space to toggle row selection (unchecked) [FRONTEND-8172] Debug crash on mobile Safari (Q1 Goals) Blocked High ๐Ÿ› Bug Sophia Taylor Sophia Taylor 9/4/2025 34% $1,225 $417": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[FRONTEND-8172] Debug crash on mobile Safari (Q1 Goals)" + - gridcell "Blocked" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Sophia Taylor Sophia Taylor": + - img "Sophia Taylor" + - text: Sophia Taylor + - gridcell "9/4/2025" + - gridcell "34%" + - gridcell "$1,225" + - gridcell "$417" + - row "Press Space to toggle row selection (unchecked) [CORE-10037] Update to ES6 modules (Sprint 27) Backlog Medium โ™ป๏ธ Refactor Isabella Garcia Isabella Garcia 9/19/2025 0% $4,700": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-10037] Update to ES6 modules (Sprint 27)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/19/2025" + - gridcell "0%" + - gridcell "$4,700" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-2852] Add database indexing (Tech Debt) Todo Low โšก Performance Maya Patel Maya Patel 9/25/2025 5% $3,525 $176": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-2852] Add database indexing (Tech Debt)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/25/2025" + - gridcell "5%" + - gridcell "$3,525" + - gridcell "$176" + - row "Press Space to toggle row selection (unchecked) [AUTH-3130] Add encryption at rest Backlog High ๐Ÿ”’ Security Priya Sharma Priya Sharma 9/3/2025 0% $650": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-3130] Add encryption at rest" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿ”’ Security" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/3/2025" + - gridcell "0%" + - gridcell "$650" + - gridcell + - row "Press Space to toggle row selection (unchecked) [UI-4562] Configure CDN distribution Backlog Medium ๐Ÿ”ง DevOps Priya Sharma Priya Sharma 9/10/2025 0% $2,375": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4562] Configure CDN distribution" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/10/2025" + - gridcell "0%" + - gridcell "$2,375" + - gridcell + - row "Press Space to toggle row selection (unchecked) [BACKEND-10932] Add request batching (Tech Debt) Backlog High โšก Performance Alex Chen Alex Chen 9/4/2025 0% $10,600": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-10932] Add request batching (Tech Debt)" + - gridcell "Backlog" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/4/2025" + - gridcell "0%" + - gridcell "$10,600" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-4706] Correct CSS overflow in sidebar (Performance Sprint) Testing High ๐Ÿ› Bug Chris Martinez Chris Martinez 9/1/2025 84% $875 $735": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-4706] Correct CSS overflow in sidebar (Performance Sprint)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Chris Martinez Chris Martinez": + - img "Chris Martinez" + - text: Chris Martinez + - gridcell "9/1/2025" + - gridcell "84%" + - gridcell "$875" + - gridcell "$735" + - row "Press Space to toggle row selection (unchecked) [APP-5851] Create security penetration tests Backlog High ๐Ÿงช Testing Marcus Williams Marcus Williams 9/5/2025 0% $4,650": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-5851] Create security penetration tests" + - gridcell "Backlog" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Marcus Williams Marcus Williams": + - img "Marcus Williams" + - text: Marcus Williams + - gridcell "9/5/2025" + - gridcell "0%" + - gridcell "$4,650" + - gridcell + - row "Press Space to toggle row selection (unchecked) [WEB-6259] Fix broken deep links in navigation Testing High ๐Ÿ› Bug Sarah Johnson Sarah Johnson 9/3/2025 86% $250 $215": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-6259] Fix broken deep links in navigation" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/3/2025" + - gridcell "86%" + - gridcell "$250" + - gridcell "$215" + - row "Press Space to toggle row selection (unchecked) [USER-7503] Document new filter components (Sprint 26) Todo Low ๐Ÿ“ Documentation Jessica Lopez Jessica Lopez 10/2/2025 11% $1,175 $129": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-7503] Document new filter components (Sprint 26)" + - gridcell "Todo" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "10/2/2025" + - gridcell "11%" + - gridcell "$1,175" + - gridcell "$129" + - row "Press Space to toggle row selection (unchecked) [APP-8227] Correct data corruption in cache layer Todo Medium ๐Ÿ› Bug Emily Jackson Emily Jackson 9/6/2025 19% $2,850 $542": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-8227] Correct data corruption in cache layer" + - gridcell "Todo" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "Emily Jackson Emily Jackson": + - img "Emily Jackson" + - text: Emily Jackson + - gridcell "9/6/2025" + - gridcell "19%" + - gridcell "$2,850" + - gridcell "$542" + - row "Press Space to toggle row selection (unchecked) [DASH-10718] Add E2E tests for checkout flow Backlog Low ๐Ÿงช Testing Jessica Lopez Jessica Lopez 10/4/2025 0% $175": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-10718] Add E2E tests for checkout flow" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿงช Testing" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "10/4/2025" + - gridcell "0%" + - gridcell "$175" + - gridcell + - row "Press Space to toggle row selection (unchecked) [MOBILE-1831] Implement virtual scrolling In Progress Critical โšก Performance Isabella Garcia Isabella Garcia 8/31/2025 49% $400 $196": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-1831] Implement virtual scrolling" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "โšก Performance" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "8/31/2025" + - gridcell "49%" + - gridcell "$400" + - gridcell "$196" + - row "Press Space to toggle row selection (unchecked) [DASH-3531] Write migration guide for v2 (Sprint 25) Backlog Critical ๐Ÿ“ Documentation Michael Anderson Michael Anderson 9/1/2025 0% $775": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-3531] Write migration guide for v2 (Sprint 25)" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Michael Anderson Michael Anderson": + - img "Michael Anderson" + - text: Michael Anderson + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$775" + - gridcell + - row "Press Space to toggle row selection (unchecked) [API-5705] Create advanced search filters (Sprint 23) In Progress High โœจ Feature Ryan Thomas Ryan Thomas 9/2/2025 42% $900 $378": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-5705] Create advanced search filters (Sprint 23)" + - gridcell "In Progress" + - gridcell "High" + - gridcell "โœจ Feature" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/2/2025" + - gridcell "42%" + - gridcell "$900" + - gridcell "$378" + - row "Press Space to toggle row selection (unchecked) [BACKEND-6524] Add internationalization tests (Sprint 23) Testing High ๐Ÿงช Testing Kevin Zhang Kevin Zhang 9/2/2025 94% $4,700 $4,418": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[BACKEND-6524] Add internationalization tests (Sprint 23)" + - gridcell "Testing" + - gridcell "High" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/2/2025" + - gridcell "94%" + - gridcell "$4,700" + - gridcell "$4,418" + - row "Press Space to toggle row selection (unchecked) [MOBILE-8040] Implement dark mode toggle Backlog Critical โœจ Feature Sarah Johnson Sarah Johnson 9/1/2025 0% $325": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-8040] Implement dark mode toggle" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Sarah Johnson Sarah Johnson": + - img "Sarah Johnson" + - text: Sarah Johnson + - gridcell "9/1/2025" + - gridcell "0%" + - gridcell "$325" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,923,050 $18,297,092": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,923,050" + - gridcell "$18,297,092" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 154 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-e5582-filter-with-before-operator-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-e5582-filter-with-before-operator-chromium/test-failed-1.png new file mode 100644 index 0000000..555c402 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-e5582-filter-with-before-operator-chromium/test-failed-1.png differ diff --git a/test-results/date-filter-dropdown-DateF-fb926-ilter-with-inRange-operator-chromium/error-context.md b/test-results/date-filter-dropdown-DateF-fb926-ilter-with-inRange-operator-chromium/error-context.md new file mode 100644 index 0000000..43dd491 --- /dev/null +++ b/test-results/date-filter-dropdown-DateF-fb926-ilter-with-inRange-operator-chromium/error-context.md @@ -0,0 +1,559 @@ +# Test info + +- Name: DateFilter Dropdown Component >> Filter Operators >> should filter with 'inRange' operator +- Location: /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:192:5 + +# Error details + +``` +Error: locator.click: Test timeout of 30000ms exceeded. +Call log: + - waiting for locator('[col-id="date"] .ag-header-cell-menu-button') + + at /Users/ryan/code-repos/github/ryanrozich/ag-grid-react-components-worktrees/feat/v2-headless-components/tests/e2e/date-filter-dropdown.spec.ts:154:24 +``` + +# Page snapshot + +```yaml +- banner: + - heading "AG Grid React Components" [level=1] + - navigation: + - link "Home": + - /url: / + - link "Demo": + - /url: /demo + - link "Docs": + - /url: /docs + - button "Show version details": v0.2.0-rc3+5 release/v0.2.0-rc3 + - img + - text: MIT License + - link "GitHub": + - /url: https://github.com/ryanrozich/ag-grid-react-components + - img + - text: GitHub +- heading "Project Tasks" [level=1] +- paragraph: Manage and track your team's progress +- navigation: + - button "Client-Side Data" + - button "Server-Side DataAPI" +- textbox "Search tasks..." +- img +- button "Quick filter options": + - text: All Time + - img +- button "Quick filter options": + - text: My Views + - img +- button "View management menu": + - img +- img +- paragraph: Number of Tasks +- paragraph: 10,000 +- img +- paragraph: Total Budget +- paragraph: $40,896,300 +- img +- paragraph: Average Progress +- paragraph: 45.8% +- img +- paragraph: Budget Remaining +- paragraph: $22,019,666 +- grid: + - rowgroup: + - row "Column with Header Selection Task Status Priority Category Assignee Due Date % Delivered Value Delivered": + - columnheader "Column with Header Selection": + - checkbox "Column with Header Selection" + - columnheader "Task" + - columnheader "Status" + - columnheader "Priority" + - columnheader "Category" + - columnheader "Assignee" + - columnheader "Due Date" + - columnheader "% Delivered" + - columnheader "Value" + - columnheader "Delivered" + - rowgroup: + - row "Press Space to toggle row selection (unchecked) [DATA-7323] Implement caching strategy In Review Medium โšก Performance John Robinson John Robinson 9/12/2025 69% $1,875 $1,294": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DATA-7323] Implement caching strategy" + - gridcell "In Review" + - gridcell "Medium" + - gridcell "โšก Performance" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/12/2025" + - gridcell "69%" + - gridcell "$1,875" + - gridcell "$1,294" + - row "Press Space to toggle row selection (unchecked) [ADMIN-1270] Configure health checks (Security Audit) Testing Critical ๐Ÿ”ง DevOps Isabella Garcia Isabella Garcia 9/2/2025 94% $150 $141": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[ADMIN-1270] Configure health checks (Security Audit)" + - gridcell "Testing" + - gridcell "Critical" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Isabella Garcia Isabella Garcia": + - img "Isabella Garcia" + - text: Isabella Garcia + - gridcell "9/2/2025" + - gridcell "94%" + - gridcell "$150" + - gridcell "$141" + - row "Press Space to toggle row selection (unchecked) [CORE-3391] Add export to PDF functionality Backlog Critical โœจ Feature Alex Chen Alex Chen 9/2/2025 0% $15,675": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3391] Add export to PDF functionality" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "โœจ Feature" + - gridcell "Alex Chen Alex Chen": + - img "Alex Chen" + - text: Alex Chen + - gridcell "9/2/2025" + - gridcell "0%" + - gridcell "$15,675" + - gridcell + - row "Press Space to toggle row selection (unchecked) [CORE-3898] Add database indexing (Performance Sprint) Testing Low โšก Performance Maya Patel Maya Patel 9/18/2025 93% $7,450 $6,929": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[CORE-3898] Add database indexing (Performance Sprint)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "โšก Performance" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/18/2025" + - gridcell "93%" + - gridcell "$7,450" + - gridcell "$6,929" + - row "Press Space to toggle row selection (unchecked) [MOBILE-7518] Write migration guide for v2 (Sprint 26) In Progress Critical ๐Ÿ“ Documentation Maya Patel Maya Patel 9/4/2025 27% $225 $61": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[MOBILE-7518] Write migration guide for v2 (Sprint 26)" + - gridcell "In Progress" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Maya Patel Maya Patel": + - img "Maya Patel" + - text: Maya Patel + - gridcell "9/4/2025" + - gridcell "27%" + - gridcell "$225" + - gridcell "$61" + - row "Press Space to toggle row selection (unchecked) [DASH-5712] Debug crash on mobile Safari (Sprint 23) In Review High ๐Ÿ› Bug Amanda White Amanda White 9/4/2025 79% $625 $494": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-5712] Debug crash on mobile Safari (Sprint 23)" + - gridcell "In Review" + - gridcell "High" + - gridcell "๐Ÿ› Bug" + - gridcell "Amanda White Amanda White": + - img "Amanda White" + - text: Amanda White + - gridcell "9/4/2025" + - gridcell "79%" + - gridcell "$625" + - gridcell "$494" + - row "Press Space to toggle row selection (unchecked) [API-9045] Fix broken deep links in navigation (Sprint 25) Backlog Medium ๐Ÿ› Bug John Robinson John Robinson 9/7/2025 0% $9,900": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[API-9045] Fix broken deep links in navigation (Sprint 25)" + - gridcell "Backlog" + - gridcell "Medium" + - gridcell "๐Ÿ› Bug" + - gridcell "John Robinson John Robinson": + - img "John Robinson" + - text: John Robinson + - gridcell "9/7/2025" + - gridcell "0%" + - gridcell "$9,900" + - gridcell + - row "Press Space to toggle row selection (unchecked) [APP-10647] Extract business logic layer (Sprint 24) Todo High โ™ป๏ธ Refactor Priya Sharma Priya Sharma 9/5/2025 19% $8,975 $1,705": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-10647] Extract business logic layer (Sprint 24)" + - gridcell "Todo" + - gridcell "High" + - gridcell "โ™ป๏ธ Refactor" + - gridcell "Priya Sharma Priya Sharma": + - img "Priya Sharma" + - text: Priya Sharma + - gridcell "9/5/2025" + - gridcell "19%" + - gridcell "$8,975" + - gridcell "$1,705" + - row "Press Space to toggle row selection (unchecked) [DASH-4007] Add input sanitization Backlog Low ๐Ÿ”’ Security David Lee David Lee 9/6/2025 0% $4,025": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-4007] Add input sanitization" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "๐Ÿ”’ Security" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/6/2025" + - gridcell "0%" + - gridcell "$4,025" + - gridcell + - row "Press Space to toggle row selection (unchecked) [AUTH-10146] Update API documentation In Progress Low ๐Ÿ“ Documentation Olivia Brown Olivia Brown 9/19/2025 33% $8,425 $2,780": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-10146] Update API documentation" + - gridcell "In Progress" + - gridcell "Low" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/19/2025" + - gridcell "33%" + - gridcell "$8,425" + - gridcell "$2,780" + - row "Press Space to toggle row selection (unchecked) [DASH-1940] Document new filter components Todo Critical ๐Ÿ“ Documentation Ryan Thomas Ryan Thomas 9/1/2025 14% $575 $81": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[DASH-1940] Document new filter components" + - gridcell "Todo" + - gridcell "Critical" + - gridcell "๐Ÿ“ Documentation" + - gridcell "Ryan Thomas Ryan Thomas": + - img "Ryan Thomas" + - text: Ryan Thomas + - gridcell "9/1/2025" + - gridcell "14%" + - gridcell "$575" + - gridcell "$81" + - row "Press Space to toggle row selection (unchecked) [AUTH-2138] Build analytics dashboard (Sprint 26) Backlog Low โœจ Feature James Wilson James Wilson 10/3/2025 0% $5,150": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[AUTH-2138] Build analytics dashboard (Sprint 26)" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "10/3/2025" + - gridcell "0%" + - gridcell "$5,150" + - gridcell + - row "Press Space to toggle row selection (unchecked) [USER-5747] Optimize memory usage (Sprint 27) In Review High โšก Performance James Wilson James Wilson 9/6/2025 69% $6,125 $4,226": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[USER-5747] Optimize memory usage (Sprint 27)" + - gridcell "In Review" + - gridcell "High" + - gridcell "โšก Performance" + - gridcell "James Wilson James Wilson": + - img "James Wilson" + - text: James Wilson + - gridcell "9/6/2025" + - gridcell "69%" + - gridcell "$6,125" + - gridcell "$4,226" + - row "Press Space to toggle row selection (unchecked) [APP-10842] Set up monitoring alerts (Sprint 24) Todo High ๐Ÿ”ง DevOps Olivia Brown Olivia Brown 9/2/2025 6% $10,550 $633": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[APP-10842] Set up monitoring alerts (Sprint 24)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "Olivia Brown Olivia Brown": + - img "Olivia Brown" + - text: Olivia Brown + - gridcell "9/2/2025" + - gridcell "6%" + - gridcell "$10,550" + - gridcell "$633" + - row "Press Space to toggle row selection (unchecked) [WEB-1250] Implement secrets management (Sprint 25) Todo High ๐Ÿ”ง DevOps David Lee David Lee 9/1/2025 13% $7,425 $965": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-1250] Implement secrets management (Sprint 25)" + - gridcell "Todo" + - gridcell "High" + - gridcell "๐Ÿ”ง DevOps" + - gridcell "David Lee David Lee": + - img "David Lee" + - text: David Lee + - gridcell "9/1/2025" + - gridcell "13%" + - gridcell "$7,425" + - gridcell "$965" + - row "Press Space to toggle row selection (unchecked) [WEB-3110] Add input sanitization (Security Audit) Testing Low ๐Ÿ”’ Security Kevin Zhang Kevin Zhang 9/11/2025 88% $100 $88": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[WEB-3110] Add input sanitization (Security Audit)" + - gridcell "Testing" + - gridcell "Low" + - gridcell "๐Ÿ”’ Security" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "9/11/2025" + - gridcell "88%" + - gridcell "$100" + - gridcell "$88" + - row "Press Space to toggle row selection (unchecked) [UI-4504] Add visual regression tests Backlog Critical ๐Ÿงช Testing Kevin Zhang Kevin Zhang 8/30/2025 0% $675": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[UI-4504] Add visual regression tests" + - gridcell "Backlog" + - gridcell "Critical" + - gridcell "๐Ÿงช Testing" + - gridcell "Kevin Zhang Kevin Zhang": + - img "Kevin Zhang" + - text: Kevin Zhang + - gridcell "8/30/2025" + - gridcell "0%" + - gridcell "$675" + - gridcell + - row "Press Space to toggle row selection (unchecked) [INFRA-4562] Add multi-language support Backlog Low โœจ Feature Jessica Lopez Jessica Lopez 9/23/2025 0% $6,825": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell "[INFRA-4562] Add multi-language support" + - gridcell "Backlog" + - gridcell "Low" + - gridcell "โœจ Feature" + - gridcell "Jessica Lopez Jessica Lopez": + - img "Jessica Lopez" + - text: Jessica Lopez + - gridcell "9/23/2025" + - gridcell "0%" + - gridcell "$6,825" + - gridcell + - rowgroup + - rowgroup + - rowgroup + - rowgroup: + - row "Press Space to toggle row selection (unchecked) $40,896,300 $18,876,634": + - gridcell "Press Space to toggle row selection (unchecked)": + - checkbox "Press Space to toggle row selection (unchecked)" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell "$40,896,300" + - gridcell "$18,876,634" + - rowgroup +- tablist: + - tab "Columns" + - tab "Filters" +- status: "Rows : 10,000" +- status: "Total Rows : 10,000" +- status +``` + +# Test source + +```ts + 54 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 55 | await expect(modeToggle).toHaveText(/Relative/i); + 56 | }); + 57 | + 58 | test("should parse relative date expressions correctly", async () => { + 59 | const input = page.locator('[data-component="date-filter-input"]'); + 60 | + 61 | // Test various relative expressions + 62 | const expressions = [ + 63 | { input: "-7d", description: "7 days ago" }, + 64 | { input: "today", description: "today" }, + 65 | { input: "yesterday", description: "yesterday" }, + 66 | { input: "-1w", description: "1 week ago" }, + 67 | { input: "last month", description: "last month" } + 68 | ]; + 69 | + 70 | for (const expr of expressions) { + 71 | await input.clear(); + 72 | await input.fill(expr.input); + 73 | + 74 | // Check that validation passes (no error message) + 75 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 76 | await expect(errorMsg).not.toBeVisible(); + 77 | } + 78 | }); + 79 | + 80 | test("should show validation error for invalid expressions", async () => { + 81 | const input = page.locator('[data-component="date-filter-input"]'); + 82 | + 83 | await input.clear(); + 84 | await input.fill("invalid expression"); + 85 | + 86 | const errorMsg = page.locator('[data-component="date-filter-error-message"]'); + 87 | await expect(errorMsg).toBeVisible(); + 88 | await expect(errorMsg).toContainText(/invalid/i); + 89 | }); + 90 | + 91 | test("should filter data when applying relative date filter", async () => { + 92 | const input = page.locator('[data-component="date-filter-input"]'); + 93 | + 94 | // Apply filter for last 7 days + 95 | await input.fill("-7d"); + 96 | + 97 | // Apply the filter + 98 | const applyButton = page.locator('button:has-text("Apply")'); + 99 | await applyButton.click(); + 100 | + 101 | // Wait for grid to update + 102 | await page.waitForTimeout(500); + 103 | + 104 | // Check that rows are filtered + 105 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 106 | const rowCount = await rows.count(); + 107 | expect(rowCount).toBeGreaterThan(0); + 108 | expect(rowCount).toBeLessThan(50); // Should filter out some rows + 109 | }); + 110 | }); + 111 | + 112 | test.describe("Absolute Date Mode", () => { + 113 | test.beforeEach(async () => { + 114 | // Open date filter + 115 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 116 | await dateHeader.click(); + 117 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 118 | + 119 | // Switch to absolute mode + 120 | const modeToggle = page.locator('[data-component="date-filter-mode-toggle"]'); + 121 | await modeToggle.click(); + 122 | }); + 123 | + 124 | test("should show date picker in absolute mode", async () => { + 125 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 126 | await expect(datePicker).toBeVisible(); + 127 | }); + 128 | + 129 | test("should filter by specific date", async () => { + 130 | const datePicker = page.locator('[data-component="date-filter-date-picker"]'); + 131 | + 132 | // Set a specific date + 133 | const today = new Date(); + 134 | const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format + 135 | await datePicker.fill(dateStr); + 136 | + 137 | // Apply the filter + 138 | const applyButton = page.locator('button:has-text("Apply")'); + 139 | await applyButton.click(); + 140 | + 141 | await page.waitForTimeout(500); + 142 | + 143 | // Verify filtering occurred + 144 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 145 | const rowCount = await rows.count(); + 146 | expect(rowCount).toBeGreaterThanOrEqual(0); + 147 | }); + 148 | }); + 149 | + 150 | test.describe("Filter Operators", () => { + 151 | test.beforeEach(async () => { + 152 | // Open date filter + 153 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); +> 154 | await dateHeader.click(); + | ^ Error: locator.click: Test timeout of 30000ms exceeded. + 155 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 156 | }); + 157 | + 158 | test("should filter with 'before' operator", async () => { + 159 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 160 | await typeSelector.selectOption('before'); + 161 | + 162 | const input = page.locator('[data-component="date-filter-input"]'); + 163 | await input.fill('today'); + 164 | + 165 | const applyButton = page.locator('button:has-text("Apply")'); + 166 | await applyButton.click(); + 167 | + 168 | await page.waitForTimeout(500); + 169 | + 170 | // All dates should be before today + 171 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 172 | expect(await rows.count()).toBeGreaterThan(0); + 173 | }); + 174 | + 175 | test("should filter with 'after' operator", async () => { + 176 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 177 | await typeSelector.selectOption('after'); + 178 | + 179 | const input = page.locator('[data-component="date-filter-input"]'); + 180 | await input.fill('-30d'); + 181 | + 182 | const applyButton = page.locator('button:has-text("Apply")'); + 183 | await applyButton.click(); + 184 | + 185 | await page.waitForTimeout(500); + 186 | + 187 | // Should have rows from last 30 days + 188 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 189 | expect(await rows.count()).toBeGreaterThan(0); + 190 | }); + 191 | + 192 | test("should filter with 'inRange' operator", async () => { + 193 | const typeSelector = page.locator('[data-component="date-filter-type-selector"]'); + 194 | await typeSelector.selectOption('inRange'); + 195 | + 196 | // Should show two inputs for range + 197 | const fromInput = page.locator('[data-component="date-filter-input-from"]'); + 198 | const toInput = page.locator('[data-component="date-filter-input-to"]'); + 199 | + 200 | await expect(fromInput).toBeVisible(); + 201 | await expect(toInput).toBeVisible(); + 202 | + 203 | await fromInput.fill('-30d'); + 204 | await toInput.fill('today'); + 205 | + 206 | const applyButton = page.locator('button:has-text("Apply")'); + 207 | await applyButton.click(); + 208 | + 209 | await page.waitForTimeout(500); + 210 | + 211 | const rows = page.locator('.ag-center-cols-container .ag-row'); + 212 | expect(await rows.count()).toBeGreaterThan(0); + 213 | }); + 214 | }); + 215 | + 216 | test.describe("Integration with Grid", () => { + 217 | test("should update filter model when filter is applied", async () => { + 218 | // Open date filter + 219 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 220 | await dateHeader.click(); + 221 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 222 | + 223 | // Apply a filter + 224 | const input = page.locator('[data-component="date-filter-input"]'); + 225 | await input.fill('-7d'); + 226 | + 227 | const applyButton = page.locator('button:has-text("Apply")'); + 228 | await applyButton.click(); + 229 | + 230 | // Check that filter is active (filter icon should be visible) + 231 | const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + 232 | await expect(filterIcon).toBeVisible(); + 233 | }); + 234 | + 235 | test("should clear filter when reset is clicked", async () => { + 236 | // First apply a filter + 237 | const dateHeader = page.locator('[col-id="date"] .ag-header-cell-menu-button'); + 238 | await dateHeader.click(); + 239 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 240 | + 241 | const input = page.locator('[data-component="date-filter-input"]'); + 242 | await input.fill('-7d'); + 243 | + 244 | const applyButton = page.locator('button:has-text("Apply")'); + 245 | await applyButton.click(); + 246 | + 247 | // Now clear the filter + 248 | await dateHeader.click(); + 249 | await page.locator('.ag-menu-option[aria-label="Filter Columns"]').click(); + 250 | + 251 | const resetButton = page.locator('[data-component="date-filter-reset-button"]'); + 252 | await resetButton.click(); + 253 | + 254 | await applyButton.click(); +``` \ No newline at end of file diff --git a/test-results/date-filter-dropdown-DateF-fb926-ilter-with-inRange-operator-chromium/test-failed-1.png b/test-results/date-filter-dropdown-DateF-fb926-ilter-with-inRange-operator-chromium/test-failed-1.png new file mode 100644 index 0000000..7910059 Binary files /dev/null and b/test-results/date-filter-dropdown-DateF-fb926-ilter-with-inRange-operator-chromium/test-failed-1.png differ diff --git a/tests/e2e/date-filter-dropdown.spec.ts b/tests/e2e/date-filter-dropdown.spec.ts new file mode 100644 index 0000000..c90ff69 --- /dev/null +++ b/tests/e2e/date-filter-dropdown.spec.ts @@ -0,0 +1,364 @@ +import { test, expect, Page } from "@playwright/test"; + +test.describe("DateFilter Dropdown Component", () => { + let page: Page; + + test.beforeEach(async ({ page: testPage }) => { + page = testPage; + await page.goto("/demo"); + await page.waitForSelector(".ag-root-wrapper"); + }); + + test.describe("Basic Functionality", () => { + test("should open date filter dropdown when clicking on filter icon", async () => { + // Open the column menu for the date column + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + + // Click on filter option + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + // Verify the date filter is visible + const dateFilter = page.locator('[data-component="date-filter-root"]'); + await expect(dateFilter).toBeVisible(); + }); + + test("should display filter type selector", async () => { + // Open date filter + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + // Check filter type selector + const typeSelector = page.locator( + '[data-component="date-filter-type-selector"]', + ); + await expect(typeSelector).toBeVisible(); + + // Verify all filter types are available + await typeSelector.click(); + const filterTypes = ["equals", "notEqual", "before", "after", "inRange"]; + for (const type of filterTypes) { + await expect(page.locator(`option[value="${type}"]`)).toBeVisible(); + } + }); + }); + + test.describe("Relative Date Mode", () => { + test.beforeEach(async () => { + // Open date filter + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + }); + + test("should default to relative mode", async () => { + const modeToggle = page.locator( + '[data-component="date-filter-mode-toggle"]', + ); + await expect(modeToggle).toHaveText(/Relative/i); + }); + + test("should parse relative date expressions correctly", async () => { + const input = page.locator('[data-component="date-filter-input"]'); + + // Test various relative expressions + const expressions = [ + { input: "-7d", description: "7 days ago" }, + { input: "today", description: "today" }, + { input: "yesterday", description: "yesterday" }, + { input: "-1w", description: "1 week ago" }, + { input: "last month", description: "last month" }, + ]; + + for (const expr of expressions) { + await input.clear(); + await input.fill(expr.input); + + // Check that validation passes (no error message) + const errorMsg = page.locator( + '[data-component="date-filter-error-message"]', + ); + await expect(errorMsg).not.toBeVisible(); + } + }); + + test("should show validation error for invalid expressions", async () => { + const input = page.locator('[data-component="date-filter-input"]'); + + await input.clear(); + await input.fill("invalid expression"); + + const errorMsg = page.locator( + '[data-component="date-filter-error-message"]', + ); + await expect(errorMsg).toBeVisible(); + await expect(errorMsg).toContainText(/invalid/i); + }); + + test("should filter data when applying relative date filter", async () => { + const input = page.locator('[data-component="date-filter-input"]'); + + // Apply filter for last 7 days + await input.fill("-7d"); + + // Apply the filter + const applyButton = page.locator('button:has-text("Apply")'); + await applyButton.click(); + + // Wait for grid to update + await page.waitForTimeout(500); + + // Check that rows are filtered + const rows = page.locator(".ag-center-cols-container .ag-row"); + const rowCount = await rows.count(); + expect(rowCount).toBeGreaterThan(0); + expect(rowCount).toBeLessThan(50); // Should filter out some rows + }); + }); + + test.describe("Absolute Date Mode", () => { + test.beforeEach(async () => { + // Open date filter + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + // Switch to absolute mode + const modeToggle = page.locator( + '[data-component="date-filter-mode-toggle"]', + ); + await modeToggle.click(); + }); + + test("should show date picker in absolute mode", async () => { + const datePicker = page.locator( + '[data-component="date-filter-date-picker"]', + ); + await expect(datePicker).toBeVisible(); + }); + + test("should filter by specific date", async () => { + const datePicker = page.locator( + '[data-component="date-filter-date-picker"]', + ); + + // Set a specific date + const today = new Date(); + const dateStr = today.toISOString().split("T")[0]; // YYYY-MM-DD format + await datePicker.fill(dateStr); + + // Apply the filter + const applyButton = page.locator('button:has-text("Apply")'); + await applyButton.click(); + + await page.waitForTimeout(500); + + // Verify filtering occurred + const rows = page.locator(".ag-center-cols-container .ag-row"); + const rowCount = await rows.count(); + expect(rowCount).toBeGreaterThanOrEqual(0); + }); + }); + + test.describe("Filter Operators", () => { + test.beforeEach(async () => { + // Open date filter + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + }); + + test("should filter with 'before' operator", async () => { + const typeSelector = page.locator( + '[data-component="date-filter-type-selector"]', + ); + await typeSelector.selectOption("before"); + + const input = page.locator('[data-component="date-filter-input"]'); + await input.fill("today"); + + const applyButton = page.locator('button:has-text("Apply")'); + await applyButton.click(); + + await page.waitForTimeout(500); + + // All dates should be before today + const rows = page.locator(".ag-center-cols-container .ag-row"); + expect(await rows.count()).toBeGreaterThan(0); + }); + + test("should filter with 'after' operator", async () => { + const typeSelector = page.locator( + '[data-component="date-filter-type-selector"]', + ); + await typeSelector.selectOption("after"); + + const input = page.locator('[data-component="date-filter-input"]'); + await input.fill("-30d"); + + const applyButton = page.locator('button:has-text("Apply")'); + await applyButton.click(); + + await page.waitForTimeout(500); + + // Should have rows from last 30 days + const rows = page.locator(".ag-center-cols-container .ag-row"); + expect(await rows.count()).toBeGreaterThan(0); + }); + + test("should filter with 'inRange' operator", async () => { + const typeSelector = page.locator( + '[data-component="date-filter-type-selector"]', + ); + await typeSelector.selectOption("inRange"); + + // Should show two inputs for range + const fromInput = page.locator( + '[data-component="date-filter-input-from"]', + ); + const toInput = page.locator('[data-component="date-filter-input-to"]'); + + await expect(fromInput).toBeVisible(); + await expect(toInput).toBeVisible(); + + await fromInput.fill("-30d"); + await toInput.fill("today"); + + const applyButton = page.locator('button:has-text("Apply")'); + await applyButton.click(); + + await page.waitForTimeout(500); + + const rows = page.locator(".ag-center-cols-container .ag-row"); + expect(await rows.count()).toBeGreaterThan(0); + }); + }); + + test.describe("Integration with Grid", () => { + test("should update filter model when filter is applied", async () => { + // Open date filter + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + // Apply a filter + const input = page.locator('[data-component="date-filter-input"]'); + await input.fill("-7d"); + + const applyButton = page.locator('button:has-text("Apply")'); + await applyButton.click(); + + // Check that filter is active (filter icon should be visible) + const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + await expect(filterIcon).toBeVisible(); + }); + + test("should clear filter when reset is clicked", async () => { + // First apply a filter + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + const input = page.locator('[data-component="date-filter-input"]'); + await input.fill("-7d"); + + const applyButton = page.locator('button:has-text("Apply")'); + await applyButton.click(); + + // Now clear the filter + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + const resetButton = page.locator( + '[data-component="date-filter-reset-button"]', + ); + await resetButton.click(); + + await applyButton.click(); + + // Filter icon should not be visible + const filterIcon = page.locator('[col-id="date"] .ag-header-filter-icon'); + await expect(filterIcon).not.toBeVisible(); + }); + }); + + test.describe("Keyboard Navigation", () => { + test("should support keyboard navigation", async () => { + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + const input = page.locator('[data-component="date-filter-input"]'); + await input.focus(); + + // Tab to type selector + await page.keyboard.press("Tab"); + const typeSelector = page.locator( + '[data-component="date-filter-type-selector"]', + ); + await expect(typeSelector).toBeFocused(); + + // Tab to mode toggle + await page.keyboard.press("Tab"); + const modeToggle = page.locator( + '[data-component="date-filter-mode-toggle"]', + ); + await expect(modeToggle).toBeFocused(); + }); + }); + + test.describe("Accessibility", () => { + test("should have proper ARIA labels", async () => { + const dateHeader = page.locator( + '[col-id="date"] .ag-header-cell-menu-button', + ); + await dateHeader.click(); + await page + .locator('.ag-menu-option[aria-label="Filter Columns"]') + .click(); + + const typeSelector = page.locator( + '[data-component="date-filter-type-selector"]', + ); + await expect(typeSelector).toHaveAttribute("aria-label", /filter type/i); + + const input = page.locator('[data-component="date-filter-input"]'); + await expect(input).toHaveAttribute("aria-label", /date value/i); + }); + }); +});