test: Become a mentee Section #143

package.json

@@ -67,5 +67,6 @@
   "engines": {
     "node": ">=20",
     "pnpm": ">=9"
-  }
+  },
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }

playwright-tests/pages/mentorship.page.ts

@@ -42,6 +42,9 @@ export class MentorshipPage extends BasePage {
   readonly feedbackArea: Locator;
   readonly testimonialCards: Locator;
   readonly showMoreButton: Locator;
+  readonly sectionTitle: Locator;
+  readonly description: Locator;
+  readonly menteeListItems: Locator;
 
   // Mentors listing page locators
   readonly mentorsPageTitle: Locator;
@@ -62,6 +65,15 @@ export class MentorshipPage extends BasePage {
     this.feedbackArea = page.getByTestId('feedback-area');
     this.testimonialCards = this.feedbackArea.getByTestId('feedback-card');
     this.showMoreButton = this.feedbackArea.getByTestId('feedback-show-more');
+    this.sectionTitle = page.getByRole('heading', {
+      level: 4,
+      name: /Become a Mentee/i,
+    });
+    this.description = page.getByRole('heading', {
+      level: 5,
+      name: /You should become a mentee if you:/i,
+    });
+    this.menteeListItems = page.getByTestId('become-mentee-card').locator('li');
 
     this.mentorsPageTitle = page.getByRole('heading', {
       name: 'Meet Our Mentors',

playwright-tests/tests/becomeAMentee.page.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/fixtures';
+import { HomePage } from '@pages/home.page';
+import { MentorshipPage } from '@pages/mentorship.page';
+
+test('Validate "Become a Mentee" section and Find a Mentor button', async ({
+  page, mentorshipPage, homePage
+}) => {
+  // Navigate to Mentorship page
+  await page.goto('/mentorship');
+
+  await expect(mentorshipPage.sectionTitle).toBeVisible();
+  await expect(mentorshipPage.description).toBeVisible();
+
+  // List items
+  const items = [
+    'Want to start a career in software engineering',
+    'Want to find a better job',
+    'Want to be promoted at work',
+    'Want to apply for a leadership position',
+    'Need support in advancing your career',
+  ];
+
+  await expect(mentorshipPage.menteeListItems).toHaveText(items);
+
+  await homePage.findMentorButton.click();
+  await expect(page).toHaveURL(/\/mentorship\/mentors/);
+});

src/components/MentorBecomeCard.tsx

@@ -10,13 +10,15 @@ interface MentorBecomeCardProps {
   topics: string[];
   buttonText: string;
   buttonUrl: string;
+  listTestId?: string;
 }
 
 export const MentorBecomeCard = ({
   mentorOrMentee,
   topics,
   buttonText,
   buttonUrl,
+  listTestId,
 }: MentorBecomeCardProps) => {
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   return (
@@ -48,7 +50,7 @@ export const MentorBecomeCard = ({
         You should become a {mentorOrMentee} if you:
       </Typography>
 
-      <ol>
+      <ol data-testid={listTestId}>
         {topics.map((topic: any, index: number) => (
           <li
             style={{ fontSize: '24px' }}

src/pages/mentorship/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 import { Typography, Button, Box, Grid, useMediaQuery } from '@mui/material';
 import { GetServerSideProps } from 'next';
 import React, { useState } from 'react';
@@ -74,6 +75,7 @@ const MentorshipPage = ({ mentorship, footer }: MentorshipPageProps) => {
           buttonText={mentorship.mentorSection.link.label}
         ></MentorBecomeCard>
         <MentorBecomeCard
+          listTestId="become-mentee-card"
           mentorOrMentee="mentee"
           topics={mentorship.menteeSection.items}
           buttonUrl={mentorship.menteeSection.link.uri}