CucumberJS, транспортир и Angular 5 макетные услуги - PullRequest
Новая
       10

CucumberJS, транспортир и Angular 5 макетные услуги

0 голосов
/ 01 мая 2018

Я пытаюсь сделать несколько тестов на огурец, используя транспортир с моим угловым приложением. Я не уверен, как издеваться над моими услугами. Я хочу, чтобы мои компоненты использовали мой фиктивный сервис всякий раз, когда они вызывают функции из них.

Вот простой пример:

foobar.component.ts 

import { Component, OnInit } from '@angular/core';
import { TestService } from '../../../services/test.service';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
    myDataObject: any;

    constructor(private testService: TestService) {
        this.myDataObject = this.testService.getTestObject();
    }

    ngOnInit() {}
}

test.service.ts 

import { Injectable } from '@angular/core';

@Injectable()
export class TestService {
    constructor() {}

    getTestObject(): any {
        return {
            'foo': 1,
            'bar': 2
        }
    }
}

foobar.step.ts 

import { browser, element, by } from 'protractor';
const { Before, Given, When, Then, defineSupportCode } = require('cucumber');
const chai = require('chai').use(require('chai-as-promised'));
const expect = chai.expect;

defineSupportCode(function ({ setDefaultTimeout }) {
    setDefaultTimeout(120 * 1000);
});

Before(() => {
    // Setup a mock service and use the values I set here. In this case I would want to mock out whatever TestService.getTestObject() returns and have my component use the mock values.
}

Given('some test here', (next) => {
    next();
});

When('the page loads', (next) => {
    browser.get('/').then(function () {
        next();
    });
});

Then('some text here', (next) => {
    // Use mock values and create expect statement to see if something was shown on the page.
});

Причина, по которой я хочу это сделать, заключается в том, что мои шаблоны зависят от значений объектов, которые мои службы возвращают, чтобы определить, должны ли отображаться некоторые блоки div или нет.

Как я могу издеваться над своим сервисом, и чтобы мой компонент использовал его в моих тестах на транспортир? Любая помощь будет оценена. Спасибо!

1 Ответ

0 голосов
/ 01 мая 2018

Как сказано в комментариях, вы не используете TestBed для mocking Services в E2E-тестах, но вы можете переключать среды при выполнении тестов, таким образом предоставляя полные mock-сервисы: 

@NgModule({
  imports: [...],
  providers: [
    {
      provide: AbstractService,
      useClass: (environment.mockService ? TestService : RealService) // both extend AbstractService
    }
  ],
  declarations: ...,
  exports: ...
})
export class MyModule {}

и в package.json (необходимо настроить окружение с помощью собственного файла и подключить его также к angular-cli.json) ... 

"test": "ng test --env=unit-test",
...