Test code example

test-example.ts

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

import { PolicyDirective } from './policy.directive';
import { SettingsService } from '../../services/settings.service';

@Component({
  selector: 'app-container-spec',
  template: `<button [appPolicy]="settings"><p>Test</p></button>`
})
export class ContainerComponent {
  @Input() public settings;
}


@Injectable()
export class StubSettingsService {

  public permissions: any;

  constructor() {
    this.permissions = {
      websites: {
        index: true,
        create: true
      },
      accounts: {
        index: false,
        create: false
      }
    }
  }
}


describe('Directive: appPolicy', () => {
  let fixtureComponent: ComponentFixture<any>;
  let fixtureInstance: any;
  let fixtureElement: HTMLElement;

  describe('with one resource as settings', () => {

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [ ContainerComponent, PolicyDirective ],
        providers: [
          { provide: SettingsService, useClass: StubSettingsService },
        ]
      });

      fixtureComponent = TestBed.createComponent(ContainerComponent);
      fixtureInstance = fixtureComponent.componentInstance;
      fixtureElement = fixtureComponent.nativeElement;
    });

    it('should disable element', async(() => {
      fixtureInstance.settings = {resource: 'accounts', action: 'create', html: 'disable'};
      fixtureComponent.detectChanges();
      fixtureComponent.whenStable().then(() => {
        expect(fixtureElement.querySelector('div button')['disabled']).toBe(true);
      });
    }));

    it('should hide element', async(() => {
      fixtureInstance.settings = {resource: 'accounts', action: 'index', html: 'hide'};
      fixtureComponent.detectChanges();
      fixtureComponent.whenStable().then(() => {
        expect(fixtureElement.querySelector('div button').innerHTML).toBe('');
      });
    }));

    it('should pass element', async(() => {
      fixtureInstance.settings = {resource: 'websites', action: 'index', html: 'hide'};
      fixtureComponent.detectChanges();
      fixtureComponent.whenStable().then(() => {
        expect(fixtureElement.querySelector('div button').innerHTML).toEqual(`<p>Test</p>`);
      });
    }));
  })

  describe('with array of resources as settings', () => {

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [ ContainerComponent, PolicyDirective ],
        providers: [
          { provide: SettingsService, useClass: StubSettingsService },
        ]
      });

      fixtureComponent = TestBed.createComponent(ContainerComponent);
      fixtureInstance = fixtureComponent.componentInstance;
      fixtureElement = fixtureComponent.nativeElement;
    });

    it('should disable element', async(() => {
      fixtureInstance.settings = {settings: [{websites: ['index']}, {accounts: ['index']}], html: 'disable'};
      fixtureComponent.detectChanges();
      fixtureComponent.whenStable().then(() => {
        expect(fixtureElement.querySelector('div button')['disabled']).toBe(true);
      });
    }));

    it('should hide element', async(() => {
      fixtureInstance.settings = {settings: [{websites: ['index']}, {accounts: ['index']}], html: 'hide'};
      fixtureComponent.detectChanges();
      fixtureComponent.whenStable().then(() => {
        expect(fixtureElement.querySelector('div button').innerHTML).toBe('');
      });
    }));

    it('should pass element', async(() => {
      fixtureInstance.settings = {settings: [{websites: ['index']}], html: 'hide'};
      fixtureComponent.detectChanges();
      fixtureComponent.whenStable().then(() => {
        expect(fixtureElement.querySelector('div button').innerHTML).toEqual(`<p>Test</p>`);
      });
    }));
  })
})