В Angular модульном тесте, как я могу издеваться над целым компонентом, а не только над классом? - PullRequest
Новая
       10

В Angular модульном тесте, как я могу издеваться над целым компонентом, а не только над классом?

1 голос
/ 06 января 2020

Я пытаюсь провести модульное тестирование компонента, использующего субкомпонент. Мне нужно смоделировать подкомпонент, потому что подкомпонент использует Canvas JS для отображения графиков, что не очень хорошо работает с Jest Unit Tests.

Прямо сейчас это используется в моем файле spe c как см. ниже: 

import { SubComponent } from '../shared/components/sub/sub.component';
import { SubComponentMock } from '../shared/mocks/component/SubComponentMocks';
...

  const createComponent = createComponentFactory({
    component: PageComponent,
    declarations: [ViewComponent],
    imports: [],
    providers: [
      { provide: SubComponent, useClass: SubComponentMock },
    ],
  });

  beforeEach(() => {
    jest.restoreAllMocks();
    spectator = createComponent();
  });

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

Мой файл SubComponentMocks содержит класс SubComponentMock, функции которого находятся в SubComponent. Я получаю следующую ошибку:

Cannot find module 'canvasjs' from 'sub.component.ts'

Не должно ли макет заставить тест вообще не пытаться найти этот модуль? Он не должен ничего делать в sub.component.ts, он должен иметь доступ только к SubComponentMocks. Можно ли смоделировать весь компонент, чтобы тест не пытался найти модуль canvas js?

Ответы [ 2 ]

1 голос
/ 06 января 2020

добавить фиктивный подкомпонент в вашу спецификацию c следующим образом: - 

 @Component({
    selector:'sub'
    })
    class MockComponent{
    mockProperty <----- which being used
    }

, а в компоненте create сделать это: - 

const createComponent = createComponentFactory({
    component: PageComponent,
    declarations: [ViewComponent,MockComponent],
    imports: [],
    providers: [],
  });
0 голосов
/ 06 января 2020

Я знаком с Кармой и Жасмином, но полагаю, что Джест ведет себя одинаково в этом отношении.

В вашем случае использования я бы использовал NO_ERRORS_SCHEMA. Это в основном говорит Angular, если вы видите элемент в HTML, который вы не можете распознать, не беспокойтесь об этом. 

import { NO_ERRORS_SCHEMA } from '@angular/core';
......
const createComponent = createComponentFactory({
    component: PageComponent,
    declarations: [ViewComponent],
    imports: [],
    schemas: [NO_ERRORS_SCHEMA],
  });

То, как вы сейчас издеваетесь над компонентом, как вы будете издеваться над сервисом.

Кроме того, путь Адитьи тоже может сработать, но я считаю NO_ERRORS_SCHEMA лучше (меньше работы, если вы не заботитесь о дочерних компонентах в своих модульных тестах).

Кроме того, посмотрите на overrideComponent и overrideModule, но это возможно, только если вы используете методологию Angular для тестирования.

===== edit == ========

Не берите в голову, кажется, вы используете ngneat для тестирования. Тогда я бы использовал componentMocks свойство, а не schema.

...