پرش به محتوای اصلی

استنسیل

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​

آرایه‌ای از مؤلفه‌ها برای آزمایش. کلاس‌های مؤلفه می‌توانند به فایل spec وارد شوند، سپس مرجع آنها باید به آرایه 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