Stencil
Stencil es una biblioteca para construir bibliotecas de componentes reutilizables y escalables. Puedes probar componentes de Stencil directamente en un navegador real usando WebdriverIO y su ejecutor de navegador.
Configuración
Para configurar WebdriverIO dentro de tu proyecto Stencil, sigue las instrucciones en nuestra documentación de pruebas de componentes. Asegúrate de seleccionar stencil como preset dentro de tus opciones de ejecutor, por ejemplo:
// wdio.conf.js
export const config = {
// ...
runner: ['browser', {
preset: 'stencil'
}],
// ...
}
En caso de que uses Stencil con un framework como React o Vue, deberías mantener el preset para estos frameworks.
Luego puedes iniciar las pruebas ejecutando:
npx wdio run ./wdio.conf.ts
Escribiendo Pruebas
Dado que tienes los siguientes componentes de 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
En tu prueba, usa el método render de @wdio/browser-runner/stencil para adjuntar el componente a la página de prueba. Para interactuar con el componente, recomendamos usar comandos de WebdriverIO ya que se comportan más cerca de las interacciones reales del usuario, por ejemplo:
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.')
})
})
Opciones de Render
El método render proporciona las siguientes opciones:
components
Un array de componentes para probar. Las clases de componentes pueden importarse en el archivo de especificación, luego su referencia debe agregarse al array component para ser utilizado a lo largo de la prueba.
Tipo: CustomElementConstructor[]
Predeterminado: []
flushQueue
Si es false, no vacía la cola de renderizado en la configuración inicial de la prueba.
Tipo: boolean
Predeterminado: true
template
El JSX inicial que se utiliza para generar la prueba. Usa template cuando quieras inicializar un componente usando sus propiedades, en lugar de sus atributos HTML. Renderizará la plantilla especificada (JSX) en document.body.
Tipo: JSX.Template
html
El HTML inicial utilizado para generar la prueba. Esto puede ser útil para construir una colección de componentes que trabajen juntos y asignar atributos HTML.
Tipo: string
language
Establece el atributo lang simulado en <html>.
Tipo: string
autoApplyChanges
Por defecto, cualquier cambio en las propiedades y atributos del componente debe usar env.waitForChanges() para probar las actualizaciones. Como opción, autoApplyChanges vacía continuamente la cola en segundo plano.
Tipo: boolean
Predeterminado: false
attachStyles
Por defecto, los estilos no se adjuntan al DOM y no se reflejan en el HTML serializado. Establecer esta opción en true incluirá los estilos del componente en la salida serializable.
Tipo: boolean
Predeterminado: false
Entorno de Render
El método render devuelve un objeto de entorno que proporciona ciertos ayudantes de utilidad para gestionar el entorno del componente.
flushAll
Después de realizar cambios en un componente, como una actualización de una propiedad o atributo, la página de prueba no aplica automáticamente los cambios. Para esperar y aplicar la actualización, llama a await flushAll()
Tipo: () => void
unmount
Elimina el elemento contenedor del DOM.
Tipo: () => void
styles
Todos los estilos definidos por los componentes.
Tipo: Record<string, string>
container
Elemento contenedor en el que se renderiza la plantilla.
Tipo: HTMLElement
$container
El elemento contenedor como un elemento WebdriverIO.
Tipo: WebdriverIO.Element
root
El componente raíz de la plantilla.
Tipo: HTMLElement
$root
El componente raíz como un elemento WebdriverIO.
Tipo: WebdriverIO.Element
waitForChanges
Método auxiliar para esperar a que el componente esté listo.
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()
Actualizaciones de Elementos
Si defines propiedades o estados en tu componente Stencil, debes gestionar cuándo estos cambios deben aplicarse al componente para que se vuelva a renderizar.
Ejemplos
Puedes encontrar un ejemplo completo de un conjunto de pruebas de componentes WebdriverIO para Stencil en nuestro repositorio de ejemplos.
