Setting up single-player tests before adding spinner

JavaScript
17

This post may need to be moved out into a new topic, maybe called:

Setting up tests to prepare to add spinner to single player code.

How many tests would be needed to be made to prepare to add the spinner in for this single video code?

This code is using only 1 video, not multiple, where the javascript is set up differently, where there is no animation stuff inside the javascript.

I was able to do this: https://jsfiddle.net/edqkb3pg/

To be able to see the tests on the screen I did this:

.container {
  display: none;
}

Do I need to change any of the resources in here?

i.e., Do I need to remove any, add different ones?

jasmine.css
jasmine.min.js
jasmine-html.min.js
boot0.min.js
boot1.min.js

I don’t exactly know what is being tested because, what gets tested to then be able to add a spinner to it?

We know what the code does, and it does what it is supposed to do.

We disable clicking the play button, until the player is loaded and ready.

Instructions for the single player code that were followed: post #175

Where the play button is disabled, that’s where the spinner should be seen.

/* Spinner */
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  opacity: 0.5;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

 function toggleSpinner(cover) {
    cover.classList.toggle("lds-dual-ring");
  }

I first toggle the spinner when we init the cover:

    const cover = document.querySelector(opts.target);
    toggleSpinner(cover);
    const videoWrapper = cover.nextElementSibling;
    initPlayer(videoWrapper, onPlayerReady);

And toggle the spinner again, thus turning it off, when the player is ready.

    function onPlayerReady() {
        const coverSelector = opts.target;
        manageCover.init(coverSelector);
        const cover = document.querySelector(coverSelector);
        toggleSpinner(cover);
        cover.addEventListener("click", coverClickHandler);
    }

As soon as a video has loaded which only takes a second, the spinner goes away and you can click on the cover to start playing.

Which were part of the instructions here: post #96

But those instructions went with the multi player code, not a single player code.

Also, those may not be the correct instructions:

In post #102

You say this: Where new instructions are given.

With the spinners, it’s not a good idea to have the code calling toggleSpinner embedded directly in the other code that deals with players. There is a Separation of Concerns ideal that should be applied.

Instead of having the toggleSpinner embedded in the code, we want the spinner to start when the player is a added, and to stop spinning when the player is ready.

Still, that was done to the multi player code.

In the single player code it would be written differently.

I think that the spinner idea was not thought of until later on, so that would be why it was not added to the single player code at the time.

Would there be a way to come up with, or modify existing instructions for how to add the spinner to the single player code to see if there are any issues?

I found some code to test the spinner here: post #122

describe("Spinner", function () {
    const div = document.createElement("div");
    it("toggles on when the classname doesn't exist", function () {
        div.classList.remove("lds-dual-ring");
        spinner.toggleDualRing(div);
        expect(div.classList.contains("lds-dual-ring")).to.equal(true);
    });
    it("toggles off when the classname already exists", function () {
        div.classList.add("lds-dual-ring");
        spinner.toggleDualRing(div);
        expect(div.classList.contains("lds-dual-ring")).to.equal(false);
    });
});

Looking at this piece of instruction: post #26

   addPlayer.init({
        afterAddPlayer: function (evt) {
            toggleSpinner(evt);
        },
        afterPlayerReady: function (evt) {
            toggleSpinner(evt);
            const cover = evt.detail.cover;
            manageCover.init(cover, showVideo);
        }
    });

It looks that that would be added to this somehow:

Just because it looks similar, but I have no idea.

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
});