Имитационный импорт лениво загруженного автономного компонента
У меня есть компонент, который представляет собой кнопку, которая при нажатии будет лениво импортировать автономный компонент, а затем передавать его службе, которая будет создана внутри заполнителя ng-template.
Метод, вызываемый при нажатии кнопки, выглядит следующим образом:
protected async toggleHelpDrawer(): Promise<void> {
await import('@myorg/shared-feature-help').then(ref => {
(this._drawerEvents.drawerOpen && this._drawerEvents.drawerType === this.drawerType)
? this._drawerEvents.closeDrawer()
: this._drawerEvents.openDrawer(ref.HelpComponent, this.drawerType);
});
}
Я пытаюсь создать модульный тест для этого компонента, который будет издеваться над методами DrawerEventsService и шпионить за методами openDrawer и closeDrawer.
Проблема, с которой я столкнулся, заключается в том, что внутри HelpComponent есть такие элементы, как @ViewChild и импорт Router. При запуске модульного теста я получаю ошибки о том, что эти атрибуты не определены и т. д.
Я хочу использовать ng-mocks, чтобы просто издеваться над HelpComponent, однако я не знаю, как имитировать компонент, возвращаемый в результате динамического импорта, и мне не удалось найти примеры в Интернете.
Итак, есть ли какой-нибудь способ с помощью TestBed гарантировать, что значение, возвращаемое из моего async import, имеет тип MockComponent(HelpComponent)?
Ответы 2
Вы можете импортировать весь модуль, а затем использовать spyOnProperty, чтобы изменить возвращаемое значение свойства.
import * as sharedFeatureHelp from "@myorg/shared-feature-help";
...
...
beforeEach(() => {
...
spyOnProperty(sharedFeatureHelp, "HelpComponent").and.returnValue({} as any);
...
});
...
Согласно
В моем файле test-setup.ts я могу имитировать оператор импорта следующим образом:
jest.spyOn(MockService(DrawerEventsService), 'openDrawer');
jest.spyOn(MockService(DrawerEventsService), 'closeDrawer');
jest.mock('@myorg/shared-feature-help', () => {
return {
__esModule: true,
HelpComponent: () => 'MockedHelpComponent'
};
});
Целью было имитировать сам оператор динамического импорта, не вводя каких-либо явных зависимостей к HelpComponent.
Насколько я понимаю, это решение имитирует команду import, так что значение ref.HelpComponent представляет собой строку, а не фактический компонент.
И это работает, потому что мой метод openDrawer() имеет тип
openDrawer(component: Type<unknown>, type: DrawerTypes): void {
this._drawerType$.next(type);
this._drawerContainer?.createComponent(component);
}
Это позволяет мне теперь правильно отслеживать метод openDrawer и проверять, что он был вызван один раз, как и ожидалось.
К сожалению, ваше решение мне не подошло, поскольку оно вводит явную зависимость от HelpComponent через ваш оператор импорта. Я опубликовал ответ и решение, полученное от ChatGPT.