lucide/packages/vue/tests/context.spec.ts

import { render } from '@testing-library/vue';
import { describe, expect, it } from 'vitest';
import { defineComponent } from 'vue';
import { House, setLucideProps } from '../src/lucide-vue';
// @ts-ignore
import ContextWrapper from './ContextWrapper.vue';

describe('Using lucide icon context', () => {
  it('should render the icon with LucideProvider', () => {
    const { container } = render(ContextWrapper);

    expect(container.firstChild).toMatchSnapshot();
  });

  it('should render the icon with LucideProvider and custom strokeWidth', () => {
    const { container } = render(ContextWrapper);

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('width', '48');
    expect(IconComponent).toHaveAttribute('height', '48');
    expect(IconComponent).toHaveAttribute('stroke', 'red');
    expect(IconComponent).toHaveAttribute('stroke-width', '4');
  });

  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
    const { container } = render(ContextWrapper);

    const IconComponent = container.firstElementChild;
    expect(IconComponent).toHaveAttribute('width', '48');
    expect(IconComponent).toHaveAttribute('height', '48');
    expect(IconComponent).toHaveAttribute('stroke', 'red');
    expect(IconComponent).toHaveAttribute('stroke-width', '4');
  });

  it('should update when reactive lucide context props change', async () => {
    const wrapper = defineComponent({
      components: { House },
      props: {
        size: Number,
      },
      setup(props) {
        setLucideProps(props);
      },
      template: '<House />',
    });

    const { container, rerender } = render(wrapper, { props: { size: 24 } });

    expect(container.firstElementChild).toHaveAttribute('width', '24');
    expect(container.firstElementChild).toHaveAttribute('height', '24');

    await rerender({ size: 48 });

    expect(container.firstElementChild).toHaveAttribute('width', '48');
    expect(container.firstElementChild).toHaveAttribute('height', '48');
  });

  it("should override the provider's global props when passing props to the icon", () => {
    const { container } = render(ContextWrapper, {
      props: {
        strokeWidth: 1,
        color: 'blue',
        size: 24,
      },
    });

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('width', '24');
    expect(IconComponent).toHaveAttribute('height', '24');
    expect(IconComponent).toHaveAttribute('stroke', 'blue');
    expect(IconComponent).toHaveAttribute('stroke-width', '1');
  });

  it('should merge className from provider and icon', () => {
    const { container } = render(ContextWrapper, {
      props: {
        class: 'icon-class',
      },
    });

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute(
      'class',
      'lucide lucide-house lucide-home provider-class icon-class',
    );
  });
});