test #196: created unit test for JourneyCard component #658
Conversation
jefische
requested review from
HoldUpFjord,
alexappleget,
bethanyann,
jennifertieu,
kepsteen,
nickytonline and
shashilo
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
shashilo
requested review from
a team,
Yassahr and
nickytonline
and removed request for
a team,
HoldUpFjord,
alexappleget,
bethanyann,
jennifertieu,
kepsteen,
nickytonline and
shashilo
|
|
||
| describe('JourneyCard Component', () => { | ||
|
|
||
| it('Renders the component given serialized ISO date string values', () => { |
There was a problem hiding this comment.
This needs to be better. If you read the component top down, that's how it should be tested.
- Check that the component renders on screen
- Check that each step renders
- Check that the dynamic generated content renders properly
Instead of looking it up in the doc, find the index the dynamic content should be at. If we switched the order, this unit test would still be true when it should fail.
There was a problem hiding this comment.
Thanks for the detailed feedback. I went ahead and created 3 separate test scenarios to follow your outline above and included test-ids for each journey step to be able to look up by index. Now if the order of steps 1 or 4 change, which have the dynamic dates, the test will fail.
This is feeling closer to a complete test of the component, but let me know if I'm missing anything or my scenarios are off.
There was a problem hiding this comment.
Pull Request Overview
This PR adds test coverage for the JourneyCard component by introducing a new test file and adding test IDs to the component for easier DOM querying. The changes enable verification of the component's rendering behavior and date formatting logic.
- Adds
data-testidattributes to the card and journey steps for testing - Introduces comprehensive test suite covering component rendering and date display
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| components/JourneyCard/JourneyCard.tsx | Adds test IDs to the Card and journey step elements for testability |
| components/JourneyCard/JourneyCard.test.tsx | New test file with three test cases covering component rendering and date verification |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { JourneyCard } from './JourneyCard'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { formatDate } from '@/lib/utils'; |
There was a problem hiding this comment.
Missing copyright header. Other test files in the codebase include '// Copyright (c) Gridiron Survivor.' and '// Licensed under the MIT License.' at the top of the file.
| expect(journeyStepTwoElement).toBeInTheDocument(); | ||
| expect(journeyStepThreeElement).toBeInTheDocument(); | ||
| expect(journeyStepFourElement).toBeInTheDocument(); | ||
|
|
There was a problem hiding this comment.
Remove trailing whitespace on line 28.
Description
Before:
The
JourneyCardcomponent lacked unit tests.After:
Unit tests have been added for
JourneyCardcomponent:drawingDateandexchangeDatevaluesdrawingDatevalue is displaying the expected long date format (e.g. 'October 27th, 2025')exchangeDatevalue is displaying the expected long date format (e.g. 'November 20th, 2025')Closes #196
Screenshot
Pre-submission checklist
test #001: created unit test for __ component)Peer Code ReviewersandSenior+ Code Reviewersgroupsgis-code-questions