# Ember CLI Mirage - Create mock and use fixture data?

**URL:** <https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663>\
**Category:** Testing\
**Created:** [October 16, 2018, 3:21pm UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663 "2018-10-16T15:21:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![corrspt](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/corrspt/32/11587_2.png) [@corrspt](https://discuss.emberjs.com/u/corrspt)\
**Post date:** [October 16, 2018, 3:21pm UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/1 "2018-10-16T15:21:32Z")

</div>

Hi all,

I’ve been trying to setup an acceptance test using `ember-cli-mirage`, but I’ve hit a roadblock. I’ve got a model, called `pqr` with a relation (one to one) to a model called `pqr-standard`.

I’ve defined a set of fixtures for `pqr-standard` as they are mostly fixed. I want to create an acceptance test that visits `pqr/:id` and comes with a pre-selected `standard` (as the presence of a given standard influences some parts of my form)

My thinking was something like:

```
server.loadFixtures();
server.create('pqr', { standard: ''} ) <---- Here lies the problem

```

I would like to load one of the fixture values in the `standard` property. I’ve tried making this work on the route handler side, but no luck

```
this.get('/pqrs/1', function({ db }, request) {
let pqr = db.pqrs.insert({
  standard: db.pqrStandards[0]
});
return pqr;
});

```

I’ve tried making on the acceptance-test file, by making a new `server.create('pqr-standard')` (and using it when creating the pqr) and the value is added to mirage’s database, but in my form I don’t see the value for the standard I’ve created.

So my questions are: How can I use, server.create(‘model’) and pass it an attribute which is a fixture? Or am I doing something wrong here?

Thanks!

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [October 17, 2018, 11:40am UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/2 "2018-10-17T11:40:24Z")

</div>

@corrspt The fixture is used to seed Mirage’s database, but when using `server.create` and Mirage’s ORM you still want to always be dealing with models (so the ORM can work its magic).

Let’s say you have this fixture file for your `pqr-standard` models:

```nohighlight
// fixtures/pqr-standards.js
export default [
  { id: 1, name: 'Foo' }
]

```

When you call

```nohighlight
server.loadFixtures()

```

This is going to load in that data into Mirage’s database. Now that means you can do

```nohighlight
let firstStandard = server.schema.pqrStandards.find(1);

```

to get the actual Mirage model, which you can pass to `server.create` to set up the association on your new `pqr` model:

```nohighlight
server.create('pqr', { standard: firstStandard })

```

Basically, think of fixtures or factories (`server.create`) calls as two ways to do the same thing: get data into Mirage’s database. You can always see all your data by running `server.db.dump()`.

---

<div class="post-metadata">

**Author:** ![corrspt](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/corrspt/32/11587_2.png) [@corrspt](https://discuss.emberjs.com/u/corrspt)\
**Post date:** [October 18, 2018, 9:15am UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/3 "2018-10-18T09:15:19Z")

</div>

Hi Sam, thanks a lot for your reply 🙂 I learned a few things

I forgot to mention I’m using:

- `Mirage 0.4.9 `
- `Ember 3.2.2`
- `Ember Data 3.1.1`

By now, I’ve tried a gazillion combinations, but here’s what I have: If I do what you say, and I do a server.db.dump() in the middle of my test, I do see the fixtures for `pqr-standard` and I do see a single `pqr` with a `standardId` attribute with value of `1`.

However, when I render my acceptance test nothing is rendered in the `standard` field (an ember-power-select component) If I trigger an `open` on that ember-power-select I can see the `pqr-standards` fixtures as the list of options)

The only way I managed to have the `standard` field have a value was the following: In my `beforeEach` I did:

```
      this.store = this.owner.lookup('service:store')

```

And then in my test:

```
    run(() => {
         let pqr = this.store.findRecord('pqr', 1).then((pqr) => {
         this.store.findRecord('pqr-standard', 1).then((standard) => {
           pqr.set('standard', standard);
           visit(`pqrs/${pqr.id}`);
         });
       });
    });

```

Which tells me that things exist in the store, but that association with `pqr` and `pqr-standard` is not made at the `ember data store` level.

I guess my issue with `Mirage` is fixed, so thanks a lot for that 🙂 any tips on how I could keep on debugging this?

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [October 18, 2018, 2:49pm UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/4 "2018-10-18T14:49:03Z")

</div>

Next step would be to look at the Mirage requests your Ember app is making, to make sure that the data is coming over the wire in the format Ember Data expects (including the relationship keys).

Try putting

```auto
server.logging = true;

```

at the top of your test, running it, and looking at the network request logs in Console. I’m expecting you’ll find something where your Ember app is getting just the `pqr-standard` models without the relationships (possibly you’re not using `include: 'standard'` in your call to `findRecord` or `findAll`?)

---

<div class="post-metadata">

**Author:** ![corrspt](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/corrspt/32/11587_2.png) [@corrspt](https://discuss.emberjs.com/u/corrspt)\
**Post date:** [October 18, 2018, 4:20pm UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/5 "2018-10-18T16:20:40Z")

</div>

Hi Sam, thanks for sticking with me, really appreciate it 🙂

That tip on `include: 'standard'` + the `logging` did really help. My real backend includes the `standard` automatically without any need for adding the `include` in the query (in the `model` hook for the route). Once I added that `include: standard` to the `model` hook it started working. Although I don’t really need in “development/production”

Guess what I want to ask is… is it possible to “tell” mirage that a given attribute should be `included by default`?

Thanks a ton, this thing was basically blocking from making any kind of acceptance test with existing data (which are the most interesting ones) as basically everything depends on a `standard` being selected.

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [October 18, 2018, 4:28pm UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/6 "2018-10-18T16:28:13Z")

</div>

You can add an include property to your mirage serializer for that model: [http://www.ember-cli-mirage.com/docs/v0.4.x/serializers/#include](http://www.ember-cli-mirage.com/docs/v0.4.x/serializers/#include)

---

<div class="post-metadata">

**Author:** ![corrspt](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/corrspt/32/11587_2.png) [@corrspt](https://discuss.emberjs.com/u/corrspt)\
**Post date:** [October 18, 2018, 5:01pm UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/7 "2018-10-18T17:01:25Z")

</div>

Hi dknuten, thanks for pitching in. That seems to be exactly what I needed. Thanks to you and Sam for helping me out on this, truly appreciate it. I really do need try and learn mirage more 🙂

Cheers!

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [October 18, 2018, 5:34pm UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/8 "2018-10-18T17:34:03Z")

</div>

Glad you figured it out! By the way this is exactly the sort of thing Mirage is made for surfacing. We believe it’s important for everyone to understand how data is flowing back and forth between the Ember app and the backend, so having a good understanding of that in your own app will help you down the road when talking with the backend/API team & building new features.

---

<div class="post-metadata">

**Author:** ![corrspt](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/corrspt/32/11587_2.png) [@corrspt](https://discuss.emberjs.com/u/corrspt)\
**Post date:** [October 19, 2018, 9:27am UTC](https://discuss.emberjs.com/t/ember-cli-mirage-create-mock-and-use-fixture-data/15663/9 "2018-10-19T09:27:50Z")

</div>

Makes total sense Sam, and since I’m my own backend team, it’s really nice that I can understand that flow 😅