tabler-icons/packages/icons-react/test.spec.tsx

import { describe, it, expect, afterEach, expectTypeOf } from 'vitest';
import { render, cleanup } from '@testing-library/react';
import {
  IconAccessible,
  IconAccessibleFilled,
  createReactComponent,
} from './src/tabler-icons-react';
import type { TablerIcon } from './src/types';

describe('React Icon component', () => {
  afterEach(() => {
    cleanup();
  });

  it('should render icon component', () => {
    const { container } = render(<IconAccessible />);
    expect(container.getElementsByTagName('svg').length).toBeGreaterThan(0);
  });

  it('should update svg attributes when there are props passed to the component', () => {
    const { container } = render(<IconAccessible size={48} color={'red'} stroke={4} />);
    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('width')).toBe('48');
    expect(svg.getAttribute('stroke')).toBe('red');
    expect(svg.getAttribute('stroke-width')).toBe('4');
    expect(svg.getAttribute('fill')).toBe('none');
  });

  it('should update svg attributes when there are props passed to the filled version of component', () => {
    const { container } = render(<IconAccessibleFilled size={48} color={'red'} />);
    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('width')).toBe('48');
    expect(svg.getAttribute('fill')).toBe('red');
    expect(svg.getAttribute('stroke')).toBe('none');
    expect(svg.getAttribute('stroke-width')).toBe(null);
  });

  it('should apply all classNames to the element', () => {
    const testClass = 'test-class';
    const { container } = render(<IconAccessible className={testClass} />);

    expect(container.firstChild).toHaveClass(testClass);
    expect(container.firstChild).toHaveClass('tabler-icon');
    expect(container.firstChild).toHaveClass('tabler-icon-accessible');
  });

  it('should not add a trailing space to the class attribute when no className is passed', () => {
    const { container } = render(<IconAccessible />);
    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('class')).toBe('tabler-icon tabler-icon-accessible');
  });

  it('should separate a provided className with a single space', () => {
    const { container } = render(<IconAccessible className="first second" />);
    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('class')).toBe('tabler-icon tabler-icon-accessible first second');
  });

  it('should add a style attribute to the element', () => {
    const { container } = render(<IconAccessible style={{ color: 'red' }} />);

    const svg = container.getElementsByTagName('svg')[0];

    expect(svg).toHaveStyle('color: rgb(255, 0, 0)');
  });

  it('should have proper type', () => {
    expectTypeOf(IconAccessible).toBeFunction();
    expectTypeOf(IconAccessible).toEqualTypeOf(
      createReactComponent('outline', 'accessible', 'Accessible', []),
    );
  });

  it('should match TablerIcon type', () => {
    expectTypeOf(IconAccessible).toMatchTypeOf<TablerIcon>();
    expectTypeOf(IconAccessibleFilled).toMatchTypeOf<TablerIcon>();
  });

  it('should add title child element to svg when title prop is passed', () => {
    const { container } = render(<IconAccessible title="Accessible Icon" />);
    const svg = container.getElementsByTagName('svg')[0];
    const title = svg.getElementsByTagName('title')[0];

    expect(title).toHaveTextContent('Accessible Icon');
  });

  it('should match snapshot', () => {
    const { container } = render(<IconAccessible />);
    expect(container.innerHTML).toMatchInlineSnapshot(`
      <svg xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewbox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="tabler-icon tabler-icon-accessible"
      >
        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
        </path>
        <path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1">
        </path>
        <path d="M11.5 7.5a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0"
              fill="currentColor"
        >
        </path>
      </svg>
    `);
  });
});