-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcompositor.json
95 lines (95 loc) · 7.07 KB
/
compositor.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
{
"name": "jaredpalmer/jest-jsxstyle",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "",
"branch": "",
"style": {
"name": "Brutalist",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/BasicHeader",
"article": "article/MarkdownArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"heading": {},
"typeScale": [
48,
32,
20,
18,
16,
14,
12
],
"layout": {
"maxWidth": 1024,
"fluid": true
},
"colors": {
"text": "#333",
"background": "#fff",
"primary": "#666",
"secondary": "#888",
"highlight": "#1f80ff",
"muted": "#f6f6f6",
"border": "#eee"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "https://github.com/jaredpalmer/jest-jsxstyle",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/jest-jsxstyle",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "jest-jsxstyle",
"subhead": "🃏 Jest utilities for JSXStyle",
"children": [
{
"component": "ui/TweetButton",
"text": "jest-jsxstyle: 🃏 Jest utilities for JSXStyle",
"url": ""
},
{
"component": "ui/GithubButton",
"user": "jaredpalmer",
"repo": "jest-jsxstyle"
}
],
"text": "v0.2.0"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n<p>Jest utilities for jsxstyle</p>\n<h2>The problem</h2>\n<p>If you use <a href=\"https://github.com/smyte/jsxstyle\"><code>jsxstyle</code></a> as your CSS-in-JS solution, and you use\n<a href=\"http://facebook.github.io/jest/docs/snapshot-testing.html\">snapshot testing</a> with <a href=\"http://facebook.github.io/jest/\">jest</a> then you probably have some test\nsnapshots that look like:</p>\n<pre><span class=\"hljs-tag\"><<span class=\"hljs-name\">h1</span>\n <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">"jsxstyle-0"</span>\n></span>\n Hello World\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">h1</span>></span></pre><p>And that's not super helpful from a styling perspective. Especially when there\nare changes to the class, you can see that it changed, but you have to look\nthrough the code to know <em>what</em> caused the class name to change.</p>\n<h2>This solution</h2>\n<p>This allows your snapshots to look more like:</p>\n<pre>._15clmrq {\n color:red;\n display:block;\n}\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">h1</span>\n <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">"_15clmrq"</span>\n></span>\n Hello World\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">h1</span>></span></pre><p>This is much more helpful because now you can see the CSS applied and over time\nit becomes even more helpful to see how that changes over time.</p>\n<h2>Installation</h2>\n<p>This module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's <code>devDependencies</code>:</p>\n<pre>npm install --<span class=\"hljs-built_in\">save</span>-<span class=\"hljs-built_in\">dev</span> jest-jsxstyle</pre><h2>Usage</h2>\n<p>At the top of your test file:</p>\n<pre><span class=\"hljs-keyword\">import</span> serializer <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'jest-jsxstyle'</span>\n\nexpect.addSnapshotSerializer(serializer)</pre><p>Or in your Jest serializer config:</p>\n<pre>{\n <span class=\"hljs-string\">"snapshotSerializers"</span>: [\n <span class=\"hljs-string\">"jest-jsxstyle"</span>\n ]\n}</pre><p>And here's how we'd test them with <code>react-test-renderer</code>:</p>\n<pre><span class=\"hljs-keyword\">import</span> React <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react'</span>\n<span class=\"hljs-keyword\">import</span> renderer <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react-test-renderer'</span>\n\ntest(<span class=\"hljs-string\">'react-test-renderer'</span>, () => {\n <span class=\"hljs-keyword\">const</span> tree = renderer\n .create(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Block</span> <span class=\"hljs-attr\">color</span>=<span class=\"hljs-string\">"orange"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">Block</span> <span class=\"hljs-attr\">margin</span>=<span class=\"hljs-string\">"4rem"</span>></span>\n Hello World, this is my first jsxstyle component!\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Block</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Block</span>></span></span>\n )\n .toJSON()\n\n expect(tree).toMatchSnapshot()\n})</pre><p>Works with enzyme too:</p>\n<pre><span class=\"hljs-keyword\">import</span> * <span class=\"hljs-keyword\">as</span> enzyme <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'enzyme'</span>\n<span class=\"hljs-keyword\">import</span> toJson <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'enzyme-to-json'</span>\n\ntest(<span class=\"hljs-string\">'enzyme'</span>, () => {\n <span class=\"hljs-keyword\">const</span> ui = (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Block</span> <span class=\"hljs-attr\">color</span>=<span class=\"hljs-string\">"orange"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">Block</span> <span class=\"hljs-attr\">margin</span>=<span class=\"hljs-string\">"4rem"</span>></span>\n Hello World, this is my first jsxstyle component!\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Block</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">Block</span>></span></span>\n )\n\n expect(toJson(enzyme.shallow(ui))).toMatchSnapshot(<span class=\"hljs-string\">`enzyme.shallow`</span>)\n expect(toJson(enzyme.mount(ui))).toMatchSnapshot(<span class=\"hljs-string\">`enzyme.mount`</span>)\n expect(toJson(enzyme.render(ui))).toMatchSnapshot(<span class=\"hljs-string\">`enzyme.render`</span>)\n})</pre><h1>Inspiration</h1>\n<ul>\n<li><a href=\"https://github.com/styled-components/jest-styled-components\"><code>jest-styled-components</code></a></li>\n<li><a href=\"https://github.com/kentcdodds/jest-glamor-react\"><code>jest-glamor-react</code></a></li>\n</ul>\n<h2>LICENSE</h2>\n<p>MIT</p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/jaredpalmer/jest-jsxstyle",
"text": "GitHub"
},
{
"href": "https://github.com/jaredpalmer",
"text": "jaredpalmer"
}
]
}
]
}