create-wdio 9.0.0 → 9.17.0

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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,58 @@
+<%
+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

@@ -0,0 +1,34 @@
+<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>

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

@@ -0,0 +1,62 @@
+<%
+const harnessImport = answers.installTestingLibrary
+    ? `import { render, fireEvent } from '@testing-library/vue'`
+    : `import { createApp } from 'vue'`
+const renderCommand = answers.installTestingLibrary
+    ? `render(ExampleComponent, { props: { msg: 'WebdriverIO Component Testing' } })`
+    : `createApp(ExampleComponent, { msg: 'WebdriverIO Component Testing' }).mount(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.vue'
+import './Component.css'
+
+describe('Vue Component Testing', () => {
+    <% if (answers.installTestingLibrary) { %>
+    it('should test component with Testing Library', async () => {
+        // The render method returns a collection of utilities to query your component.
+        const { getByText } = render(ExampleComponent, {
+            props: { msg: 'WebdriverIO Component Testing' }
+        })
+
+        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')
+        container.setAttribute('id', 'app')
+        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/standalone.test.ejs

@@ -0,0 +1,13 @@
+import { $, expect } from '@wdio/globals'
+
+describe('WebdriverIO Component Testing', () => {
+    it('should be able to render to the DOM and assert', async () => {
+        const component = document.createElement('button')
+        component.innerHTML = 'Hello World!'
+        document.body.appendChild(component)
+
+        await expect($('aria/Hello World!')).toBePresent()
+        component.remove()
+        await expect($('aria/Hello World!')).not.toBePresent()
+    })
+})

package/build/templates/exampleFiles/cucumber/features/login.feature

@@ -0,0 +1,12 @@
+Feature: The Internet Guinea Pig Website
+
+  Scenario Outline: As a user, I can log into the secure area
+
+    Given I am on the login page
+    When I login with <username> and <password>
+    Then I should see a flash message saying <message>
+
+    Examples:
+      | username | password             | message                        |
+      | tomsmith | SuperSecretPassword! | You logged into a secure area! |
+      | foobar   | barfoo               | Your username is invalid!      |

package/build/templates/exampleFiles/cucumber/step_definitions/steps.js.ejs

@@ -0,0 +1,55 @@
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? "import { Given, When, Then } from '@wdio/cucumber-framework';"
+    : "const { Given, When, Then } = require('@wdio/cucumber-framework');" %>
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import { expect, $ } from '@wdio/globals'`
+    : `const { expect, $ } = require('@wdio/globals')` %>
+<%
+/**
+ * step definition with page objects
+ */
+if (answers.usePageObjects) { %>
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import LoginPage from '${answers.relativePath}/login.page${answers.esmSupport ? '.js' : ''}';`
+    : `const LoginPage = require('${answers.relativePath}/login.page');` %>
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import SecurePage from '${answers.relativePath}/secure.page${answers.esmSupport ? '.js' : ''}';`
+    : `const SecurePage = require('${answers.relativePath}/secure.page');` %>
+
+const pages = {
+    login: LoginPage
+}
+
+Given(/^I am on the (\w+) page$/, async (page) => {
+    await pages[page].open()
+});
+
+When(/^I login with (\w+) and (.+)$/, async (username, password) => {
+    await LoginPage.login(username, password)
+});
+
+Then(/^I should see a flash message saying (.*)$/, async (message) => {
+    await expect(SecurePage.flashAlert).toBeExisting();
+    await expect(SecurePage.flashAlert).toHaveText(expect.stringContaining(message));
+});
+<% } else {
+
+/**
+ * step definition without page objects
+ */
+%>
+Given(/^I am on the (\w+) page$/, async (page) => {
+    await browser.url(`https://the-internet.herokuapp.com/${page}`);
+});
+
+When(/^I login with (\w+) and (.+)$/, async (username, password) => {
+    await $('#username').setValue(username);
+    await $('#password').setValue(password);
+    await $('button[type="submit"]').click();
+});
+
+Then(/^I should see a flash message saying (.*)$/, async (message) => {
+    await expect($('#flash')).toBeExisting();
+    await expect($('#flash')).toHaveText(expect.stringContaining(message));
+});
+<% } %>

