Why do my ember tests give me TypeError: 'undefined' is not a function?

Question

here is the error from the ember test --serv output:

Integration | Component | date-time-input: it renders
    ✘ TypeError: 'undefined' is not a function (evaluating 'elem.getAttribute( name )')
        http://localhost:7357/assets/vendor.js:1685

This happens with all of my Integration and Acceptance tests.

How do I debug this error without a decent stack trace? is there a way to configure ember to give me a decent stack trace?

Here is the test for the above error:

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

moduleForComponent('date-time-input',
  'Integration | Component | date-time-input', {
    integration: true,
  });

test('it renders', function(assert) {
  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });
  let two = Ember.Object.extend({
    someDate: null,
  });
  this.set('two', two);
  this.render(hbs`{{date-time-input model=two field='someDate'}}`);

  assert.notEqual(this.$().text().indexOf('2016'), -1);
});

and the corresponding component

import Ember from 'ember';

export default Ember.Component.extend({

  fieldValue: Ember.computed('model', 'field', function () {
    let fieldName = this.get('field');
    let value = this.get('model.' + fieldName);
    return value;
  }).readOnly(),

  actions: {
    dateChanged: function (value) {
      let model = this.get('model');
      let field = this.get('field');

      model.set(field, value);
    },
  },
});

{{flat-pickr
  dateFormat='F j, Y at'
  timeFormat='h:i K'
  value=fieldValue
  enableTime=true
  onChange=(action 'dateChanged')
}}

here is my repo, in case anyone is curious: https://github.com/NullVoxPopuli/aeonvera-ui

Answer 1

You're actually getting a useful stacktrace, though in the compiled vendor.js rather than in the source files.

If you're using Chrome, open up assets/vendor.js in the sources panel. Then set a breakpoint on line 1685. Because ember-cli creates source maps on asset compilation, Chrome should immediately take you to the corresponding line in the source file.

It's annoying that Testem doesn't point to the the source file, but you should be able to work your way back from the compiled files all the same.

(Also, it looks like the top line of your stack trace is from jQuery, if that helps.)