Adding tests to video player code

That test is supposed to check for something that happens when the animationEndHandler() function gets run. Here is that function:

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      body.classList.remove("initial-fade");
      showCover(currentPlayButton);
    }
  }

In manageCover we earlier defined body to be document.body. What the event handler does is that it removes initial-fade from document.body.

We need the test to add initial-fade to document.body, and after we simulate animation-end we need to check that initial-fade has been removed from document.body.

The test code that uses the container variable all needs to be removed too.

I removed the container variable here: https://jsfiddle.net/jbced2uk/1/

      it("with a single container", function() {

        // given
        manageCover.init({
          // container: ".play1",
          playButton: ".playa"
        });

        // const container = document.querySelector(".play1");
        // container.classList.add("hide");

        // when
        const playButton = document.querySelector(".playa");
        simulateClick(playButton);

        // simulateAnimationEnd();

        // then
        expect(document.body).not.toHaveClass("hide");
      });

Iā€™m going to take a break from this code.

The container property (the first of the three you commented out) doesnā€™t get commented out. That needs to be uncommented.

The next thing to do after that is in the given section to add the class ā€œinitial-fadeā€ to document.body, and in the then section to expect that document.body doesnā€™t have the class ā€œinitial-fadeā€.

That way the test suitably fails, and when we uncomment the simulateAnimationEnd() that causes things to change, and the test will properly pass.

Yes well this is a marathon, not a sprint.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.