adding vitest in avatar.spec.test

.github/pull_request_template.md

@@ -1,4 +1,4 @@
 
 <!--
 This section can be deleted after reading.
 
@@ -61,4 +61,4 @@
 
 **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,72 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { describe, test, expect, vi } from 'vitest';
+import Avatar from './Avatar';
+
+/**
+ * Avatar.spec.tsx
+ * description:  Test suite for the Avatar component.
+ * This file contains all the unit tests for the Avatar component, covering
+ * different test cases like rendering with props, handling custom styles,
+ * verifying behavior for invalid/valid sizes, and handling undefined names.
+ *
+ */
+
+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,
+  })),
+}));
+describe('Avatar component', () => {
+  test('renders with name and alt attribute', () => {
+    const testName = 'John Doe';
+    const testAlt = 'Test Alt Text';
+    const testSize = 64;
+
+    const { getByAltText } = render(
+      <Avatar name={testName} alt={testAlt} size={testSize} />,
+    );
+
+    const avatarElement = getByAltText(testAlt);
+
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+  });
+
+  test('renders with custom style and data-testid', () => {
+    const testName = 'Jane Doe';
+    const testStyle = 'custom-avatar-style';
+    const testDataTestId = 'custom-avatar-test-id';
+
+    const { getByAltText } = render(
+      <Avatar
+        name={testName}
+        alt="Dummy Avatar"
+        // className={testStyle}
+        data-testid={testDataTestId}
+      />,
+    );
+
+    const avatarElement = getByAltText('Dummy Avatar');
+
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+    expect(avatarElement.getAttribute('class')).toContain(testStyle);
+    expect(avatarElement.getAttribute('data-testid')).toBe(testDataTestId);
+  });
+});