Add unit tests

.github/workflows/playwright.yml → .github/workflows/e2e.yml

@@ -1,9 +1,13 @@
-name: Playwright Tests
+name: E2E Tests
 on:
   push:
-    branches: [ main ]
+    branches:
+      - main
+      - development
   pull_request:
-    branches: [ main ]
+    branches:
+      - main
+      - development
 jobs:
   test:
     timeout-minutes: 60

.github/workflows/storybook-tests.yml

@@ -0,0 +1,30 @@
+name: 'Storybook Tests'
+on:
+  push:
+    branches:
+      - main
+      - development
+  pull_request:
+    branches:
+      - main
+      - development
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn test-storybook"

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
     "lint-fix": "eslint --ext .js,.jsx,.ts,.tsx src --color --fix",
     "storybook": "storybook dev -p 6006",
+    "test-storybook": "test-storybook",
     "build-storybook": "storybook build"
   },
   "keywords": [],
@@ -26,11 +27,13 @@
   "devDependencies": {
     "@playwright/test": "^1.34.3",
     "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.27",
     "@storybook/addon-links": "^7.0.18",
     "@storybook/blocks": "^7.0.18",
+    "@storybook/jest": "^0.1.0",
     "@storybook/react": "^7.0.18",
     "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/test-runner": "^0.11.0",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.60",

src/__mocks__/mentors.ts

@@ -10,13 +10,14 @@ export const mentors: Mentor[] = [
     application: {
       designation: 'Software Engineer',
       country: 'United States',
-      areasOfExpertise: 'Web Development',
-      expectationsFromMentees: 'Commitment and eagerness to learn',
-      mentoringPhilosophy: 'Empowering mentees to reach their full potential',
-      commitmentToProgram: true,
-      previousExperienceAsMentor: true,
-      reasonForBeingMentor: 'To give back to the community',
-      cvLink: 'https://example.com/cv',
+      company_or_institution: 'Google',
+      areas_of_expertise: 'Web Development',
+      expectations_from_mentees: 'Commitment and eagerness to learn',
+      mentoring_philosophy: 'Empowering mentees to reach their full potential',
+      commitment_to_program: true,
+      previous_experience_as_mentor: true,
+      reason_for_being_mentor: 'To give back to the community',
+      cv_link: 'https://example.com/cv',
     },
     availability: true,
     profile: {
@@ -41,13 +42,15 @@ export const mentors: Mentor[] = [
     application: {
       designation: 'Chief Marketing Officer',
       country: 'Canada',
-      areasOfExpertise: 'Marketing',
-      expectationsFromMentees: 'Proactive attitude and willingness to learn',
-      mentoringPhilosophy: 'Sharing practical insights for professional growth',
-      commitmentToProgram: true,
-      previousExperienceAsMentor: false,
-      reasonForBeingMentor: 'Passion for supporting aspiring entrepreneurs',
-      cvLink: 'https://example.com/cv',
+      company_or_institution: 'Facebook',
+      areas_of_expertise: 'Marketing',
+      expectations_from_mentees: 'Proactive attitude and willingness to learn',
+      mentoring_philosophy:
+        'Sharing practical insights for professional growth',
+      commitment_to_program: true,
+      previous_experience_as_mentor: false,
+      reason_for_being_mentor: 'Passion for supporting aspiring entrepreneurs',
+      cv_link: 'https://example.com/cv',
     },
     availability: true,
     profile: {
@@ -72,13 +75,14 @@ export const mentors: Mentor[] = [
     application: {
       designation: 'UI/UX Designer',
       country: 'United Kingdom',
-      areasOfExpertise: 'UI/UX Design',
-      expectationsFromMentees: 'Attention to detail and creativity',
-      mentoringPhilosophy: 'Creating user-centric designs',
-      commitmentToProgram: true,
-      previousExperienceAsMentor: true,
-      reasonForBeingMentor: 'To inspire and educate aspiring designers',
-      cvLink: 'https://example.com/cv',
+      areas_of_expertise: 'UI/UX Design',
+      company_or_institution: 'Facebook',
+      expectations_from_mentees: 'Attention to detail and creativity',
+      mentoring_philosophy: 'Creating user-centric designs',
+      commitment_to_program: true,
+      previous_experience_as_mentor: true,
+      reason_for_being_mentor: 'To inspire and educate aspiring designers',
+      cv_link: 'https://example.com/cv',
     },
     availability: true,
     profile: {

src/components/MentorCard/MentorCard.component.tsx

@@ -32,6 +32,8 @@ const MentorCard: React.FC<MentorCardProps> = ({ mentor }) => (
         {mentor.profile.first_name} {mentor.profile.last_name}
       </Title>
       <Text>{mentor.application.designation}</Text>
+      <br />
+      <Text type="secondary">Google Inc</Text>
     </div>
   </Card>
 );

src/components/MentorCard/MentorCard.stories.tsx

@@ -1,4 +1,6 @@
+import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
 
 import MentorCard from './MentorCard.component';
 import { mentors } from '../../__mocks__/mentors';
@@ -17,6 +19,20 @@ export const defaultCard: Story = {
   args: {
     mentor: mentors[0],
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const mentorName = canvas.getByText(
+      mentors[0].profile.first_name + ' ' + mentors[0].profile.last_name
+    );
+
+    const mentorDesignation = canvas.getByText(
+      mentors[0].application.designation
+    );
+
+    expect(mentorName).toBeInTheDocument();
+    expect(mentorDesignation).toBeInTheDocument();
+  },
 };
 
 export const cardWithDefaultImage: Story = {

src/types.ts

@@ -12,13 +12,14 @@ export type Mentor = {
 export type Application = {
   designation: string,
   country: string,
-  areasOfExpertise: string,
-  expectationsFromMentees: string,
-  mentoringPhilosophy: string,
-  commitmentToProgram: boolean,
-  previousExperienceAsMentor: boolean,
-  reasonForBeingMentor: string,
-  cvLink: string,
+  company_or_institution: string,
+  areas_of_expertise: string,
+  expectations_from_mentees: string,
+  mentoring_philosophy: string,
+  commitment_to_program: boolean,
+  previous_experience_as_mentor: boolean,
+  reason_for_being_mentor: string,
+  cv_link: string,
 };
 
 export type Profile = {