Qunit for rendering modal in application route

Question

In my application route, I have code provided from the ember website on how to render the opening and closing of modals. https://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/using_modal_dialogs/

export default Ember.Route.extend({
  actions: {
      openModal: function(name, controllerName) {
        this.render(name, {
          into: 'application',
          outlet: 'modal',
          controller: controllerName
        });
      },
      closeModal: function() {
        this.disconnectOutlet({
          outlet: 'modal',
          parentView: 'application'
        });
      }
    }
});

I've been trying to find examples of how to do a unit test for the rendering action but could not find much documentation.

In my unit test for the application route, just for the sake of triggering the action on the route and seeing what would happen this is what I have and the error I get. Thank you for any guidance anyone might be able to provide.

test('route open modal', function(assert) {
  let route = this.subject();
  route.send('openModal', 'cancel-modal');
  assert.ok(route);
});


Died on test #1     at Module.callback (http://localhost:4200/exampleApp/assets/tests.js:1113:24)
    at Module.exports (http://localhost:4200/exampleApp/assets/vendor.js:140:32)
    at requireModule (http://localhost:4200/exampleApp/assets/vendor.js:32:18)
    at TestLoader.require (http://localhost:4200/exampleApp/assets/test-support.js:7124:7)
    at TestLoader.loadModules (http://localhost:4200/exampleApp/assets/test-support.js:7116:14)
    at Function.TestLoader.load (http://localhost:4200/exampleApp/assets/test-support.js:7146:22)
    at http://localhost:4200/exampleApp/assets/test-support.js:7030:18: Cannot read property 'state' of undefined@ 31 ms
Source:     
TypeError: Cannot read property 'state' of undefined
    at parentRoute (http://localhost:4200/exampleApp/assets/vendor.js:41309:64)
    at buildRenderOptions (http://localhost:4200/exampleApp/assets/vendor.js:41371:27)
    at Class.render (http://localhost:4200/exampleApp/assets/vendor.js:41191:27)
    at Class.openModal (http://localhost:4200/exampleApp/assets/exampleApp.js:1118:14)
    at Class.send (http://localhost:4200/exampleApp/assets/vendor.js:40471:39)
    at Class.superWrapper [as send] (http://localhost:4200/exampleApp/assets/vendor.js:54491:22)
    at Object.<anonymous> (http://localhost:4200/exampleApp/assets/tests.js:1115:11)
    at runTest (http://localhost:4200/exampleApp/assets/test-support.js:3471:30)
    at Test.run (http://localhost:4200/exampleApp/assets/test-support.js:3457:6

score 0 · Answer 1 · answered Feb 27 '17 at 18:22

Two things.

You're using an outdated solution. The documentation page you've linked to is two years old.

Instead, use a modern addon for modal dialogs. I personally prefer liquid-tether, but there are many other solutions available.
You're using a unit test while trying to render something. Unit tests are for running methods and checking their return values. To test a modal dialog being rendered, you need an acceptance test.

Qunit for rendering modal in application route

1 Answers1