package/build/templates/exampleFiles/mochaJasmine/test.e2e.js.ejs

@@ -0,0 +1,11 @@
+<% if (answers.purpose === 'vscode') {
+%><%- include('../../snippets/vscodeTest.js.ejs', { answers }) %><%
+} else if (answers.purpose === 'electron') {
+%><%- include('../../snippets/electronTest.js.ejs', { answers }) %><%
+} else if (answers.purpose === 'macos') {
+%><%- include('../../snippets/macosTest.js.ejs', { answers }) %><%
+} else if (answers.usePageObjects) {
+%><%- include('../../snippets/testWithPO.js.ejs', { answers }) %><%
+} else if (!answers.usePageObjects) {
+%><%- include('../../snippets/testWithoutPO.js.ejs', { answers }) %><%
+} %>

package/build/templates/exampleFiles/pageobjects/login.page.js.ejs

@@ -0,0 +1,45 @@
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import { $ } from '@wdio/globals'`
+    : `const { $ } = require('@wdio/globals')` %>
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import Page from './page${answers.esmSupport ? '.js' : ''}';`
+    : "const Page = require('./page');" %>
+
+/**
+ * sub page containing specific selectors and methods for a specific page
+ */
+class LoginPage extends Page {
+    /**
+     * define selectors using getter methods
+     */
+    <%- answers.isUsingTypeScript ? "public " : "" %>get inputUsername () {
+        return $('#username');
+    }
+
+    <%- answers.isUsingTypeScript ? "public " : "" %>get inputPassword () {
+        return $('#password');
+    }
+
+    <%- answers.isUsingTypeScript ? "public " : "" %>get btnSubmit () {
+        return $('button[type="submit"]');
+    }
+
+    /**
+     * a method to encapsule automation code to interact with the page
+     * e.g. to login using username and password
+     */
+    <%- answers.isUsingTypeScript ? "public " : "" %>async login (username<%- answers.isUsingTypeScript ? ": string": "" %>, password<%- answers.isUsingTypeScript ? ": string": "" %>) {
+        await this.inputUsername.setValue(username);
+        await this.inputPassword.setValue(password);
+        await this.btnSubmit.click();
+    }
+
+    /**
+     * overwrite specific options to adapt it to page object
+     */
+    <%- answers.isUsingTypeScript ? "public " : "" %>open () {
+        return super.open('login');
+    }
+}
+
+<%- answers.isUsingTypeScript || answers.esmSupport ? "export default": "module.exports =" %> new LoginPage();

package/build/templates/exampleFiles/pageobjects/page.js.ejs

@@ -0,0 +1,17 @@
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import { browser } from '@wdio/globals'`
+    : `const { browser } = require('@wdio/globals')` %>
+
+/**
+* main page object containing all methods, selectors and functionality
+* that is shared across all page objects
+*/
+<%- answers.isUsingTypeScript || answers.esmSupport ? "export default" : "module.exports =" %> class Page {
+    /**
+    * Opens a sub page of the page
+    * @param path path of the sub page (e.g. /path/to/page.html)
+    */
+    <%- answers.isUsingTypeScript ? "public " : "" %>open (path<%- answers.isUsingTypeScript ? ": string" : "" %>) {
+        return browser.url(`https://the-internet.herokuapp.com/${path}`)
+    }
+}

package/build/templates/exampleFiles/pageobjects/secure.page.js.ejs

