# ember-hook
> Yerrr tests be brittle, mattie!!!
Latest version **1.4.2** (published 2017-06-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install ember-hook
pnpm add ember-hook
yarn add ember-hook
bun add ember-hook
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.4.2 |
| Published | 2017-06-08 |
| First published | 2015-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6 |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 52 |
| Maintainers | nullnullnull, pzuraq, ticketfly |
| Keywords | ember-addon |
## Links
- npm: https://www.npmjs.com/package/ember-hook
- Repository: https://github.com/Ticketfly/ember-hook
- Homepage: https://github.com/Ticketfly/ember-hook#readme
- Issues: https://github.com/Ticketfly/ember-hook/issues
- npm.io page: https://npm.io/package/ember-hook
## Dependencies (2)
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.0.0
- [ember-get-config](https://npm.io/package/ember-get-config.md) ^0.2.0
## Recent versions
- 1.4.2 (latest) — 2017-06-08
- 1.4.1 — 2016-12-29
- 1.4.0 — 2016-12-13
- 1.3.5 — 2016-10-06
- 1.3.4 — 2016-10-05
- 1.3.3 — 2016-09-19
- 1.3.2 — 2016-09-12
- 1.3.1 — 2016-08-11
- 1.3.0 — 2016-08-11
- 1.2.1 — 2016-07-15
- 1.2.0 — 2016-07-11
- 1.1.1 — 2016-06-14
- 1.1.0 — 2016-06-14
- 1.0.1 — 2016-05-29
- 1.0.0 — 2016-05-25
- … 7 more at https://npm.io/package/ember-hook/versions
## README
[](https://badge.fury.io/js/ember-hook)
[](https://travis-ci.org/Ticketfly/ember-hook)
[](https://codeclimate.com/github/Ticketfly/ember-hook)
# ember-hook
Way to go! You just completed a full and rigorous suite of acceptance tests for your Ember app! But wait, what is this? Your designers have overhauled the site, and now you need to update all your tests to reflect new class names? Well, #@!%!!!
Enter `ember-hook`. Rather than coupling your tests to fickle class names, it lets you use stable data attributes. Better yet, these attributes only appear when you're running your tests, keeping your source trim and simple in production.
## Installation
`ember install ember-hook`
## Usage
Use the `hook` helper to define your data attribute:
```hbs
bar
```
Or the `hook` attribute in your component:
```js
export default Ember.Component.extend({
hook: 'foo'
});
```
Then in your tests:
```js
import { hook, $hook } from 'ember-hook';
. . . .
test('my hooks work', function(assert) {
assert.equal($hook('foo').text().trim(), 'bar'); // works
assert.equal(find(hook('foo')).text().trim(), 'bar'); // also works
});
```
`hook` returns a string such as `[data-test="foo"]`, while `$hook` returns an actual jquery object.
### Qualifiers
Class names aren't the only fickle thing about the DOM. The DOM itself is fickle. You might be tempted to scour a parent for a child element like this:
```js
find(`${hook('item')}:nth(2)`);
```
But if that child element moves somewhere else in the DOM, you're in trouble. So `ember-hook` provides some tools for decoupling your hooks from the DOM structure itself. Just pass some named params into the `hook` helper:
```hbs
{{#each parentArray as |childArray containerIndex|}}
{{#each childArray as |item index|}}
{{item}}
{{!-- or --}}
{{my-component hook="item" hookQualifiers=(hash index=index containerIndex=containerIndex)}}
{{/each}}
{{/each}}
```
And then in your tests:
```js
$hook('item', { index: 2, containerIndex: someVariable }); // grabs a very specific 'item'
$hook('item', { containerIndex: 5 }); // grabs all 'items' contained by the 5th parent
$hook('item'); // grabs all items
```
### Extending
Sometimes, you may want to extend `hookQualifiers` from a parent when passing it to a child. For instance, in the case above, the outer `{{#each}}` might be in one component, and the inner `{{#each}}` might be in a child.
In that case, the child can extend the parent's `hookQualifiers` adding on the `index` property. This is assuming that the child was given a `hookQualifiers` property
```hbs
{{#each childArray as |item index|}}
{{item}}
{{!-- or --}}
{{my-component hook="item" hookQualifiers=(extend hookQualifiers index=index)}}
{{/each}}
```
In order for this to work, you'll need an `extend` helper, which doesn't exist natively in `Ember` but is very simple to add to your project:
```js
import Ember from 'ember';
const { Helper, assign } = Ember;
export function extend ([original], newProps) {
return assign({}, original, newProps);
}
export default Helper.helper(extend);
```
### `initialize`
`ember-hook` works out-of-the-box with acceptance tests, but component integration tests present a problem: they do not run initializers. This includes the `ember-hook` initializer that allows you to use the `hook` attribute on a component. To fix this, you'll need to manually run the initializer in your component test:
```js
import { initialize } from 'ember-hook';
moduleForComponent('my component', 'Integration | Component | my component', {
integration: true,
beforeEach() {
initialize();
}
});
```
### Changing Component Hook
If there's a conflict with the property `hook` on your components, you can change the property name in your `config/environment` file:
```js
// config/environment.js
var ENV ={
emberHook: {
hookName: 'customHookName'
}
}
```
### Changing Component Hook Qualifier
If there's a conflict with the property `hookQualifiers` on your components, you can change the property name in your `config/environment` file:
```js
// config/environment.js
var ENV ={
emberHook: {
hookQualifierName: 'customHookQualifierName'
}
}
```
### Changing the Delimiter
`ember-hook` delimits qualifiers by appending the string '&^%^&' to each. If this happens to conflict with something your code, you can change it in the config as well:
```js
// config/environment.js
var ENV ={
emberHook: {
delimiter: '¯\_(0)_/¯'
}
}
```
### Enabling ember-hook outside of the test environment
`ember-hook` by default is enabled when the environment is `test` or `development`. If you need to force ember-hook to be enabled in other environments, or always on, you can use `enabled`.
```js
// config/environment.js
var ENV ={
emberHook: {
enabled: true
}
}
```
```js
// config/environment.js
module.exports = function(environment) {
var ENV ={
emberHook: {
// only enable in test or production builds
enabled: environment === 'production'
}
}
// ...
}
```
---
_Source: https://npm.io/package/ember-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._