Failed to test my component with Fancybox

Hi guys, I am learning how to test but I failed. I want to make sure when a user click a button the fancybox open. Here is what I tried:

//test
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { make, manualSetup }  from 'ember-data-factory-guy';

moduleForComponent('cal-cell', 'Integration | Component | cal cell', {
  integration: true,
  beforeEach: function () {
    manualSetup(this.container);
  }

test('it opens fancybox on zoom button click', function(assert) {
  this.set('event', make('event', 'camera'));

  this.render(hbs`{{cal-cell event=event}}`);
  //Click on the button
  this.$('.glyphicon-zoom-in').click();

  assert.ok($.fancybox.isOpen, 'fancybox opened')
});

My template:

    <a class="btn btn-xs btn-default fancybox" href="{{event.images.0.url}}" rel="cal">
      &nbsp;&nbsp;
      <span class="glyphicon glyphicon-zoom-in"></span>
      &nbsp;&nbsp;
    </a>

The component works well in development and production environment, when in test environment it just do redirect.

Please help. Thanks

try trigger click on btn btn-xs btn-default fancybox element

I triggered click on btn element but it still doesn’t work. :expressionless:

test('it opens fancybox on zoom button click', function(assert) {
  this.set('event', make('event', 'camera'));

  this.render(hbs`{{cal-cell event=event}}`);
  //Click on the button
  this.$('.btn.fancybox').click();

  assert.ok($.fancybox.isOpen, 'fancybox opened')

$.fancybox.isOpen is stilling return false to me because it corresponds to the Qunit test page I am viewing I guess. How should I do then?

try with ember run next

let async = assert.async();
Ember.run.next(() => {
 assert.ok($.fancybox.isOpen, 'fancybox opened')
 async();
});