@wdio/cli 9.16.2 → 9.17.0

package/build/templates/exampleFiles/browser/Component.lit.ejs

@@ -1,154 +0,0 @@
-import { LitElement, css, html } from 'lit'
-<%- answers.isUsingTypeScript ? `import { customElement, property } from 'lit/decorators.js'\n` : ''
-%>
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-<%- answers.isUsingTypeScript ? `@customElement('my-element')\n` : ''
-%>export class MyElement extends LitElement {<%
-if (answers.isUsingTypeScript) { %>
-    /**
-     * Copy for the read the docs hint.
-     */
-    @property()
-    docsHint = 'Click on the WebdriverIO logo to learn more!'
-
-    /**
-     * The number of times the button has been clicked.
-     */
-    @property({ type: Number })
-    count = 0
-<% } else { %>
-    static get properties() {
-        return {
-            /**
-            * Copy for the read the docs hint.
-            */
-            docsHint: { type: String },
-
-            /**
-            * The number of times the button has been clicked.
-            */
-            count: { type: Number },
-        }
-    }
-
-    constructor() {
-        super()
-        this.docsHint = 'Click on the WebdriverIO logo to learn more!'
-        this.count = 0
-    }
-<% } %>
-    render() {
-        return html`
-        <div>
-            <a href="https://webdriver.io/docs/component-testing" target="_blank">
-                <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo"
-                    alt="WebdriverIO logo" />
-            </a>
-        </div>
-        <h1>
-            <slot></slot>
-        </h1>
-        <div class="card">
-            <button @click=${this._onClick} part="button">
-                count is ${this.count}
-            </button>
-            <p>
-                Edit <code>src/Component.test.<%- answers.isUsingTypeScript ? `ts` : 'js' %></code> and save to test HMR
-            </p>
-        </div>
-        <p class="read-the-docs">${this.docsHint}</p>
-    `
-    }
-
-    <%- answers.isUsingTypeScript ? `private ` : ''%>_onClick() {
-        this.count++
-    }
-
-    <% if (answers.isUsingTypeScript) { %>static styles = css`<% } else { %>static get styles() {
-        return css`<% } %>
-    :host {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 2rem;
-      text-align: center;
-    }
-
-    .logo {
-      height: 6em;
-      padding: 1.5em;
-      will-change: filter;
-      transition: filter 300ms;
-    }
-    .logo:hover {
-      filter: drop-shadow(0 0 2em #646cffaa);
-    }
-    .logo.lit:hover {
-      filter: drop-shadow(0 0 2em #325cffaa);
-    }
-
-    .card {
-      padding: 2em;
-    }
-
-    .read-the-docs {
-      color: #888;
-    }
-
-    h1 {
-      font-size: 3.2em;
-      line-height: 1.1;
-    }
-
-    a {
-      font-weight: 500;
-      color: #646cff;
-      text-decoration: inherit;
-    }
-    a:hover {
-      color: #535bf2;
-    }
-
-    button {
-      border-radius: 8px;
-      border: 1px solid transparent;
-      padding: 0.6em 1.2em;
-      font-size: 1em;
-      font-weight: 500;
-      font-family: inherit;
-      background-color: #1a1a1a;
-      cursor: pointer;
-      transition: border-color 0.25s;
-    }
-    button:hover {
-      border-color: #646cff;
-    }
-    button:focus,
-    button:focus-visible {
-      outline: 4px auto -webkit-focus-ring-color;
-    }
-
-    @media (prefers-color-scheme: light) {
-      a:hover {
-        color: #747bff;
-      }
-      button {
-        background-color: #f9f9f9;
-      }
-    }
-  `
-  <% if (!answers.isUsingTypeScript) { %>}<% } %>
-}
-<% if (answers.isUsingTypeScript) { %>
-declare global {
-    interface HTMLElementTagNameMap {
-        'my-element': MyElement
-    }
-}<%
-} else { %>
-window.customElements.define('my-element', MyElement)<%
-} %>

package/build/templates/exampleFiles/browser/Component.lit.test.ejs

@@ -1,24 +0,0 @@
-import { html, render } from 'lit'
-import { $, expect } from '@wdio/globals'
-
-import './Component.js'
-import './Component.css'
-
-describe('Lit component testing', () => {
-    it('should increment value on click', async () => {
-        render(
-            html`<my-element id="root">WebdriverIO Component Testing</my-element>`,
-            document.body
-        )
-
-        const button = await $('my-element').$('button')
-        await expect(button).toHaveText('count is 0')
-
-        await button.click()
-        await button.click()
-
-        await expect(button).toHaveText('count is 2')<%-
-        answers.includeVisualTesting ? `
-        await expect(button).toMatchElementSnapshot('counterButton')` : '' %>
-    })
-})

package/build/templates/exampleFiles/browser/Component.preact.ejs

@@ -1,28 +0,0 @@
-import { useState } from 'preact/hooks'
-import './Component.css'
-
-export default function ExampleComponent () {
-    const [count, setCount] = useState(0)
-
-    return (
-        <>
-            <div>
-                <a href="https://webdriver.io/docs/component-testing" target="_blank">
-                    <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo" alt="WebdriverIO logo" />
-                </a>
-            </div>
-            <h1>WebdriverIO Component Testing</h1>
-            <div class="card">
-                <button onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-                <p>
-                    Edit <code>src/Component.test.<%- answers.isUsingTypeScript ? `tsx` : 'jsx' %></code> and save to test HMR
-                </p>
-            </div>
-            <p class="read-the-docs">
-                Click on the Vite and Preact logos to learn more
-            </p>
-        </>
-    )
-}

package/build/templates/exampleFiles/browser/Component.preact.test.ejs

@@ -1,59 +0,0 @@
-<%
-const harnessImport = answers.installTestingLibrary
-    ? `import { h } from 'preact'\nimport { render, screen, fireEvent } from '@testing-library/preact'`
-    : `import { h, render } from 'preact'\nimport htm from 'https://esm.sh/htm'`
-const renderCommand = answers.installTestingLibrary
-    ? `render(<ExampleComponent />)`
-    : "render(html`<${ExampleComponent} />`, container)"
-%>
-import { expect, $ } from '@wdio/globals'
-<%- harnessImport %>
-<% if (answers.installTestingLibrary) { %>
-import * as matchers from '@testing-library/jest-dom/matchers'
-expect.extend(matchers)
-<% } else { %>
-// Initialize htm with Preact
-const html = htm.bind(h);
-<% } %>
-import ExampleComponent from './Component'
-
-describe('Preact Component Tests', () => {
-    <% if (answers.installTestingLibrary) { %>
-    it('should test component with Testing Library', async () => {
-        render(<ExampleComponent />)
-        const component = screen.getByText(/count is 0/i)
-        expect(component).toBeInTheDocument()
-
-        await fireEvent.click(component)
-        await fireEvent.click(component)
-
-        expect(screen.getByText(/count is 2/i)).toBeInTheDocument()
-    })
-    <% } else { %>
-    let container<%- answers.isUsingTypeScript ? `: Element` : '' %>
-
-    beforeEach(() => {
-        container = document.createElement('div')
-        document.body.appendChild(container)
-    })
-
-    afterEach(() => {
-        container?.remove()
-    })
-    <% } %>
-
-    it('should test component with WebdriverIO', async () => {
-        <%- renderCommand %>
-
-        const component = await $('button*=count is')
-        await expect(component).toBePresent()
-        await expect(component).toHaveText('count is 0')
-
-        await component.click()
-        await component.click()
-
-        await expect(component).toHaveText('count is 2')<%-
-        answers.includeVisualTesting ? `
-        await expect(component).toMatchElementSnapshot('counterButton')` : '' %>
-    })
-})

package/build/templates/exampleFiles/browser/Component.react.ejs

@@ -1,29 +0,0 @@
-import { useState } from 'react'
-
-import './Component.css'
-
-export default function ExampleComponent () {
-    const [count, setCount] = useState(0)
-
-    return (
-        <div id="root">
-            <div>
-                <a href="https://webdriver.io/docs/component-testing" target="_blank">
-                    <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo" alt="WebdriverIO logo" />
-                </a>
-            </div>
-            <h1>WebdriverIO Component Testing</h1>
-            <div className="card">
-                <button onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-                <p>
-                    Edit <code>src/Component.test.<%- answers.isUsingTypeScript ? `tsx` : 'jsx' %></code> and save to test HMR
-                </p>
-            </div>
-            <p className="read-the-docs">
-                Click on the WebdriverIO logo to learn more
-            </p>
-        </div>
-    )
-}

package/build/templates/exampleFiles/browser/Component.react.test.ejs

@@ -1,58 +0,0 @@
-<%
-const harnessImport = answers.installTestingLibrary
-    ? `import { render, screen, fireEvent } from '@testing-library/react'`
-    : `import { createRoot } from 'react-dom/client'`
-const renderCommand = answers.installTestingLibrary
-    ? `render(<ExampleComponent />)`
-    : `const root = createRoot(container)
-        root.render(<ExampleComponent />)`
-%>
-import React from 'react'
-import { expect, $ } from '@wdio/globals'
-<%- harnessImport %>
-<% if (answers.installTestingLibrary) { %>
-import * as matchers from '@testing-library/jest-dom/matchers'
-expect.extend(matchers)
-<% } %>
-import ExampleComponent from './Component'
-
-describe('React Component Tests', () => {
-    <% if (answers.installTestingLibrary) { %>
-    it('should test component with Testing Library', async () => {
-        render(<ExampleComponent />)
-        const component = screen.getByText(/count is 0/i)
-        expect(component).toBeInTheDocument()
-
-        await fireEvent.click(component)
-        await fireEvent.click(component)
-
-        expect(screen.getByText(/count is 2/i)).toBeInTheDocument()
-    })
-    <% } else { %>
-    let container<%- answers.isUsingTypeScript ? `: Element` : '' %>
-
-    beforeEach(() => {
-        container = document.createElement('div')
-        document.body.appendChild(container)
-    })
-
-    afterEach(() => {
-        container?.remove()
-    })
-    <% } %>
-
-    it('should test component with WebdriverIO', async () => {
-        <%- renderCommand %>
-
-        const component = await $('button*=count is')
-        await expect(component).toBePresent()
-        await expect(component).toHaveText('count is 0')
-
-        await component.click()
-        await component.click()
-
-        await expect(component).toHaveText('count is 2')<%-
-        answers.includeVisualTesting ? `
-        await expect(component).toMatchElementSnapshot('counterButton')` : '' %>
-    })
-})

package/build/templates/exampleFiles/browser/Component.solid.ejs

@@ -1,28 +0,0 @@
-import { createSignal } from 'solid-js'
-import './Component.css'
-
-export default function ExampleComponent () {
-    const [count, setCount] = createSignal(0)
-
-    return (
-        <>
-            <div>
-                <a href="https://webdriver.io/docs/component-testing" target="_blank">
-                    <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo" alt="WebdriverIO logo" />
-                </a>
-            </div>
-            <h1>WebdriverIO Component Testing</h1>
-            <div class="card">
-                <button onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-                <p>
-                    Edit <code>src/Component.test.<%- answers.isUsingTypeScript ? `tsx` : 'jsx' %></code> and save to test HMR
-                </p>
-            </div>
-            <p class="read-the-docs">
-                Click on the Vite and Preact logos to learn more
-            </p>
-        </>
-    )
-}

package/build/templates/exampleFiles/browser/Component.solid.test.ejs

@@ -1,58 +0,0 @@
-<%
-const harnessImport = answers.installTestingLibrary
-    ? `import { cleanup, render, screen, fireEvent } from 'solid-testing-library'`
-    : `import { render } from 'solid-js/web'`
-const renderCommand = answers.installTestingLibrary
-    ? `render(() => <ExampleComponent />)`
-    : `render(<ExampleComponent />, container)`
-%>
-import { expect, $ } from '@wdio/globals'
-<%- harnessImport %>
-<% if (answers.installTestingLibrary) { %>
-import * as matchers from '@testing-library/jest-dom/matchers'
-expect.extend(matchers)
-<% } %>
-import ExampleComponent from './Component'
-
-describe('Preact Component Tests', () => {
-    <% if (answers.installTestingLibrary) { %>
-    afterEach(cleanup)
-
-    it('should test component with Testing Library', async () => {
-        render(() => <ExampleComponent />)
-        const component = screen.getByText(/count is 0/i)
-        expect(component).toBeInTheDocument()
-
-        await fireEvent.click(component)
-        await fireEvent.click(component)
-
-        expect(screen.getByText(/count is 2/i)).toBeInTheDocument()
-    })
-    <% } else { %>
-    let container<%- answers.isUsingTypeScript ? `: Element` : '' %>
-
-    beforeEach(() => {
-        container = document.createElement('div')
-        document.body.appendChild(container)
-    })
-
-    afterEach(() => {
-        container?.remove()
-    })
-    <% } %>
-
-    it('should test component with WebdriverIO', async () => {
-        <%- renderCommand %>
-
-        const component = await $('button*=count is')
-        await expect(component).toBePresent()
-        await expect(component).toHaveText('count is 0')
-
-        await component.click()
-        await component.click()
-
-        await expect(component).toHaveText('count is 2')<%-
-        answers.includeVisualTesting ? `
-        await expect(component).toMatchElementSnapshot('counterButton')` : '' %>
-    })
-})

package/build/templates/exampleFiles/browser/Component.stencil.ejs

@@ -1,43 +0,0 @@
-import { Component, Prop, h, Fragment } from '@stencil/core'
-
-@Component({
-    tag: 'my-element',
-    shadow: true,
-    styleUrl: 'Component.css'
-})
-export class MyElement {
-    @Prop() count = 0
-    @Prop() docsHint = 'Click on the WebdriverIO logo to learn more!'
-
-    normalize(name: string): string {
-        if (name) {
-            return name.slice(0, 1).toUpperCase() + name.slice(1).toLowerCase()
-        }
-        return ''
-    }
-
-    render() {
-        return (
-            <>
-                <div>
-                    <a href="https://webdriver.io/docs/component-testing" target="_blank">
-                        <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" class="logo"
-                            alt="WebdriverIO logo" />
-                    </a>
-                </div>
-                <h1>
-                    <slot />
-                </h1>
-                <div class="card">
-                    <button onClick={() => { this.count = this.count + 1; }} part="button">
-                        count is {this.count}
-                    </button>
-                    <p>
-                        Edit <code>src/Component.test.tsx</code> and save to test HMR
-                    </p>
-                </div>
-                <p class="read-the-docs">{this.docsHint}</p>
-            </>
-        )
-    }
-}

package/build/templates/exampleFiles/browser/Component.stencil.test.ejs

@@ -1,45 +0,0 @@
-import { h } from '@stencil/core'
-import { render } from '@wdio/browser-runner/stencil'
-import { $, expect } from '@wdio/globals'
-
-import { MyElement } from './Component.js'
-
-describe('Stencil component testing', () => {
-    it('should increment value on click automatically', async () => {
-        await render({
-            components: [MyElement],
-            autoApplyChanges: true,
-            template: () => (
-                <my-element count={42}>WebdriverIO Component Testing</my-element>
-            )
-        })
-
-        const button = await $('my-element').$('button')
-        await expect(button).toHaveText('count is 42')
-
-        await button.click()
-        await button.click()
-
-        await expect(button).toHaveText('count is 44')
-    })
-
-    it('should increment value on click after flush', async () => {
-        const { flushAll } = await render({
-            components: [MyElement],
-            template: () => (
-                <my-element count={42}>WebdriverIO Component Testing</my-element>
-            )
-        })
-
-        const button = await $('my-element').$('button')
-        await expect(button).toHaveText('count is 42')
-
-        await button.click()
-        await button.click()
-        flushAll()
-
-        await expect(button).toHaveText('count is 44')<%-
-        answers.includeVisualTesting ? `
-        await expect(button).toMatchElementSnapshot('counterButton')` : '' %>
-    })
-})

package/build/templates/exampleFiles/browser/Component.svelte.ejs

@@ -1,47 +0,0 @@
-<script lang="ts">
-let count = 0
-const increment = () => {
-    count += 1
-}
-</script>
-
-<main id="root">
-    <div>
-        <a href="https://webdriver.io/docs/component-testing" target="_blank">
-            <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo"
-                alt="WebdriverIO logo" />
-        </a>
-    </div>
-    <h1>WebdriverIO Component Testing</h1>
-
-    <div class="card">
-        <button on:click={increment}>
-            count is {count}
-        </button>
-        <p>
-            Edit <code>src/Component.test.<%- answers.isUsingTypeScript ? `ts` : 'js' %></code> and save to test HMR
-        </p>
-    </div>
-
-    <p class="read-the-docs">
-        Click on the Vite and Svelte logos to learn more
-    </p>
-</main>
-
-<style>
-    .logo {
-        height: 6em;
-        padding: 1.5em;
-        will-change: filter;
-        transition: filter 300ms;
-    }
-    .logo:hover {
-        filter: drop-shadow(0 0 2em #646cffaa);
-    }
-    .logo.svelte:hover {
-        filter: drop-shadow(0 0 2em #ff3e00aa);
-    }
-    .read-the-docs {
-        color: #888;
-    }
-</style>

package/build/templates/exampleFiles/browser/Component.svelte.test.ejs

@@ -1,58 +0,0 @@
-<%
-const harnessImport = answers.installTestingLibrary
-    ? `import { render, fireEvent } from '@testing-library/svelte'`
-    : ``
-const renderCommand = answers.installTestingLibrary
-    ? `render(ExampleComponent)`
-    : `new ExampleComponent({ target: container, props: {} })`
-%>
-import { $, expect } from '@wdio/globals'
-<%- harnessImport %>
-<% if (answers.installTestingLibrary) { %>
-import * as matchers from '@testing-library/jest-dom/matchers'
-expect.extend(matchers)
-<% } %>
-import ExampleComponent from './Component.svelte'
-import './Component.css'
-
-describe('Svelte Component Testing', () => {
-    <% if (answers.installTestingLibrary) { %>
-    it('should test component with Testing Library', async () => {
-        const { getByText } = render(ExampleComponent)
-
-        const component = getByText(/count is 0/i)
-        expect(component).toBeInTheDocument()
-
-        await fireEvent.click(component)
-        await fireEvent.click(component)
-
-        expect(getByText(/count is 2/i)).toBeInTheDocument()
-    })
-    <% } else { %>
-    let container<%- answers.isUsingTypeScript ? `: Element` : '' %>
-
-    beforeEach(() => {
-        container = document.createElement('div')
-        document.body.appendChild(container)
-    })
-
-    afterEach(() => {
-        container?.remove()
-    })
-    <% } %>
-
-    it('should test component with WebdriverIO', async () => {
-        <%- renderCommand %>
-
-        const component = await $('button*=count is')
-        await expect(component).toBePresent()
-        await expect(component).toHaveText('count is 0')
-
-        await component.click()
-        await component.click()
-
-        await expect(component).toHaveText('count is 2')<%-
-        answers.includeVisualTesting ? `
-        await expect(component).toMatchElementSnapshot('counterButton')` : '' %>
-    })
-})

package/build/templates/exampleFiles/browser/Component.vue.ejs

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-    <div id="root">
-        <div>
-            <a href="https://webdriver.io/docs/component-testing" target="_blank">
-                <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo"
-                    alt="WebdriverIO logo" />
-            </a>
-        </div>
-        <h1>{{ msg }}</h1>
-
-        <div class="card">
-            <button type="button" @click="count++">count is {{ count }}</button>
-            <p>
-                Edit <code>src/Component.test.<%- answers.isUsingTypeScript ? `ts` : 'js' %></code> and save to test HMR
-            </p>
-        </div>
-
-        <p class="read-the-docs">Click on the WebdriverIO logo to learn more</p>
-    </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-    color: #888;
-}
-</style>