From 43632c6970946713e5c7f31592aed64c6b53f9dc Mon Sep 17 00:00:00 2001 From: toxic-johann <353904974@qq.com> Date: Thu, 19 Apr 2018 22:00:41 +0800 Subject: [PATCH] [update] add binder test case and now plugin.ready resolve plugin --- __tests__/dispatcher/binder.js | 170 ++++++++++++++++++++++++++++ __tests__/dispatcher/plugin/life.js | 10 +- src/dispatcher/plugin.js | 12 +- src/index.js | 4 +- 4 files changed, 184 insertions(+), 12 deletions(-) create mode 100644 __tests__/dispatcher/binder.js diff --git a/__tests__/dispatcher/binder.js b/__tests__/dispatcher/binder.js new file mode 100644 index 0000000..3a1efd2 --- /dev/null +++ b/__tests__/dispatcher/binder.js @@ -0,0 +1,170 @@ +import Chimee from 'index'; + +describe("chimee's binder", () => { + let player; + + beforeEach(() => { + player = new Chimee({ + // 播放地址 + src: 'http://cdn.toxicjohann.com/lostStar.mp4', + // 直播:live 点播：vod + type: 'vod', + // 编解码容器 + box: 'native', + // dom容器 + wrapper: 'body', + plugin: [], + events: {}, + }); + }); + + afterEach(() => { + player.destroy(); + player = null; + }); + + test('normal click event on video should trigger', () => { + const fn = jest.fn(); + const plugin = { + name: 'normal click event', + events: { + click: fn, + }, + }; + Chimee.install(plugin); + player.use(plugin.name); + player.$video.click(); + expect(fn).toHaveBeenCalledTimes(1); + }); + + test('normal mouseenter event on video should trigger', () => { + const fn = jest.fn(); + const plugin = { + name: 'normal mouseenter event', + events: { + mouseenter: fn, + }, + }; + Chimee.install(plugin); + player.use(plugin.name); + player.$video.dispatchEvent(new Event('mouseenter')); + expect(fn).toHaveBeenCalledTimes(1); + }); + + test('mouseenter event outside video should trigger', () => { + const fn = jest.fn(); + const plugin = { + name: 'normal mouseenter event outside video', + events: { + mouseenter: fn, + }, + }; + Chimee.install(plugin); + player.use(plugin.name); + player.$wrapper.dispatchEvent(new Event('mouseenter')); + expect(fn).toHaveBeenCalledTimes(0); + }); + + test('mouseenter event on penetrate plugin should trigger', done => { + const fn = jest.fn(); + const plugin = { + name: 'mouseenter on penetrate', + penetrate: true, + inited() { + this.$dom.dispatchEvent(new Event('mouseenter')); + }, + events: { + mouseenter() { + fn(); + expect(fn).toHaveBeenCalledTimes(1); + done(); + }, + }, + }; + Chimee.install(plugin); + player.use(plugin.name); + }); + + test('mouseleave from inside node to video should not trigger', async () => { + const fn = jest.fn(); + const rawFn = jest.fn(); + const plugin = { + name: 'mouseleave from inside node to video', + penetrate: true, + events: { + mouseleave: fn, + }, + }; + Chimee.install(plugin); + const { $dom, $video } = await player.use(plugin.name); + const event = new Event('mouseleave'); + event.relatedTarget = $video; + $dom.addEventListener('mouseleave', rawFn); + $dom.dispatchEvent(event); + expect(fn).toHaveBeenCalledTimes(0); + expect(rawFn).toHaveBeenCalledTimes(1); + }); + + test('mouseenter video from inside node should not trigger', async () => { + const fn = jest.fn(); + const rawFn = jest.fn(); + const plugin = { + name: 'mouseenter video from inside node', + penetrate: true, + events: { + mouseenter: fn, + }, + }; + Chimee.install(plugin); + const { $dom, $video } = await player.use(plugin.name); + $dom.dispatchEvent(new Event('mouseenter')); + const event = new Event('mouseenter'); + expect(fn).toHaveBeenCalledTimes(1); + event.relatedTarget = $dom; + $video.addEventListener('mouseenter', rawFn); + $video.dispatchEvent(event); + expect(fn).toHaveBeenCalledTimes(1); + expect(rawFn).toHaveBeenCalledTimes(1); + }); + + test('mouseleave video to outside should trigger', async () => { + const fn = jest.fn(); + const rawFn = jest.fn(); + const plugin = { + name: 'mouseleave video to outside', + penetrate: true, + events: { + mouseleave: fn, + }, + }; + Chimee.install(plugin); + const { $dom, $video } = await player.use(plugin.name); + $video.dispatchEvent(new Event('mouseenter')); + const event = new Event('mouseleave'); + event.relatedTarget = $dom; + $video.addEventListener('mouseleave', rawFn); + $video.dispatchEvent(event); + expect(fn).toHaveBeenCalledTimes(0); + expect(rawFn).toHaveBeenCalledTimes(1); + }); + + test('mouseenter to inside node child element should trigger', async () => { + const fn = jest.fn(); + const rawFn = jest.fn(); + const plugin = { + name: 'mouseenter inside node child node', + penetrate: true, + events: { + mouseenter: fn, + }, + }; + Chimee.install(plugin); + const { $dom } = await player.use(plugin.name); + const childnode = document.createElement('div'); + $dom.appendChild(childnode); + $dom.addEventListener('mouseenter', rawFn); + childnode.dispatchEvent(new Event('mouseenter', { bubbles: true })); + expect(rawFn).toHaveBeenCalledTimes(1); + expect(fn).toHaveBeenCalledTimes(1); + }); +}); diff --git a/__tests__/dispatcher/plugin/life.js b/__tests__/dispatcher/plugin/life.js index 30e8845..a896dd7 100644 --- a/__tests__/dispatcher/plugin/life.js +++ b/__tests__/dispatcher/plugin/life.js @@ -111,7 +111,7 @@ describe("plugin's lifecycle", () => { }); }); - test('create & destroy & inited', () => { + test('create & destroy & inited', async () => { const createAndDestroyCall = []; const plugin = new Plugin({ id: 'cd', @@ -122,7 +122,7 @@ describe("plugin's lifecycle", () => { expect(createAndDestroyCall).toEqual([ 'create' ]); plugin.__inited(); expect(createAndDestroyCall).toEqual([ 'create', 'inited' ]); - expect(plugin.ready).resolves.toBe(); + await expect(plugin.ready).resolves.toBe(plugin); plugin.$destroy(); expect(createAndDestroyCall).toEqual([ 'create', 'inited', 'destroy' ]); }); @@ -154,11 +154,11 @@ describe("plugin's lifecycle", () => { }); describe('ready and readySync', () => { - test('synchronize', () => { + test('synchronize', async () => { const plugin = new Plugin({ id: 'a' }, dispatcher); plugin.__inited(); expect(plugin.readySync).toBe(true); - expect(plugin.ready).resolves.toBe(); + await expect(plugin.ready).resolves.toBe(plugin); }); test('asynchronize with resolve', async () => { @@ -169,7 +169,7 @@ describe("plugin's lifecycle", () => { }, }, dispatcher); plugin.__inited(); - await expect(plugin.ready).resolves.toBe(1); + await expect(plugin.ready).resolves.toBe(plugin); expect(plugin.readySync).toBe(true); }); diff --git a/src/dispatcher/plugin.js b/src/dispatcher/plugin.js index 1768a51..00951e0 100644 --- a/src/dispatcher/plugin.js +++ b/src/dispatcher/plugin.js @@ -223,7 +223,7 @@ export default @autobindClass() class Plugin extends VideoWrapper { /** * call for inited lifecycle hook, which just to tell the plugin we have inited. */ - __inited(): Promise<*> | boolean { + __inited(): Promise<*> | Plugin { let result; try { result = isFunction(this.inited) && this.inited(); @@ -232,18 +232,20 @@ export default @autobindClass() class Plugin extends VideoWrapper { } this.readySync = !isPromise(result); this.ready = this.readySync - ? Promise.resolve() + ? Promise.resolve(this) // $FlowFixMe: it's promise now : result - .then(ret => { + .then(() => { this.readySync = true; - return ret; + return this; }) .catch(error => { if (isError(error)) return this.$throwError(error); return Promise.reject(error); }); - return this.readySync || this.ready; + return this.readySync + ? this + : this.ready; } /** diff --git a/src/index.js b/src/index.js index 6575b04..185172c 100644 --- a/src/index.js +++ b/src/index.js @@ -91,10 +91,10 @@ export default class Chimee extends VideoWrapper { this.destroyed = true; } use(option: string | PluginOption) { - this.__dispatcher.use(option); + return this.__dispatcher.use(option); } unuse(name: string) { - this.__dispatcher.unuse(name); + return this.__dispatcher.unuse(name); } __throwError(error: Error | string) { if (isString(error)) error = new Error(error);