How to test your code for the `drop() method` section?

Question

At this stage, we don't have access to the playToken() method and we don't have any code for when the "ArrowDown" key is pressed.

I didn't see a way to test if my drop() method was working. I don't have a target object to test. I don't fully grasp the SVG code to understand the heights I would get. I had got this far...

drop(target, reset?) {
        this.dropped = true;

        $(this).animate({
            top: // pseudo - full height minus height of full spaces
        }, 750, 'easeOutBounce');
    }

Q: Is there a way to test this method at this stage or do you write code that should be right, then fine-tune it once you have the actionable method, playToken()? I am trying to play along but often I can't see a way to test my code as we progress, which is tough.

Answer 1 · 2021-05-15T08:31:17Z

May 15, 2021 8:31am

Hey, it looks like you asked this a while ago but I figured I'd answer it anyway for anyone else who comes looking.

I tested this by adding it to the handleKeydown() method without passing anything through. The idea is that I'll just manually set the target in my drop() method while testing to a fixed value. This is useful for testing the transition speed and seeing the animation when you click the down arrow.

My handleKeydown() method:

handleKeydown(e) {
        if (this.ready) {
            if (e.key === 'ArrowLeft') {
                this.activePlayer.activeToken.moveLeft();
            } else if (e.key === 'ArrowRight') {
                this.activePlayer.activeToken.moveRight(this.board.columns);
            } else if (e.key === 'ArrowDown') {
                // notice I'm not passing the property "reset" and I'm manually defining the target for testing
                const target = {top: 380}; // manipulated token top in inspector to get this value
                this.activePlayer.activeToken.drop();
            }
        }
    }

Then I just use that fake target attribute in my drop() method:

drop(target, reset) {
        const top = {top: (target.y * target.diameter)}; //not used during testing
        this.dropped = true;
        $(this.htmlToken).animate(target, 500, 'easeOutBounce', reset);
    }

Answer 2 · 2021-12-23T10:23:36Z

December 23, 2021 10:23am

I love/need to test my code so posting here in case anyone else feels the same!

In Game.js

handleKeydown(e) {
    if (this.ready) {
      if (e.key == 'ArrowDown') {
        // Don't need to pass in any params at this stage to the drop method
        this.activePlayer.activeToken.drop()
      } else if (e.key == 'ArrowRight') {
        this.activePlayer.activeToken.moveRight(this.board.columns)
      } else if (e.key == 'ArrowLeft') {
        this.activePlayer.activeToken.moveLeft()
      }
    }
  }

In Token.js

    drop(target, reset) {
        this.dropped = true;

        $(this.htmlToken).animate ({
            // 76 is the pixel size (target.diameter) and 5 puts it to the bottom
            // Can play around with the animate features in here
            top: 76 * 5,
            duration: 'slow'
        })
    }

Welcome to the Treehouse Community

Looking to learn something new?

Joseph Lander

Joseph Lander

How to test your code for the `drop() method` section?

2 Answers

Kyle Nel

Kyle Nel

wildgoosestudent

wildgoosestudent