From 0630cffe07e78db56787fd1d58b46537672f5a83 Mon Sep 17 00:00:00 2001
From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:34:57 +0530
Subject: [PATCH] Refactor: Adding vitest to Avatar component (#2622)

---
 src/components/Avatar/Avatar.spec.tsx | 92 +++++++++++++++++++++++++++
 src/components/Avatar/Avatar.test.tsx | 50 ---------------
 2 files changed, 92 insertions(+), 50 deletions(-)
 create mode 100644 src/components/Avatar/Avatar.spec.tsx
 delete mode 100644 src/components/Avatar/Avatar.test.tsx

diff --git a/src/components/Avatar/Avatar.spec.tsx b/src/components/Avatar/Avatar.spec.tsx
new file mode 100644
index 0000000000..2721595304
--- /dev/null
+++ b/src/components/Avatar/Avatar.spec.tsx
@@ -0,0 +1,92 @@
+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';
+
+/**
+ * Unit tests for the `Avatar` component.
+ *
+ * The tests ensure the `Avatar` component renders correctly with various props.
+ * Mocked dependencies are used to isolate the component and verify its behavior.
+ *
+ */
+
+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: Verifies the `Avatar` component renders correctly with the `name` and `alt` attributes.
+   *
+   * Steps:
+   * 1. Render the `Avatar` component with `name`, `alt`, and `size` props.
+   * 2. Check if the avatar image is present in the document.
+   * 3. Validate the `src` attribute is defined.
+   */
+  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: Verifies the `Avatar` component renders correctly with custom style and `data-testid`.
+   *
+   * Steps:
+   * 1. Render the `Avatar` component with `avatarStyle` and `dataTestId` props.
+   * 2. Check if the avatar image is present in the document.
+   * 3. Validate the `className` contains the custom style.
+   * 4. Validate the `data-testid` attribute matches the expected value.
+   */
+
+  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"
+        avatarStyle={testStyle}
+        dataTestId={testDataTestId}
+      />,
+    );
+
+    const avatarElement = getByAltText('Dummy Avatar');
+
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+
+    expect(avatarElement.className).toContain(testStyle);
+
+    expect(avatarElement.getAttribute('data-testid')).toBe(testDataTestId);
+  });
+});
diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
deleted file mode 100644
index d178c48a4a..0000000000
--- a/src/components/Avatar/Avatar.test.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Avatar from './Avatar';
-import { BrowserRouter } from 'react-router-dom';
-import { I18nextProvider } from 'react-i18next';
-import i18nForTest from 'utils/i18nForTest';
-
-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(
-      <BrowserRouter>
-        <I18nextProvider i18n={i18nForTest}>
-          <Avatar name={testName} alt={testAlt} size={testSize} />
-        </I18nextProvider>
-      </BrowserRouter>,
-    );
-    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(
-      <BrowserRouter>
-        <I18nextProvider i18n={i18nForTest}>
-          <Avatar
-            name={testName}
-            avatarStyle={testStyle}
-            dataTestId={testDataTestId}
-          />
-        </I18nextProvider>
-      </BrowserRouter>,
-    );
-    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);
-  });
-});