Тестирование в Angular с сервисной зависимостью - PullRequest
Новая
       16

Тестирование в Angular с сервисной зависимостью

0 голосов
/ 14 марта 2019

Я пытаюсь написать свой первый тест Angular 6.У меня есть компонент, который возвращает список компаний из службы.

Это выглядит так:

Шаблон 

 <div *ngFor="let company of this.companies">
  <h4 id="company-{{company.id}}>{{company.name}}</h4>
 </div>

Component.ts 

import { ApiService } from '../service/api.service';

ngOnInit(): void {
  this.companies = this.apiService.getCompanies();
}

Сервис 

import { COMPANYLIST } from '../companyList';

companyList = COMPANYLIST;

public getCompanies(): Company[] {
  return this.companyList;
}

Я хотел бы проверить, могу ли я видеть список Компаний в компоненте.В моих спецификациях я пытался добавить поддельную apiService согласно https://angular.io/guide/testing#component-with-a-dependency, но безуспешно.

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

  it("should show the list of Companies", () => {
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector("company-" + this.company.id).textContent).toContain("Mock Company");
  });

Ответы [ 3 ]

0 голосов
/ 14 марта 2019

Вы можете издеваться над вашим сервисом: 

export class MockCompanyService {

  getCompanies: Spy;

  constructor(config) {
    this.getCompanies = jasmine.createSpy('getCompanies').and.callFake(() => config.companies);
   }
}

В своем тесте вы дадите вам companies макет, чтобы при вызове вашей функции отображались ваши компании .:

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

  const mockCompanies = [
     ...
  ]; 

  beforeEach(async(() => {
    return TestBed
      .configureTestingModule({
        declarations: [
          CompanyComponent
        ],
        imports: [],
        providers: [
          {
            provide: ComponentFixtureAutoDetect,
            useValue: true
          }
        ]
      })
      .overrideComponent(CompanyComponent, {
        set: {
          providers: [
            {provide: CompanyService, useValue: new MockCompanyService(mockCompanies)}
          ]
        }
      })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(CompanyComponent);
        component = fixture.debugElement.componentInstance;
        element = fixture.debugElement.nativeElement;
      });
  }));


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

  it('...', () => {

  });
});
0 голосов
/ 14 марта 2019

в вашем примере модульный тест должен быть довольно простым для реализации.

Это должно быть что-то вроде этого: 

describe("path", () => {

   let component: Component; 
   let fixture: ComponentFixture<Component>
   let service: Service;

   beforeEach(() => {
     TestBed.configureTestingModule({
      declarations: [Component],
      providers: [Service]
    });

    fixture = TestBet.CreateComponent(Component)
    service = TestBed.get(Service)
   });

   afterEach(() => {
     fixture.destroy();
   });

   it("Component_Method_WhatDoYouExpect", () => {
      let testCompanies = [{c1}....];

      let spy = spyOn(service, "getCompanies").and.returnValue(testCompanies);

      component.ngOnInit();

      expect(spy).toHaveBeenCalled();
      expect(component.companies).toEqual(testCompanies);
   });
});

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

service.companyList = [c1, c2 ...]

let res = service.GetCompanies ();

ожидать (разрешения) .toEqual (service.companyList);

Здесь вы можете найти больше информации о TestBed и модульных тестах.

0 голосов
/ 14 марта 2019

Стратегия заключается в добавлении объекта-заполнителя для вашего сервиса.В тесте получите ссылку на этот объект-заполнитель, а затем добавьте к нему ложную функциональность, которая будет вызываться при тестировании компонента.

Пример ( Я пропустил код, который не иллюстрирует точку, которую я пытаюсьсделать ) 

import { ApiService } from '../service/api.service';

describe('CompaniesComponent Tests', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [CompaniesComponent],
            providers: [
                { provide: ApiService, useValue: {} }
            ]
        }).compileComponents();
        TestBed.compileComponents();
        fixture = TestBed.createComponent(CompaniesComponent);
        comp = fixture.componentInstance;
    });


    it("should show the list of Companies", () => {
      // get service and fake a returned company list 
      const apiService = TestBed.get(ApiService) as ApiService;
      apiService.getCompanies = () => ['Mock Company'];

      // you probably need to call ngOnInit on your component so it retrieves the companies from the api service
      comp.ngOnInit();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector("company-" + this.company.id).textContent).toContain("Mock Company");
    });
...