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 jest-emotion #495

Merged
merged 11 commits into from
Dec 21, 2017
Merged

Add jest-emotion #495

merged 11 commits into from
Dec 21, 2017

Conversation

emmatown
Copy link
Member

@emmatown emmatown commented Dec 19, 2017

What:

Add jest-emotion which is just like jest-glamor-react except it's only for emotion and the other differences described below.

Why:

  • We might want to add an option that changes the class name prefix from css to something else and this package will be able to support it.
  • We can add more utilities like this to the package.
  • jest-emotion-react uses different emotion internals so it works without a DOM.
  • We can deviate from the current StyleSheet implementation if we want to

How:

Use most of the implementation from jest-glamor-react except get the styles from the inserted cache so it works without a DOM and fix the ordering of media queries so they don't show up as being inserted after a rule even if the media query was actually inserted before the rule.

Checklist:

  • Documentation
  • Tests (it's tested in nearly every single test for emotion)
  • Code complete

I named it jest-emotion-react since @tkh44 has already published a module with that name but maybe it should just be jest-emotion if we add other utilities that aren't react specific? It's called jest-emotion now.

@codecov
Copy link

codecov bot commented Dec 19, 2017

Codecov Report

Merging #495 into instances will decrease coverage by 0.12%.
The diff coverage is 93.1%.

Impacted Files Coverage Δ
packages/jest-emotion/src/replace-class-names.js 100% <100%> (ø)
test/testSetup.js 100% <100%> (ø) ⬆️
packages/jest-emotion/src/index.js 91.83% <91.83%> (ø)
packages/create-emotion-styled/src/index.js 100% <0%> (ø) ⬆️
packages/emotion-theming/src/theme-provider.js 100% <0%> (ø) ⬆️
packages/emotion-theming/src/with-theme.js 100% <0%> (ø) ⬆️
packages/create-emotion/test/emotion-instance.js 100% <0%> (ø) ⬆️
packages/emotion-theming/src/create-broadcast.js 100% <0%> (ø) ⬆️
packages/emotion-theming/src/utils.js 100% <0%> (ø) ⬆️
packages/emotion/src/index.js 100% <0%> (ø) ⬆️
... and 3 more

@greggb
Copy link
Member

greggb commented Dec 19, 2017

Awesome, fixing peer-dep warning would be reason enough.

jest-emotion

👍

@emmatown emmatown changed the title Add jest-emotion-react Add jest-emotion Dec 21, 2017
@emmatown
Copy link
Member Author

emmatown commented Dec 21, 2017

I'm gonna merge this into instances because I want to work on something that depends on this.

@emmatown emmatown merged commit 51d3ba0 into instances Dec 21, 2017
@emmatown emmatown deleted the jest-emotion-react branch December 21, 2017 08:24
emmatown added a commit that referenced this pull request Dec 23, 2017
* Start

* Fix stuff

* Change .flowconfig

* I wish it was this simple

* Add more flow types and add preact to external

* Remove fontFace and useStylisPlugin

* Add SSR streaming API and stuff (#448)

* Try implementing streaming

* More ideas that I didn't test

* Add deps and more stuff to extractCritical

* More stuff

* I'm still totally guessing

* Fixes, update react and start tests for streaming ssr

* It's a start

* More stuff

* Another thing I haven't tested

* Simplify extractCritical

* Lots of stuff

* Increase bundlesize

* Change hydration and document new APIs

* Remove check for case that cannot happen

* Remove names cache

* Fix some tests

* Fix more tests

* Fix streaming tests

* Add create-emotion-server package

* So close

* I don't know how it worked before

* Increase bundlesize

* Fix dist tests

Closes #341

* Add prefix option and fix instance tests

Closes #400

* Fix nonce option

* More flow types

* Start flow types for react-test-renderer

* Fix type

* Flow types and guessing relative paths

* Add flow to Travis

* Add more stuff to create-emotion README

* Update create-emotion README.md

* Change some stuff with flow

* Fix stuff in babel-plugin-emotion

* More changes to create-emotion's README

* Preact doesn't require contextTypes

* Add README to create-emotion-styled

* Increase bundlesize

* Add create-emotion-styled to preact-emotion's deps

* Basic flow types for create-emotion-styled

* Decrease size

* Add @flow comment to more tests

* Change relative import stuff

* Flow in babel-plugin-emotion

* Add @flow to babel plugin tests

* Fix stuff

* Increase bundlesize

* Type create-emotion-styled 🎉

* stuff

* Remove fontFace docs

* Remove more mentions of fontFace

* Fix relative instance paths and add tests

* Fix tests

* Move stuff into utils file in create-emotion-styled

* Add @flow comment to create-emotion-styled utils

* Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration

Closes #470

* Revert "Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration"

This reverts commit ed185da.

* Increase bundlesize

* Add create-emotion-server README.md

* Fix typo, add more stuff to create-emotion README and start instances doc

* Document the new options to babel-plugin-emotion

* Add link to babel-plugin-emotion options in instances doc

* Fix using filepath when it doesn't exist

* Support nonces in new SSR methods

* Update snapshots

* stuff

* Add jest-serializer-html to SSR tests

* Update flow and pin version in .flowconfig

* Fix example in create-emotion README

* Use undefined instead of null

* Flow type emotion-theming

* Fix error

* Use a single rollup build

* Change create-emotion-styled API

* Fix a thing

* Only use global as the context

* Remove references to rollup:umd npm script

* Add jest-emotion (#495)

* Start of jest-emotion-react based on jest-glamor-react

* Update snapshots

* Use inserted cache instead of StyleSheet to get styles so it works with jsdom

* Throw better error when css.parse throws

* Add test with media query before other rule

I've already fixed this but I want to commit the test without the fix so I know it does actually fail without the fix

* Fix stuff and other stuff

* Replace all css- classes like kentcdodds/jest-glamor-react#28

* More stuff

* Rename to jest-emotion, make createSerializer a named export, add getStyles so people can build other tools on it

* Update jest configs

* Update snapshot

* Fix withComponent carrying styles from flattened components

* Add key and container options to create-emotion (#499)

* Start key and container options

* Fix stuff

* Increase bundlesize

* Add another test

* Add another test

* Update README.md

* Update CHANGELOG.md

* Update sheet.dom tests

* Update snapshots

* Fix flow error
emmatown added a commit that referenced this pull request Jan 4, 2018
* Start gatsby site

* Move stuff

* stuff

* Try to make the site work

* Try to fix site

* It actually works now

* Docs

* Update docs and add docs/ path

* Fix path

* Change header background color

* Change Error background color

* Use frontmatter for title

* Move playground into a component

* More stuff

* Commit for netlify to deploy

* Syntax highlighting for css

* Fix typo

* Use gatsby-plugin-emotion

* Update .gitignore

* Remove stuff and add rebass-emotion

* Update site

* Add unoptimized version of code as a comment for users who are learning.

* Fix a thing

* Fix scrolling in code

* Use babel-standalone from unpkg

* Add gatsby-plugin-netlify

* Clean up markup styles for docs pages.
Enable code examples on docs pages.

* Update doc layout to have sidebar. Not sure how to pull in pages from graphql.

* Use GraphQL to get code examples

* Rename markdownRemark in GraphQL instead of in JS

* Add .nvmrc for netlify

* Fix for code examples

* Update sidebar

* Update docs

* Move sidebar to the layout so the data for the sidebar isn't in the query of each doc page

* Linting

* Linting

* Fix a typo

* Update styles to start implementing @norbertdragan's designs.

#368

* Update styles

* Update links on index page

* Modified typography, layout and button styles (#382)

* Modified typography, layout and button styles

* Ran npm lint

* Run yarn lint

* Format

* Formatting

* Add Edit this page link to docs pages

* Add hover styles to the object button

* Update header and fix react unknown prop warnings

* Add animation to gradient in header

* Move docs

* stuff

* Change size of background gradient on home

* Update yarn.lock

* Update deps

* Update stuff

* Change netlify config

* Change netlify config

* Move docs back to root and sync from master

* Start

* Fix stuff

* Change .flowconfig

* I wish it was this simple

* Add more flow types and add preact to external

* Remove fontFace and useStylisPlugin

* Add SSR streaming API and stuff (#448)

* Try implementing streaming

* More ideas that I didn't test

* Add deps and more stuff to extractCritical

* More stuff

* I'm still totally guessing

* Fixes, update react and start tests for streaming ssr

* It's a start

* More stuff

* Another thing I haven't tested

* Simplify extractCritical

* Lots of stuff

* Increase bundlesize

* Change hydration and document new APIs

* Remove check for case that cannot happen

* Remove names cache

* Fix some tests

* Fix more tests

* Fix streaming tests

* Add create-emotion-server package

* So close

* I don't know how it worked before

* Increase bundlesize

* Fix dist tests

Closes #341

* Add prefix option and fix instance tests

Closes #400

* Fix nonce option

* More flow types

* Start flow types for react-test-renderer

* Fix type

* Flow types and guessing relative paths

* Add flow to Travis

* Add more stuff to create-emotion README

* Update create-emotion README.md

* Change some stuff with flow

* Fix stuff in babel-plugin-emotion

* More changes to create-emotion's README

* Preact doesn't require contextTypes

* Add README to create-emotion-styled

* Increase bundlesize

* Add create-emotion-styled to preact-emotion's deps

* Basic flow types for create-emotion-styled

* Decrease size

* Add @flow comment to more tests

* Change relative import stuff

* Flow in babel-plugin-emotion

* Add @flow to babel plugin tests

* Make doc sidebar responsive

* Add animation to sidebar toggle button

* Fix stuff

* Increase bundlesize

* Fix flow error and gatsby ssr

* Change stuff

* Type create-emotion-styled 🎉

* stuff

* Remove fontFace docs

* Remove more mentions of fontFace

* Fix relative instance paths and add tests

* Fix tests

* Move stuff into utils file in create-emotion-styled

* Add @flow comment to create-emotion-styled utils

* Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration

Closes #470

* Revert "Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration"

This reverts commit ed185da.

* Increase bundlesize

* Add create-emotion-server README.md

* Fix typo, add more stuff to create-emotion README and start instances doc

* Document the new options to babel-plugin-emotion

* Add link to babel-plugin-emotion options in instances doc

* Inline code examples that render with react-live

Use the language `jsx live` and call render with a React element and it'll render

* Fixes after merging instances into gatsby

* Change gatsby config

* Start improving styled docs

* Run prettier on markdown

* Add lodash and prop-types to deps of site

* Fix yarn.lock

* Hopefully fix stuff

* Update emotion-site README

* Update docs

* Make object styles page interactive

* Make with-props page interactive

* Change docs

* More stuff to docs

* Fix using filepath when it doesn't exist

* Update react

* Add react-helmet as a dep

* Add link headers back

* Change stuff

* Remove console.log

* Remove more console.*s

* More changes

* Remove name example

* Move babel standalone script tag

* Support nonces in new SSR methods

* Update snapshots

* Start sorting docs

* stuff

* Add jest-serializer-html to SSR tests

* Update flow and pin version in .flowconfig

* Fix example in create-emotion README

* Add keyframes to index.yaml

* Start headings in sidebar

* Use undefined instead of null

* Fix styles

* stuff

* typo

* Add preact-emotion and react-emotion READMEs

* Add emotion-server README

* Start stuff for packages pages

* Change font in code blocks

* Remove styled block

* More stuff for displaying package READMEs

* Flow type emotion-theming

* Fix error

* Use a single rollup build

* Change create-emotion-styled API

* Fix a thing

* Only use global as the context

* Remove references to rollup:umd npm script

* Show packages in docs/

* Add jest-emotion (#495)

* Start of jest-emotion-react based on jest-glamor-react

* Update snapshots

* Use inserted cache instead of StyleSheet to get styles so it works with jsdom

* Throw better error when css.parse throws

* Add test with media query before other rule

I've already fixed this but I want to commit the test without the fix so I know it does actually fail without the fix

* Fix stuff and other stuff

* Replace all css- classes like kentcdodds/jest-glamor-react#28

* More stuff

* Rename to jest-emotion, make createSerializer a named export, add getStyles so people can build other tools on it

* Update jest configs

* Update snapshot

* Add jest-emotion and create-emotion-server to docs.yaml

* Fix withComponent carrying styles from flattened components

* Use renderStylesToString in gatsby site

* Add key and container options to create-emotion (#499)

* Start key and container options

* Fix stuff

* Increase bundlesize

* Add another test

* Add another test

* Update README.md

* Update docs

* Change docs

* Change a bunch of stuff

* Fix key warning

* Stuff

* Fix react-dom being included twice in site and only import darken from polished

* Don't include @babel/types

* stuff

* Update yarn on netlify

* Update netlify.toml

* Run babel in a worker 🎉

* stuff

* Fix SSR

* Fix babel worker

* Stop animating left

* Fix repaints on scroll

* Fix layout thrashing

* Revert "Fix layout thrashing"

This reverts commit 7c866f7.

* Change styles and stuff

* Change docs and change blockquote styles
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.

None yet

2 participants