Stencil
Stencil 是一個用於建構可重複使用、可擴展元件庫的程式庫。您可以使用 WebdriverIO 及其瀏覽器執行器在真實瀏覽器中直接測試 Stencil 元件。
設定
若要在您的 Stencil 專案中設定 WebdriverIO，請依照我們元件測試文件中的指示。請務必在執行器選項中選擇 `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
在您的測試中，使用來自 ` @wdio/browser-runner/stencil` 的 `render` 方法將元件附加到測試頁面。若要與元件互動，我們建議使用 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。當您想要使用元件的屬性 (而不是 HTML 屬性) 初始化元件時，請使用 `template`。它會將指定的範本 (JSX) 渲染到 `document.body` 中。
類型： JSX.Template
html
用於產生測試的初始 HTML。這對於建構一起運作的元件集合以及指派 HTML 屬性非常有用。
類型： string
language
在 `` 上設定模擬的 `lang` 屬性。
類型： 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 元件中定義屬性或狀態，您必須管理這些變更何時應套用至元件以重新渲染。
範例
您可以在我們的範例儲存庫中找到 Stencil 的完整 WebdriverIO 元件測試套件範例。
