Skip to content
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

Add toHaveClass custom matcher (closes #2) #4

Merged
merged 3 commits into from
Apr 7, 2018
Merged

Add toHaveClass custom matcher (closes #2) #4

merged 3 commits into from
Apr 7, 2018

Conversation

gnapse
Copy link
Member

@gnapse gnapse commented Apr 6, 2018

As discussed in #2 (closes #2)

One thing to note about it: I did this custom matcher so that it can even be used to match more than one class at the same time:

// <button data-testid="delete-button" class="btn extra btn-danger">
//   Delete item
// </button>

// This passes, even though `"btn btn-danger"` are not contiguous in the actual class attr
expect(getByTestId('delete-button')).toHaveClass('btn btn-danger')

I think this makes it much more useful, and was not difficult to support.

@codecov
Copy link

codecov bot commented Apr 6, 2018

Codecov Report

Merging #4 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@          Coverage Diff          @@
##           master     #4   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           5      5           
  Lines          85     95   +10     
  Branches       24     26    +2     
=====================================
+ Hits           85     95   +10
Impacted Files Coverage Δ
src/jest-extensions.js 100% <100%> (ø) ⬆️
src/extend-expect.js 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e6efd07...f897f7a. Read the comment docs.

@antsmartian
Copy link
Contributor

@gnapse You are fond of jest custom matchers :) Looks cool though!

@gnapse
Copy link
Member Author

gnapse commented Apr 6, 2018

Yeah, I'd like to strike some balance between usefulness and avoiding bloating this lib, so I don't really think I'll propose any new ones for the time being, but these two (.toHaveAttribute and now .toHaveClass) came up from tests I was writing myself with react-testing-library, and I thought that testing for these two things is really common. Plus they fit very nicely in the context of testing the dom, which is what this new library extracted from react-testing-library is for. That was a nice move!

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great!

@kentcdodds kentcdodds merged commit 75d12c4 into testing-library:master Apr 7, 2018
@gnapse gnapse deleted the pr/to-have-class branch April 7, 2018 02:43
alexkrolick pushed a commit to alexkrolick/dom-testing-library that referenced this pull request Sep 13, 2018
…ng-library#4)

* Add faq entry about dealing with multiple data-testid with the same value

* Add contributor

* Generalize selector

* Update .all-contributorsrc

* Update README.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

.toHaveClass custom matcher
3 participants