diff --git a/playwright-tests/docs/test_details_home_page.md b/playwright-tests/docs/test_details_home_page.md index 23034f5..a733815 100644 --- a/playwright-tests/docs/test_details_home_page.md +++ b/playwright-tests/docs/test_details_home_page.md @@ -96,7 +96,7 @@ Tests to check home page behaviour. - Clicking the CTA Button should redirect the user to the respective external event details page (e.g., GitHub, Meetup). - The View all events link at the top right should redirect to a dedicated Events page containing all events. -**Status:** Pending :x: +**Status:** Done :white_check_mark: --- diff --git a/playwright-tests/docs/test_plan.md b/playwright-tests/docs/test_plan.md index e5b561d..5e09c4b 100644 --- a/playwright-tests/docs/test_plan.md +++ b/playwright-tests/docs/test_plan.md @@ -36,7 +36,7 @@ This is an overview of the playwright tests planned for this repository. | -------------------------------------------- | ----------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------ | | [HP-001](./test_details_home_page.md#hp-001) | Done :white_check_mark: | | | | | [HP-002](./test_details_home_page.md#hp-002) | Pending :x: | | [HP-002: Opportunities and Programmes Section](https://github.com/Women-Coding-Community/wcc-frontend/issues/133) | | -| [HP-003](./test_details_home_page.md#hp-003) | Pending :x: | [@Ptrcja](https://github.com/ptrcja) | [HP-003: Latest Events Section](https://github.com/Women-Coding-Community/wcc-frontend/issues/134) | | +| [HP-003](./test_details_home_page.md#hp-003) | Done :white_check_mark: | [@Ptrcja](https://github.com/ptrcja) | [HP-003: Latest Events Section](https://github.com/Women-Coding-Community/wcc-frontend/issues/134) | | | [HP-004](./test_details_home_page.md#hp-004) | Done :white_check_mark: | | [HP-004: Become a Mentor Section](https://github.com/Women-Coding-Community/wcc-frontend/issues/135) | | | [HP-005](./test_details_home_page.md#hp-005) | Done :white_check_mark: | [@Pranita](https://github.com/PranitaVPanse) | [HP-005: Volunteer Section](https://github.com/Women-Coding-Community/wcc-frontend/issues/136) | | diff --git a/playwright-tests/pages/home.page.ts b/playwright-tests/pages/home.page.ts index d2669d8..e1db0c0 100644 --- a/playwright-tests/pages/home.page.ts +++ b/playwright-tests/pages/home.page.ts @@ -1,7 +1,43 @@ -import { Locator, Page } from '@playwright/test'; +import { expect, Locator, Page } from '@playwright/test'; import { BasePage } from '@pages/base.page'; +export class EventCard extends BasePage { + readonly card: Locator; + + constructor(page: Page, card: Locator) { + super(page); + this.card = card; + } + + async verifyCardStructure(): Promise { + await expect(this.card).toBeVisible(); + + const eventType = this.card.getByTestId('event-card-type'); + await expect(eventType).toHaveText(/^[A-Z_]+$/); + + 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}/, + ); + + const eventTitle = this.card.getByTestId('event-card-title'); + await expect(eventTitle).not.toBeEmpty(); + + const eventSpeaker = this.card.getByTestId('event-card-speaker'); + await expect(eventSpeaker).toHaveText(/^Speaker:\s{1,5}.{1,100}$/); + + const eventDescription = this.card.getByTestId('event-card-description'); + await expect(eventDescription).not.toBeEmpty(); + + const eventImage = this.card.getByTestId('event-card-image'); + await expect(eventImage).toBeVisible(); + + const eventCTA = this.card.getByTestId('event-card-cta'); + await expect(eventCTA).not.toBeEmpty(); + } +} + export class HomePage extends BasePage { readonly becomeMentorSectionTitle: Locator; readonly becomeMentorSectionDescription: Locator; @@ -24,6 +60,8 @@ export class HomePage extends BasePage { readonly leetCodeLink: Locator; readonly joinSlackButton: Locator; + readonly eventsSection: Locator; + constructor(page: Page) { super(page); @@ -76,5 +114,46 @@ export class HomePage extends BasePage { this.leetCodeLink = page.getByRole('link', { name: 'Leetcode' }); this.joinSlackButton = page.getByRole('link', { name: 'Join our Slack' }); + + this.eventsSection = page.getByTestId('events-section'); + } + + /** + * Gets an EventCard instance by index + * @param index - Zero-based index of the event card + */ + getEventCard(index: number): EventCard { + const cards = this.eventsSection.getByTestId('event-card'); + return new EventCard(this.page, cards.nth(index)); + } + + /** + * Gets an EventCard by matching title text + * @param titleText - The event title to search for + */ + getEventCardByTitle(titleText: string): EventCard { + const card = this.eventsSection + .getByTestId('event-card') + .filter({ + has: this.page + .getByTestId('event-card-title') + .filter({ hasText: titleText }), + }) + .first(); + return new EventCard(this.page, card); + } + + async verifyEventsSectionVisible(): Promise { + const sectionTitle = this.eventsSection.getByTestId('events-section-title'); + const viewAllLink = this.eventsSection.getByTestId('events-view-all-link'); + + await expect(this.eventsSection).toBeVisible(); + await expect(sectionTitle).toBeVisible(); + await expect(viewAllLink).toBeVisible(); + } + + async clickViewAllEventsLink(): Promise { + const viewAllLink = this.eventsSection.getByTestId('events-view-all-link'); + await viewAllLink.click(); } } diff --git a/playwright-tests/tests/home.page.spec.ts b/playwright-tests/tests/home.page.spec.ts index 462316e..cef94f7 100644 --- a/playwright-tests/tests/home.page.spec.ts +++ b/playwright-tests/tests/home.page.spec.ts @@ -45,6 +45,44 @@ test.describe('Validate Home Page', () => { await homePage.clickElement(homePage.leetCodeLink); await homePage.verifyURL('/programmes/leetcode'); }); + test('HP-003: Verify Events Card information and CTA link', async ({ + page, + homePage, + basePage, + }) => { + await test.step('Verify events section is visible', async () => { + await homePage.verifyEventsSectionVisible(); + }); + + await test.step('Verify event card displays all required information', async () => { + const eventCard = homePage.getEventCard(0); + await eventCard.verifyCardStructure(); + }); + + await test.step('Verify CTA button opens external link', async () => { + const eventCard = homePage.getEventCard(0); + const ctaButton = eventCard.card.getByTestId('event-card-cta'); + + const [newPage] = await Promise.all([ + page.context().waitForEvent('page'), + ctaButton.click(), + ]); + + await newPage.waitForLoadState(); + const url = newPage.url(); + const isValidDomain = + url.includes('github.com') || url.includes('meetup.com'); + expect(isValidDomain).toBeTruthy(); + + await newPage.close(); + }); + + await test.step('Verify "View all events" link navigates to events page', async () => { + await homePage.clickViewAllEventsLink(); + await basePage.verifyURL('/events'); + }); + }); + test('HP-004: Become Mentor section', async ({ homePage, basePage }) => { await expect(homePage.becomeMentorSectionTitle).toBeVisible(); await expect(homePage.becomeMentorSectionDescription).toBeVisible(); diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx index 888a29e..d31f121 100644 --- a/src/components/EventCard.tsx +++ b/src/components/EventCard.tsx @@ -32,6 +32,7 @@ export const EventCard = ({ return ( @@ -119,6 +124,7 @@ export const EventCard = ({ - + {link.label}{' '} diff --git a/src/components/EventContainer.tsx b/src/components/EventContainer.tsx index 8d1d8bc..1e69e60 100644 --- a/src/components/EventContainer.tsx +++ b/src/components/EventContainer.tsx @@ -12,7 +12,7 @@ export const EventContainer = ({ title, link, items }: EventContainerProps) => { const isMobile = useMediaQuery(theme.breakpoints.down(750)); return ( - + { width: '100%', }} > - {title} + + {title} + { gradientColors="linear-gradient(90deg, #C7E7FF 0%, #FFDEA6 100%)" /> { const isExternal = href.startsWith('https'); @@ -25,6 +27,7 @@ export const LinkButton = ({ target="_blank" rel="noopener noreferrer" variant="contained" + data-testid={dataTestId} sx={{ backgroundColor: reversed ? '#fff' : 'primary.main', color: reversed ? 'primary.main' : '#fff', @@ -45,6 +48,7 @@ export const LinkButton = ({