63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { TestBed } from '@angular/core/testing';
|
|
import { beforeEach, describe, expect, it } from 'vitest';
|
|
|
|
import { CartIconComponent } from './cart-icon.component';
|
|
|
|
describe('CartIconComponent', () => {
|
|
beforeEach(async () => {
|
|
await TestBed.configureTestingModule({
|
|
imports: [CartIconComponent],
|
|
}).compileComponents();
|
|
});
|
|
|
|
function setup(quantity?: number | null, disabled = false) {
|
|
const fixture = TestBed.createComponent(CartIconComponent);
|
|
if (quantity !== undefined) {
|
|
fixture.componentRef.setInput('quantity', quantity);
|
|
}
|
|
fixture.componentRef.setInput('disabled', disabled);
|
|
fixture.detectChanges();
|
|
|
|
return {
|
|
fixture,
|
|
element: fixture.nativeElement as HTMLElement,
|
|
};
|
|
}
|
|
|
|
it('renders the cart shopping icon', () => {
|
|
const { element } = setup();
|
|
expect(element.querySelector('.fa-cart-shopping')).not.toBeNull();
|
|
});
|
|
|
|
it('does not render the badge when quantity is undefined', () => {
|
|
const { element } = setup();
|
|
expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
|
|
});
|
|
|
|
it('does not render the badge when quantity is 0', () => {
|
|
const { element } = setup(0);
|
|
expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
|
|
});
|
|
|
|
it('renders the badge with correct quantity when positive', () => {
|
|
const { element } = setup(3);
|
|
const badge = element.querySelector('[data-testid="cart-badge"]');
|
|
expect(badge).not.toBeNull();
|
|
expect(badge?.textContent?.trim()).toBe('3');
|
|
});
|
|
|
|
it('disables the button when disabled is true', () => {
|
|
const { element } = setup(3, true);
|
|
const button = element.querySelector('button');
|
|
expect(button?.disabled).toBe(true);
|
|
expect(button?.classList).toContain('cart-icon--disabled');
|
|
expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
|
|
});
|
|
|
|
it('enables the button when disabled is false', () => {
|
|
const { element } = setup(undefined, false);
|
|
const button = element.querySelector('button');
|
|
expect(button?.disabled).toBe(false);
|
|
});
|
|
});
|