Угловой шпион Jasmine не называют

Я следую официальному руководству по Angular, чтобы протестировать компонент, который вызывает функцию асинхронной службы: https://angular.io/guide/testing#component-with-async-service

Создание шпиона:

const gardenSpy = jasmine.createSpyObj('GardenService', ['getGardens', 'createGarden']);
gardenSpy.getGardens.and.returnValue(of(testGardens));
...
gardenServiceSpy = TestBed.get(GardenService);

Настройка TestBed для использования моего шпиона вместо фактического сервиса:

TestBed.configureTestingModule({
  declarations: [ MyGardensComponent ],
  providers: [
    { provide: GardenService, useValue: gardenSpy }
  ],
  imports: [FormsModule, HttpClientTestingModule]
})
.compileComponents();

Затем модульный тест, который не работает:

it('should load the gardens', () => {
  fixture.detectChanges();
  component.getGardens();

  expect(gardenServiceSpy.getGardens.calls.any()).toBe(true, 'getGardens called');
});

Как вы можете видеть из отчета о покрытии здесь, метод подписки никогда не выполняется, и утверждение шпиона не выполняется.

отчет о покрытии

Согласно руководству по Angular, этот метод должен работать и позволить мне синхронно возвращать наблюдаемое. Вызов метода шпиона вручную работает и возвращается правильно, поэтому я предполагаю, что проблема связана с внедрением службы шпионажа, а не с созданием самого шпиона. Любая помощь будет оценена по достоинству!

Если вам нужно просмотреть все файлы, я сделал здесь плункер (на самом деле он не запускается, просто чтобы посмотреть файлы)


angular jasmine karma-jasmine angular-test
person Kevin Bartushak    schedule 16.11.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Спасибо, что предоставили весь свой код в Plunker. Я действительно переместил его в Stackblitz Чтобы я мог точно видеть, что вы видите, и смотреть, как это работает. Мне пришлось отключить службу, но это не имеет значения, так как вы все равно заменяете ее шпионской.

Я заставил это работать, закомментировав строку провайдеров в вашем my-gardens.component.ts файле в разделе @Component:

@Component({
  selector: 'app-my-gardens',
  templateUrl: './my-gardens.component.html',
  styleUrls: ['./my-gardens.component.css'],
  // providers: [GardenService, NgbModal]
})

Это фактически заменяло шпион оригинальной службой. Была ли причина, по которой вы поместили строку поставщиков именно туда, а не в module.ts?

Как вы можете видеть в Stackblitz, тест теперь проходит, и вызывается код подписки (проверьте журнал консоли).

person dmcgrandle    schedule 16.11.2018
comment
Ах я вижу. Так я и узнал, и мне было лень менять их на предоставление их в модулях. Спасибо за вашу помощь, я внесу это изменение и расскажу, как оно пойдет! - person Kevin Bartushak; 16.11.2018
comment
@dmcgrandle Спасибо .. Ваш подход мне помог .. :) - person Cegone; 26.12.2019
comment
Я просто часами пытался понять, почему мой тестовый пример не работает. Я видел, что он попал в линию для вызова метода службы, но шпион так и не тронулся. Ответ был очень оценен. - person Chris; 22.06.2020
comment
Не могли бы вы объяснить, почему тест не работает, если поставщик установлен в файле ts? Есть ли способ оставить поставщика внутри ts файла без перезаписи поставщиков тестов? - person JB17; 11.03.2021