jagreehal/stencil-how-to-test-components

Examples of how to test Stencil components

Examples of how to test Stencil Components using Jest and Puppeteer

Examples of how to test Stencil components... both what works and doesn't!

EventEmitter

✅ can assert events have been raised

Methods

✅ can call methods on elements

Props

✅ can set props on element

✅ can change prop value

Snapshots

📷 can use snapshots

Added bonus!

For VSCode users checkout launch.json for debugging tests

{
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "E2E Test Current File",
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/node_modules/.bin/stencil",
            "args": ["test", "--e2e", "${relativeFile}"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Spec Test Current File",
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/node_modules/.bin/stencil",
            "args": ["test", "--spec", "${relativeFile}"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        }
    ]
}

stencil-how-to-test-components's Issues

An in-range update of @typescript-eslint/eslint-plugin is breaking the build 🚨

The devDependency @typescript-eslint/eslint-plugin was updated from 2.19.0 to 2.19.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@typescript-eslint/eslint-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v2.19.1

2.19.1 (2020-02-10)

Bug Fixes

• eslint-plugin: [unbound-method] blacklist a few unbound natives (#1562) (4670aab)
• typescript-estree: ts returning wrong file with project references (#1575) (4c12dac)

Commits

The new version differs by 5 commits.

• 1c8f0df chore: publish v2.19.1
• 4c12dac fix(typescript-estree): ts returning wrong file with project references (#1575)
• e9cf734 docs(eslint-plugin): fix typo in readme
• 10d86b1 docs(eslint-plugin): [no-dupe-class-members] fix typo (#1566)
• 4670aab fix(eslint-plugin): [unbound-method] blacklist a few unbound natives (#1562)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add example of navigation testing

I would love to see this repo cover a scenario where you navigate across pages. Ideally covering navigation handled two ways: one via a simple stencil route link, and another via a button which calls a function to programatically navigate.

For example:

1. Load the root url: "/"
2. Find a navigation link: <stencil-route-link url='/page-2' ...
3. Click the link
4. Assert page is Page 2
5. Find a navigation button <button onClick={() => this.gotoPage3()} ...
6. Click the button
7. Assert page is Page 3

An in-range update of @types/puppeteer is breaking the build 🚨

The devDependency @types/puppeteer was updated from 1.9.1 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/puppeteer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of @typescript-eslint/parser is breaking the build 🚨

The devDependency @typescript-eslint/parser was updated from 2.19.0 to 2.19.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@typescript-eslint/parser is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v2.19.1

2.19.1 (2020-02-10)

Bug Fixes

• eslint-plugin: [unbound-method] blacklist a few unbound natives (#1562) (4670aab)
• typescript-estree: ts returning wrong file with project references (#1575) (4c12dac)

Commits

The new version differs by 5 commits.

• 1c8f0df chore: publish v2.19.1
• 4c12dac fix(typescript-estree): ts returning wrong file with project references (#1575)
• e9cf734 docs(eslint-plugin): fix typo in readme
• 10d86b1 docs(eslint-plugin): [no-dupe-class-members] fix typo (#1566)
• 4670aab fix(eslint-plugin): [unbound-method] blacklist a few unbound natives (#1562)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

TypeError: Cannot set property element of #<ContentList> which has only a getter

element is an HTMLElement in tsx file.

An in-range update of prettier is breaking the build 🚨

The devDependency prettier was updated from 1.17.1 to 1.18.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Release Notes for 1.18.0

🔗 Release Notes

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of @types/puppeteer is breaking the build 🚨

The devDependency @types/puppeteer was updated from 1.12.1 to 1.12.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/puppeteer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

How to mock a HTML

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.