Недавно я пытался использовать жасмин для некоторого модульного тестирования пользовательского веб-компонента, который использует теневой домен.
Компонент получает текстовое свойство и передает его дочернему элементу для использования в качестве его текстового содержимого. Я пытаюсь убедиться, что textContent является тем, чем оно должно быть.
Каждый раз, когда я пытаюсь получить доступ к shadowRoot
моего компонента, чтобы затем получить доступ к его дочерним элементам, он просто возвращает ноль.
Я упростил некоторые имена, но код тот же.
Компонент:
@Component({
tag: 'my-button',
styleUrl: 'my-button.css',
shadow: true,
})
export class MyButton {
@Prop() text: string;
@Prop() iconName: string;
@Prop() url: string;
render() {
return (
<div class="button-outer">
<ion-button class="button" expand="block" href={this.url}>
<holo-icon class="button-icon" slotName="icon-only" iconName={this.iconName} />
<p class="button-label">{this.text}</p>
</ion-button>
</div>
);
}
}
HTML:
<my-button
text="Test"
icon-name="assets/svg/test-icon.svg"
url="/test"
></my-button>
Тест: (TestBed настроен как обычно - асинхронный)
describe('has the expected html tags', () => {
let buttons;
beforeEach(() => {
button = page.querySelector('my-button');
});
it('has text "Test"', () => {
const label = button.shadowRoot.querySelector('div > ion-button > p');
expect(label.textContent).toBe('Test');
});
}
Результат кармы:
TypeError: Cannot read property 'querySelector' of null
Веб-компонент был разработан в отдельном проекте и импортирован в виде пакета npm, если это имеет какое-то значение?
Я могу создать элемент в тесте и прикрепить к нему теневой корень, и я могу получить доступ и прочитать его содержимое в порядке, но не фактические элементы, которые принадлежат компоненту внешней страницы, который я тестирую.
Это действительно блокирует меня на других тестах, которые используют теневой дом тоже. Все, что я могу найти, это ответы, предлагающие fixture.detectChanges()
, но это, похоже, ничего не делает.
Кто-нибудь сталкивался с этим или есть обходной путь или что-нибудь? Буду очень признателен:)
EDIT
Я бы просто запросил атрибут text
моего компонента, если бы знал, как его сохранить, но он просто заменяется на _ngcontent-c##=""