Ember JS tutorial: TypeError: Cannot read property 'maps' of undefined

Question

I am currently running through the official EmberJS tutorial on their website and I'm on this part. Everything works perfectly in the app itself when I run ember serve but the problem is when I run the unit tests for the new service. I am running ember test --server and I get an error that I took a screenshot of below:

The unit test code:

import { moduleFor, test } from 'ember-qunit';
import Ember from 'ember';

const DUMMY_ELEMENT = {};

let MapUtilStub = Ember.Object.extend({
  createMap(element, location) {
    this.assert.ok(element, 'createMap called with element');
    this.assert.ok(location, 'createMap called with location');
    return DUMMY_ELEMENT;
  }
});

moduleFor('service:maps', 'Unit | Service | maps', {
  needs: ['util:google-maps']
});

test('should create a new map if one isnt cached for location', function (assert) {
  assert.expect(4);
  let stubMapUtil = MapUtilStub.create({ assert });
  let mapService = this.subject({ mapUtil: stubMapUtil });
  let element = mapService.getMapElement('San Francisco');
  assert.ok(element, 'element exists');
  assert.equal(element.className, 'map', 'element has class name of map');
});

test('should use existing map if one is cached for location', function (assert) {
  assert.expect(1);
  let stubCachedMaps = Ember.Object.create({
    sanFrancisco: DUMMY_ELEMENT
  });
  let mapService = this.subject({ cachedMaps: stubCachedMaps });
  let element = mapService.getMapElement('San Francisco');
  assert.equal(element, DUMMY_ELEMENT, 'element fetched from cache');
});

From the tutorial, my understanding is that this.subject({ cachedMaps: stubCachedMaps }) will set up all the maps for me but it seems the service itself might be undefined, leading to no property maps. Is this right? What could be causing this?

System specs from running ember --version:

• ember-cli: 2.13.0
• node: 6.8.1
• os: darwin x64

Answer 1

So ran into the same thing. Looks like between each test the previous stub got wiped. so I added it again in the second test and it worked great:

test('should use existing map if one is cached for location', 
  function(assert) {
    assert.expect(1);
    let stubCachedMaps = Ember.Object.create({
      sanFrancisco: DUMMY_ELEMENT
    });
    let stubMapUtil = MapUtilStub.create({ assert });
    let mapService = this.subject({ mapUtil: stubMapUtil, cachedMaps: stubCachedMaps });
    let element = mapService.getMapElement('San Francisco');
    assert.equal(element, DUMMY_ELEMENT, 'element fetched from cache');
});

Answer 2

The test code you posted should work, so the problem must be elsewhere.

Can you compare the rest of the code to the completed version of the tutorial app? You can clone the repo @ https://github.com/ember-learn/super-rentals

All the tests run fine, including the maps service.

Answer 3

I run at the same thing, too. The solution by @cythrawll works, but it's not the root cause of TypeError: Cannot read property 'maps' of undefined error.

In tutorial they forget to add

<script src="https://maps.googleapis.com/maps/api/js?v=3.22"></script>

in test/index.html file. Issue is already reported.