## Description - #62
Open
Thedezinevipul wants to merge 1 commit into
Open
Conversation
Enhance the filtering capabilities in the VSCode extension to improve user experience by allowing more precise control over displayed items. ## Related Issue <!-- Optional: if this PR relates to an issue, link it below (e.g. "Closes #123"). --> ## Type of Change - [ ] 🐛 Bug fix (non-breaking change that fixes an issue) - [x] ✨ New feature (non-breaking change that adds functionality) - [ ] 💥 Breaking change (fix or feature that would cause existing functionality to change) - [ ] 📚 Documentation update - [ ] 🧪 Test update - [ ] 🔧 Refactor (no functional changes) ## Changes Made - Implemented new filtering options for user selection. ## Testing ### Data Layer Changes - [ ] Ran `npm run test:unit` - all tests pass - [ ] Added/updated Vitest tests for data-layer changes - [ ] Generated a migration (`npm run db:generate`) for any schema change ### Frontend Changes - [ ] Ran `npm run test:e2e` - all tests pass - [ ] Added `data-testid` attributes to interactive elements - [ ] Verified build succeeds (`npm run build`) ## Checklist - [ ] My code follows the project's coding standards - [ ] I have used explicit TypeScript types for function parameters and return values - [ ] I have built the UI with Astro components and Tailwind CSS utility classes (dark theme) - [ ] I have updated documentation (README, instruction files) if needed - [ ] My changes are focused on a single concern ## Additional Notes <!-- Any additional context, concerns, or notes for reviewers -->
There was a problem hiding this comment.
Pull request overview
Adds category/publisher filtering to the Tailspin Toys Astro home page, supported by new data-access helpers and expanded unit/E2E coverage.
Changes:
- Introduces a
FilterControlscomponent on the home page to filter visible game cards by category and publisher. - Adds
getAllCategories/getAllPublishershelpers (with Vitest coverage) and extendsgetAllGamesto accept optional filters (with Vitest coverage). - Updates Playwright tests to match the new
data-testidstrategy and adds a dedicated filtering E2E spec.
Reviewed changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/index.astro | Fetches categories/publishers and renders the new filter controls above the games grid. |
| src/lib/publishers.ts | New helper to list publishers ordered by name for UI filtering. |
| src/lib/publishers.test.ts | Unit tests for publisher listing helper ordering and shape. |
| src/lib/games.ts | Extends getAllGames to support optional category/publisher filtering. |
| src/lib/games.test.ts | Adds unit tests covering getAllGames filtering behavior. |
| src/lib/categories.ts | New helper to list categories ordered by name for UI filtering. |
| src/lib/categories.test.ts | Unit tests for category listing helper ordering and shape. |
| src/components/GameCard.astro | Adjusts data-testid to be per-game and adds category/publisher data attributes for filtering. |
| src/components/FilterControls.astro | New UI component + client-side script implementing filtering and empty-state behavior. |
| e2e-tests/games.spec.ts | Updates selectors to match per-game data-testid values. |
| e2e-tests/filtering.spec.ts | New E2E suite validating filter UI and behavior. |
| e2e-tests/accessibility.spec.ts | Updates focus/selector logic to match per-game data-testid values. |
| .playwright-mcp/page-2026-08-26T11-55-04-845Z.yml | Added Playwright MCP snapshot artifact. |
| .playwright-mcp/page-2026-08-26T11-54-34-759Z.yml | Added Playwright MCP snapshot artifact. |
| .playwright-mcp/page-2026-08-26T11-54-16-587Z.yml | Added Playwright MCP snapshot artifact. |
| .playwright-mcp/page-2026-08-26T11-53-47-330Z.yml | Added Playwright MCP snapshot artifact. |
| .playwright-mcp/page-2026-08-26T11-52-53-592Z.yml | Added Playwright MCP snapshot artifact. |
Suppressed comments (4)
e2e-tests/filtering.spec.ts:59
- locator.evaluateAll must return serializable data; returning an array of DOM elements will fail. Return a count (or other serializable primitive) instead and assert on that value.
const visibleCards = await gameCards.evaluateAll((cards) =>
cards.filter((card) => (card as HTMLElement).style.display !== 'none')
);
e2e-tests/filtering.spec.ts:78
- locator.evaluateAll must return serializable data; returning an array of DOM elements will fail. Return a count (or other serializable primitive) instead and assert on that value.
const visibleCards = await gameCards.evaluateAll((cards) =>
cards.filter((card) => (card as HTMLElement).style.display !== 'none')
);
e2e-tests/filtering.spec.ts:132
- locator.evaluateAll must return serializable data; returning an array of DOM elements will fail. Return a count (or other serializable primitive) instead and assert on that value.
const visibleCards = await gameCards.evaluateAll((cards) =>
cards.filter((card) => (card as HTMLElement).style.display !== 'none')
);
e2e-tests/filtering.spec.ts:175
- locator.evaluateAll must return serializable data; returning an array of DOM elements will fail. Return a count (or other serializable primitive) instead and base the empty-state check on that count.
const visibleCards = await gameCards.evaluateAll((cards) =>
cards.filter((card) => (card as HTMLElement).style.display !== 'none')
);
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| </div> | ||
| </div> | ||
|
|
||
| <script> |
Comment on lines
+33
to
+38
| const visibleCards = await gameCards.evaluateAll((cards) => | ||
| cards.filter((card) => (card as HTMLElement).style.display !== 'none') | ||
| ); | ||
|
|
||
| // At least one game should be visible (we have test data) | ||
| expect(visibleCards.length).toBeGreaterThan(0); |
Comment on lines
+99
to
+105
| const visibleCards = await gameCards.evaluateAll((cards) => | ||
| cards.filter((card) => (card as HTMLElement).style.display !== 'none') | ||
| ); | ||
|
|
||
| // The filtering should have narrowed down results (or shown no matches message) | ||
| expect(visibleCards.length).toBeGreaterThanOrEqual(0); | ||
| }); |
Comment on lines
+6
to
+16
| import FilterControls from '../components/FilterControls.astro'; | ||
| import { getDatabase } from '../lib/db'; | ||
| import { getAllGames } from '../lib/games'; | ||
| import { getAllCategories } from '../lib/categories'; | ||
| import { getAllPublishers } from '../lib/publishers'; | ||
|
|
||
| export const prerender = true; | ||
|
|
||
| const games = await getAllGames(getDatabase()); | ||
| const categories = await getAllCategories(getDatabase()); | ||
| const publishers = await getAllPublishers(getDatabase()); |
Comment on lines
+1
to
+5
| - generic [ref=e1]: | ||
| - banner [ref=e2]: | ||
| - generic [ref=e4]: | ||
| - button "Toggle menu" [ref=e6] | ||
| - link "Tailspin Toys" [ref=e10] [cursor=pointer]: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enhance the filtering capabilities in the VSCode extension to improve user experience by allowing more precise control over displayed items.
Related Issue
Type of Change
🐛 Bug fix (non-breaking change that fixes an issue)
✨ New feature (non-breaking change that adds functionality)
💥 Breaking change (fix or feature that would cause existing functionality to change)
📚 Documentation update
🧪 Test update
🔧 Refactor (no functional changes)
Changes Made
Testing
Data Layer Changes
Ran
npm run test:unit- all tests passAdded/updated Vitest tests for data-layer changes
Generated a migration (
npm run db:generate) for any schema changeFrontend Changes
Ran
npm run test:e2e- all tests passAdded
data-testidattributes to interactive elementsVerified build succeeds (
npm run build)Checklist
My code follows the project's coding standards
I have used explicit TypeScript types for function parameters and return values
I have built the UI with Astro components and Tailwind CSS utility classes (dark theme)
I have updated documentation (README, instruction files) if needed
My changes are focused on a single concern
Additional Notes