முக்கிய உள்ளடக்கத்திற்குச் செல்லவும்

ஸ்டென்சில்

Stencil என்பது மீண்டும் பயன்படுத்தக்கூடிய, அளவிடக்கூடிய கூறு நூலகங்களை உருவாக்குவதற்கான நூலகமாகும். WebdriverIO மற்றும் அதன் பிரவுசர் ரன்னர் பயன்படுத்தி நீங்கள் Stencil கூறுகளை நேரடியாக உண்மையான உலாவியில் சோதிக்கலாம்.

அமைப்பு​

உங்கள் Stencil திட்டத்தில் WebdriverIO அமைக்க, எங்கள் கூறு சோதனை ஆவணங்களில் உள்ள வழிமுறைகளைப் பின்பற்றவும். உங்கள் ரன்னர் விருப்பங்களில் stencil என்பதை முன்னமைவாகத் தேர்ந்தெடுக்க உறுதிப்படுத்தவும், எ.கா.:

// wdio.conf.js
export const config = {
    // ...
    runner: ['browser', {
        preset: 'stencil'
    }],
    // ...
}
தகவல்

நீங்கள் React அல்லது Vue போன்ற ஒரு கட்டமைப்புடன் Stencil ஐப் பயன்படுத்தும் சூழலில், இந்த கட்டமைப்புகளுக்கான முன்னமைவை வைத்திருக்க வேண்டும்.

பின்னர் பின்வரும் கட்டளையை இயக்குவதன் மூலம் சோதனைகளைத் தொடங்கலாம்:

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​

உங்கள் சோதனையில் @wdio/browser-runner/stencil இல் இருந்து render முறையைப் பயன்படுத்தி சோதனைப் பக்கத்தில் கூறுகளை இணைக்கவும். கூறுகளுடன் தொடர்புகொள்ள, உண்மையான பயனர் தொடர்புகளுக்கு நெருக்கமாக செயல்படும் 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 முறை பின்வரும் விருப்பங்களை வழங்குகிறது:

components​

சோதிக்க வேண்டிய கூறுகளின் வரிசை. கூறு வகுப்புகளை spec கோப்பிற்குள் இறக்குமதி செய்யலாம், பின்னர் அவற்றின் குறிப்பு சோதனை முழுவதும் பயன்படுத்த component வரிசைக்கு சேர்க்கப்பட வேண்டும்.

வகை: CustomElementConstructor[]
இயல்புநிலை: []

flushQueue​

false என்றால், ஆரம்ப சோதனை அமைப்பில் ரெண்டர் வரிசையை அகற்ற வேண்டாம்.

வகை: boolean
இயல்புநிலை: true

template​

சோதனையை உருவாக்கப் பயன்படுத்தப்படும் ஆரம்ப JSX. HTML பண்புகளுக்குப் பதிலாக அவற்றின் பண்புகளைப் பயன்படுத்தி ஒரு கூறை துவக்க விரும்பும்போது template ஐப் பயன்படுத்தவும். இது குறிப்பிட்ட டெம்ப்ளேட்டை (JSX) document.body இல் ரெண்டர் செய்யும்.

வகை: JSX.Template

html​

சோதனையை உருவாக்கப் பயன்படுத்தப்படும் ஆரம்ப HTML. இது ஒன்றாக செயல்படும் கூறுகளின் தொகுப்பை உருவாக்கவும், HTML பண்புகளை ஒதுக்கவும் பயனுள்ளதாக இருக்கும்.

வகை: string

language​

<html> இல் போலியான 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 கூறு சோதனை தொகுப்பின் முழுமையான எடுத்துக்காட்டைக் காணலாம்.

Welcome! How can I help?

WebdriverIO AI Copilot