ستينسل
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 التالية:
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 لأنها تتصرف بطريقة أقرب إلى تفاعلات المستخدم الفعلية، على سبيل المثال:
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 في مستودع الأمثلة الخاص بنا.
