igniteui-angular-sovn/src/lib/badge/badge.component.spec.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import { Component, ViewChild } from '@angular/core';
import { TestBed, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { IgxBadgeComponent, IgxBadgeType } from './badge.component';

import { configureTestSuite } from '../test-utils/configure-suite';

describe('Badge', () => {
    configureTestSuite();
    beforeAll(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [
                InitBadgeComponent,
                InitBadgeWithDefaultsComponent,
                InitBadgeWithIconComponent,
                IgxBadgeComponent,
                InitBadgeWithIconARIAComponent
            ]
        }).compileComponents();
    }));

    it('Initializes badge ', () => {
        const fixture = TestBed.createComponent(InitBadgeComponent);
        fixture.detectChanges();
        const badge = fixture.componentInstance.badge;

        expect(badge.value).toBeTruthy();
        expect(badge.type).toBeTruthy();

        expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
        expect(fixture.debugElement.query(By.css('.igx-badge--error'))).toBeTruthy();

        expect(badge.value).toMatch('22');
        expect(badge.type).toMatch('error');
    });

    it('Initializes badge with id', () => {
        const fixture = TestBed.createComponent(InitBadgeComponent);
        fixture.detectChanges();
        const badge = fixture.componentInstance.badge;
        const domBadge = fixture.debugElement.query(By.css('igx-badge')).nativeElement;

        expect(badge.id).toContain('igx-badge-');
        expect(domBadge.id).toContain('igx-badge-');

        badge.id = 'customBadge';
        fixture.detectChanges();

        expect(badge.id).toBe('customBadge');
        expect(domBadge.id).toBe('customBadge');
    });

    it('Initializes badge defaults', () => {
        const fixture = TestBed.createComponent(InitBadgeWithDefaultsComponent);
        fixture.detectChanges();
        const badge = fixture.componentInstance.badge;

        expect(badge.value).toMatch('');
        expect(badge.icon).toBeFalsy();

        expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
        expect(fixture.debugElement.query(By.css('.igx-badge--icon'))).toBeFalsy();
    });

    it('Initializes badge with icon', () => {
        const fixture = TestBed.createComponent(InitBadgeWithIconComponent);
        fixture.detectChanges();
        const badge = fixture.componentInstance.badge;

        expect(badge.icon === 'person').toBeTruthy();
        expect(badge.type === IgxBadgeType.INFO).toBeTruthy();
        expect(badge.value === '').toBeTruthy();

        expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
        expect(fixture.debugElement.query(By.css('.igx-badge--info'))).toBeTruthy();
    });

    it('Initializes badge with icon ARIA', () => {
        const fixture = TestBed.createComponent(InitBadgeWithIconARIAComponent);
        fixture.detectChanges();
        const badge = fixture.componentInstance.badge;

        const expectedDescription = `${badge.type} type badge with icon type ${badge.icon}`;
        expect(badge.roleDescription).toMatch(expectedDescription);

        const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
        expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
    });
});

@Component({
    template: `<igx-badge type="error" value="22"></igx-badge>`,
    standalone: true,
    imports: [IgxBadgeComponent]
})
class InitBadgeComponent {
    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
}

@Component({
    template: `<igx-badge></igx-badge>`,
    standalone: true,
    imports: [IgxBadgeComponent]
})
class InitBadgeWithDefaultsComponent {
    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
}

@Component({
    template: `<igx-badge icon="person" type="info"></igx-badge>`,
    standalone: true,
    imports: [IgxBadgeComponent]
})
class InitBadgeWithIconComponent {
    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
}

@Component({
    template: `<igx-badge icon="person"></igx-badge>`,
    standalone: true,
    imports: [IgxBadgeComponent]
})
class InitBadgeWithIconARIAComponent {
    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
}