From 7b9347a567237795f12e453dbc6eac393e01f3ce Mon Sep 17 00:00:00 2001 From: Jen Weber Date: Wed, 4 Mar 2020 14:45:11 -0500 Subject: [PATCH 1/3] write testing docs --- docs/app/pods/docs/template.hbs | 3 ++ docs/app/pods/docs/testing/template.md | 61 ++++++++++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 docs/app/pods/docs/testing/template.md diff --git a/docs/app/pods/docs/template.hbs b/docs/app/pods/docs/template.hbs index aaf9d3f32..9d46d85cc 100644 --- a/docs/app/pods/docs/template.hbs +++ b/docs/app/pods/docs/template.hbs @@ -14,6 +14,9 @@ {{nav.item "Animating Between Components" "docs.between"}} {{nav.item "Beacons" "docs.beacons"}} + {{nav.section "Testing"}} + {{nav.item "Test Helpers and Debugging" "docs.testing"}} + {{/viewer.nav}} {{#viewer.main}} diff --git a/docs/app/pods/docs/testing/template.md b/docs/app/pods/docs/testing/template.md new file mode 100644 index 000000000..645ab55dd --- /dev/null +++ b/docs/app/pods/docs/testing/template.md @@ -0,0 +1,61 @@ +# Testing + +This section will cover tools that you can use to test and debug an app that has animations. + +Here are some common questions that the testing tools help address: + +1. How can you make sure that animations do not slow down your tests? +2. How do you wait for animations to finish before making test assertions or snapshots? +3. How can you test app state partway through an animation? +4. What is the best way to debug animations that do not look how you expect them to? + +## Animation duration in tests + +If your app is full of animations with long durations, they could slow down your acceptance tests running in the browser. +One way to prevent this is to set a very fast duration in your `environment.js` for testing, and then use that duration as a default whenever you set an animation speed in your app's code: + +```js +// environment.js + +if (environment === 'test') { + ENV.animationSpeed = 20; +} +``` + +```js +// some-component.js + +import ENV from '@cardstack/cardhost/config/environment'; + +export default class SomeComponent extends Component { + let duration = ENV.animationSpeed || 500; + + *someAnimation({ keptSprites, receivedSprites }) { + keptSprites.forEach(sprite => { + move(sprite, { duration }); + }); + } +} +``` + +## Waiting for animations to finish + +`ember-animated` provides a test helper called `animationsSettled()`, which you can use in tests to make sure that an animation is complete before moving on to the next step of the test. +This is especially useful for test suites that use visual snapshots such as Percy. + +For examples of using this test helper and others, see the [acceptance tests for this addon](https://github.com/ember-animation/ember-animated/tree/master/tests/acceptance). + +## Pausing animations + +Sometimes, it is helpful to pause an in-progress animation in order to make a test assertion or take a snapshot. +You can use the `time.pause()` helper to accomplish this. + +For examples of using this test helper and others, see the [acceptance tests for this addon](https://github.com/ember-animation/ember-animated/tree/master/tests/acceptance). + + +## Visual Debugging + +Did you notice a problem with an animation you wrote? +One of the easiest ways to debug your animations is to slow them down and watch them while you click through the app. +You can install the [`ember-animated-tools`](https://github.com/ember-animation/ember-animated-tools) addon, which provides an interactive component that lets you control how quickly the animations run. +See the project README for more information about how to use the addon. From 1b0ba4e58762130ef958dec9f1adde1d8c69cbaa Mon Sep 17 00:00:00 2001 From: Jen Weber Date: Wed, 4 Mar 2020 14:49:28 -0500 Subject: [PATCH 2/3] fix code comments --- docs/app/pods/docs/testing/template.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/app/pods/docs/testing/template.md b/docs/app/pods/docs/testing/template.md index 645ab55dd..0f7c708b9 100644 --- a/docs/app/pods/docs/testing/template.md +++ b/docs/app/pods/docs/testing/template.md @@ -25,7 +25,8 @@ if (environment === 'test') { ```js // some-component.js -import ENV from '@cardstack/cardhost/config/environment'; +import ENV from 'my-app-name/config/environment'; +// ...more imports export default class SomeComponent extends Component { let duration = ENV.animationSpeed || 500; @@ -35,6 +36,8 @@ export default class SomeComponent extends Component { move(sprite, { duration }); }); } + + // ...more component code } ``` From 265ad1e12035fc2ddf8f9e322410b1ab53b532d5 Mon Sep 17 00:00:00 2001 From: Jen Weber Date: Wed, 4 Mar 2020 17:50:11 -0500 Subject: [PATCH 3/3] Fixes --- docs/app/pods/docs/template.hbs | 2 +- docs/app/pods/docs/testing/template.md | 10 +++++----- docs/app/router.js | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/app/pods/docs/template.hbs b/docs/app/pods/docs/template.hbs index 9d46d85cc..df4d6858d 100644 --- a/docs/app/pods/docs/template.hbs +++ b/docs/app/pods/docs/template.hbs @@ -15,7 +15,7 @@ {{nav.item "Beacons" "docs.beacons"}} {{nav.section "Testing"}} - {{nav.item "Test Helpers and Debugging" "docs.testing"}} + {{nav.item "Overview" "docs.testing"}} {{/viewer.nav}} diff --git a/docs/app/pods/docs/testing/template.md b/docs/app/pods/docs/testing/template.md index 0f7c708b9..29b88f685 100644 --- a/docs/app/pods/docs/testing/template.md +++ b/docs/app/pods/docs/testing/template.md @@ -1,13 +1,13 @@ -# Testing +# Testing Overview This section will cover tools that you can use to test and debug an app that has animations. Here are some common questions that the testing tools help address: -1. How can you make sure that animations do not slow down your tests? -2. How do you wait for animations to finish before making test assertions or snapshots? -3. How can you test app state partway through an animation? -4. What is the best way to debug animations that do not look how you expect them to? +- How can you make sure that animations do not slow down your tests? +- How do you wait for animations to finish before making test assertions or snapshots? +- How can you test app state partway through an animation? +- What is the best way to debug animations that do not look how you expect them to? ## Animation duration in tests diff --git a/docs/app/router.js b/docs/app/router.js index 8cc1f2cc5..40ba30a63 100644 --- a/docs/app/router.js +++ b/docs/app/router.js @@ -16,6 +16,7 @@ Router.map(function() { this.route('motions'); this.route('rules'); this.route('beacons'); + this.route('testing'); }); this.route('not-found', { path: '/*path' }); });