Completing Adding tests to video player code

[asasass]

I would like to finish this because there are only 3 things left in the test to fix before they can be used.

• The single-container test is currently broken, because it shows a pass when it shouldn’t.
• The multiple-containers test is currently broken, because it shows a pass when it shouldn’t.
• The showCover() code in manageCover is not yet being tested at all

• init container with a single container
• init container with multiple containers
• fails to check showCover() 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.

I just followed those instructions here and the test pass: https://jsfiddle.net/v2cyoj1n/

You never mentioned to uncomment those lines.
If I do uncomment them I receive errors.

 describe("container", function() {

      it("with a single container", function() {
        // given
        document.body.classList.add(".initial-fade");
        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("initial-fade");
      });

If the same thing that was done in the single container, gets done with multiple containers also, I did that here.

https://jsfiddle.net/5pr3ftog/

     it("with multiple containers", function() {

        // given
        document.body.classList.add(".initial-fade");
        manageCover.init({
          container: ".container",
          playButton: ".cover"
        });

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

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

        simulateAnimationEnd();

        // then
        expect(document.body).not.toHaveClass("initial-fade");
      });
    });

If those two above are good, there is just this one left to do.

• fails to check showCover() code

That would be this:

  function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const cover = playButton.parentElement;
    cover.classList.add("active");
    show(cover);
  }

I’m not really sure where this would be placed.

describe("showCover", function() {

});

Last Working Code: https://jsfiddle.net/24xf0avp/
Broken Code: https://jsfiddle.net/kxhyLdr8/

Continuing the discussion from Adding tests to video player code:

[asasass]

I don’t know if I am up to this yet, but this is where I placed showCover.

Inside the jsfiddle I left that desribe section commented out until it is known.

https://jsfiddle.net/8o6nvr25/

I put inside 6 it sections because there are 6 things inside showCover.

1. hideAll(config.containers);
2. resetPage();
3. markAsPlayed(playButton);
4. const cover = playButton.parentElement;
5. cover.classList.add("active");
6. show(cover);

I wasn’t sure if there was a previous test I was supposed to copy, so each it section I gave this.

    it("", function() {
      // given

      // when
      // simulateClick(playButton);
      //simulateAnimationEnd();

      // then
      expect()();
    });

[asasass]

expect that document.body doesn’t have the class “initial-fade”.

The errors refers to this line:
expect(document.body).not.toHaveClass("initial-fade");

This should have been something different? .not.toHaveClass

Inside: it("with a single container", function() { test https://jsfiddle.net/fpka32zj/

I am seeing 1 error.

You may have to click run many times before the error appears, or sometimes it occurs right away.

     it("with multiple containers", function() {

        // given
        document.body.classList.add(".initial-fade");
        manageCover.init({
          container: ".container",
          playButton: ".cover"
        });

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

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

        // then
        expect(document.body).not.toHaveClass("initial-fade");
      });
    });

In the it("with multiple containers", function() { test https://jsfiddle.net/9eh2jp35/

When I comment out the first it test, I receive the same error message for this test.

      it("with multiple containers", function() {

        // given
        document.body.classList.add(".initial-fade");
        manageCover.init({
          container: ".container",
          playButton: ".cover"
        });

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

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

        // then
        expect(document.body).not.toHaveClass("initial-fade");
      });