Organization dash cards tests migration (fixes : #2806) (#2881)

* Migrated test from jest to Vitest for all components of OrganizationDashCards component and also merged css files into global css file

* Migrated test from jest to Vitest for all components of OrganizationDashCards component and also merged css files into global css file

* coderabbit issue resolved

* Git check resolved

* git issue resolved

* git issue resolved

* git requested changes

* resolved conversation

* git resolved conversation

* requested changes

* resolved issue

* updated branch

* codrabbit issue resolved

src/components/OrganizationDashCards/CardItem.test.tsx → src/components/OrganizationDashCards/CardItem.spec.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import CardItem from './CardItem';
 import type { InterfaceCardItem } from './CardItem';
 import dayjs from 'dayjs';
+import React from 'react';
 
 describe('Testing the Organization Card', () => {
   test('Should render props and text elements For event card', () => {
@@ -36,7 +36,6 @@ describe('Testing the Organization Card', () => {
         email: '[email protected]',
         firstName: 'John',
         lastName: 'Doe',
-        __typename: 'User',
         _id: '1',
       },
     };

src/components/OrganizationDashCards/CardItem.tsx

@@ -5,7 +5,7 @@ import MarkerIcon from 'assets/svgs/cardItemLocation.svg?react';
 import DateIcon from 'assets/svgs/cardItemDate.svg?react';
 import UserIcon from 'assets/svgs/user.svg?react';
 import dayjs from 'dayjs';
-import styles from './CardItem.module.css';
+import styles from '../../style/app.module.css';
 import { PersonAddAlt1Rounded } from '@mui/icons-material';
 
 /**
@@ -17,7 +17,12 @@ export interface InterfaceCardItem {
   time?: string;
   startdate?: string;
   enddate?: string;
-  creator?: any;
+  creator?: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
   location?: string;
 }
 
@@ -27,7 +32,7 @@ export interface InterfaceCardItem {
  * @param props - Props for the CardItem component.
  * @returns JSX element representing the card item.
  */
-const cardItem = (props: InterfaceCardItem): JSX.Element => {
+const CardItem = (props: InterfaceCardItem): JSX.Element => {
   const { creator, type, title, startdate, time, enddate, location } = props;
   return (
     <>
@@ -120,4 +125,4 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
   );
 };
 
-export default cardItem;
+export default CardItem;

src/components/OrganizationDashCards/CardItemLoading.spec.tsx

@@ -0,0 +1,23 @@
+import CardItemLoading from './CardItemLoading';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import styles from '../../style/app.module.css';
+describe('Test the CardItemLoading component', () => {
+  test('Should render the component', () => {
+    render(<CardItemLoading />);
+    expect(screen.getByTestId('cardItemLoading')).toBeInTheDocument();
+  });
+
+  test('Should render all required child elements', () => {
+    render(<CardItemLoading />);
+
+    const cardItemLoading = screen.getByTestId('cardItemLoading');
+    expect(cardItemLoading).toBeInTheDocument();
+
+    const iconWrapper = cardItemLoading.querySelector(`.${styles.iconWrapper}`);
+    expect(iconWrapper).toBeInTheDocument();
+
+    const title = cardItemLoading.querySelector(`.${styles.title}`);
+    expect(title).toBeInTheDocument();
+  });
+});

src/components/OrganizationDashCards/CardItemLoading.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import styles from './CardItem.module.css';
+import styles from '../../style/app.module.css';
 
 /**
  * CardItemLoading component is a loading state for the card item. It is used when the data is being fetched.
  * @returns JSX.Element
  */
-const cardItemLoading = (): JSX.Element => {
+const CardItemLoading = (): JSX.Element => {
   return (
     <>
       <div
@@ -28,4 +28,4 @@ const cardItemLoading = (): JSX.Element => {
   );
 };
 
-export default cardItemLoading;
+export default CardItemLoading;

src/components/OrganizationDashCards/DashBoardCardLoading.spec.tsx

@@ -0,0 +1,28 @@
+import DashBoardCardLoading from './DashboardCardLoading';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import styles from '../../style/app.module.css';
+describe('Testing the DashBoardCardLoading component', () => {
+  beforeEach(() => {
+    render(<DashBoardCardLoading />);
+  });
+  test('should render the component', () => {
+    expect(screen.getByTestId('Card')).toBeInTheDocument();
+  });
+
+  test('should render every children elements of the component', () => {
+    const Card = screen.queryByTestId('Card');
+    const CardBody = Card?.querySelector(`.${styles.cardBody}`);
+    expect(CardBody).toBeInTheDocument();
+    const iconWrapper = Card?.querySelector(`.${styles.iconWrapper}`);
+    expect(iconWrapper).toBeInTheDocument();
+    const themeOverlay = Card?.querySelector(`.${styles.themeOverlay}`);
+    expect(themeOverlay).toBeInTheDocument();
+    const textWrapper = Card?.querySelector(`.${styles.textWrapper}`);
+    expect(textWrapper).toBeInTheDocument();
+    const primaryText = Card?.querySelector(`.${styles.primaryText}`);
+    expect(primaryText).toBeInTheDocument();
+    const secondaryText = Card?.querySelector(`.${styles.secondaryText}`);
+    expect(secondaryText).toBeInTheDocument();
+  });
+});

src/components/OrganizationDashCards/DashboardCard.test.tsx → src/components/OrganizationDashCards/DashboardCard.spec.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import DashboardCard from './DashboardCard';
-
+import React from 'react';
 describe('Testing the Dashboard Card', () => {
   test('should render props and text elements For event card', () => {
     const props = {

src/components/OrganizationDashCards/DashboardCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, Row } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
-import styles from './Dashboardcard.module.css';
+import styles from '../../style/app.module.css';
 
 /** Dashboard card component is used to display the card with icon, title and count.
  * @param  icon - Icon for the card

src/components/OrganizationDashCards/DashboardCardLoading.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Card, Row } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
-import styles from './Dashboardcard.module.css';
+import styles from '../../style/app.module.css';
 
 /**
  * Dashboard card loading component is a loading state for the dashboard card. It is used when the data is being fetched.
  * @returns JSX.Element
  */
-const dashBoardCardLoading = (): JSX.Element => {
+const DashBoardCardLoading = (): JSX.Element => {
   return (
-    <Card className="rounded-4" border="0">
+    <Card className="rounded-4" border="0" data-testid="Card">
       <Card.Body className={styles.cardBody}>
         <Row className="align-items-center">
           <Col sm={4}>
@@ -37,4 +37,4 @@ const dashBoardCardLoading = (): JSX.Element => {
   );
 };
 
-export default dashBoardCardLoading;
+export default DashBoardCardLoading;