Adding tests to video player code

[asasass]

Because this test is not being set up the same way as how the previous test was done, I am having problems.

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

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

        const container = document.querySelector(".play1");

So, I guess I will be starting out with just this:

Unless this is wrong also.

  // given
      manageCover.addCoverHandler({

      });

where we give the addEventHandler a coverSelector string as it’s parameter.

I have no idea what I am doing.

This is wrong then:

I can’t use this:

      manageCover.addCoverHandler({

      });

Is this close?

manageCover.addEventHandler("coverSelector");

I am lost, nothing is coming to me.

I don’t know what I am supposed to be doing, but more importantly, I don’t know how to get the code started.

Since this is wrong:

      manageCover.addCoverHandler({

      });

What does that get replaced with?

[Paul_Wilkins]

@asasass

So, I guess I will be starting out with just this:

Unless this is wrong also.

  // given
      manageCover.addCoverHandler({

      });

Don’t even give it the object. Remove that, and just use a cover selector (which is just a string) instead.

[asasass]

This? https://jsfiddle.net/5hek4nbm/

 it("with a coverSelector parameter", function() {
    
      manageCover.addCoverHandler(".playb");
      
    });

Spec ‘manageCover addCoverHandler with a coverSelector parameter’ has no expectations.

[Paul_Wilkins]

@asasass

This? https://jsfiddle.net/5hek4nbm/

Yes, that is the way. “.playb” is a good example of a selector. The string is used by the addCoverHandler code to select an element.

@asasass

Spec ‘manageCover addCoverHandler with a coverSelector parameter’ has no expectations.

There doesn’t seem to be anything that we can usefully test for when using only the coverSelector, because just by itself without an event handler, it doesn’t change anything about the page that we can test. That leads us to an important realization. When the manageCover code doesn’t change anything, there is nothing that can be tested.

Ordinarily when writing tests before writing the code, I would have the function return an element that the selector was used to get. That way we would have something that can be tested. That can’t be done here though, because the manageCover must remain unchanged for us to finish this job, where the tests for this code are used to help us diagnose the other code that isn’t working. We could perhaps come back to this later on afterwards.

For now, the test with only coverSelector is abandoned, and we can reuse the code for the coverSelector and coverHandler test.

• init with no parameters
• init with container property
• init with playButton property
• addCoverHandler with no parameters
• ☐ addCoverHandler with coverSelector
• ☐ addCoverHandler with handler
• ☐ addCoverHandler with coverSelector and coverHandler

Rename the test to be “with coverSelector and coverHandler parameters”, and we can adjust things to work with both of those.

We can now add an expectation that coverHandler has been called, where coverHandler is what we are checking, and the Jasmine method toHaveBeenCalled() is used, similar to what’s used at https://jasmine.github.io/api/4.0/matchers.html#toHaveBeenCalled

Yes there is no coverHandler variable yet, but we can come to that after the expectation is there.

[asasass]

I did not do this right: https://jsfiddle.net/9kh8wzfx/2/

   it("with coverSelector and coverHandler parameters", function() {
    
      manageCover.addCoverHandler(".playb");
      
      expect(mySpy).toHaveBeenCalled("coverHandler");
    });

What does mySpy get changed to?

or did I do this wrong, or it is almost good?

[Paul_Wilkins]

Here’s what was asked to be done:

@Paul_Wilkins

We can now add an expectation that coverHandler has been called, where coverHandler is what we are checking, and the Jasmine method toHaveBeenCalled() is used

And here’s what you did.

@asasass

expect(mySpy).toHaveBeenCalled("coverHandler");

Your expectation is that mySpy has been called, which is not what you were asked to do. You were asked to check that coverHandler has been called instead.

Also you are giving the toHaveBeenCalled method an argument of “coverHandler” which is not what you were asked to do either.

[asasass]

This is wrong also:

expect("coverHandler").toHaveBeenCalled();

Error: : Expected a spy, but got ‘coverHandler’.
Usage: expect().toHaveBeenCalled()

It’s telling me I need to use spy.

I removed the argument, then placed coverHandler after expect.

expect("coverHandler").toHaveBeenCalled();

But now the error is telling me to place a spy where coverHandler now is.

