nav-item.component.spec.ts

import { getElementFromFixture, Mock, mock } from '@alfa-client/test-utils';
import { importProvidersFrom } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router, RouterModule } from '@angular/router';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { NavItemComponent } from './nav-item.component';

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

  const router: Mock<Router> = mock(Router);

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [NavItemComponent],
      providers: [
        {
          provide: Router,
          useValue: router,
        },
        importProvidersFrom(RouterModule.forRoot([])),
      ],
    }).compileComponents();

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

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

  describe('input', () => {
    describe('caption', () => {
      it('should set link text', () => {
        component.caption = 'Test caption';
        fixture.detectChanges();

        const captionElement: HTMLParagraphElement = getElementFromFixture(
          fixture,
          getDataTestIdOf('link-caption'),
        );

        expect(captionElement.innerHTML).toBe('Test caption');
      });
    });

    describe('to', () => {
      it('should set href', () => {
        component.to = '/';
        fixture.detectChanges();

        const linkElement: HTMLAnchorElement = getElementFromFixture(
          fixture,
          getDataTestIdOf('link-to-/'),
        );

        expect(linkElement).toHaveProperty('href');
      });
    });
  });

  describe('template', () => {
    describe('host element role attribute', () => {
      it('should be "menuitem"', () => {
        expect(fixture.nativeElement.getAttribute('role')).toBe('menuitem');
      });
    });
  });
});