Merge pull request #24 from arbisoft-qaisarirfan/test-action

ci: configure gitHub actions to run tests after pr merge

.github/workflows/e2e.yml

@@ -1,9 +1,9 @@
-name: E2E tests
+name: Unit Tests & E2E
+
 on:
   push:
     branches: [main, dev]
-  pull_request:
-    branches: [main, dev]
+
 jobs:
   test:
     timeout-minutes: 60
@@ -17,9 +17,18 @@ jobs:
         run: npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
-      - name: Run Playwright tests
+      - name: Run Unit & Integration Tests with Coverage
+        run: npm run test:cov
+      - name: Upload Coverage Report
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage/
+          retention-days: 30
+      - name: Run Playwright E2E Tests
         run: npx playwright test
-      - uses: actions/upload-artifact@v4
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: playwright-report

src/components/RecommendedVideoCard/__snapshots__/recommendedVideoCard.test.tsx.snap

@@ -3,9 +3,9 @@
 exports[`RecommendedVideoCard should matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root custom-class css-1d48sfh-MuiPaper-root-MuiCard-root-RecommendedVideoCardContainer-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root custom-class css-18r2xxk-MuiPaper-root-MuiCard-root-RecommendedVideoCardContainer-root"
     data-testid="recommended-video-card"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    style="--Paper-shadow: var(--mui-shadows-1); --Paper-overlay: var(--mui-overlays-1);"
   >
     <div
       class="MuiCardContent-root css-1lt5qva-MuiCardContent-root"
@@ -25,13 +25,13 @@ exports[`RecommendedVideoCard should matches snapshot 1`] = `
         class="video-detail MuiBox-root css-0"
       >
         <div
-          class="MuiTypography-root MuiTypography-h5 css-16xl4zq-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5 css-1ayj0vs-MuiTypography-root"
           title="Sample Video Title"
         >
           Sample Video Title
         </div>
         <p
-          class="MuiTypography-root MuiTypography-body2 date-time css-7ctihp-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 date-time css-ljgvyt-MuiTypography-root"
           data-testid="date-time"
         >
           Jan 01, 2024 
@@ -41,7 +41,7 @@ exports[`RecommendedVideoCard should matches snapshot 1`] = `
         </p>
         <span
           aria-label="4 Stars"
-          class="MuiRating-root MuiRating-sizeSmall Mui-readOnly MuiRating-readOnly css-mrxd2j-MuiRating-root"
+          class="MuiRating-root MuiRating-sizeSmall Mui-readOnly MuiRating-readOnly css-1ynetyc-MuiRating-root"
           role="img"
         >
           <span>
@@ -50,7 +50,7 @@ exports[`RecommendedVideoCard should matches snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1ckov0h-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-8hoymy-MuiSvgIcon-root"
                 data-testid="StarIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -67,7 +67,7 @@ exports[`RecommendedVideoCard should matches snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1ckov0h-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-8hoymy-MuiSvgIcon-root"
                 data-testid="StarIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -84,7 +84,7 @@ exports[`RecommendedVideoCard should matches snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1ckov0h-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-8hoymy-MuiSvgIcon-root"
                 data-testid="StarIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -101,7 +101,7 @@ exports[`RecommendedVideoCard should matches snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1ckov0h-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-8hoymy-MuiSvgIcon-root"
                 data-testid="StarIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -114,11 +114,11 @@ exports[`RecommendedVideoCard should matches snapshot 1`] = `
           </span>
           <span>
             <span
-              class="MuiRating-icon MuiRating-iconEmpty css-9xw0na-MuiRating-icon"
+              class="MuiRating-icon MuiRating-iconEmpty css-h06ynj-MuiRating-icon"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1ckov0h-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-8hoymy-MuiSvgIcon-root"
                 data-testid="StarIcon"
                 focusable="false"
                 viewBox="0 0 24 24"

src/components/RecommendedVideoCard/recommendedVideoCard.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { customRender as render, screen } from "@/jest/utils/testUtils";
 
 import RecommendedVideoCard from "./recommendedVideoCard";
 import { RecommendedVideoCardProps } from "./types";

src/jest/utils/testUtils.tsx

@@ -0,0 +1,16 @@
+import React, { ReactElement } from "react";
+
+import "@testing-library/jest-dom";
+import { render, RenderOptions } from "@testing-library/react";
+
+import ThemeProvider from "@/components/theme/theme-provider";
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) =>
+  render(ui, {
+    wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
+    ...options,
+  });
+
+export * from "@testing-library/react";
+
+export { customRender };