Starting from here, is this line all wrong?

Am I not using expect?

expect().toHaveBeenCalled();

coverHandler does not go inside here?

expect(".coverHandler")

I’m confused.

[Paul_Wilkins]

@asasass

This is wrong also:

expect("coverHandler").toHaveBeenCalled();

coverHandler is not a string. Just use it as a variable name, without the quotation marks.

[asasass]

I did that here: https://jsfiddle.net/5k48z6me/1/

    it("with coverSelector and coverHandler parameters", function() {
    
      manageCover.addCoverHandler(".playb");
      expect(coverHandler).toHaveBeenCalled();
    });

ReferenceError: coverHandler is not defined

What do I do next?

Doing this gives me: var coverHandler;

Error: : Expected a spy, but got undefined.
Usage: expect().toHaveBeenCalled()

Yes there is no coverHandler variable yet, but we can come to that after the expectation is there.

Maybe I am supposed to wait for further instruction.

The expectation is there now, right?

After having done this:

expect(coverHandler).toHaveBeenCalled();

[Paul_Wilkins]

@asasass

ReferenceError: coverHandler is not defined

What do I do next?

We now define a coverHandler variable, where we use jasmine.createSpy(“coverHandler”)

The text in the argument is just for pretty error messages.

[asasass]

At the end of this I was able to remove the errors, but I do not know if that is good, or it is not good. or, maybe I am close.

My head is confused now:

I’m using this whole line the way it is:

jasmine.createSpy(“coverHandler”);

I’m supposed to place that line somewhere in here?

I’m completely lost.

it("with coverSelector and coverHandler parameters", function() {

      manageCover.addCoverHandler(".playb");
      expect(coverHandler).toHaveBeenCalled();
      
    });

where we use jasmine.createSpy(“coverHandler”)

I do not understand what that means I need to do.

Me guessing makes things worse:

const coverHandler = jasmine.createSpy();

Expected spy unknown to have been called.

Another attempt: https://jsfiddle.net/qdL3x18r/

I don’t know how to stop receiving errors.

    it("with coverSelector and coverHandler parameters", function() {
    
      manageCover.addCoverHandler(".playb");
      
      jasmine.createSpy(coverHandler);
      expect(coverHandler).toHaveBeenCalled();
    });

ReferenceError: coverHandler is not defined

Reading in here makes things even worse because I do not know what I am reading:

https://jasmine.github.io/api/4.0/jasmine.html#.createSpy

