Feature: onCaptionClick

[adambbecker]

Adds an optional onCaptionClick prop (similar to onDayClick) that allows developer to specify a function to be run when the user clicks the caption in the header (month display).

[gpbl]

Awesome thank you! Do you want to add a test for it, or should I? :-) Coveralls is in maintenance mode and doesn't report the coverage status on github.

[adambbecker]

No problem!

Do you want to add a test for it, or should I?

So this is an area I'm admittedly not well practiced in so I would definitely appreciate the help if you wouldn't mind. I'd also love to take a look at the tests once they've been proposed just to learn from and hopefully get a bit better at.

[gpbl]

It's very easy to add the test. Take this one as example to start. Your test should be very similar:

1. create a mock function let handleCaptionClick = sinon.spy() ready to be spied, i.e. later we want to know that it has been called with some arguments
2. render the day picker into the fake DOM using react's TestUtils. Make sure you pass onCaptionClick={handleCaptionClick} as prop (others props are not needed, the initial month will be the current month)
3. get the DOM element having class DayPicker-Caption
4. simulate a click on it
5. expect that handleCaptionClick has been called with the given arguments

The last part is a bit more complex as you need to know the syntax of sinon (library used to spy a function). Since the function passed to onCaptionClick expects an event (which is a React Synthetic Event) and a month, you could write it as

// get the SyntheticEvent class from react's lib
const SyntheticEvent = require("react/lib/SyntheticEvent"); 
expect(handleCaptionClick).to.have.been.calledWith(

       // Make sure the first argument receved is an instance of SyntheticEvent
       sinon.match((e) => {
          return e instanceof SyntheticEvent && e.target !== null;
        }, "e"), 

       // Make sure the second argument is the calendar's current month, 
       // e.g. the initial month
       sinon.match((currentMonth) => {
          let today = new Date();
          return currentMonth.getFullYear() === today.getFullYear() &&
            currentMonth.getMonth() === today.getMonth();
        }, "currentMonth"),

);

run npm run test to run the test suite (it should not fail) and npm run cover to make sure the test coverage is 100% :-)

If you run npm run cover before writing the test you should see values below 100%.

[adambbecker]

Awesome, thank for the write up! Very informative and helpful.

I've gone ahead and added that test via 74ca15c.

[gpbl]

thanks man! published as 1.0.3

[adambbecker]

🎉