Жасмин - Не могу получить доступ к shadowRoot пользовательского веб-компонента - PullRequest
0 голосов
/ 17 января 2019

Недавно я пытался использовать жасмин для некоторого модульного тестирования пользовательского веб-компонента, который использует теневой домен. Компонент получает текстовое свойство и передает его дочернему элементу для использования в качестве его текстового содержимого. Я пытаюсь убедиться, что 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##=""

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...