feature: toHaveStyle custom matcher #12

gnapse · 2018-05-17T04:16:45Z

What:

A new .toHaveStyle custom matcher, as proposed in #6.

Closes #6

Checklist:

Documentation
Tests
Replace parseCSS with a more robust alternative (like this)
Support passing styles in POJO form (?)

kentcdodds · 2018-05-17T04:56:10Z

src/to-have-style.js

+import {matcherHint} from 'jest-matcher-utils'
+import {checkHtmlElement, getMessage} from './utils'
+
+function parseCSS(css) {


You might consider using the css module for this.

Yes, I will. It's on the to-do list above. This was just a first draft, a proof-of-concept.

codecov-io · 2018-05-17T15:13:02Z

Codecov Report

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

@@          Coverage Diff          @@
##           master    #12   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           6      7    +1     
  Lines          41     67   +26     
  Branches       12     15    +3     
=====================================
+ Hits           41     67   +26

Impacted Files	Coverage Δ
src/utils.js	`100% <ø> (ø)`	⬆️
src/to-have-style.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 bbdd96c...60ae40d. Read the comment docs.

kentcdodds

This is going to be soooo cool!

In the future maybe we could consider toHaveOnlyStyles, or maybe we could call this method toHaveStylesSubset or something.

src/utils.js

kentcdodds · 2018-05-17T18:03:21Z

src/to-have-style.js

+  )
+}
+
+function printoutStyles(styles) {


Maybe we could use css.stringify to ensure that this handles things like media queries and stuff properly?

I thought about it, but there's a problem with this. The css library seems to only be able to handle the syntax of css to the stylesheet level, that is, property: value; pairs listed inside a selector { ... }. And here I'm handling only plain css property/value pairs (well, sets of property/value pairs really) abstracted away from a selector. I do not even think media queries apply.

For instance, I'd have to convert what getComputedStyles give me, which is, again, a set of plain css property/value pairs, and manually build the AST that the css lib would have created out of those rules with a fake css selector wrapping them, just to make css.stringify be able to process it.

I saw the point of using css to parse because even though I had to fake wrapping the plain css props in a selector, it gives me syntax error handling, which is amazing for the pretty error messages when expectations in tests fail. But after all this reasoning do you still think is worth using css.stringify @kentcdodds?

(Do we even need to handle media queries here? Maybe I'm missing out some potential great use case for this, but I don't see it yet)

You're right, I don't think we need to use css.stringify 👍

kentcdodds

I think this is amazing! Thanks for working on this!

It would be very cool in the future to support objects in addition to a string of CSS 👍

kentcdodds · 2018-05-17T21:48:19Z

I'll let you go ahead and merge this considering this is your project and all. 👍

I'm just a bystander 😉

gnapse · 2018-05-17T22:04:51Z

It would be very cool in the future to support objects in addition to a string of CSS

I considered working on that in this PR, but I'll leave it for now, so we can have something usable sooner.

I'll let you go ahead and merge this considering this is your project and all

I think I never thanked you for this huge opportunity to work on and maintain an OSS project, almost all by myself, so here it goes: Thank you! (though I still don't think of it as mine, never would have worked on this if it weren't for your and @antoaravinth who led the way, thanks again!)

gnapse · 2018-05-17T22:15:08Z

Ooops, I think I messed up @kentcdodds. I think the commit was supposed to start with feat:, not feature: 😬 and now I think it won't trigger a release.

What am I supposed to do now? Something like what you did here?

You see why I still need you around? 😄

kentcdodds · 2018-05-17T22:30:18Z

Haha, no worries. Yep, that's exactly what the manual_releases.md file is for 👍

There was an issue with a minor release, so this manual-releases.md change is to release a new minor version. Reference: #12

gnapse · 2018-05-17T22:42:43Z

🎉 This PR is included in version 1.2.0 🎉

The release is available on:

npm package (@latest dist-tag)
GitHub release

Your semantic-release bot 📦🚀

sigfriedCub1990 · 2020-01-21T14:13:40Z

This is going to be soooo cool!

In the future maybe we could consider toHaveOnlyStyles, or maybe we could call this method toHaveStylesSubset or something.

Is this feature implemented? If it isn't I would love to take a look at @gnapse job and try to figure out what can be done in order to solve the problem. By the way, huge thanks to you @kentcdodds for inspiring other people to contribute and learn doing OSS :)

gnapse · 2020-01-22T14:27:13Z

In the future maybe we could consider toHaveOnlyStyles, or maybe we could call this method toHaveStylesSubset or something.

Not sure what's the logic there. The fact that it asserts that the element has some styles does not imply that those have to be all the styles it's got. It's only that those are the style rules you want to assert. The same happens with .toHaveClass. It asserts that the element has a given css class, regardless of it possibly having other classes irrelevant to the test.

Unless I'm misunderstanding?

sigfriedCub1990 · 2020-01-22T20:51:44Z

Hi @gnapse 👋,

Thanks for the response, if that's the case, yes, I think that the statement is a bit redundant. Actually I realized that the thing I was trying to test wasn't working as I expected, long story short: I was having issues with the fireEvent.focus, thankfully the docs are really good and I also found a comment you did in another issue.
So, part misunderstanding by my side both for how to test and library usage.

Have a nice day.

feature: toHaveStyle custom matcher

2dc785e

gnapse added the enhancement New feature or request label May 17, 2018

Fix test coverage

2c06821

kentcdodds reviewed May 17, 2018

View reviewed changes

gnapse added 2 commits May 17, 2018 10:33

Use more robust css parser library

81d6605

Handle css parsing errors gracefully

12994eb

Improve how printed out styles look like in failing tests messages

907642e

kentcdodds reviewed May 17, 2018

View reviewed changes

gnapse added 2 commits May 17, 2018 14:28

Add documentation to the README

d4336b7

Use redent for indent

60ae40d

kentcdodds reviewed May 17, 2018

View reviewed changes

gnapse merged commit 6b575db into master May 17, 2018

gnapse deleted the pr/to-have-style branch May 17, 2018 22:05

gnapse added a commit that referenced this pull request May 17, 2018

feat(release): manually release a minor version

6c50a1b

There was an issue with a minor release, so this manual-releases.md change is to release a new minor version. Reference: #12

feature: toHaveStyle custom matcher #12

feature: toHaveStyle custom matcher #12

Uh oh!

Conversation

gnapse commented May 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kentcdodds May 17, 2018

Choose a reason for hiding this comment

Uh oh!

gnapse May 17, 2018

Choose a reason for hiding this comment

Uh oh!

codecov-io commented May 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

kentcdodds left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kentcdodds May 17, 2018

Choose a reason for hiding this comment

Uh oh!

gnapse May 17, 2018

Choose a reason for hiding this comment

Uh oh!

gnapse May 17, 2018

Choose a reason for hiding this comment

Uh oh!

kentcdodds May 17, 2018

Choose a reason for hiding this comment

Uh oh!

kentcdodds left a comment

Choose a reason for hiding this comment

Uh oh!

kentcdodds commented May 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gnapse commented May 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gnapse commented May 17, 2018

Uh oh!

kentcdodds commented May 17, 2018

Uh oh!

gnapse commented May 17, 2018

Uh oh!

sigfriedCub1990 commented Jan 21, 2020

Uh oh!

gnapse commented Jan 22, 2020

Uh oh!

sigfriedCub1990 commented Jan 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

gnapse commented May 17, 2018 •

edited

Loading

codecov-io commented May 17, 2018 •

edited

Loading

kentcdodds commented May 17, 2018 •

edited

Loading

gnapse commented May 17, 2018 •

edited

Loading

sigfriedCub1990 commented Jan 22, 2020 •

edited

Loading