Skip to content

AltSchool/ember-get-component

Repository files navigation

CircleCI

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
import getComponent from 'ember-get-component';
getComponent.init();
Add it to your test
import getComponent from 'ember-get-component';
Get all component DOM elements by their name
getComponent.elementsByName('widget-item');
Get all component DOM elements by their testAttr
{{widget-item testAttr="specialWidget"}}
getComponent.elementByTestAttr('specialWidget');
Get a component instance from the Ember registry by name or testAttr

Note, these return only the instance for the first matching element.

getComponent.instanceByName('widget-item');
getComponent.instanceByTestAttr('specialWidget');
Get a component instance in this context from the Ember registry by the constructor
import WidgetItem from 'wherever';
getComponent.instanceByConstructor(WidgetItem);
Get just the query selector
const WIDGET_SELECTOR = getComponent.selectorByName('widget-item');
const SPECIAL_WIDGET_SELECTOR = getComponent.selectorByTestAttr('specialWidget');
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.debug();

Deluxe Debug

Future improvements
  • Have debug group the output by component name and testId while providing a count.
  • Consider adding a second param to elementsByName and elementsByAttr to provide jQuery scope.

How can this be better? Leave us feeback in an issue or, better yet, send us a Pull Request.

About

Simple way to find Ember Components within tests

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published