Ember GetComponent Test Helper
Purpose
Simplify the process of selecting components within integration tests.
We do this by providing a simple API for getting component elements, instances and jQuery selectors.
This works by reopening Component
to add a couple of data-test-*
attributes to every component within the testing environment.
Motivation
We often need to target components within tests. So far we've done this by either manually adding a special .test-*
class name or data-test-*
attribute to the component. However, these are hard to manage and pollute production markup with unnecessary attributes or classes. By providing a simple API for accessing components by name or, optionally, a testAttr, we can simplify our tests.
Usage
Initialize the helper
// in test-helper.js;getComponent;
Add it to your test
;
Get all component DOM elements by their name
getComponent;
Get all component DOM elements by their testAttr
{{widget-item testAttr="specialWidget"}}
getComponent;
Get a component instance from the Ember registry by name or testAttr
Note, these return only the instance for the first matching element.
getComponent;getComponent;
Get a component instance in this context from the Ember registry by the constructor
;getComponent;
Super Deluxe Debugging
The debugger provides a list of components by name and testAttr as well as cut-and-paste-ready mocha assertions for testing visibility. Use it as a starting point in your tests.
getComponent;
Future improvements
- Have debug group the output by component name and testId while providing a count.
- Consider adding a second param to
elementsByName
andelementsByAttr
to provide jQuery scope.
How can this be better? Leave us feeback in an issue or, better yet, send us a Pull Request.