ISA-Frontend/libs/ui/buttons/src/lib/button.component.spec.ts

import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
import { ButtonComponent } from './button.component';
import { NgIconComponent } from '@ng-icons/core';
import { ButtonColor, ButtonSize } from './types';

describe('ButtonComponent', () => {
  let spectator: Spectator<ButtonComponent>;
  const createComponent = createComponentFactory({
    component: ButtonComponent,
    imports: [NgIconComponent],
  });

  beforeEach(() => {
    spectator = createComponent();
  });

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  it('should set default input values', () => {
    expect(spectator.component.size()).toBe('medium');
    expect(spectator.component.color()).toBe('primary');
    expect(spectator.component.pending()).toBe(false);
    expect(spectator.component.tabIndex()).toBe(0);
  });

  it('should apply correct size classes', () => {
    const sizes: ButtonSize[] = ['small', 'medium', 'large'];

    sizes.forEach((size) => {
      spectator.setInput('size', size);
      expect(spectator.element).toHaveClass(`ui-button__${size}`);
    });
  });

  it('should apply correct color classes', () => {
    const colors: ButtonColor[] = ['primary', 'secondary', 'tertiary'];

    colors.forEach((color) => {
      spectator.setInput('color', color);
      expect(spectator.element).toHaveClass(`ui-button__${color}`);
    });
  });

  it('should update tabIndex in DOM', () => {
    spectator.setInput('tabIndex', -1);
    expect(spectator.element.tabIndex).toBe(-1);
  });

  it('should show loading icon when pending', () => {
    spectator.setInput('pending', true);
    const loadingIcon = spectator.query('ng-icon[name="isaLoading"]');
    expect(loadingIcon).toExist();
  });

  it('should have base button class', () => {
    expect(spectator.element).toHaveClass('ui-button');
  });

  it('should combine all classes correctly', () => {
    spectator.setInput({
      size: 'large',
      color: 'secondary',
    });

    expect(spectator.element).toHaveClass('ui-button');
    expect(spectator.element).toHaveClass('ui-button__large');
    expect(spectator.element).toHaveClass('ui-button__secondary');
  });
});