Integration tests not loading data into store

[ghost]

I can't seem to load data into the store in integration tests. My acceptance tests work fine.

My component loads data from the store, I want to ensure that a computed property is properly only returning 5 objects.

Here is my integration test code:

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { startMirage } from 'sidekick/initializers/ember-cli-mirage';

moduleForComponent('dashboard-notes', 'Integration | Component | dashboard notes', {
  integration: true,
  beforeEach() {
    this.server = startMirage();
  },
  afterEach() {
    this.server.shutdown();
  }
});

test('it shows up to 5 notes', function(assert) {
  this.server.createList('note', 6);
  this.render(hbs`{{dashboard-notes}}`);
  assert.equal(this.$('.md-list-item-text').length, 5);
});

If I console log out this.$(), I can see that the each loop in the template doesn't output anything, showing that data wasn't created in the store. window.server exists.

Is this a bug or am I doing something incorrectly?

[kashiif]

showing that data wasn't created in the store.

In your test, add console.log(server.schema.notes.all().models.length) after this.server.createList('note', 6);. It should output 6 showing data has been created.

How does your component access store? (Note: generally components should not access store. This is against Ember's data-down-action-up philosophy.)

[georges49]

I am having the same problem.

  let panel = server.create('panel');
  let search = server.create('search', 'search', {panel, panel_id: panel.id});
  this.get("panelsService.allPanels").pushObject(search);
  this.render(hbs`{{panel-comp panelElementId='5874df4f2b0d78048dd2085c' panelType='Search' panelIndex=0 numberOfPanels=1}}`);

And in panel comp I am calling a function in the service in which I have store.peekRecord. The result of peekRecord is undefined.

And in case I peek all records of the search model after server.create, the content would be null.

  let panel = server.create('panel');
  let search = server.create('search', 'search', {panel, panel_id: panel.id});
  console.log(this.get("store").peekAll("search")); // content: null
  this.get("panelsService.allPanels").pushObject(search);
  this.render(hbs`{{panel-comp panelElementId='5874df4f2b0d78048dd2085c' panelType='Search' panelIndex=0 numberOfPanels=1}}`);

[samselikoff]

@anthonycollini add this line to the beginning of your test:

server.logging = true;

Does a request ever get made?

[samselikoff]

@georges49 this line

this.get("panelsService.allPanels").pushObject(search);

is problematic. The search object returned from server.create should just be used to set up your Mirage database. It's not actually an Ember Data model, it's just a POJO but it shouldn't "cross the boundary" from your mock server-side setup to an Ember template.

The only way to get data from Mirage to your Ember app is to make an ajax request. If you want to test your component with a given Ember Data model you'll need to create it in another way. You could also write an acceptance test that includes the behavior that loads the data from the server.

[Houndsto0th]

I'm actually seeing similar issues in Acceptance tests where the schema and the server both have records correctly but the store is returning null if I try to findAll('record-type')

[hbrysiewicz]

This is a common request and there is a way to set it up. It would be nice to have an example in the "Cookbook" section on the ember-cli-mirage website. I can try to work on simplifying an example and adding it.

[samselikoff]

We need to add some helpers to make integration testing with Mirage more pleasant. It's a feature request in the Canny board and I'm hoping to get to it soon.

In the meantime, here's an example of a helper you could use to push Mirage's data into Ember Data's local store, which you could then access to pass models into components.