mardi 25 avril 2017

Testing Services with Service Dependencies

I am having trouble finding the correct solution for testing services with other services as dependencies. The service I am testing calls a getter method on another service which returns a list of tasks. This is the service I am testing:

Service Testing:

export class TasksData {
  public tasks = [];
  public tasksData = [
    {
      'form': 'setup-device',
      'type': 'register-device',
      'text': 'Register Device',
      'icon': 'mdi-cellphone-link',
      'status': ''
    },
    {
      'form': 'setup-eula',
      'type': 'confirm-eula',
      'text': 'Agree to EULA',
      'icon': 'mdi-pen',
      'status': ''
    },
    {
      'form': 'setup-change-password',
      'type': 'change-password',
      'text': 'Change Password',
      'icon': 'mdi-lock-reset',
      'status': ''
    },
    {
      'form': 'setup-profile',
      'type': 'register-profile',
      'text': 'Register Profile',
      'icon': 'mdi-account-plus',
      'status': ''
    }
  ];

  constructor(private setupManager: SetupManagerService) {}

  public getter() {
    let data = [];
    this.tasks = this.setupManager.getter();

    data = this.tasksData.filter((task) => {
      return (this.tasks.indexOf(task.type)) !== -1;
    });

    return data;
  }
}

Dependency Service:

export class SetupManagerService {
  private message: string;
  private redirect = '';
  private tasks: any = [];
  private clone: any = [];
  private user: Object = {};

  public taskChange = new Subject();

  constructor(
    private closeModal: CloseModalService,
    private pubsub: Pubsub,
    private reloadStatus: ReloadStatusService,
    private router: Router,
    private storage: HTML5Storage
  ) {}

  // ===== Removed code for brevity ===== //

  public getter() {
    return this.clone;
  }
}

Test:

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

// Test Case:
import { TasksData } from '../tasks-data.service';

// Dependencies:
import { SetupManagerService } from '../setup-manager.service';

let ds = [{
  'form': 'setup-device',
  'type': 'register-device',
  'text': 'Register Device',
  'icon': 'mdi-cellphone-link',
  'status': ''
}];

class SetupManagerServiceStub {
  getter() {
    return ['register-device'];
  }
}

fdescribe('Service TaskData', () => {
  let subject = TasksData;
  let setupManager;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        TasksData,
        { provide: SetupManagerService, useClass: SetupManagerServiceStub }
      ]
    });

    subject = TestBed.get(TasksData);
    setupManager = TestBed.get(SetupManagerService);
  });

  it('should create an instance', () => {
    expect(subject).toBeDefined();
  });

  it('should...  ', () => {
    expect(subject.getter()).toEqual(ds);
  });
});

I tried many different examples of how to do this online but most of them do not work, likely because they are no longer valid due to Angular's changes prior to the final release.

The TasksData service has SetupManagerService as a dependency. So in order to avoid having to add all the SetupManagerService dependencies I created a stub class with the getter method and I returned to expected value needed to test the TaskData service.

First of all I am not sure if this is even the correct way to do this. Angular's Test Docs have no examples of how to test services with service dependencies using the TestBed Module. This is my best working result from an entire day of trying.

My question as to whether this is correct or not is only part of my problem. The other problem is Typescript is complaining about what I did and I have not found a way to fix this.

Even though to tests pass I get the following error:

enter image description here

And this ugly red underline warning in my editor:

enter image description here

Aucun commentaire:

Enregistrer un commentaire