# xspeed/1.0.1/tests-js/components/StatCard.test.tsx

xSpeed Cache: AI-Powered Performance Hub with MCP, Caching & CDN, version 1.0.1. 38 lines.

- Page: https://pluginprobe.com/plugins/xspeed/1.0.1/code/tests-js/components/StatCard.test.tsx
- Raw: https://pluginprobe.com/plugins/xspeed/1.0.1/raw/tests-js/components/StatCard.test.tsx
- Modified: 2026-06-01T17:33:22+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/xspeed/1.0.1/code/tests-js/components/StatCard.test.tsx#L10-L20`.

```tsx
import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Database } from 'lucide-react';
import { StatCard } from '../../src/components/StatCard';

describe('StatCard', () => {
  it('renders label and value', () => {
    render(<StatCard label="Cached Pages" value="47" />);
    expect(screen.getByText('Cached Pages')).toBeInTheDocument();
    expect(screen.getByText('47')).toBeInTheDocument();
  });

  it('uses the design-system eyebrow type size on the label (11px uppercase tracking-wider)', () => {
    render(<StatCard label="Cache Size" value="1.2 MB" />);
    const label = screen.getByText('Cache Size');
    expect(label.className).toMatch(/text-\[11px\]/);
    expect(label.className).toMatch(/uppercase/);
    expect(label.className).toMatch(/tracking-wider/);
  });

  it('uses the 22px stat-value type size', () => {
    render(<StatCard label="Hits" value="92%" />);
    const value = screen.getByText('92%');
    expect(value.className).toMatch(/text-\[22px\]/);
    expect(value.className).toMatch(/font-semibold/);
  });

  it('renders without an icon when none is provided', () => {
    const { container } = render(<StatCard label="X" value="Y" />);
    expect(container.querySelector('svg')).toBeNull();
  });

  it('renders the icon when supplied', () => {
    const { container } = render(<StatCard label="X" value="Y" icon={Database} />);
    expect(container.querySelector('svg')).not.toBeNull();
  });
});

```