Перейти до основного вмісту

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

Welcome! How can I help?

WebdriverIO AI Copilot