Why do I get "Ajax authorization fails" in my tests

Question

I am following the ember tutorials, and specifically I'm on services.

I am 99.9% certain that I have the exact code in place -- I am copying by hand, because I believe that helps me absorb it more completely, but if anything fails I start using a diff checker to see if I made a typo. To my knowledge, no typos.

The App I have written performs identically to the screen shots in the tutorials, and the only error I get is a lint error for having a test that doesn't have an assert in it (yet).

Prior to this unit, all other tests have passed as well. But now I am getting failed tests that previously passed. They appear to all stem from the stubbed call to the map service failing. The first test that fails is integration/component/rental-listing-test.js:

hooks.beforeEach(function() {
  this.rental = {
    image: 'fake.png',
    title: 'test-title',
    owner: 'test-owner',
    type: 'test-type',
    city: 'test-city',
    bedrooms: 3
  };
});
test('should display rental details', async function(assert) {
  await render(hbs`{{rental-listing rental=rental}}`);
  assert.equal(this.element.querySelector('.listing h3').textContent.trim(), 'test-title', 'Title: test-title');
  assert.equal(this.element.querySelector('.listing .owner').textContent.trim(), 'Owner: test-owner', 'Owner: test-owner');
});

If I remove the new line from rental-listing.hbs ( {{location-map location=rental.city}} ), thus preventing the map from being used, these tests once again pass (though the new tests for the component using the service have issues).

So either I am doing something wrong that I can't find, or else the fine folk at emberjs.com have not provided complete information in this tutorial. Do I need to somehow stub the map service? that appears in the .hbs file for the above test to pass? If so, why do you think they failed to mention this?

ETA assertion:

Ajax authorization failed                      @ 273 ms
Source: Error: Ajax authorization failed
  at new EmberError (http://localhost:7357/assets/vendor.js:13635:31)
  at new AjaxError (http://localhost:7357/assets/vendor.js:116954:13)
  at new UnauthorizedError (http://localhost:7357/assets/vendor.js:116968:13)
  at Class._createCorrectError (http://localhost:7357/assets/vendor.js:117533:25)
  at Class.handleResponse (http://localhost:7357/assets/vendor.js:117528:25)
  at Object.jqXHR.done.fail (http://localhost:7357/assets/vendor.js:117380:41)
  at fire (http://localhost:7357/assets/vendor.js:3609:31)
  at Object.fireWith [as rejectWith] (http://localhost:7357/assets/vendor.js:3739:7)
  at done (http://localhost:7357/assets/vendor.js:9648:14)
  at XMLHttpRequest.<anonymous> (http://localhost:7357/assets/vendor.js:9889:9)

Answer 1

You shouldn't need the api key to run the tests. Have you tried the super rentals repo to see if it has the same issue? https://github.com/ember-learn/super-rentals

If it does have the same problem we'll probably need to PR a fix to the tutorial.

Update

I see that the integration test in question is missing a stub maps service definition. It is there in the rentals repo, but not mentioned in the guides tutorial. See https://github.com/ember-learn/super-rentals/blob/master/tests/integration/components/rental-listing-test.js for the code. I've added this info to an issue for updating the guides: https://github.com/ember-learn/guides-source/issues/347

Answer 2

So I finally had time to look at it. The problem is that this is set up for the external map service to use an environment variable for an API key. This is why it runs the app fine (I use KEY=value ember s to start the app) but the tests were not. Simply using KEY=value ember t -s causes these tests to pass. And I'm left with only linting issues.

For the record, this is the sort of thing that should be in the tutorial itself, and I'm not sure why I didn't think of it before.