В чем разница между провайдерами и декларациями на TestBed

Я новичок в Angular. У меня есть несколько вопросов при изучении TDD Angular.

Насколько я знаю, TestModuleMetadata для Testbed.configureTestingModule — это объект, который имеет провайдера, объявления и импорты и т. д., как объект для @ngModule.

Поэтому я подумал, что если я хочу протестировать компонент, все, что мне нужно сделать, это поместить компонент в поставщиков TestModuleMetaData.

Но это привело к ошибке типа «Нет провайдера для SomeComponent!» и «StaticInjectorError[SomeComponent]:»

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

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

Я ошибаюсь??

    import { TestBed } from "@angular/core/testing";
    import { WelcomeComponent } from "./welcome.component";
    import { UserService } from "../user.service";

    describe("WelcomeComponent", () => {
      let comp: WelcomeComponent;
      let userService: UserService;

      beforeEach(() => {
        // This work correctly
        TestBed.configureTestingModule({
          providers: [UserService, WelcomeComponent]
        });

        // This doesn't work
        // TestBed.configureTestingModule({
        //   declarations: [WelcomeComponent],
        //   providers: [UserService]
        // });

        comp = TestBed.get(WelcomeComponent);
        userService = TestBed.get(UserService);
      });

      it("should not have welcome message after construction", () => {
        expect(comp.welcome).toBeUndefined();
      });

      it("should welcome logged in user after Angular calls ngOnInit", () => {
        comp.ngOnInit();
        expect(comp.welcome).toContain(userService.user.name);
      });

      it("should ask user to log in if not logged in after ngOnInit", () => {
        userService.isLoggedIn = false;
        comp.ngOnInit();
        expect(comp.welcome).not.toContain(userService.user.name);
        expect(comp.welcome).toContain("log in");
      });
    });

person Jangchun Lee    schedule 13.02.2020    source источник
comment
Вы правильно поняли, declarations для компонентов и providers для служб. Не могли бы вы опубликовать код, который доставляет вам проблемы?   -  person Daniel    schedule 13.02.2020
comment
Да, я только что опубликовал свой код, спасибо за интерес   -  person Jangchun Lee    schedule 13.02.2020


Ответы (1)


В вашем тестовом коде у вас есть:

comp = TestBed.get(WelcomeComponent);

Это для поиска сервисов, которые уже созданы. Вместо этого вам нужно создать свой компонент:

comp = TestBed.createComponent(WelcomeComponent);
person Daniel    schedule 13.02.2020
comment
Спасибо за Ваш ответ. Но, поскольку я получаю компонент, используя метод get ранее, возможно ли внедрить компонент, добавив поставщика, например службу? - person Jangchun Lee; 13.02.2020
comment
Я не совсем понимаю ваш вопрос. Но помните, что declarations — это то место, куда должны идти компоненты. Если вам нужен образец работающего тестового примера, выполните ng generate component hello И будет создан файл hello.component.spec.ts, который вы можете использовать в качестве шаблона. - person Daniel; 13.02.2020