Wait, I’m also confused, doesn’t the spinner get added to this part of the code?
I think I’m just confused from looking at different codes where it was used in the multi player code.
So, I have no idea how it would be added to the single video code.
videoPlayer.init({
afterPlayerReady: function initCover() {
manageCover.init(function playVideo() {
videoPlayer.play();
});
}
});
Are these the right resources I will be using? https://jsfiddle.net/edqkb3pg/
jasmine.css
jasmine.min.js
jasmine-html.min
boot0.min.js
boot1.min.js
How do I properly set this up?
What will be the checklist of items that we will be testing in the code?
We will be testing these?
function show(el) {
function hide(el) {
function openCurtain(cover) {
function showVideo(curtain) {
function coverClickHandler(evt) {
function init(callback) {
What are we looking to confirm when we do the tests?
That each function works?
Only this part is being tested? https://jsfiddle.net/j9b743ke/
Everything else gets removed?
const manageCover = (function makeManageCover() {
const events = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
showVideo(curtain);
cover.dispatchEvent(events.afterClickCover);
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
events.afterClickCover = new Event("afterClickCover");
cover.addEventListener("afterClickCover", callback);
}
return {
init
};
}());
This is what I have, can progress be made from here? https://jsfiddle.net/o4vc9w2r/
What will the name of the 1st it section be called?
describe("manageCover", function() {
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it(" ", function() {
});
});
});
Continuing, this is what I did next: https://jsfiddle.net/2qupvsjw/1/
describe("manageCover", function() {
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("needs a function parameter of .play", function() {
const fnCall = () => manageCover.init();
expect(fnCall).toThrowError(/Cannot read properties of undefined/);
});
});
});
The needs-a-function test isn’t useful. Remove that and start over with an empty test that says: “with no parameters”. That way you can progress forward with what happens when init() is used with no parameters, and as you gain more information about the test you can then update the test description to something else.
Like this? https://jsfiddle.net/5rsdoLhu/1/
describe("manageCover", function() {
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("with no parameters", function() {
const fnCall = () => manageCover.init();
expect(fnCall).toThrow(/Cannot read properties of undefined/);
});
});
});
I did this next, but now I’m confused: https://jsfiddle.net/5cxdq9t8/2/
describe("manageCover", function() {
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("with no parameters", function() {
const fnCall = () => manageCover.init();
expect(fnCall).toThrow(/Cannot read properties of undefined/);
});
describe("cover", function() {
it("with a single cover", function() {
// given
manageCover.init({
cover: ".play"
});
// when
const cover = document.querySelector(".play");
expect(cover).toHaveClass("hide");
});
});
});
});
Are you able to put together a checklist of the it sections so there is a guide to follow?
No - I do not have the homework results already pre-prepared ahead of time.
Sorry no, copy-paste can only get you so far, but no further.
Ther is no need for toThrow or the fnCall const in the no-parameters test. Just do what I said, starting off with calling manageCover.init with no parameters.
You want me to do this? https://jsfiddle.net/8jywx3eg/2/
describe("manageCover", function() {
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("with no parameters", function() {
manageCover.init();
});
});
});
Yes that’s right. The test doesn’t immediately fail so we need to figure out what to do from here.
☐ Fail ☐ Pass ☐ Refactor
The test page says:
SPEC HAS NO EXPECTATIONS with no parameters
so we need to figure out a suitable expectation to make. We need to figure out what change manageCover.init() makes to the page, so that we have a suitable expectation.
About the only thing that the init() function does with no parameters, is that it adds a click handler to the .play element on the page.
That means copying over the simulateClick code from the other code, because we’ll want to use that to trigger a click on the “.play” element.
I did this: https://jsfiddle.net/j4L2gv3n/1/
- “Spec ‘manageCover init with no parameters’ has no expectations.”
describe("manageCover", function() {
function simulateClick(el) {
const clickEvent = new MouseEvent('click', {
currentTarget: 'el'
});
el.dispatchEvent(clickEvent);
}
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("with no parameters", function() {
manageCover.init();
});
const cover = document.querySelector(".play");
simulateClick(".play");
});
});
2nd attempt: https://jsfiddle.net/5pnuxo27/
describe("manageCover", function() {
function simulateClick(el) {
const clickEvent = new MouseEvent('click', {
currentTarget: 'el'
});
el.dispatchEvent(clickEvent);
}
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("with no parameters", function() {
manageCover.init();
});
const cover = document.querySelector(".play");
simulateClick(".play");
expect(cover).toHaveClass("hide");
});
});
Please ensure that excluding the simulateClick function itself, that the code you add is inside of the “with no parameters” test.
I had never placed simulateClick inside there before so I wasn’t sure.
I added an expect because all the other simulateClick’s were followed by an expect.
This is what I have now: https://jsfiddle.net/wp6jaugx/1/
TypeError: el.dispatchEvent is not a function
describe("manageCover", function() {
function simulateClick(el) {
const clickEvent = new MouseEvent('click', {
currentTarget: 'el'
});
el.dispatchEvent(clickEvent);
}
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("with no parameters", function() {
manageCover.init();
const cover = document.querySelector(".play");
simulateClick(".play");
expect(cover).not.toHaveClass("hide");
});
});
});
Am I supposed to try and fix that error?
This was my attempt at trying to fix it.
it("with no parameters", function() {
manageCover.init();
const coverHandler = jasmine.createSpy("coverHandler");
manageCover.init(".play", coverHandler);
const cover = document.querySelector(".play");
simulateClick(".play");
expect(cover).not.toHaveClass("hide");
expect(coverHandler).toHaveBeenCalled();
});
That did not work.
TypeError: Failed to execute ‘addEventListener’ on ‘EventTarget’: parameter 2 is not of type ‘Object’.
I was looking at this to try and figure that out:
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
events.afterClickCover = new Event("afterClickCover");
cover.addEventListener("afterClickCover", callback);
}
Maybe that error is supposed to stay there for now?
You have so much that’s bad and inappropriate there. Copy-paste is not your friend when you fail to understand what it’s supposed to do.
Please go back to the “with no parameters” test that you had in post #38 because you need to be taken through this step by step, decision by decision.
This is what I have: https://jsfiddle.net/8jywx3eg/2/
describe("manageCover", function() {
describe("init", function() {
afterEach(function() {
const container = document.querySelector(".container");
container.innerHTML = container.innerHTML;
});
it("with no parameters", function() {
manageCover.init();
});
});
});
I am placing this below what?
Right underneath what?
function simulateClick(el) {
const clickEvent = new MouseEvent('click', {
currentTarget: 'el'
});
el.dispatchEvent(clickEvent);
}
The simulateClick function should go as close as practical to where it’s needed. Right now that means inside of the “with no parameters” test, but because we have a fairly good ability to predict the future use, it can go under the “init” description line instead as it’s going to be needed by a few different tests.
There are a few other things to fix up in that code though, one of them is that there is no need for the separate “init” section because the code we are testing has only the one init method. Removing that means we can describe the test as being “init manageCover” instead.
Also, the afterEach section should be removed until there is a need for it to be there.
I got up to this: https://jsfiddle.net/0zqx6ft3/
describe("manageCover", function() {
describe("init", function() {
function simulateClick(el) {
const clickEvent = new MouseEvent('click', {
currentTarget: 'el'
});
el.dispatchEvent(clickEvent);
}
it("with no parameters", function() {
manageCover.init();
});
});
});
Next is this:
one of them is that there is no need for the separate “init” section because the code we are testing has only the one init method. Removing that means we can describe the test as being “init manageCover” instead.
I did that here I think correctly: https://jsfiddle.net/0zqx6ft3/2/
describe("init manageCover", function() {
function simulateClick(el) {
const clickEvent = new MouseEvent('click', {
currentTarget: 'el'
});
el.dispatchEvent(clickEvent);
}
it("with no parameters", function() {
manageCover.init();
});
});
Am I supposed to add these in next?
const cover = document.querySelector(".play");
simulateClick(".play");
expect(cover).not.toHaveClass("hide");
Those would be added inside the it section like this? https://jsfiddle.net/bm24xq5p/1/
describe("init manageCover", function() {
function simulateClick(el) {
const clickEvent = new MouseEvent('click', {
currentTarget: 'el'
});
el.dispatchEvent(clickEvent);
}
it("with no parameters", function() {
manageCover.init();
const cover = document.querySelector(".play");
simulateClick(".play");
expect(cover).not.toHaveClass("hide");
});
});