@@ -0,0 +1,20 @@
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import { $ } from '@wdio/globals'`
+    : `const { $ } = require('@wdio/globals')` %>
+<%- answers.isUsingTypeScript || answers.esmSupport
+    ? `import Page from './page${answers.esmSupport ? '.js' : ''}';`
+    : "const Page = require('./page');" %>
+
+/**
+ * sub page containing specific selectors and methods for a specific page
+ */
+class SecurePage extends Page {
+    /**
+     * define selectors using getter methods
+     */
+    <%- answers.isUsingTypeScript ? "public " : "" %>get flashAlert () {
+        return $('#flash');
+    }
+}
+
+<%- answers.isUsingTypeScript || answers.esmSupport ? "export default": "module.exports =" %> new SecurePage();

package/build/templates/exampleFiles/serenity-js/common/config/serenity.properties.ejs

@@ -0,0 +1 @@
+serenity.project.name=<%= answers.projectName %>

package/build/templates/exampleFiles/serenity-js/common/serenity/github-api/GitHubStatus.ts.ejs

@@ -0,0 +1,41 @@
+<%- _.import('Ensure, equals', '@serenity-js/assertions' ) %>
+<%- _.import('Task', '@serenity-js/core' ) %>
+<%- _.import('GetRequest, LastResponse, Send', '@serenity-js/rest' ) %>
+
+/**
+ * Learn more about API testing with Serenity/JS
+ *  https://serenity-js.org/handbook/api-testing/
+ */
+<%- _.export('class', 'GitHubStatus') %> {
+    static #baseApiUrl = 'https://www.githubstatus.com/api/v2/'
+    static #statusJson = this.#baseApiUrl + 'status.json'
+
+    static ensureAllSystemsOperational = () =>
+        Task.where(`#actor ensures all GitHub systems are operational`,
+            Send.a(GetRequest.to(this.#statusJson)),
+            Ensure.that(LastResponse.status(), equals(200)),
+            Ensure.that(
+                LastResponse.body<%- _.ifTs('<StatusResponse>') %>().status.description.describedAs('GitHub Status'),
+                equals('All Systems Operational')
+            ),
+        )
+}
+<% if (_.useTypeScript) { %>
+/**
+ * Interfaces describing a simplified response structure returned by the GitHub Status Summary API:
+ *  https://www.githubstatus.com/api/v2/summary.json
+ */
+interface StatusResponse {
+    page: {
+        id: string
+        name: string
+        url: string
+        time_zone: string
+        updated_at: string
+    }
+    status: {
+        indicator: string
+        description: string
+    }
+}
+<% } %>

package/build/templates/exampleFiles/serenity-js/common/serenity/todo-list-app/TodoList.ts.ejs

