adding vitest in avatar.spec.test

.github/pull_request_template.md

@@ -61,4 +61,4 @@ Fixes #<!--Add related issue number here.-->
 
 **Have you read the [contributing guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/CONTRIBUTING.md)?**
 
-<!--Yes or No-->
+<!--Yes or No-->

package.json

@@ -116,6 +116,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.7",
     "@babel/preset-typescript": "^7.26.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^12.1.10",
@@ -155,6 +156,8 @@
     "postcss-modules": "^6.0.0",
     "sass": "^1.80.7",
     "tsx": "^4.19.1",
+    "typedoc": "^0.27.3",
+    "typescript": "^5.6.3",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^2.1.5",
     "whatwg-fetch": "^3.6.20"

src/components/Avatar/Avatar.spec.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import '@testing-library/jest-dom';
+import { describe, test, expect, vi } from 'vitest';
+import { store } from 'state/store';
+import Avatar from './Avatar';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+// Setup mock for StaticMockLink
+const link = new StaticMockLink([], true);
+
+// Mock store and i18nForTest
+vi.mock('state/store', () => ({
+  store: {
+    getState: vi.fn(() => ({
+      auth: {
+        user: null,
+        loading: false,
+      },
+    })),
+    subscribe: vi.fn(),
+    dispatch: vi.fn(),
+  },
+}));
+
+vi.mock('utils/i18nForTest', () => ({
+  __esModule: true,
+  default: vi.fn(() => ({
+    t: (key: string) => key,
+  })),
+}));
+
+// Test suite for Avatar component
+describe('Testing Avatar component', () => {
+  // Helper function for rendering Avatar component with props
+  const renderAvatar = (props = {}): ReturnType<typeof render> => {
+    return render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Avatar {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  };
+
+  // Test for rendering with name and alt attribute
+  test('should render with name and alt attribute', () => {
+    const testName = 'John Doe';
+    const testAlt = 'Test Alt Text';
+    const testSize = 64;
+
+    const { getByAltText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Avatar name={testName} alt={testAlt} size={testSize} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const avatarElement = getByAltText(testAlt);
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+  });
+
+  // Test for custom style and data-testid
+  test('should render with custom style and data-testid', () => {
+    const testName = 'Jane Doe';
+    const testAlt = 'Dummy Avatar';
+    const testStyle = 'custom-avatar-style';
+    const testDataTestId = 'custom-avatar-test-id';
+
+    const { getByAltText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Avatar
+                name={testName}
+                avatarStyle={testStyle}
+                dataTestId={testDataTestId}
+              />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const avatarElement = getByAltText(testAlt);
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+    expect(avatarElement.getAttribute('class')).toContain(testStyle);
+    expect(avatarElement.getAttribute('data-testid')).toBe(testDataTestId);
+  });
+
+  // Error Handling for Undefined Name
+  test('handles undefined name gracefully', () => {
+    renderAvatar({ name: undefined });
+
+    const avatarElement = screen.getByAltText('Dummy Avatar');
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toContain('data:image/svg+xml');
+  });
+
+  // Valid Sizes Test
+  const validSizes = [32, 64, 128];
+  validSizes.forEach((size) => {
+    test(`accepts valid size ${size}`, () => {
+      renderAvatar({ name: 'Test User', size });
+
+      const avatarElement = screen.getByAltText('Dummy Avatar');
+      expect(avatarElement).toHaveAttribute('width', size.toString());
+      expect(avatarElement).toHaveAttribute('height', size.toString());
+    });
+  });
+
+  // Invalid Sizes Test
+  const invalidSizes = [0, -1, 257, 'string'];
+  invalidSizes.forEach((size) => {
+    test(`falls back to default size when invalid size ${size} is provided`, () => {
+      renderAvatar({ name: 'Test User', size });
+
+      const avatarElement = screen.getByAltText('Dummy Avatar');
+      expect(avatarElement).toHaveAttribute('width');
+      expect(avatarElement).toHaveAttribute('height');
+    });
+  });
+
+  // Custom URL Test
+  test('uses custom URL when provided', () => {
+    const customUrl = 'https://example.com/custom-avatar.png';
+
+    renderAvatar({
+      name: 'John Doe',
+      customUrl,
+    });
+
+    const avatarElement = screen.getByAltText('Dummy Avatar');
+    expect(avatarElement.getAttribute('src')).toBe(customUrl);
+  });
+
+  // Fallback to generated avatar when custom URL is invalid
+  test('falls back to generated avatar when custom URL is invalid', () => {
+    renderAvatar({
+      name: 'John Doe',
+      customUrl: '',
+    });
+
+    const avatarElement = screen.getByAltText('Dummy Avatar');
+    expect(avatarElement.getAttribute('src')).toContain('data:image/svg+xml');
+  });
+});

src/components/Avatar/Avatar.tsx

@@ -4,13 +4,14 @@ import { initials } from '@dicebear/collection';
 import styles from 'components/Avatar/Avatar.module.css';
 
 interface InterfaceAvatarProps {
-  name: string;
+  name?: string;
   alt?: string;
   size?: number;
   containerStyle?: string;
   avatarStyle?: string;
   dataTestId?: string;
   radius?: number;
+  customUrl?: string;
 }
 
 /**
@@ -27,16 +28,26 @@ interface InterfaceAvatarProps {
  * @returns JSX.Element - The rendered avatar image component.
  */
 const Avatar = ({
-  name,
+  name = 'Guest',
   alt = 'Dummy Avatar',
   size,
   avatarStyle,
   containerStyle,
   dataTestId,
   radius,
+  customUrl,
 }: InterfaceAvatarProps): JSX.Element => {
   // Memoize the avatar creation to avoid unnecessary recalculations
   const avatar = useMemo(() => {
+    if (customUrl) {
+      try {
+        new URL(customUrl);
+        return customUrl;
+      } catch {
+        console.warn('Invalid custom URL provided to Avatar component');
+      }
+    }
+
     return createAvatar(initials, {
       size: size || 128,
       seed: name,
@@ -53,6 +64,8 @@ const Avatar = ({
         alt={alt}
         className={avatarStyle ? avatarStyle : ''}
         data-testid={dataTestId ? dataTestId : ''}
+        height={size || 128}
+        width={size || 128}
       />
     </div>
   );

vitest.config.ts

@@ -1,3 +1,4 @@
+
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';