is-route.directive.spec.ts

import {DebugElement, NO_ERRORS_SCHEMA} from '@angular/core';
import {Location} from '@angular/common';
import {Router} from '@angular/router';
import {By} from '@angular/platform-browser';
import {RouterTestingModule} from '@angular/router/testing';

import {
  async,
  ComponentFixture,
  TestBed
} from '@angular/core/testing';

import {UnitTestComponent} from './unit-test/unit-test.component';
import {IsRouteDirective} from '@directives/is-route.directive';

class RouterStub {
  navigateByUrl(url: string) {
    return url;
  }
}

class LocationStub {
  path(url: string) {
    return url;
  }
}

describe('IsRouteDirective', () => {

  let component: UnitTestComponent;
  let fixture: ComponentFixture<UnitTestComponent>;
  let debugElement: HTMLDivElement;
  let location: Location;
  let router: Router;

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([
          {path: '', component: UnitTestComponent},
          {path: 'test', component: UnitTestComponent}
        ])
      ],
      declarations: [
        UnitTestComponent,
        IsRouteDirective
      ],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        {provide: Location, useValue: LocationStub},
        {provide: Router, useValue: RouterStub}
      ]
    });

    fixture = TestBed.createComponent(UnitTestComponent);
    component = fixture.componentInstance;
    router = TestBed.get(Router);
    location = TestBed.get(Location);
  });

  it('should not have an "is-route" class if the route is not /test', () => {
    expect(location.path()).toBe('/');
    expect(debugElement.classList.contains('is-route')).toBe(false);
  });

  it('should apply an is-route class if the route is /test', async(() => {

    router.navigateByUrl('/test').then(() => {

      debugElement = fixture.debugElement.query(By.directive(IsRouteDirective)).nativeElement;

      expect(debugElement.classList.contains('is-route')).toBe(true);
      expect(location.path()).toBe('/test');
    });
  }));
});