# Testing - Example Issues?

**URL:** <https://discuss.emberjs.com/t/testing-example-issues/14607>\
**Category:** Testing\
**Created:** [April 22, 2018, 4:14pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607 "2018-04-22T16:14:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [April 22, 2018, 4:14pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/1 "2018-04-22T16:14:32Z")

</div>

I’ll be giving a talk at Ember NYC this upcoming thursday ([2018-04-26 meetup details](https://www.meetup.com/EmberJS-NYC/events/249029087/)) on the latest and greatest in testing. I plan on including a Q/A type section on “real world examples” and I’d love to have a more rounded representation from the community at large (instead of just the things I’ve personally faced).

Please post some examples (gists, link to GH, inline, etc) of what you have been struggling with lately in your tests, and I’ll try to include some solutions for them in my talk (will also try to update the thread with details).

Thank you in advance!

---

<div class="post-metadata">

**Author:** ![ryanto](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ryanto/32/13850_2.png) [@ryanto](https://discuss.emberjs.com/u/ryanto)\
**Post date:** [April 22, 2018, 5:17pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/2 "2018-04-22T17:17:47Z")

</div>

Awesome! I just want to add that we will be live streaming this meet up as well! So folks that can’t make it to NYC will still be able to enjoy the talk.

* * *

Now to ask my testing questions…

One abstract thing I struggle with is having a massive amount of acceptance tests. The past year I’ve been working on an application that is full of forms and I’ve found that I’m writing user centric tests for inputs, validations, successful saves, and server errors. The forms are wizard-like and they depend on the current user, so we’ve been using acceptance tests. However, it takes a noticeable amount of time to run the suite. I’d love to get your thoughts on how you would approach an application that had 1,000 acceptance tests.

Another question - I’ve never been able to successfully test drag and drop behavior when using 3rd party libraries like dragula. I usually just paper over these tests and find some creative way of skipping them. I’m wondering if there is a best practice approach for testing complex browser interactions?

---

<div class="post-metadata">

**Author:** ![jherdman](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jherdman/32/15000_2.png) [@jherdman](https://discuss.emberjs.com/u/jherdman)\
**Post date:** [April 22, 2018, 6:51pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/3 "2018-04-22T18:51:18Z")

</div>

I’ll second drag-and-drop interactions, especially file uploading. Select elements too. You can throw any value you want with `fillIn`, even invalid options.

---

<div class="post-metadata">

**Author:** ![kellyselden](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kellyselden/32/13835_2.png) [@kellyselden](https://discuss.emberjs.com/u/kellyselden)\
**Post date:** [April 23, 2018, 12:46am UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/4 "2018-04-23T00:46:09Z")

</div>

Testing addon build code in a way that is just as easy and as fast as runtime tests.

---

<div class="post-metadata">

**Author:** ![siva1511](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/siva1511/32/13855_2.png) [@siva1511](https://discuss.emberjs.com/u/siva1511)\
**Post date:** [April 23, 2018, 5:12am UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/5 "2018-04-23T05:12:48Z")

</div>

We have been struggling with a huge number of acceptance tests too. We split our tests with ember-exam and run on Chrome Headless and over time, the test suite has become pretty slow. At times, due to the sheer number of tests, we also have the browser crashing when the test is going on which results in one or two failed tests.

---

<div class="post-metadata">

**Author:** ![TBieniek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tbieniek/32/10937_2.png) [@TBieniek](https://discuss.emberjs.com/u/TBieniek)\
**Post date:** [April 23, 2018, 7:56am UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/6 "2018-04-23T07:56:48Z")

</div>

We have unfortunately had quite a few different problems related to testing our app that uses Ember Engines.

Using the plain `setupTest(hooks)` it is not possible to test things that are part of the engine. Instead you can pass in a custom resolver using something like `setupTest(hooks, { resolver })`, with `resolver` coming from [`engineResolverFor()`](https://github.com/ember-engines/ember-engines/blob/master/addon-test-support/engine-resolver-for.js). This seemed to work, but once you do that you no longer have access to things _outside_ the engine, which created issues with service injections and looking up things using `this.owner.lookup()`.

What we did instead was use a custom resolver that can resolve from both the host app, and the lazy loaded engine:

```nohighlight
import Resolver from 'my-app/resolver';
import engineResolverFor from 'ember-engines/test-support/engine-resolver-for';

let engineResolver = engineResolverFor('the-async-engine');

const resolver = Resolver.extend({
  resolve() {
    let resolved = this._super(...arguments);
    if (resolved) {
      return resolved;
    }

    return engineResolver.resolve(...arguments);
  },
}).create();

```

This seems to work for us now, but is probably not ideal. It also creates a bunch of other problems that got surfaces when trying to use the `setupMirage()` helper from `ember-cli-mirage`. `ember-cli-mirage` sets up an initializer that registers something on the `application` registry. Later, in the `setupMirage()` function it is trying to `this.owner.lookup()` that registered thing, but due to the custom resolver passed to `setupTest()` the `application` of the initializer is not related to the `this.owner` being available in tests.

In summary:

- testing code that is using Ember Engines is not straight forward yet
- with a few workarounds we can make it work reasonably okay

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [April 23, 2018, 12:33pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/7 "2018-04-23T12:33:37Z")

</div>

@kellyselden I think we might be on to the same thing.

I’m not really sure how to [test an addon’s `index.js`](https://github.com/EmberMN/ember-cli-bootswatch/blob/master/index.js) to make sure assest are properly imported into the build pipeline. Or change depending on [configuration options](https://github.com/EmberMN/ember-cli-bootswatch#configuration).

---

<div class="post-metadata">

**Author:** ![mattmcmanus](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mattmcmanus/32/13776_2.png) [@mattmcmanus](https://discuss.emberjs.com/u/mattmcmanus)\
**Post date:** [April 23, 2018, 1:15pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/8 "2018-04-23T13:15:36Z")

</div>

Testing loading/intermediate states (ie: that stuff that happens while `await` is awaiting) isn’t the most intuitive. Here is a pattern I’ve settled on, but I’ve got @lukemelia helping me out so I feel like I’m cheating 😏.

```nohighlight
let clickPromise = click('[data-test-renew-now-button]');
await waitFor('[data-test-processing-spinner]');
assert.isPresent('[data-test-processing-spinner]');
await clickPromise;

```

---

<div class="post-metadata">

**Author:** ![jjustice](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jjustice/32/13858_2.png) [@jjustice](https://discuss.emberjs.com/u/jjustice)\
**Post date:** [April 23, 2018, 3:37pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/9 "2018-04-23T15:37:32Z")

</div>

Testing ember-orbit models. I was hoping to drop it in as an easy replacement for Ember Data to get offline support, and changing data reads/writes was easy, but it wasn’t clear to me how to test against an app using ember-orbit. I believe I got some errors, but I’m not sure what they were. The pattern just wasn’t as obvious as it was with Ember Data and Mirage.

---

<div class="post-metadata">

**Author:** ![ryanto](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ryanto/32/13850_2.png) [@ryanto](https://discuss.emberjs.com/u/ryanto)\
**Post date:** [April 23, 2018, 3:55pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/10 "2018-04-23T15:55:27Z")

</div>

Testing that my addon works and plays nicely with fastboot. Often times I’m writing an addon that isn’t made for fastboot and it’s easy to accidentally slip something in that will be problematic for fastboot rendered apps. For example, a reference to window or document 😮

Currently, I’ve been writing node qunit tests that build the app and call `Fastboot#visit`. This has been helpful with travis, but would love to know what the blessed approach is here.

Here’s a some code that shows how I currently test addons in fastboot: [ember-data-storefront/adapter-test.js at master · embermap/ember-data-storefront · GitHub](https://github.com/embermap/ember-data-storefront/blob/master/fastboot-tests/adapter-test.js) I got this idea from liquid-fire, which I thought was cool.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [April 23, 2018, 7:59pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/11 "2018-04-23T19:59:59Z")

</div>

> [@ryanto](#):
>
> I got this idea from liquid-fire, which I thought was cool.

Yeah, I think we should package this pattern up as its own addon. I would be happy to give pointers if somebody wants to give it a go.

Other patterns also exist like [ember-fastboot-addon-tests](https://github.com/kaliber5/ember-fastboot-addon-tests), but personally I don’t prefer the [ember-cli-addon-tests](https://github.com/tomdale/ember-cli-addon-tests) architecture that it’s built on – I think dummy apps plus eslint can exercise everything that addon-tests can, in a faster way that doesn’t involve making your test suite call NPM (which skeeves me out).

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [April 23, 2018, 8:06pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/12 "2018-04-23T20:06:10Z")

</div>

> [@ef4](#):
>
> I think dummy apps plus eslint can exercise everything that addon-tests can, in a faster way that doesn’t involve making your test suite call NPM (which skeeves me out).

I completely agree 👏

---

<div class="post-metadata">

**Author:** ![alexlafroscia](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexlafroscia/32/10701_2.png) [@alexlafroscia](https://discuss.emberjs.com/u/alexlafroscia)\
**Post date:** [April 23, 2018, 8:48pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/13 "2018-04-23T20:48:47Z")

</div>

One thing I’m yet to come up with a great story on is how to nicely generate some Ember Data models in tests that can be passed into components that expect them as arguments but do not fetch the models themselves.

For example, I may have a `blog-post` component with a `post` argument. I _want_ to use Mirage to generate a post using my factories and pass it into the `blog-post` component in a test, but there’s no great way to do this. I have ended up doing something like this:

```javascript
test('rendering a blog post', async function(assert) {
  const post = this.server.create('post', 'inSomeState');
  
  await Ember.run(async function() {
    // Must be inside a Run Loop to use the store, abstraction feels really leaky
    this.set('post', this.store.find('post', post.id);
  });

  await render(hbs`
    {{blog-post post=post}}
  `);
  
  // Perform some assertion, finally
});

```

This feels… Not great. I get the benefit of avoid an acceptance test when I really want an integration test, but it feels like this should be easier. Is there a better way?

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [April 25, 2018, 11:32am UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/14 "2018-04-25T11:32:02Z")

</div>

Awesome examples so far y’all, thank you!

I should have time to incorporate more into the talk, so feel free to keep ‘me coming…

---

<div class="post-metadata">

**Author:** ![andrewcallahan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/andrewcallahan/32/13874_2.png) [@andrewcallahan](https://discuss.emberjs.com/u/andrewcallahan)\
**Post date:** [April 25, 2018, 12:20pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/15 "2018-04-25T12:20:19Z")

</div>

I’ve wanted to ditch Mirage for ages because I hate spending so much time creating a fake backend on all the Ember apps I work on. The only viable alternative I’ve seen is a DockYard blog post about how they do [end-to-end testing using a live Phoenix server](https://dockyard.com/blog/2017/11/15/how-to-add-concurrent-transactional-end-to-end-tests-in-a-phoenix-powered-ember-app) - which looks awesome.

I’d love to hear your thoughts on mocking vs having a live server, what you do at LinkedIn for testing Ember apps, and if there are other approaches I haven’t thought about.

Thanks so much for taking your time to do this!!

---

<div class="post-metadata">

**Author:** ![kellyselden](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kellyselden/32/13835_2.png) [@kellyselden](https://discuss.emberjs.com/u/kellyselden)\
**Post date:** [April 25, 2018, 3:09pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/16 "2018-04-25T15:09:54Z")

</div>

Testing components that have debug assertions using the new testing syntax. In the past it would throw, now it doesn’t. There doesn’t seem to be any work around either so we annoyingly have a few files that are struck on the old syntax.

---

<div class="post-metadata">

**Author:** ![chilicoder](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chilicoder/32/12721_2.png) [@chilicoder](https://discuss.emberjs.com/u/chilicoder)\
**Post date:** [April 25, 2018, 6:04pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/17 "2018-04-25T18:04:49Z")

</div>

I see that many guys mention asymmetry for the acceptance test. I also found this in our test suite. Would be great to see some great examples of unit and integration test for different types of entities. Like services, models, controllers, routes, initializers etc.

And it would be even greater to see in this examples using of sinon.js

---

<div class="post-metadata">

**Author:** ![larryh](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/larryh/32/16498_2.png) [@larryh](https://discuss.emberjs.com/u/larryh)\
**Post date:** [April 25, 2018, 6:08pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/18 "2018-04-25T18:08:41Z")

</div>

Do you have a link for the live-streaming? It isn’t mentioned on the MeetUp page.

---

<div class="post-metadata">

**Author:** ![larryh](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/larryh/32/16498_2.png) [@larryh](https://discuss.emberjs.com/u/larryh)\
**Post date:** [April 25, 2018, 7:10pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/19 "2018-04-25T19:10:55Z")

</div>

Just saw the link in the new edition of Ember Weekly. For those of you who don’t get it:

[![](https://img.youtube.com/vi/l6WBx2Qk_8A/maxresdefault.jpg "MOVED - Ember NYC April 2018") ](https://www.youtube.com/watch?v=l6WBx2Qk_8A)

---

<div class="post-metadata">

**Author:** ![Alonski](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alonski/32/12542_2.png) [@Alonski](https://discuss.emberjs.com/u/Alonski)\
**Post date:** [April 25, 2018, 7:41pm UTC](https://discuss.emberjs.com/t/testing-example-issues/14607/20 "2018-04-25T19:41:09Z")

</div>

We have a quite large multi year app. We have 0 tests. At this point we don’t know where to get started! I’d love a few pointers on getting started

[Next page](https://discuss.emberjs.com/t/testing-example-issues/14607.md?page=2)