VueJS Semantic UI Embed

A simple VueJS component that is a Semantic UI Embed component.

by mdhtr

HTML

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

JavaScript

// 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();