@@ -0,0 +1,100 @@
+<%- _.import('contain, Ensure, equals, includes, isGreaterThan', '@serenity-js/assertions') %>
+<%- _.import('type Answerable, Check, d, type QuestionAdapter, Task, Wait', '@serenity-js/core') %>
+<%- _.import('By, Enter, ExecuteScript, isVisible, Key, Navigate, Page, PageElement, PageElements, Press, Text', '@serenity-js/web') %>
+
+<%- _.import('TodoListItem', './TodoListItem') %>
+
+<%- _.export('class', 'TodoList') %> {
+
+    // Public API captures the business domain-focused tasks
+    // that an actor interacting with a TodoList app can perform
+
+    static createEmptyList = () =>
+        Task.where('#actor creates an empty todo list',
+            Navigate.to('https://todo-app.serenity-js.org/'),
+            Ensure.that(
+                Page.current().title().describedAs('website title'),
+                equals('Serenity/JS TodoApp'),
+            ),
+            Wait.until(this.#newTodoInput(), isVisible()),
+            this.#emptyLocalStorageIfNeeded(),
+        )
+
+    static #emptyLocalStorageIfNeeded = () =>
+        Task.where('#actor empties local storage if needed',
+            Check.whether(this.#persistedItems().length, isGreaterThan(0))
+                .andIfSo(
+                    this.#emptyLocalStorage(),
+                    Page.current().reload(),
+                )
+        )
+
+    static createListContaining = (<%- _.param('itemNames', 'Array<Answerable<string>>') %>) =>
+        Task.where(`#actor starts with a list containing ${ itemNames.length } items`,
+            TodoList.createEmptyList(),
+            ...itemNames.map(itemName => this.recordItem(itemName))
+        )
+
+    static recordItem = (<%- _.param('itemName', 'Answerable<string>') %>) =>
+        Task.where(d `#actor records an item called ${ itemName }`,
+            Enter.theValue(itemName).into(this.#newTodoInput()),
+            Press.the(Key.Enter).in(this.#newTodoInput()),
+            Wait.until(Text.ofAll(this.#items()), contain(itemName)),
+        )
+
+    static markAsCompleted = (<%- _.param('itemNames', 'Array<Answerable<string>>') %>) =>
+        Task.where(d`#actor marks the following items as completed: ${ itemNames }`,
+            ...itemNames.map(itemName => TodoListItem.markAsCompleted(this.#itemCalled(itemName)))
+        )
+
+    static markAsOutstanding = (<%- _.param('itemNames', 'Array<Answerable<string>>') %>) =>
+        Task.where(d`#actor marks the following items as outstanding: ${ itemNames }`,
+            ...itemNames.map(itemName => TodoListItem.markAsOutstanding(this.#itemCalled(itemName)))
+        )
+
+    static outstandingItemsCount = () =>
+        Text.of(PageElement.located(By.tagName('strong')).of(this.#outstandingItemsLabel()))
+            .as(Number)
+            .describedAs('number of items left')
+
+    // Private API captures ways to locate interactive elements and data transformation logic.
+    // Private API supports the public API and is not used in the test scenario directly.
+
+    static #itemCalled = (<%- _.param('name', 'Answerable<string>') %>) =>
+        this.#items()
+            .where(Text, includes(name))
+            .first()
+            .describedAs(d`an item called ${ name }`)
+
+    static #outstandingItemsLabel = () =>
+        PageElement.located(By.css('.todo-count'))
+            .describedAs('items left counter')
+
+    static #newTodoInput = () =>
+        PageElement.located(By.css('.new-todo'))
+            .describedAs('"What needs to be done?" input box')
+
+    static #items = () =>
+        PageElements.located(By.css('.todo-list li'))
+            .describedAs('displayed items')
+
+    static #persistedItems = () =>
+        Page.current()
+            .executeScript(`
+            return window.localStorage['serenity-js-todo-app']
+                ? JSON.parse(window.localStorage['serenity-js-todo-app'])
+                : []
+        `).describedAs('persisted items')<%- _.ifTs(' as QuestionAdapter<PersistedTodoItem[]>') %>
+
+    static #emptyLocalStorage = () =>
+        Task.where('#actor empties local storage',
+            ExecuteScript.sync(`window.localStorage.removeItem('serenity-js-todo-app')`)
+        )
+}
+<% if (_.useTypeScript) { %>
+interface PersistedTodoItem {
+    id: number;
+    name: string;
+    completed: boolean;
+}
+<% } %>

package/build/templates/exampleFiles/serenity-js/common/serenity/todo-list-app/TodoListItem.ts.ejs

@@ -0,0 +1,36 @@
+<%- _.import('contain, not', '@serenity-js/assertions') %>
+<%- _.import('Check, d, type QuestionAdapter, Task', '@serenity-js/core') %>
+<%- _.import('By, Click, CssClasses, PageElement', '@serenity-js/web') %>
+
+<%- _.export('class', 'TodoListItem') %> {
+
+    // Public API captures the business domain-focused tasks
+    // that an actor interacting with a TodoListItem app can perform
+
+    static markAsCompleted = (<%- _.param('item', 'QuestionAdapter<PageElement>') %>) =>
+        Task.where(d `#actor marks ${ item } as completed`,
+            Check.whether(CssClasses.of(item), not(contain('completed')))
+                .andIfSo(this.toggle(item)),
+        )
+
+    static markAsOutstanding = (<%- _.param('item', 'QuestionAdapter<PageElement>') %>) =>
+        Task.where(d `#actor marks ${ item } as outstanding`,
+            Check.whether(CssClasses.of(item), contain('completed'))
+                .andIfSo(this.toggle(item)),
+        )
+
+    static toggle = (<%- _.param('item', 'QuestionAdapter<PageElement>') %>) =>
+        Task.where(d `#actor toggles the completion status of ${ item }`,
+            Click.on(
+                this.#toggleButton().of(item),
+            ),
+        )
+
+    // Private API captures ways to locate interactive elements and data transformation logic.
+    // Private API supports the public API and is not used in the test scenario directly.
+
+    static #toggleButton = () =>
+        PageElement
+            .located(By.css('input.toggle'))
+            .describedAs('toggle button')
+}

package/build/templates/exampleFiles/serenity-js/cucumber/step-definitions/steps.ts.ejs

@@ -0,0 +1,37 @@
+<%- _.import('Given, When, Then, type DataTable', '@cucumber/cucumber') %>
+<%- _.import('Ensure, equals', '@serenity-js/assertions') %>
+<%- _.import('type Actor', '@serenity-js/core') %>
+<%- _.import('TodoList', '../../serenity/todo-list-app/TodoList') %>
+
+Given('{actor} starts/started with a list containing:', async (<%- _.param('actor', 'Actor') %>, <%- _.param('table', 'DataTable') %>) => {
+    await actor.attemptsTo(
+        TodoList.createListContaining(itemsFrom(table)),
+    )
+})
+
+When('{pronoun} marks/marked the following item(s) as completed:', async (<%- _.param('actor', 'Actor') %>, <%- _.param('table', 'DataTable') %>) => {
+    await actor.attemptsTo(
+        TodoList.markAsCompleted(itemsFrom(table)),
+    )
+})
+
+When('{pronoun} marks/marked the following item(s) as outstanding:', async (<%- _.param('actor', 'Actor') %>, <%- _.param('table', 'DataTable') %>) => {
+    await actor.attemptsTo(
+        TodoList.markAsOutstanding(itemsFrom(table)),
+    )
+})
+
+Then('{pronoun} should see that she has {int} item(s) outstanding', async (<%- _.param('actor', 'Actor') %>, <%- _.param('expectedCount', 'number') %>) => {
+    await actor.attemptsTo(
+        Ensure.that(TodoList.outstandingItemsCount(), equals(expectedCount)),
+    )
+})
+
+/**
+ * Extracts the data from a single-column Cucumber DataTable and returns it as an `Array<string>`
+ *
+ * @param table
+ */
+function itemsFrom(<%- _.param('table', 'DataTable') %>)<%- _.returns('string[]') %> {
+    return table.raw().map(row => row[0])
+}

package/build/templates/exampleFiles/serenity-js/cucumber/support/parameter.config.ts.ejs

@@ -0,0 +1,18 @@
+<%- _.import('defineParameterType', '@cucumber/cucumber') %>
+<%- _.import('actorCalled, actorInTheSpotlight', '@serenity-js/core') %>
+
+defineParameterType({
+    regexp: /[A-Z][a-z]+/,
+    transformer(<%- _.param('name', 'string') %>) {
+        return actorCalled(name)
+    },
+    name: 'actor',
+})
+
+defineParameterType({
+    regexp: /he|she|they|his|her|their/,
+    transformer() {
+        return actorInTheSpotlight()
+    },
+    name: 'pronoun',
+})

package/build/templates/exampleFiles/serenity-js/cucumber/todo-list/completing_items.feature.ejs

@@ -0,0 +1,23 @@
+Feature: Completing items
+
+  Scenario: Counting outstanding items
+
+    Given Alice started with a list containing:
+      | Buy dog food             |
+      | Feed the dog             |
+      | Book a vet's appointment |
+    When she marks the following items as completed:
+      | Buy dog food |
+      | Feed the dog |
+    Then she should see that she has 1 item outstanding
+
+  Scenario: Marking items as not completed
+
+    Given Alice started with a list containing:
+      | Buy dog food |
+      | Feed the dog |
+    And she marked the following items as completed:
+      | Buy dog food |
+    When she marks the following items as outstanding:
+      | Buy dog food |
+    Then she should see that she has 2 items outstanding

package/build/templates/exampleFiles/serenity-js/cucumber/todo-list/narrative.md.ejs

@@ -0,0 +1,17 @@
+Serenity/JS Todo List Example
+
+Narrative:
+
+This is a simple example of a Serenity/JS project, interacting with a [TodoMVC](http://todomvc.com/) application
+available at [todo-app.serenity-js.org/](https://todo-app.serenity-js.org/).
+
+This note is called _"the narrative"_. It can be used to provide the context around the business capability of your
+product ("Reporting Results" in this case) and its features that help to enable this capability.
+
+**Please note:** While [Cucumber](https://github.com/cucumber/cucumber-js) allows you to capture a description
+of each feature in the `.feature` file, [Serenity/JS](https://serenityjs.org) allows us to group those `.feature`
+files in directories corresponding to "epics", "themes" or "business capabilities" of your system and provide
+each one of those with additional context using this `narrative.txt` file.
+
+**By the way:** Did you notice that you can use **[markdown syntax](https://www.markdownguide.org/)** to better express
+your thoughts?