У меня есть директива Angular, которая показывает элемент, если у пользователя есть соответствующие разрешения. Я хочу проверить это с помощью Jest.
Я хотел бы изменить шаблон макетного компонента для каждого теста; один тест с действительным разрешением и другой тест с недействительным разрешением.
Я пытаюсь использовать метод overrideComponent
для переопределения шаблона для каждого теста, но он не работает вообще.
Это файл spe c:
@Component({
template: `<div></div>`
})
class TestDirectiveComponent {}
describe('Directive: pbmHasPermission', () => {
let component: TestDirectiveComponent;
let fixture: ComponentFixture<TestDirectiveComponent>;
const mockAuthService = {
getPermissions: jest
.fn()
.mockReturnValue([{ name: 'read_protocol' }, { name: 'add_protocol' }, { name: 'delete_protocol' }])
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestDirectiveComponent, HasPermissionDirective],
providers: [
{
provide: AuthService,
useValue: mockAuthService
}
]
}).compileComponents();
}));
it('should show the element', () => {
const template = `<button type="button" *pbmHasPermission="'add_protocol'">Add protocol</button>`;
TestBed.overrideComponent(TestDirectiveComponent, { set: { template: template } });
fixture = TestBed.createComponent(TestDirectiveComponent);
fixture.detectChanges();
component = fixture.componentInstance;
expect(component).toBeTruthy();
console.log(fixture.nativeElement.innerHTML); // prints <div></div> instead of the new template
});
});
Я пробовал много вариантов (используя overrideTemplate
, компилируя компоненты, используя then
для выполнения после него ...) , что только затруднит чтение вопроса, поэтому я готов попробовать все, что вы предложите, даже если бы я уже пробовал.
Я использую Angular 8 и Jest 24.
Это что-то вроде проблемы с конфигурацией? Это потому что я использую Jest? Я что-то не так делаю?