Ember-cli integration click - type error undefined is not a function

Question

I have a new ember-cli application and am setting up an integration test to click a button on the page and display a modal window (or check for it's existence after the button is clicked).

This is the integration test:

import { test } from 'ember-qunit';
import Ember from 'ember';
import startApp from '../helpers/start-app';

var App;

module('Integration Test - Guest Page', {
  setup: function(){
    App = startApp();
  },
  teardown: function(){
    Ember.run(App, 'destroy');
  }
});


test('guest login modal loads after click', function() {

  expect(3);

  visit('/guest');

  andThen(function() {
    var $modalLink = $("button#guestModalBtn"),
        $modalWindow = $(".modal", "div");
    ok(find($modalLink).length, 'guestModalBtn is present');
    ok(!find($modalWindow).length, 'guest modal element IS NOT present');

    click('.guestmodal');

  });

});

The test fails as soon as it hits the click() request:

TypeError: undefined is not a function

All examples I have seen online have this method in. It is definitely the click as I have taken it out and all results are green in QUnit.

This is the template being loaded on the route in question:

{{outlet}}

<button id="guestModalBtn" 
    class="guestmodal" 
    {{action 'showModal' 'guest-details-modal' model}}>
Guest Details
</button>

In response to the comment below (thank you), the showModal action derives from the routes/application.js file, seen below:

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    showModal: function(name, content) {
      this.controllerFor(name).set('content', content);
      this.render(name, {
        into: 'application',
        outlet: 'modal'
      });
    },
    removeModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

If anyone could tell me what am I doing wrong or why this click event is not firing (or found) I would be extremely grateful.

Many thanks

benzo benzo · Accepted Answer · 2014-11-18T16:47:57

Try passing the id of the button to the click helper instead of a class. I'm not sure how the click helper would resolve what to click if you had several elements with that class name.

Change:

click('.guestmodal');

To

click('#guestModalBtn')

Ember-cli integration click - type error undefined is not a function

1 Answers