119 lines
3.4 KiB
TypeScript
119 lines
3.4 KiB
TypeScript
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();
|
|
});
|
|
});
|