1

I have a component that makes use of this.get('model.property'), and it works as intended.

For my integration tests I'm using Mirage, which has worked for all my other tests (integration tests included), however when I test this specific component I get:

TypeError: Cannot read property 'then' of undefined

This is what my test looks like:

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

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

test('it renders', function(assert) {
  const customer = this.server.create('customer')
  const location = this.server.create('location', { customer })
  const manufacturer = this.server.create('manufacturer')
  const model = this.server.create('device-model', { manufacturer })
  this.server.createList('device', 5, { model, customer, location })

  const loc = Ember.Object.create(location)
  this.set('model', loc)
  this.render(hbs`{{summary-card model=model model-name=model.name tag='location' belongs-to='customer' has-many='device'}}`);

  assert.equal(this.$('h1').text().trim(), 'Location 0', 'should be titled Location 0')

});

And basically, my summary-card.js has something like this:

this.get('model.' + belongs).then(relationship => {...})

where belongs is simply the value of whatever belongs-to is set to when the component is invoked.

I'm a bit puzzled, as it seems like the mock model I'm passing to my test isn't really representing the model in the same way it does when running ember s (I'm using Mirage for development purposes as well). Is there anywhere where I can find out more about what's exactly going on there?

Thank you!

P.S. I've also tried to use the location object as is provided by server.create(), and I get a slightly different error:

TypeError: _this.get(...).then is not a function

finferflu
  • 1,368
  • 2
  • 11
  • 28

1 Answers1

1

Well, by reading this answer, I managed to find my own solution, which works really well:

import { moduleForComponent, test } from 'ember-qunit'
import hbs from 'htmlbars-inline-precompile'
import Ember from 'ember'

moduleForComponent('summary-card', 'Integration | Component | summary card', {
  integration: true
})

test('it renders', function(assert) {
  this.inject.service('store', {as: 'store'})
  let location

  Ember.run(() => {
    location = this.store.createRecord('location', {
      id: 0,
      name: 'Location 0',
      customer: this.store.createRecord('customer', {
        id: 1,
        name: 'Customer 0'
      }),
      devices: [this.store.createRecord('device', {id: 1})]
    })
  })

  this.set('model', location)
  this.render(hbs`
    {{#summary-card model=model model-name=model.name tag='location' belongs-to='customer' has-many='device'}}
      <div class='test-content'>Test Content</div>
    {{/summary-card}}
  `)

Basically, I have opted for using the store directly, rather than using Mirage, and it works!

finferflu
  • 1,368
  • 2
  • 11
  • 28