beta.2 model unit tests failing w/codemod

[0xadada]

version ember-cli-qunit 4.1.0-beta.2

Synopsis

Just read @rwjblue blog post and ran the codemod converting the tests to 4.1.0-beta.2 tests API.

I ran codemod incrementally, and most of the codemod changes produced successful converstions with passing tests. Two exceptions are tests/unit/models/* and tests/integration/components/* which are failing.

Here is an example for a model unit test

before codemod:

tests/unit/models/user-test.js

import { moduleForModel, test } from 'ember-qunit';

moduleForModel('user', 'Unit | Model | user', {
  // Specify the other units that are required for this test.
  needs: [
    'validator:confirmation',
    'validator:format',
    'validator:length',
    'validator:presence',
  ],
});

test('it exists', function(assert) {
  let model = this.subject();
  // let store = this.store();
  assert.ok(!!model);
});

after codemod

import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Model | user', function(hooks) {
  setupTest(hooks);

  test('it exists', function(assert) {
    let model = this.owner.lookup('service:store').createRecord('user');
    // let store = this.store();
    assert.ok(!!model);
  });
});

error

Error: Assertion Failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in a run
    at new EmberError (http://localhost:4200/assets/vendor.js:24282:25)
    at Object.assert (http://localhost:4200/assets/vendor.js:24524:15)
    at Function.run.schedule (http://localhost:4200/assets/vendor.js:37739:76)
    at RecordArrayManager.internalModelDidChange (http://localhost:4200/assets/vendor.js:174641:16)
    at RecordArrayManager.recordDidChange (http://localhost:4200/assets/vendor.js:174616:10)
    at InternalModel.updateRecordArrays (http://localhost:4200/assets/vendor.js:172521:35)
    at InternalModel.transitionTo (http://localhost:4200/assets/vendor.js:172338:10)
    at Object.loadedData (http://localhost:4200/assets/vendor.js:166171:21)
    at InternalModel.send (http://localhost:4200/assets/vendor.js:172225:30)
    at InternalModel.loadedData (http://localhost:4200/assets/vendor.js:172106:10)

repo/branch: https://github.com/mirai-audio/mir/tree/testing-qunit-codemod/tests

[rwjblue]

Thank you for reporting! I was discussing with @Turbo87 in slack as well. For now, the work around is to call createRecord wrapped in a run loop, but I think this is a pretty bizarre requirement.

[rwjblue]

Would you mind also sharing what the failures with the transform of tests/integration/components/* are?

[0xadada]

Will do, tonight.

I also plan on switching to the async/await style tests ember-native-dom-helpers per this ticket.

[0xadada]

@rwjblue

test (before codemod)
https://github.com/mirai-audio/mir/blob/testing-qunit-codemod/tests/integration/components/ma-auth-test.js

component error:

beforeEach failed on it renders the signup form: Cannot read property 'resolveRegistration' of undefined

TypeError: Cannot read property 'resolveRegistration' of undefined
    at unregisterTestComponent (http://localhost:4200/assets/tests.js:587:15)
    at Object.<anonymous> (http://localhost:4200/assets/tests.js:773:55)
    at callHook (http://localhost:4200/assets/test-support.js:4068:25)
    at runHook (http://localhost:4200/assets/test-support.js:4091:7)
    at Object.advance (http://localhost:4200/assets/test-support.js:3694:26)
    at begin (http://localhost:4200/assets/test-support.js:5506:20)
    at http://localhost:4200/assets/test-support.js:4620:6

after codemod:

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from 'ember-test-helpers';
import hbs from 'htmlbars-inline-precompile';
import {
  registerTestComponent,
  unregisterTestComponent
} from
  'mir/tests/ember-test-component';

module('Integration | Component | ma auth', function(hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function({ test: testCtx }) {
    unregisterTestComponent(testCtx.testEnvironment);
  });

  test('it renders the signup form', async function(assert) {
    registerTestComponent(this);

    this.set('loginAction', function login() {});
    this.set('signupAction', function signup() {});

    await render(hbs`
      {{ma-auth title="ABC_"
        components=(hash
          login=(component "test-component")
          input=(component "test-component"))
        loginAction=loginAction
        action=signupAction}}
    `);

    let actual = this.$().text().trim().replace(/[\s\n]+/g, '');
    assert.notEqual(actual.indexOf('ABC_'), -1);
    assert.notEqual(actual.indexOf('Signup'), -1);
  });
});

[0xadada]

Its got something to do with my use of ember-test-component.

when unregisterTestComponent is invoked in the beforeEach hook, it passes testCtx.testEnvironment as an argument. unregisterTestComponent makes a call to getOwner:
https://github.com/poteto/ember-test-component/blob/00a156a3eec9c4bcc7096fb89cedb249ddb2a613/test-support/ember-test-component/index.js#L16

The owner is not resolved in ember-test-component when it tries to resolve registration of the component, because getOwner returns undefined, therefore owner is undefined.
https://github.com/poteto/ember-test-component/blob/00a156a3eec9c4bcc7096fb89cedb249ddb2a613/test-support/ember-test-component/index.js#L18

[rwjblue]

Awesome, thanks for digging! The specific issue you are hitting with the rendering test is indeed an issue with the ember-test-component addon (see poteto/ember-test-component#6, and poteto/ember-test-component#7).

You can work around (if you want to) via something like this:

module('Integration | Component | ma auth', function(hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function() {
    Ember.setOwner(this, this.owner);
  });

  // .... existing contents ....
});

Note: this is really just a work around until poteto/ember-test-component#7 lands...

[0xadada]

This workaround worked, i'm going to close this ticket here, and i'll keep watching over at ember-test-component.

My final test w/workaround looks like this:

import { setOwner } from '@ember/application';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from 'ember-test-helpers';
import hbs from 'htmlbars-inline-precompile';
import {
  registerTestComponent,
  unregisterTestComponent
} from 'mir/tests/ember-test-component';

module('Integration | Component | ma auth', function(hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function({ test: testCtx }) {
    setOwner(this, this.owner);
    unregisterTestComponent(testCtx.testEnvironment);
  });

  test('it renders the signup form', async function(assert) {
    registerTestComponent(this);

    this.set('loginAction', function login() {});
    this.set('signupAction', function signup() {});

    await render(hbs`
      {{ma-auth title="ABC_"
        components=(hash
          login=(component "test-component")
          input=(component "test-component"))
        loginAction=loginAction
        action=signupAction}}
    `);

    assert.notEqual(this.element.textContent.trim().indexOf('ABC_'), -1);
    assert.notEqual(this.element.textContent.trim().indexOf('Sign up'), -1);
  });
});

[rwjblue]

Awesome, thanks for working through that @0xadada!