emi-challenge-fe/tests/app/shared/ui/button/button.spec.ts

import { describe, it, expect } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Button } from '@app/shared/ui/button/button';

describe('Button', () => {
  let component: Button;
  let fixture: ComponentFixture<Button>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [Button],
    }).compileComponents();

    fixture = TestBed.createComponent(Button);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should render a button element', () => {
    const button = fixture.nativeElement.querySelector('button');

    expect(button).toBeTruthy();
  });

  it('should apply primary class by default', () => {
    const button = fixture.nativeElement.querySelector('button');

    expect(button.classList.contains('btn--primary')).toBe(true);
  });

  it('should apply outline class when variant is outline', () => {
    fixture.componentRef.setInput('variant', 'outline');
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.classList.contains('btn--outline')).toBe(true);
    expect(button.classList.contains('btn--primary')).toBe(false);
  });

  it('should apply ghost class when variant is ghost', () => {
    fixture.componentRef.setInput('variant', 'ghost');
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.classList.contains('btn--ghost')).toBe(true);
  });

  it('should apply danger class when variant is danger', () => {
    fixture.componentRef.setInput('variant', 'danger');
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.classList.contains('btn--danger')).toBe(true);
  });

  it('should apply sm class when size is sm', () => {
    fixture.componentRef.setInput('size', 'sm');
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.classList.contains('btn--sm')).toBe(true);
  });

  it('should apply lg class when size is lg', () => {
    fixture.componentRef.setInput('size', 'lg');
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.classList.contains('btn--lg')).toBe(true);
  });

  it('should not apply sm or lg class when size is md', () => {
    fixture.componentRef.setInput('size', 'md');
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.classList.contains('btn--sm')).toBe(false);
    expect(button.classList.contains('btn--lg')).toBe(false);
  });

  it('should disable button when disabled is true', () => {
    fixture.componentRef.setInput('disabled', true);
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.disabled).toBe(true);
  });

  it('should set button type', () => {
    fixture.componentRef.setInput('buttonType', 'submit');
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button');

    expect(button.type).toBe('submit');
  });

  it('should emit clicked event on click', () => {
    const spy = vi.fn();
    component.clicked.subscribe(spy);

    const button = fixture.nativeElement.querySelector('button');
    button.click();

    expect(spy).toHaveBeenCalledOnce();
  });
});