New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: onCaptionClick #31

Merged
merged 2 commits into from Jul 25, 2015

Conversation

2 participants
@adambbecker
Contributor

adambbecker commented Jul 24, 2015

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).

Feature: adds onCaptionClick prop
Allows developer to specificy an onCaptionClick prop to be run when user clicks on the caption (month display in header)
@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jul 24, 2015

Owner

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.

Owner

gpbl commented Jul 24, 2015

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

This comment has been minimized.

Show comment
Hide comment
@adambbecker

adambbecker Jul 24, 2015

Contributor

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.

Contributor

adambbecker commented Jul 24, 2015

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

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jul 25, 2015

Owner

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%.

Owner

gpbl commented Jul 25, 2015

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%.

Test: added coverage for onCaptionClick
Also updated parameters of (e, month) to -> (e, currentMonth) to be more explicit
@adambbecker

This comment has been minimized.

Show comment
Hide comment
@adambbecker

adambbecker Jul 25, 2015

Contributor

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

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

Contributor

adambbecker commented Jul 25, 2015

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

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

gpbl added a commit that referenced this pull request Jul 25, 2015

@gpbl gpbl merged commit 30c1c5f into gpbl:master Jul 25, 2015

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jul 25, 2015

Owner

thanks man! published as 1.0.3

Owner

gpbl commented Jul 25, 2015

thanks man! published as 1.0.3

@adambbecker adambbecker deleted the adambbecker:feature/onCaptionClick branch Jul 25, 2015

@adambbecker

This comment has been minimized.

Show comment
Hide comment
@adambbecker

adambbecker Jul 25, 2015

Contributor

🎉

Contributor

adambbecker commented Jul 25, 2015

🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment