test(home): add events card verification test (HP-003) #199
test(home): add events card verification test (HP-003) #199ptrcja wants to merge 1 commit intoWomen-Coding-Community:mainfrom
Conversation
ptrcja
force-pushed
the
HP-003-Latest-Events-Section
branch
from
6512f51 to
2fd24d7
Compare
ptrcja
changed the title
ptrcja
force-pushed
the
HP-003-Latest-Events-Section
branch
2 times, most recently
from
821ba5a to
f689761
Compare
playwright-tests/pages/home.page.ts
Outdated
|
|
||
| import { BasePage } from '@pages/base.page'; | ||
|
|
||
| export class EventCard extends BasePage { |
There was a problem hiding this comment.
EventCard deserves a file for itself ;)
playwright-tests/pages/home.page.ts
Outdated
| readonly leetCodeLink: Locator; | ||
| readonly joinSlackButton: Locator; | ||
|
|
||
| readonly eventsSection: Locator; |
There was a problem hiding this comment.
In order to not abuse this class, I'd prefer to see EventsSection as another page object, that the HomePage uses
All new methods go then to that new class and we make sure HomePage doesn't grow much.
The tests can then do:
// test file
await homePage.eventsSection.getEventCard(...)
Or:
// test file
const eventsSection = await homePage.getEventsSection();
await eventsSection.getEventCard(...)
There was a problem hiding this comment.
Good points! I'll extract both EventCard and EventsSection classes into their own file
playwright-tests/pages/home.page.ts
Outdated
| await expect(eventTitle).not.toBeEmpty(); | ||
|
|
||
| const eventSpeaker = this.card.getByTestId('event-card-speaker'); | ||
| await expect(eventSpeaker).toHaveText(/^Speaker:\s{1,5}.{1,100}$/); |
There was a problem hiding this comment.
Why we need such a regex? I mean, what is the tradeoff here (what we miss, what we gain) if we just check for .toHaveText(/^Speaker/) ?
There was a problem hiding this comment.
I followed the requirement format closely, but you're right that /^Speaker:/ is simpler and sufficient
playwright-tests/pages/home.page.ts
Outdated
|
|
||
| const eventDate = this.card.getByTestId('event-card-date'); | ||
| await expect(eventDate).toHaveText( | ||
| /[A-Za-z]{3}.{0,20}\d{4}.{0,10}\d{1,2}:\d{2}/, |
There was a problem hiding this comment.
I'm not that good at regex to understand what this stands for - can you provide an example as a comment before this?
|
|
||
| await test.step('Verify CTA button opens external link', async () => { | ||
| const eventCard = homePage.getEventCard(0); | ||
| const ctaButton = eventCard.card.getByTestId('event-card-cta'); |
There was a problem hiding this comment.
This whole logic deserves to be in eventCard as a method
|
|
||
| await test.step('Verify "View all events" link navigates to events page', async () => { | ||
| await homePage.clickViewAllEventsLink(); | ||
| await basePage.verifyURL('/events'); |
There was a problem hiding this comment.
Can't we also do homePage.verifyURL('/events'); ? Even better if the verify is part of the clickViewAllEventsLink method, no?
| return ( | ||
| <Grid | ||
| container | ||
| data-testid="event-card" |
There was a problem hiding this comment.
Awesome job putting the IDs there 👌
|
@ptrcja is attempting to deploy a commit to the Women Coding Community's projects Team on Vercel. A member of the Team first needs to authorize it. |
ptrcja
force-pushed
the
HP-003-Latest-Events-Section
branch
from
66b5b38 to
ee007b1
Compare
|
2 participants
Description
Type
Related Issue
#134
Screenshots
Pull request checklist
Please check if your PR fulfills the following requirements: