Write test cases that cover the use of the API

[gajus]

react-youtube-player has a simple API:

/**
 * @typedef {String} YoutubePlayer~playbackState
 * @value 'unstarted' Stops and cancels loading of the current video. [stopVideo]{@link https://developers.google.com/youtube/iframe_api_reference#stopVideo}
 * @value 'playing' Plays the currently cued/loaded video. [playVideo]{@link https://developers.google.com/youtube/iframe_api_reference#playVideo}
 * @value 'paused' Pauses the currently playing video. [pauseVideo]{@link https://developers.google.com/youtube/iframe_api_reference#pauseVideo}
 */

/**
 * @property {String} videoId
 * @property {String|Number} width (default: '100%').
 * @property {String|Number} height (default: '100%').
 * @property {YoutubePlayer~playbackState} playbackState
 */

./example/ demonstrates how to control a react-youtube-player component using property values that are controlled using user input.

However, testing how properties affect YouTube player state is not as straightforward. Tests need to account for things such as state change when video stops playing. How state of the YouTube player affects how properties are interpreted, etc.

The nature of the component requires that it is tested using a real browser (using a test runner such as Karma).

The scope of this issue is to write a test scope and implement it.

[gajus]

There is an open bounty to complete this task. https://www.bountysource.com/issues/26763180-write-test-cases-that-cover-the-use-of-the-api

[sambuddhabasu]

Hello @gajus , I am interested in solving this issue. Can you let me know where to get started from?

[LongLiveCHIEF]

What browser targets would you like to see the tests pass in? Will the usual stable of latest Chrome, Safari, Firefox, IE11, and Edge be sufficient?

[gajus]

@H3Chief PhantomJS (ie. Chrome) would be enough.

[LongLiveCHIEF]

great. Thanks!

[eimfach]

Does still need to get done?

[gajus]

@eimfach Absolutely.

[gajus]

The existing tests were testing youtube-player implementation rather than react-youtube-player. A test case should mock youtube-player and focus only on ensuring that the appropriate methods are invoked via the API.