add mute prop and improve test

Author: kaorun343

karma.conf.js

@@ -1,7 +1,7 @@
 // Karma configuration
 // Generated on Wed Dec 16 2015 21:28:49 GMT+0900 (JST)
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
@@ -13,7 +13,7 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'test/index.spec.js'
+      'test/*.spec.js'
     ],
 
     // list of files to exclude
@@ -23,7 +23,7 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'test/index.spec.js': 'webpack'
+      'test/*.spec.js': 'webpack'
     },
 
     // test results reporter to use
@@ -75,11 +75,7 @@ module.exports = function(config) {
           {
             test: /\.js$/,
             exclude: /node_modules/,
-            loader: 'babel'
-          },
-          {
-            test: /\.json$/,
-            loader: 'json'
+            loader: 'babel-loader'
           }
         ]
       },

src/index.js

@@ -1,10 +1,8 @@
-'use strict'
-
 import { getIdFromURL, getTimeFromURL } from './utils'
 import container from './container'
 import YouTubePlayer from './player'
 
-export { getIdFromURL, getTimeFromURL }
+export { YouTubePlayer, getIdFromURL, getTimeFromURL }
 
 export function install (Vue) {
   container.Vue = Vue

src/player.js

@@ -3,7 +3,27 @@ import container from './container'
 let pid = 0
 
 export default {
-  props: ['playerHeight', 'playerWidth', 'playerVars', 'videoId', 'mute'],
+  props: {
+    playerHeight: {
+      type: String,
+      default: '390'
+    },
+    playerWidth: {
+      type: String,
+      default: '640'
+    },
+    playerVars: {
+      type: Object,
+      default: () => ({ autoplay: 0, time: 0 })
+    },
+    videoId: {
+      type: String
+    },
+    mute: {
+      type: Boolean,
+      default: false
+    }
+  },
   render (h) {
     return h('div', [
       h('div', { attrs: { id: this.elementId }})
@@ -25,20 +45,17 @@ export default {
   },
   methods: {
     setSize () {
-      this.player.setSize(this.playerWidth || '640', this.playerHeight || '390')
+      this.player.setSize(this.playerWidth, this.playerHeight)
     },
-    setMute () {
-      if (this.mute && this.player.isMuted()) {
+    setMute (value) {
+      if (value) {
         this.player.mute()
       } else {
         this.player.unMute()
       }
     },
     update (videoId) {
-      const {
-        playerVars = { autoplay: 0 }
-      } = this
-      const name = `${playerVars.autoplay ? 'load' : 'cue'}VideoById`
+      const name = `${this.playerVars.autoplay ? 'load' : 'cue'}VideoById`
       if (this.player.hasOwnProperty(name)) {
         this.player[name](videoId)
       } else {
@@ -50,16 +67,11 @@ export default {
   },
   mounted () {
     container.register((YouTube) => {
-      const {
-        playerHeight: height = '390',
-        playerWidth: width = '640',
-        playerVars = { autoplay: 0, start: 0 },
-        videoId
-      } = this
+      const { playerHeight, playerWidth, playerVars, videoId } = this
 
       this.player = new YouTube.Player(this.elementId, {
-        height,
-        width,
+        height: playerHeight,
+        width: playerWidth,
         playerVars,
         videoId,
         events: {

test/container.spec.js

@@ -0,0 +1,66 @@
+import assert from 'power-assert'
+import container from '../src/container'
+
+describe('container', () => {
+  context('when YouTube is not ready', () => {
+    describe('#register', () => {
+      it('should add a callback to scripts', () => {
+        const length = container.scripts.length
+        container.register(() => {})
+        assert.equal(container.scripts.length, length + 1)
+      })
+    })
+
+    after(() => {
+      container.scripts = []
+    })
+  })
+
+  context('when YouTube is ready', () => {
+    before(() => {
+      container.YT = {
+        Player () {}
+      }
+      container.Vue = {
+        nextTick (callback) {
+          callback()
+        }
+      }
+    })
+
+    describe('#run', () => {
+      it('should call calbacks and pass YT.Player to its scripts', () => {
+        const spy = sinon.spy()
+        container.scripts = [spy]
+        container.run()
+        assert.ok(spy.calledWith(container.YT))
+      })
+
+      it('should remove elements from scripts', () => {
+        container.scripts.push(() => {})
+        container.run()
+        assert.equal(container.scripts.length, 0)
+      })
+
+      afterEach(() => {
+        container.scripts = []
+      })
+    })
+
+    describe('#register', () => {
+      it('should call callback', () => {
+        sinon.spy(container.Vue, 'nextTick')
+        const callbackSpy = sinon.spy()
+        container.register(callbackSpy)
+        assert.ok(container.Vue.nextTick.called)
+        assert.ok(callbackSpy.called)
+        container.Vue.nextTick.restore()
+      })
+    })
+  })
+
+  after(() => {
+    delete container.YT
+    delete container.Vue
+  })
+})