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:

./components/Component.tsx

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, оскільки вони поводяться ближче до реальних взаємодій користувача, наприклад:

app.test.tsx

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

Метод 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

Метод 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 у нашому репозиторії прикладів.