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

Fix enzyme serializer for conditional styles #2269

Merged
merged 13 commits into from
Mar 1, 2021
Merged

Fix enzyme serializer for conditional styles #2269

merged 13 commits into from
Mar 1, 2021

Conversation

mskelton
Copy link
Contributor

@mskelton mskelton commented Feb 25, 2021

What: The change in #2233 introduced a bug where conditional styles passed to the css prop would break the Enzyme snapshot serializer.

Why: To allow users who use Enzyme snapshots to use the Emotion snapshot serializer.

How: Return early if the style variable is falsy to prevent errors

Checklist: Yes

  • Documentation - N/A
  • Tests
  • Code complete
  • Changeset

Screenshot

Screen Shot 2021-02-25 at 9 24 09 AM

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 25, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit dfe1744:

Sandbox Source
Emotion Configuration

@mskelton mskelton marked this pull request as draft February 25, 2021 15:47
@mskelton mskelton marked this pull request as ready for review February 25, 2021 21:02
@changeset-bot
Copy link

changeset-bot bot commented Feb 26, 2021

🦋 Changeset detected

Latest commit: dfe1744

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@emotion/jest Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Andarist
Copy link
Member

@mskelton I've pushed out some changes to the implementation which simplify how css prop is handled by the Enzyme serializer and makes the thing actually more correct for a wider range of scenarios. The test case that I've added was not handled correctly before my changes: https://github.com/emotion-js/emotion/pull/2269/files#diff-06a0eb3ce19d24a37e94c9307f74556cf44e9aac4d841bfed1dd467e44ac62a8R159 . Please take a look and feel free to do a review of the approach that I've taken here.

@ajs139 If you could take a look at what I'm doing here I would highly appreciate it. One thing that I know this won't handle are mixed caches in a single tree - but this seems so far-fetched that I don't really want to handle this right now.

@@ -0,0 +1,19 @@
const tickledCssProps = new WeakMap()

export const getTickledClassName = cssProp => tickledCssProps.get(cssProp)
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
export const getTickledClassName = cssProp => tickledCssProps.get(cssProp)
export const getTickledClassName = cssProp => {
if(!tickledCssProps.has(cssProp)) {
throw new Error('Could not find cssProp, ensure enzyme snapshots are configured correctly - https://emotion.sh/docs/testing.');
}
return tickledCssProps.get(cssProp)
};

Copy link
Contributor

Choose a reason for hiding this comment

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

Just in case we detect a shallow component, but it wasn't "tickled".

Copy link
Member

Choose a reason for hiding this comment

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

Actually - we'd have to complicate this check because the css prop can "resolve" to a null (or other falsy values and:

const wm = new WeakMap()
wm.set(null, {}) // throws, that's why we return for `!cssProp` in `tickle`
wm.get(null) // ok, just returns undefined

So I would be in favor of keeping this as-is for simplicity. I don't see when the proposed error would actually throw and it might be friendlier to the user to actually print something, rather than preventing them to work for some kind of an edge case. This is not a crucial production path after all.

Copy link
Contributor

Choose a reason for hiding this comment

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

Sounds good, thanks for looking into it.

@mskelton
Copy link
Contributor Author

mskelton commented Mar 1, 2021

@Andarist Since I opened the PR, I can't approve it, but your updates look awesome and fix all the remaining bugs! Can't wait for this to be fully completed so I can finish updating my company's apps to Emotion 11. Great work!

@Andarist Andarist merged commit 66ccd43 into emotion-js:master Mar 1, 2021
@github-actions github-actions bot mentioned this pull request Mar 1, 2021
@mskelton mskelton deleted the enzyme-serializer-conditional-styles branch March 1, 2021 22:10
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.

3 participants