test(dashboard): add stats card skeleton tests (JhaSourav07#827)

* test(dashboard): add stats card skeleton tests

* fix(test): resolve stats skeleton CI issues

Author: AdityaSekharDas

components/dashboard/StatsCardSkeleton.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+
+import StatsCardSkeleton from './StatsCardSkeleton';
+
+describe('StatsCardSkeleton', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<StatsCardSkeleton />);
+
+    expect(container).toBeDefined();
+  });
+
+  it('renders exactly 12 chart bar elements', () => {
+    const { container } = render(<StatsCardSkeleton />);
+
+    const bars = container.querySelectorAll('.rounded-t-\\[1px\\]');
+
+    expect(bars.length).toBe(12);
+  });
+
+  it('renders shimmer class on all chart bars', () => {
+    const { container } = render(<StatsCardSkeleton />);
+
+    const bars = container.querySelectorAll('.rounded-t-\\[1px\\]');
+
+    bars.forEach((bar) => {
+      expect(bar.className).toContain('shimmer');
+    });
+  });
+
+  it('matches snapshot without random variation', () => {
+    const { container } = render(<StatsCardSkeleton />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

components/dashboard/__snapshots__/StatsCardSkeleton.test.tsx.snap

@@ -0,0 +1,80 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StatsCardSkeleton > matches snapshot without random variation 1`] = `
+<div
+  class="p-6 rounded-xl bg-[#0a0a0a] border border-[rgba(255,255,255,0.08)] overflow-hidden"
+>
+  <div
+    class="flex justify-between items-start mb-6"
+  >
+    <div
+      class="space-y-3"
+    >
+      <div
+        class="h-3 w-24 shimmer rounded"
+      />
+      <div
+        class="h-8 w-32 shimmer rounded"
+      />
+      <div
+        class="h-3 w-36 shimmer rounded"
+      />
+    </div>
+    <div
+      class="h-9 w-9 rounded-lg shimmer"
+    />
+  </div>
+  <div
+    class="w-full h-8 flex items-end justify-between gap-px opacity-30"
+  >
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 24%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 32%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 18%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 45%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 38%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 52%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 28%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 42%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 35%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 48%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 30%;"
+    />
+    <div
+      class="flex-1 shimmer rounded-t-[1px]"
+      style="height: 22%;"
+    />
+  </div>
+</div>
+`;