<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
Here: data-id="0dgNc5S8cLI"
I’m stuck
const init = () => videoPlayer.init(data-id="0dgNc5S8cLI");
You’re stuck because you’re going in the wrong direction.
The first thing that we need in the test is for that data-id attribute to be added to the video element, and at the end of the test for it to be removed from the video element.
It is only when we have that in place that we should then start thinking about how we are going to test the init function.
The first thing that we need in the test is for that data-id attribute to be added to the video element
I’m lost.
I have never added something like this to a test before:
data-id=""
What do I do with this?
data-id="0dgNc5S8cLI"
It gets added to here?
const init = () => videoPlayer.init("");
This: data-id="0dgNc5S8cLI"
Gets added to here?
What in here gets changed?
This line?
Am I deleting it?
const init = () => videoPlayer.init();
I don’t understand what the steps are.
Am I not using this whole line? data-id="0dgNc5S8cLI"
Only this? data-id=""
I need further guidance or help understanding.
I’m confused.
it("checking the video for a video id", function() {
//given
resetPlayer();
//when
const init = () => videoPlayer.init();
//then
expect(init).not.toThrow();
});
Making note: Our last improved video code where the cover is working is at this link:
https://jsfiddle.net/cujv51r0/
function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
videoPlayer.afterPlayerReady = initCover;
videoPlayer.init("0dgNc5S8cLI,mnfmQe8Mv1g,CHahce95B1g,2VwsvrPFr9w");
From our last video code: https://jsfiddle.net/4cwrgz7f/
Would it make sense to remove config from here?
https://jsfiddle.net/4cwrgz7f/
const config = {
eventHandlers: {}
};
let playlist = "";
let player;
Meaning that it is no longer needed or necessary.
const videoPlayer = (function makeVideoPlayer() {
const config = {
eventHandlers: {}
};
let playlist = "";
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function getIframe(player) {
return Object.values(player).find(
(item) => item.nodeName === "IFRAME"
);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
const iframe = getIframe(player);
iframe.dispatchEvent(new Event("afterPlayerReady"));
}
function addPlayer(video, playlist) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
loop: 1,
playlist,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
player = new YT.Player(video, options);
const iframe = getIframe(player);
const eventHandler = config.eventHandlers.afterPlayerReady;
iframe.addEventListener("afterPlayerReady", eventHandler);
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function addEvents() {
config.eventHandlers.afterPlayerReady = videoPlayer.afterPlayerReady;
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
addEvents();
playlist = videoIds.join();
return play;
}
return {
init,
play
};
}());
I did that here: https://jsfiddle.net/4cwrgz7f/2/
const eventHandlers = {};
let playlist = "";
let player;
You can use the dataset method to add or remove a data attribute to an element.
Have you used dataset before?
I know these go together:
data-id="0dgNc5S8cLI"
videoId: video.dataset.id,
I’m still lost.
I don’t know what I am doing.
I’m going to keep doing it backwards.
I’m stuck
const init = () => videoPlayer.init(data-id="0dgNc5S8cLI");
I don’t know what needs to be set up in the test.
I have this:
I don’t know what needs to be changed in here.
What gets added or removed from here?
From the test.
it("checking the video for a video id", function() {
//given
resetPlayer();
//when
const init = () => videoPlayer.init();
//then
expect(init).not.toThrow();
});
Please remove all that you have in that test.
When you’ve done that I’ll give the next instruction.
it("checking the video for a video id", function() {
//given
//when
//then
});
In the given section, use dataset to set the id to be “0dgNc5S8cLI”
it("checking the video for a video id", function() {
//given
data-id="0dgNc5S8cLI"
//when
//then
});
Have you ever used dataset before? That’s not how it is done.
Then no, I don’t think so.
Looking through all my codes I have done, it is not in there.
Looking at that link also doesn’t help me.
I’m confused.
What would this be instead?
data-id="0dgNc5S8cLI"
Is this right? el.dataset.dataId = "0dgNc5S8cLI";
https://jsfiddle.net/4apb2g9y/1/
ReferenceError: el is not defined
Do I change el to something else?
it("checking the video for a video id", function() {
//given
el.dataset.dataId = "0dgNc5S8cLI";
//when
//then
});
For clarity, rename el to be video. Then we need to define a video variable.
Up where iframe is defined also define a video element, and separately after the beforeAll function place a beforeEach section.
Inside of that beforeEach section, use document.querySelector so that the video variable refers to the <div class="video video-frame"> element.
https://jsfiddle.net/akgnojmp/2/
- “Spec ‘videoPlayer tests init checking the video for a video id’ has no expectations.”
it("checking the video for a video id", function() {
//given
video.dataset.dataId = "0dgNc5S8cLI";
//when
//then
});
Do this next?
Test now passes: https://jsfiddle.net/akgnojmp/5/
it("checking the video for a video id", function() {
//given
video.dataset.dataId = "0dgNc5S8cLI";
//when
const init = () => videoPlayer.init();
//then
expect(init).not.toThrow();
});
No.
In the test, log the video element to check that it ends up being correct.
We can use video.outerHTML to achieve that.
console.log(video.outerHTML);
Does this video element look right to you?
<div class="video video-frame" data-data-id="0dgNc5S8cLI"></div>
How do I fix that?
Is something in here wrong?
I’m stuck and confused now.
describe("videoPlayer tests", function() {
let fakePlayer;
let iframe;
let options;
let video;
beforeAll(function() {
videoPlayer.setYoutubeIframeUrl("https://www.example.com/iframe_api");
});
beforeEach(function() {
video = document.querySelector(".video");
});
afterAll(function() {
videoPlayer.setYoutubeIframeUrl("https://www.youtube.com/iframe_api");
});
Look at what dataset statement in the test is doing.
Fixed: https://jsfiddle.net/f091dqur/1/
it("checking the video for a video id", function() {
//given
video.dataset.dataid = "0dgNc5S8cLI";
//when
//then
});
Next I do this? https://jsfiddle.net/dvqzmo09/1/
Then improve it from here?
it("checking the video for a video id", function() {
//given
video.dataset.dataid = "0dgNc5S8cLI";
//when
const init = () => videoPlayer.init();
//then
expect(init).not.toThrow();
});
If that is good, how does this get added to the video player code?
video.dataset.dataid = "0dgNc5S8cLI";
I tried this. https://jsfiddle.net/s4qd58hu/1/
video.dataset.dataid = "0dgNc5S8cLI";
manageCover.init(videoPlayer.init());
and I tried this: https://jsfiddle.net/s4qd58hu/2/
manageCover.init(videoPlayer.init(video.dataset.dataid = "0dgNc5S8cLI"));
maybe there is a right way to do it.
Sorry no, that is not correct.
I’m lost then.