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.