https://github.com/kellyselden/ember-test-setup
Testing shorthands to reduce duplication
https://github.com/kellyselden/ember-test-setup
Last synced: about 1 year ago
JSON representation
Testing shorthands to reduce duplication
- Host: GitHub
- URL: https://github.com/kellyselden/ember-test-setup
- Owner: kellyselden
- License: mit
- Created: 2018-04-05T01:42:20.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-13T18:22:11.000Z (about 1 year ago)
- Last Synced: 2025-03-28T02:21:28.728Z (about 1 year ago)
- Language: JavaScript
- Size: 1.61 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-test-setup - Testing shorthands to reduce duplication. (Packages / Testing)
README
ember-test-setup
==============================================================================
[](https://badge.fury.io/js/ember-test-setup)
[](https://travis-ci.org/kellyselden/ember-test-setup)
Testing shorthands to reduce duplication
Motivation
------------------------------------------------------------------------------
You have many tests with duplicated render setup, templates, and post render code.
```js
test('my test 1', async function(assert) {
this.setProperties({
foo: true,
bar: true
});
await render(hbs`
{{my-component
foo=foo
bar=bar
}}
`);
let label = document.querySelector('label');
let input = document.querySelector('input');
/// run tests
});
test('my test 2', async function(assert) {
this.setProperties({
foo: true,
bar: true
});
await render(hbs`
{{my-component
foo=foo
bar=bar
}}
`);
let label = document.querySelector('label');
let input = document.querySelector('input');
/// run tests
});
// more tests
```
You might try to make your own helpers to remove the duplication, but here is a standard solution.
```js
let label, input;
let render = setupRender(hooks, {
beforeRender() {
this.setProperties({
foo: true,
bar: true
});
},
template: hbs`
{{my-component
foo=foo
bar=bar
}}
`,
afterRender() {
label = document.querySelector('label');
input = document.querySelector('input');
}
});
test('my test 1', async function(assert) {
await render();
/// run assertions
});
test('my test 2', async function(assert) {
await render();
/// run assertions
});
// more tests
```
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.16 or above
* Ember CLI v2.13 or above
* Node.js v10 or above
Installation
------------------------------------------------------------------------------
```
ember install ember-test-setup
```
Usage
------------------------------------------------------------------------------
Replace
```js
import { render } from '@ember/test-helpers';
```
with
```js
import { setupRender } from 'ember-test-setup';
```
Then add
```js
let render = setupRender(hooks, {
beforeRender() {
// optional
},
template: hbs`
{{my-component
// ...
}}
`,
afterRender() {
// optional
}
});
```
And finally replace all usages of
```js
await render(hbs`
{{my-component
// ...
}}
`);
```
with
```js
await render();
```
It is possible to override the default template, useful for testing default values.
```js
await render(hbs`{{my-component}}`);
```
You can also do this for models and services.
```js
import { setupModel, setupService } from 'ember-test-setup';
setupModel(hooks, {
beforeModel() {
// optional
},
model: 'my-model',
init: () => ({
// optional
}),
afterModel(model) {
// optional
}
});
setupService(hooks, {
beforeService() {
// optional
},
service: 'my-service',
init: () => ({
// optional
}),
afterService(service) {
// optional
}
});
let model = this.model({ /* optional */ });
let service = this.service({ /* optional */ });
```
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).