gajus / gajus/react-youtube-player

Write test cases that cover the use of the API

Open
#1 8 comments 0 reactions 0 assignees View on GitHub
bounty enhancement
Dominant language
JavaScript
Stars
40
Forks
17
PR merge metrics
No merged PRs in 30d

Description

`react-youtube-player` has a simple API:

``` js
/**
* @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/`](./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](http://karma-runner.github.io/0.13/index.html)).

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

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the API properties documented in the issue and the user-controlled examples in ./example/. Set up the real-browser test runner described with Karma, then map property changes and YouTube player state changes into test cases. Done means the agreed test scope is implemented and the component's playback-state behavior is covered in a browser.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.