fix: add missing tests

Author: craigyu

frontend/src/__test__/components/Avatar.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import Avatar from '@/components/Avatar';
+import '@testing-library/jest-dom';
+
+describe('Avatar', () => {
+  it('renders avatar with initial', () => {
+    render(<Avatar initial="J" size="sm" />);
+    expect(screen.getByText('J')).toBeInTheDocument();
+  });
+
+  it('applies size class sm', () => {
+    const { container } = render(<Avatar initial="A" size="sm" />);
+    expect(container.querySelector('.initial-avatar-sm')).toBeInTheDocument();
+  });
+
+  it('applies size class md', () => {
+    const { container } = render(<Avatar initial="B" size="md" />);
+    expect(container.querySelector('.initial-avatar-md')).toBeInTheDocument();
+  });
+
+  it('applies background color class for initial letter', () => {
+    const { container } = render(<Avatar initial="C" size="sm" />);
+    const avatar = container.querySelector('.initial-avatar-sm');
+    expect(avatar).toHaveClass('initial-bg-c');
+  });
+
+  it('applies lowercase color class for uppercase initial', () => {
+    const { container } = render(<Avatar initial="Z" size="sm" />);
+    const avatar = container.querySelector('.initial-avatar-sm');
+    expect(avatar).toHaveClass('initial-bg-z');
+  });
+
+  it('does not apply color class for empty initial', () => {
+    const { container } = render(<Avatar initial="" size="sm" />);
+    const avatar = container.querySelector('.initial-avatar-sm');
+    expect(avatar).not.toHaveClass(/initial-bg-/);
+  });
+
+  it('renders single character initial', () => {
+    render(<Avatar initial="X" size="md" />);
+    expect(screen.getByText('X')).toBeInTheDocument();
+  });
+
+  it('renders first character only when multiple characters provided', () => {
+    render(<Avatar initial="AB" size="sm" />);
+    const element = screen.getByText('AB');
+    expect(element).toHaveClass('initial-bg-a');
+  });
+
+  it('combines size and color classes', () => {
+    const { container } = render(<Avatar initial="M" size="md" />);
+    const avatar = container.querySelector('div');
+    expect(avatar?.className).toMatch(/initial-avatar-md/);
+    expect(avatar?.className).toMatch(/initial-bg-m/);
+  });
+
+  it('renders with different sizes', () => {
+    const { rerender, container } = render(<Avatar initial="T" size="sm" />);
+    expect(container.querySelector('.initial-avatar-sm')).toBeInTheDocument();
+
+    rerender(<Avatar initial="T" size="md" />);
+    expect(container.querySelector('.initial-avatar-md')).toBeInTheDocument();
+  });
+
+  it('handles numeric initial', () => {
+    render(<Avatar initial="1" size="sm" />);
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('handles special character initial', () => {
+    render(<Avatar initial="@" size="md" />);
+    expect(screen.getByText('@')).toBeInTheDocument();
+  });
+
+  it('applies both size class and bg class together', () => {
+    const { container } = render(<Avatar initial="K" size="md" />);
+    const element = container.querySelector('div');
+    expect(element).toHaveClass('initial-avatar-md');
+    expect(element).toHaveClass('initial-bg-k');
+  });
+
+  it('renders with sm size and applies correct classes', () => {
+    const { container } = render(<Avatar initial="S" size="sm" />);
+    const div = container.querySelector('div');
+    expect(div).toHaveClass('initial-avatar-sm', 'initial-bg-s');
+  });
+});

frontend/src/__test__/components/Card/CardContainer.test.tsx

@@ -0,0 +1,125 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import CardContainer from '@/components/Card/CardContainer';
+import '@testing-library/jest-dom';
+
+// Mock Carbon Grid component
+vi.mock('@carbon/react', () => ({
+  Grid: ({ className, children }: any) => (
+    <div data-testid="carbon-grid" className={className}>
+      {children}
+    </div>
+  ),
+}));
+
+describe('CardContainer', () => {
+  it('renders Grid component', () => {
+    render(<CardContainer>Content</CardContainer>);
+    expect(screen.getByTestId('carbon-grid')).toBeInTheDocument();
+  });
+
+  it('renders children content', () => {
+    render(
+      <CardContainer>
+        <span data-testid="child-content">Test Content</span>
+      </CardContainer>
+    );
+    expect(screen.getByTestId('child-content')).toBeInTheDocument();
+  });
+
+  it('applies card-container-grid class', () => {
+    render(<CardContainer>Content</CardContainer>);
+    expect(screen.getByTestId('carbon-grid')).toHaveClass('card-container-grid');
+  });
+
+  it('applies default-grid class', () => {
+    render(<CardContainer>Content</CardContainer>);
+    expect(screen.getByTestId('carbon-grid')).toHaveClass('default-grid');
+  });
+
+  it('applies custom className when provided', () => {
+    render(
+      <CardContainer className="custom-class">
+        Content
+      </CardContainer>
+    );
+    expect(screen.getByTestId('carbon-grid')).toHaveClass('custom-class');
+  });
+
+  it('applies both default and custom classes', () => {
+    render(
+      <CardContainer className="my-custom-class">
+        Content
+      </CardContainer>
+    );
+    const grid = screen.getByTestId('carbon-grid');
+    expect(grid).toHaveClass('card-container-grid');
+    expect(grid).toHaveClass('default-grid');
+    expect(grid).toHaveClass('my-custom-class');
+  });
+
+  it('renders multiple children', () => {
+    render(
+      <CardContainer>
+        <div data-testid="child-1">First</div>
+        <div data-testid="child-2">Second</div>
+        <div data-testid="child-3">Third</div>
+      </CardContainer>
+    );
+    expect(screen.getByTestId('child-1')).toBeInTheDocument();
+    expect(screen.getByTestId('child-2')).toBeInTheDocument();
+    expect(screen.getByTestId('child-3')).toBeInTheDocument();
+  });
+
+  it('renders with no children', () => {
+    const { container } = render(<CardContainer />);
+    expect(container.querySelector('[data-testid="carbon-grid"]')).toBeInTheDocument();
+  });
+
+  it('renders with string children', () => {
+    render(<CardContainer>Just text</CardContainer>);
+    expect(screen.getByText('Just text')).toBeInTheDocument();
+  });
+
+  it('renders with no className', () => {
+    render(<CardContainer>Content</CardContainer>);
+    const grid = screen.getByTestId('carbon-grid');
+    expect(grid.className).toContain('card-container-grid');
+    expect(grid.className).toContain('default-grid');
+  });
+
+  it('combines multiple class names correctly', () => {
+    render(
+      <CardContainer className="first-class second-class">
+        Content
+      </CardContainer>
+    );
+    const grid = screen.getByTestId('carbon-grid');
+    expect(grid).toHaveClass('card-container-grid');
+    expect(grid).toHaveClass('default-grid');
+    expect(grid).toHaveClass('first-class');
+    expect(grid).toHaveClass('second-class');
+  });
+
+  it('renders complex component children', () => {
+    const ComplexChild = () => <div data-testid="complex">Complex Component</div>;
+    render(
+      <CardContainer>
+        <ComplexChild />
+      </CardContainer>
+    );
+    expect(screen.getByTestId('complex')).toBeInTheDocument();
+  });
+
+  it('maintains children order', () => {
+    const { container } = render(
+      <CardContainer>
+        <div data-testid="first">1</div>
+        <div data-testid="second">2</div>
+        <div data-testid="third">3</div>
+      </CardContainer>
+    );
+    const children = container.querySelectorAll('[data-testid^="second"], [data-testid^="first"], [data-testid^="third"]');
+    expect(children.length).toBe(3);
+  });
+});