function hideInitialOverlay(button) {
var link = upTo(button, ".linkse");
link.classList.remove("inactive");
hide(button.querySelector(".initiale"));
button.classList.add("activated");
}
When you say āYouāre showing meā - it feels like youāre grabbing my arm preventing me from getting away, and forcing me to do unpleasant things with you.
Thatās not appreciated, and has me not wanting to do things with you.
A brief start can be made with the test code, using the following at the end of what you currently have there:
var button = document.querySelector(".playButtone");
var initial = button.querySelector(".initiale");
if (initial && initial.classList.contains(".hidee") === false) {
console.error("Initial is still showing and must be removed");
}
But there are more proper ways using test code called Jasmine, that we can add support for later on too.
When using Jasmine, that above code becomes more structured, as:
describe("Button E tests", function () {
var button = document.querySelector(".playButtone");
var initial = button.querySelector(".initiale");
it("Doesn't show the initial image", function () {
expect(initial.classList.contains(".hidee")).toBe(false);
});
});
and a pretty dialog is shown for you, with the tests, for example:
var button = document.querySelector(".playButtone");
var initial = button.querySelector(".initiale");
if (initial && initial.classList.contains(".hidee") === false) {
console.error("Initial is still showing and must be removed");
}
describe("Button E tests", function () {
var button = document.querySelector(".playButtone");
var initial = button.querySelector(".initiale");
it("Doesn't show the initial image", function () {
expect(initial.classList.contains(".hidee")).toBe(false);
});
});
Hereās an update with the Jasmine test code included. That test now reports each time that we run the code, and will continue to check that things are as expected each time the code is run,
Itās always harder to add tests in afterwards, partly because thereās less incentive to because the code is already working.
Because of that, itās a better work habit to start with a test first, and then write test to make it pass. Thatās similar to writing out a work order for a contractor, and after the contractor has done the work, his work can be checked against the work order. If he hasnāt properly completed the contract, he gets sent back to do it again more properly, until all of the tests pass.
We can now go ahead with making changes to the code. Normally we would have other tests to ensure that the button still plays properly too, but those things can be added when changes occur that require other tests to be added.
Iāll take a look at the code now and figure out what is the easiest way to make the test pass.
Now that the test passes, we can make further changes to improve the code, which is called refactoring the code while ensuring that the tests continue to pass.
In this case Iāll be making changes to remove the initialOverlay parts of the code, while making sure that the test continues to pass.
function hideInitialOverlay(button) {
var link = upTo(button, ".linkse");
link.classList.remove("inactive");
hide(button.querySelector(".initiale"));
button.classList.add("activated");
}