VueJS + jQuery testing with PhantomJS: on demand content after .click() is not loaded

Question

I have a Vue component, in which I use Semantic UI's Embed component. This has a placeholder image, and when the icon in the middle of it is clicked, the video content is loaded. It uses jQuery to attach the iframe of the video to the DOM.

I would like to test if the iframe src really gets the video url from the VueJS component props/data. I would like to run this with Karma PhantomJS runner, but it does not find the iframe tag after the $nextTick. (It works in Chrome, but I would like to run it specifically on PhantomJS.)

I already surrounded the icon element with jQuery for the .click() method to work, but that does not solve the problem.

Here is a demo for the component and the test:

// APP
var UiEmbed = {
  template: '<div id="ui-embed" class="ui embed" v-bind:data-url="dataUrl" v-bind:data-placeholder="dataPlaceholder"/>',
  data: function() { return {
   dataUrl: 'https://www.youtube.com/embed/O6Xo21L0ybE',
   dataPlaceholder: 'https://semantic-ui.com/images/bear-waving.jpg'
 }},
  mounted: function() { $(this.$el).embed(); }
};
var vm = new Vue({
  el: "#app",
  components: {'ui-embed': UiEmbed}
});

// TEST
mocha.setup('bdd');
var expect = chai.expect;
var TestComponent = Vue.extend(UiEmbed);
describe('Semantic UI Embed in Vue.js', function() {
 it('loads properly', function(done) {
   var vm = new TestComponent().$mount();
    $(vm.$el.querySelector('.video.play.icon')).click();
    vm.$nextTick(function () {
      expect(vm.$el.querySelector('img.placeholder').getAttribute('src'))
        .to.have.string('bear-waving.jpg');
      expect(vm.$el.querySelector('iframe').getAttribute('src'))
        .to.have.string('O6Xo21L0ybE');
      done();
  });
  });
});
mocha.run();

<!-- DEPENDENCIES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/embed.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/embed.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.4.2/mocha.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.4.2/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.0/chai.min.js"></script>

<!-- CONTENT -->
<div id="app"><ui-embed></ui-embed></div>
<div id="mocha"></div>

The same snippet as jsfiddle: https://jsfiddle.net/mdhtr/x541b9jy/

VueJS + jQuery testing with PhantomJS: on demand content after .click() is not loaded

0 Answers0