Repository navigation
feat: show star rating on game cards - #142
DHLFRAGILE wants to merge 1 commit into
Conversation
Display each game's rating out of 5 on listing cards, or "No rating yet" when the rating is null. Adds a formatRatingLabel helper with unit tests and an E2E check. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
🟡 Changes recommended
The E2E check can pass when some cards omit ratings, leaving the every-card requirement unverified.
1 open finding
What changed in this PR
Adds star ratings to game cards on the listing page, with “No rating yet” for unrated games.
Changes:
- Displays star glyphs and a numeric rating label.
- Adds a clamped rating-label helper and unit tests.
- Adds an E2E check for card ratings.
| File | Description |
|---|---|
| src/lib/ratings.ts | Adds rating-label formatting. |
| src/lib/ratings.test.ts | Tests formatting, null values, and clamping. |
| src/components/GameCard.astro | Displays each game’s rating. |
| e2e-tests/games.spec.ts | Adds listing-page rating assertions. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const ratings = page.getByTestId('game-card').getByTestId('game-card-rating'); | ||
| const texts = await ratings.allTextContents(); | ||
| expect(texts.length).toBeGreaterThan(0); | ||
| for (const text of texts) { | ||
| expect(text).toMatch(/\d\.\d \/ 5|No rating yet/); | ||
| } |
|
Thanks for working through the workshop! This matches the star-rating exercise, which is intended for your own copy of Tailspin Toys rather than this shared workshop template. I am closing this here so the upstream template keeps the starting point available for everyone. Please reopen this work against your own repository. If you have not created one yet, select Use this template → Create a new repository on the Tailspin Toys template, then follow the workshop setup instructions. If you intended this as an upstream bug report or contribution rather than a workshop exercise, please reply with that context so we can take another look. Thanks for participating! |
Description
Show each game's star rating (out of 5) on the listing page cards. When a game has no rating (
null), the card shows "No rating yet". The card layout is otherwise unchanged.Related Issue
None.
Type of Change
Changes Made
GameCard.astro: add a rating line (star glyphs +x.x / 5, or "No rating yet") withdata-testid="game-card-rating"src/lib/ratings.ts: addformatRatingLabelhelper (clamps to 0–5)formatRatingLabel; E2E check that every card shows a rating or "No rating yet"Testing
Ran unit tests, ESLint,
typecheck:all, and the Playwright E2E suite locally; all pass.Data Layer Changes
npm run test:unit- all tests passnpm run db:generate) for any schema change (no schema change)Frontend Changes
npm run test:e2e- all tests passdata-testidattributes to interactive elements (no new interactive elements; rating text has a test id)npm run build) (built implicitly bytest:e2e)Checklist
Additional Notes
Targets
github-samples/tailspin-toys:mainfrom a fork branch.