Click event not firing on component

server-menu-item.hbs

<a href="#">{{server.name}}</a>

server-menu-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['isActive:active'],

  click: function() {
    this.sendAction('action', this.get('server'));
  },

  tagName: 'li',

  isActive: function() {
    return this.get('server') === this.get('activeServer');
  }.property('server', 'activeServer'),

});

servers-test.js

import Ember from 'ember';
import startApp from '../helpers/start-app';
import { describeModule, it } from 'ember-mocha';
/* global assert, asyncIt */

var App;
var store;

describeModule('route:servers', 'Servers', {}, function() {
  beforeEach(function(){
    App = startApp();
    store = App.__container__.lookup('store:main');

    visit('/');
    click('#servers-modal-trigger'); //this modal contains several ServerMenuItem components
  });

  afterEach(function(){
    Ember.run(App, 'destroy');
  });

  it('should edit a server and discard', function() {
    var serverRecord = null;
    var serverMenuItem = null;

    click('#server-1');
    
    andThen(function() {
      //the click() method of the controller should have run by now, but it hasn't
    });
  });

});