(static) createSpy(nameopt, originalFnopt) → {[Spy]

Is this close? https://jsfiddle.net/pa0qnbd1/

   it("with coverSelector and coverHandler parameters", function() {
    
      manageCover.addCoverHandler(".playb");
      
      const coverHandler = jasmine.createSpy("coverHandler");
      expect(coverHandler).toHaveBeenCalled();
    });

Expected spy coverHandler to have been called.

I don’t know what that means.

Is this good or close? https://jsfiddle.net/pa0qnbd1/2/

Now there are no errors.

it("with coverSelector and coverHandler parameters", function() {

      manageCover.addCoverHandler(".playb");

      var coverHandler;
      coverHandler = jasmine.createSpy();
      coverHandler();
      expect(coverHandler).toHaveBeenCalled();
    });

Next I placed the html and the css from the broken code into the test code:

Where I receive this error: https://jsfiddle.net/Lp93bqny/

Not sure if I was up to doing this part next:

What is odd here is that, clicking “run” sometimes the code passes, other times it fails.

When it fails it reads this:

That error points to this test:

it("when not initialized", function() {

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

        document.body.classList.remove("initial-fade");

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

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

[Paul_Wilkins]

@asasass

Is this close? https://jsfiddle.net/pa0qnbd1/

   it("with coverSelector and coverHandler parameters", function() {
    
      manageCover.addCoverHandler(".playb");
      
      const coverHandler = jasmine.createSpy("coverHandler");
      expect(coverHandler).toHaveBeenCalled();
    });

Expected spy coverHandler to have been called.

Yes, that is the one. Of the given/when/then structure, the addCoverHandler line and the createSpy line are in the given section, and the expect line is in the then section.

We only have the when section left to do there, where we simulate a click on the “.playb” element, which will result in the test passing.

Before we can do that though we need to move the simulate functions up, above the describe init line, so that they can be accessed both by the test that currently uses them, and also by the test that we are dealing with now.

[asasass]

You wanted me to do this: https://jsfiddle.net/kqerawxh/

describe(“manageCover”, function() {

 function simulateClick(el) {
    const clickEvent = new MouseEvent('click', {
      currentTarget: 'el'
    });
    el.dispatchEvent(clickEvent);
  }

  function simulateAnimationEnd() {
    const animationEvent = new AnimationEvent('animationend', {
      animationName: 'initial-fade'
    });
    document.body.dispatchEvent(animationEvent);
  }

  describe("init", function() {

Next I did this: https://jsfiddle.net/kqerawxh/3/

    it("with coverSelector and coverHandler parameters", function() {

      manageCover.addCoverHandler(".playb");
      simulateClick(".playb");

      const coverHandler = jasmine.createSpy("coverHandler");
      expect(coverHandler).toHaveBeenCalled();
      simulateAnimationEnd();
    });

TypeError: el.dispatchEvent is not a function

Attempt 2: https://jsfiddle.net/kqerawxh/5/

 it("with coverSelector and coverHandler parameters", function() {

      manageCover.addCoverHandler(".playb");
      simulateClick(".playb");
      
      const coverHandler = jasmine.createSpy("coverHandler");
      expect(coverHandler).toHaveBeenCalled();

TypeError: el.dispatchEvent is not a function

Did I forget to do something?

Did I mess up somewhere?

We only have the when section left to do there, where we simulate a click on the “.playb” element, which will result in the test passing.

It’s not passing though?

[Paul_Wilkins]

The createSpy line must come before the addCoverHandler line, because that coverHandler variable needs to be passed to addCoverHandler as the second argument.

[asasass]

It’s still not passing after I did that: https://jsfiddle.net/pb41j79h/2/

    it("with coverSelector and coverHandler parameters", function() {

      const coverHandler = jasmine.createSpy("coverHandler");

      manageCover.addCoverHandler(".playb");
      simulateClick(".playb");

      expect(coverHandler).toHaveBeenCalled();

    });

TypeError: el.dispatchEvent is not a function

[Paul_Wilkins]

Look at the previous test where you used simulateClick. Do the same thing that you did there.

[asasass]

You say that to me, but I don’t understand what that means I should do.

This is the previous test, I don’t understand what you mean.

I am lost.

It does not work in the code.

I don’t understand what you are having me do.

   it("when all playButtons are initialized", function() {

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

        document.body.classList.remove("initial-fade");

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

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

This does not work:

I’m making a mess of this. https://jsfiddle.net/wLg785t0/

 it("with coverSelector and coverHandler parameters", function() {

      const coverHandler = jasmine.createSpy("coverHandler");

      manageCover.addCoverHandler(".playb");
       
      const playButton = document.querySelector(".playb");
      simulateClick(playButton);

      expect(coverHandler).toHaveBeenCalled();

    });

[Paul_Wilkins]

In the code at https://jsfiddle.net/pb41j79h/2/ you have defined the coverHandler variable. Now do something with it.
That means adding coverHandler as a second parameter argument to the addCoverHandler function call.

[asasass]

This? const fnCall = () => manageCover.addCoverHandler("coverHandler");

The error is still there. https://jsfiddle.net/2g3wvmur/1/

TypeError: el.dispatchEvent is not a function

describe("addCoverHandler", function() {
  
    it("needs a coverSelector parameter", function() {
      const fnCall = () => manageCover.addCoverHandler("coverHandler");
      expect(fnCall).toThrowError(/Cannot read properties of null/);
    });

    it("with coverSelector and coverHandler parameters", function() {

      const coverHandler = jasmine.createSpy("coverHandler");

      manageCover.addCoverHandler(".playb");
      simulateClick(".playb");

      expect(coverHandler).toHaveBeenCalled();

    });

[Paul_Wilkins]

@asasass

This? const fnCall = () => manageCover.addCoverHandler("coverHandler");

The error is still there. https://jsfiddle.net/2g3wvmur/1/

What the hell? No,

Just add coverHandler as a second argument to the addCoverHandler function call.