Stencil
Stencil - это библиотека для создания многократно используемых, масштабируемых библиот ек компонентов. Вы можете тестировать компоненты Stencil непосредственно в реальном браузере с помощью WebdriverIO и его браузерного раннера.
Настройка
Чтобы настроить WebdriverIO в вашем проекте Stencil, следуйте инструкциям в нашей документации по тестированию компонентов. Убедитесь, что вы выбрали stencil в качестве пресета в опциях раннера, например:
// wdio.conf.js
export const config = {
// ...
runner: ['browser', {
preset: 'stencil'
}],
// ...
}
В случае, если вы используете Stencil с фреймворком, таким как React или Vue, вы должны сохранить пресет для этих фреймворков.
Затем вы можете запустить тесты, выполнив:
npx wdio run ./wdio.conf.ts
Написание тестов
Предположим, у вас есть следующие компоненты Stencil:
import { Component, Prop, h } from '@stencil/core'
@Component({
tag: 'my-name',
shadow: true
})
export class MyName {
@Prop() name: string
normalize(name: string): string {
if (name) {
return name.slice(0, 1).toUpperCase() + name.slice(1).toLowerCase()
}
return ''
}
render() {
return (
<div class="text">
<p>Hello! My name is {this.normalize(this.name)}.</p>
</div>
)
}
}
render
В вашем тесте используйте метод render из @wdio/browser-runner/stencil для прикрепления компонента к тестовой странице. Для взаимодействия с компонентом мы рекомендуем использовать команды WebdriverIO, так как они ближе к реальным пользовательским взаимодействиям, например:
import { expect } from '@wdio/globals'
import { render } from '@wdio/browser-runner/stencil'
import MyNameComponent from './components/Component.tsx'
describe('Stencil Component Testing', () => {
it('should render component correctly', async () => {
await render({
components: [MyNameComponent],
template: () => (
<my-name name={'stencil'}></my-name>
)
})
await expect($('.text')).toHaveText('Hello! My name is Stencil.')
})
})
Опции рендеринга
Метод render предоставляет следующие опции:
components
Массив компонентов для тестирования. Классы компонентов можно импортировать в файл спецификации, затем их ссылки следует добавить в массив component для использования в течение теста.
Тип: CustomElementConstructor[]
По умолчанию: []
flushQueue
Если false, не очищать очередь рендеринга при начальной настройке теста.
Тип: boolean
По умолчанию: true
template
Начальный JSX, который используется для создания теста. Используйте template, когда вы хотите инициализировать компонент, используя их свойства, а не их HTML-атрибуты. Он отобразит указанный шаблон (JSX) в document.body.
Тип: JSX.Template
html
Начальный HTML, используемый для создания теста. Это может быть полезно для создания набора компонентов, работающих вместе, и назначения HTML-атрибутов.
Тип: string
language
Устанавливает имитированный атрибут lang на <html>.
Тип: string
autoApplyChanges
По умолчанию, для любых изменений свойств и атрибутов компонента необходимо вызвать env.waitForChanges() для тестирования обновлений. В качестве опции, autoApplyChanges непрерывно очищает очередь в фоновом режиме.
Тип: boolean
По умолчанию: false
attachStyles
По умолчанию стили не прикрепляются к DOM и не отражаются в сериализованном HTML. Установка этой опции в true включит стили компонента в сериализуемый вывод.
Тип: boolean
По умолчанию: false
Среда рендеринга
Метод render возвращает объект среды, который предоставляет определенные вспомогательные утилиты для управления средой компонента.
flushAll
После внесения изменений в компонент, таких как обновление свойства или атрибута, тестовая страница не применяет изменения автоматически. Чтобы дождаться и применить обновление, вызовите await flushAll()
Тип: () => void
unmount
Удаляет контейнерный элемент из DOM.
Тип: () => void
styles
Все стили, определенные компонентами.
Тип: Record<string, string>
container
Контейнерный элемент, в котором отображается шаблон.
Тип: HTMLElement
$container
Контейнерный элемент как элемент WebdriverIO.
Тип: WebdriverIO.Element
root
Корневой компонент шаблона.
Тип: HTMLElement
$root
Корневой компонент как элемент WebdriverIO.
Тип: WebdriverIO.Element
waitForChanges
Вспомогательный метод для ожидания готовности компонента.
import { render, waitForChanges } from '@wdio/browser-runner/stencil'
import { MyComponent } from './component.tsx'
const page = render({
components: [MyComponent],
html: '<my-component></my-component>'
})
expect(page.root.querySelector('div')).not.toBeDefined()
await waitForChanges()
expect(page.root.querySelector('div')).toBeDefined()
Обновления элементов
Если вы определяете свойства или состояния в вашем компоненте Stencil, вы должны управлять тем, когда эти изменения должны быть применены к компоненту для повторного рендеринга.
Примеры
Вы можете найти полный пример набора тестов компонентов WebdriverIO для Stencil в нашем репозитории примеров.
