Skip to content

Commit 41443ab

Browse files
huozhiijjk
huozhi
and
ijjk
authored
test: upgrade ava (#807)
Co-authored-by: JJ Kasper <[email protected]>
1 parent 3c2a77b commit 41443ab

File tree

15 files changed

+1068
-1568
lines changed

15 files changed

+1068
-1568
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"@babel/runtime": "7.12.5",
7979
"@babel/types": "7.15.0",
8080
"@vercel/ncc": "0.33.1",
81-
"ava": "1.2.1",
81+
"ava": "4.3.1",
8282
"babel-plugin-macros": "2.8.0",
8383
"convert-source-map": "1.7.0",
8484
"eslint": "7.32.0",

‎test/.babelrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"plugins": [
44
"@babel/plugin-proposal-object-rest-spread",
55
"@babel/plugin-transform-runtime"
6-
]
6+
],
7+
"sourceMaps": false
78
}

‎test/snapshots/attribute.js.md‎

Lines changed: 83 additions & 83 deletions
Large diffs are not rendered by default.

‎test/snapshots/attribute.js.snap‎

37 Bytes
Binary file not shown.

‎test/snapshots/external.js.md‎

Lines changed: 135 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -2,169 +2,79 @@
22

33
The actual snapshot is saved in `external.js.snap`.
44

5-
Generated by [AVA](https://ava.li).
5+
Generated by [AVA](https://avajs.dev).
66

7-
## (optimized) transpiles external stylesheets
7+
## transpiles external stylesheets
88

99
> Snapshot 1
1010
1111
`import _JSXStyle from "styled-jsx/style";␊
1212
import colors, { size } from './constants';␊
1313
const color = 'red';␊
14-
const bar = ["div.jsx-2141779268{font-size:3em;}"];␊
14+
const bar = new String("div.jsx-2141779268{font-size:3em;}");␊
1515
bar.__hash = "2141779268";␊
16-
const baz = ["div{font-size:3em;}"];␊
16+
const baz = new String("div{font-size:3em;}");␊
1717
baz.__hash = "2141779268";␊
18-
const a = [`div{font-size:${size}em;}`];␊
18+
const a = new String(\`div{font-size:${size}em;}\`);␊
1919
a.__hash = "262929833";␊
2020
export const uh = bar;␊
21-
export const foo = [`div.jsx-2433716433{color:${color};}`];␊
21+
export const foo = new String(\`div.jsx-2433716433{color:${color};}\`);␊
2222
foo.__hash = "2433716433";␊
2323
({␊
24-
styles: <_JSXStyle id={"1329679275"}>{[`div.jsx-1329679275{color:${colors.green.light};}`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
24+
styles: <_JSXStyle id={"1329679275"}>{\`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,␊
2525
className: "jsx-1329679275"␊
2626
});␊
2727
const b = {␊
28-
styles: <_JSXStyle id={"1329679275"}>{[`div.jsx-1329679275{color:${colors.green.light};}`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
28+
styles: <_JSXStyle id={"1329679275"}>{\`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,␊
2929
className: "jsx-1329679275"␊
3030
};␊
3131
␊
3232
const dynamic = colors => {␊
3333
const b = {␊
34-
styles: <_JSXStyle id={"3325296745"} dynamic={[colors.green.light]}>{[`div.__jsx-style-dynamic-selector{color:${colors.green.light};}`, "a.__jsx-style-dynamic-selector{color:red;}"]}</_JSXStyle>,␊
34+
styles: <_JSXStyle id={"3325296745"} dynamic={[colors.green.light]}>{\`div.__jsx-style-dynamic-selector{color:${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}\`}</_JSXStyle>,␊
3535
className: _JSXStyle.dynamic([["3325296745", [colors.green.light]]])␊
3636
};␊
3737
};␊
3838
␊
3939
export default {␊
40-
styles: <_JSXStyle id={"3290112549"}>{["div.jsx-3290112549{font-size:3em;}", `p.jsx-3290112549{color:${color};}`]}</_JSXStyle>,␊
40+
styles: <_JSXStyle id={"3290112549"}>{\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:${color};}\`}</_JSXStyle>,␊
4141
className: "jsx-3290112549"␊
4242
};`
4343

44-
## (optimized) transpiles external stylesheets (CommonJS modules)
45-
46-
> Snapshot 1
47-
48-
`const _defaultExport = ["div.jsx-2141779268{font-size:3em;}"];␊
49-
_defaultExport.__hash = "2141779268";␊
50-
module.exports = _defaultExport;`
51-
52-
## Make sure that it works with the new automatic transform
53-
54-
> Snapshot 1
55-
56-
`import { jsx as _jsx } from "react/jsx-runtime";␊
57-
import _JSXStyle from "styled-jsx/style";␊
58-
const A = {␊
59-
styles: /*#__PURE__*/_jsx(_JSXStyle, {␊
60-
id: "2723508961",␊
61-
children: "div.jsx-2723508961{color:green;}"␊
62-
}),␊
63-
className: "jsx-2723508961"␊
64-
};␊
65-
export default function IndexPage() {␊
66-
return JSON.stringify(A);␊
67-
}`
68-
69-
## Makes sure that style nodes are not re-used
70-
71-
> Snapshot 1
72-
73-
`"use strict";␊
74-
␊
75-
var _style = _interopRequireDefault(require("styled-jsx/style"));␊
76-
␊
77-
var _App = _interopRequireDefault(require("./App.styles"));␊
78-
␊
79-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
80-
␊
81-
function Test() {␊
82-
return <div>␊
83-
<_style.default id={_App.default.__hash}>{_App.default}</_style.default>␊
84-
</div>;␊
85-
}`
86-
87-
## does not transpile non-styled-jsx tagged teplate literals
88-
89-
> Snapshot 1
90-
91-
`import css from 'hell';␊
92-
const color = 'red';␊
93-
const bar = css`␊
94-
div {␊
95-
font-size: 3em;␊
96-
}␊
97-
`;␊
98-
export const uh = bar;␊
99-
export const foo = css`␊
100-
div {␊
101-
color: ${color};␊
102-
}␊
103-
`;␊
104-
export default css`␊
105-
div {␊
106-
font-size: 3em;␊
107-
}␊
108-
p {␊
109-
color: ${color};␊
110-
}␊
111-
`;␊
112-
const Title = styled.h1`␊
113-
color: red;␊
114-
font-size: 50px;␊
115-
`;␊
116-
const AnotherTitle = Title.extend`␊
117-
color: blue;␊
118-
`;␊
119-
export const Component = () => <AnotherTitle>My page</AnotherTitle>;`
120-
121-
## injects JSXStyle for nested scope
122-
123-
> Snapshot 1
124-
125-
`import _JSXStyle from "styled-jsx/style";␊
126-
␊
127-
function test() {␊
128-
({␊
129-
styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
130-
className: "jsx-2886504620"␊
131-
});␊
132-
}`
133-
134-
## transpiles external stylesheets
44+
## (optimized) transpiles external stylesheets
13545

13646
> Snapshot 1
13747
13848
`import _JSXStyle from "styled-jsx/style";␊
13949
import colors, { size } from './constants';␊
14050
const color = 'red';␊
141-
const bar = new String("div.jsx-2141779268{font-size:3em;}");␊
51+
const bar = ["div.jsx-2141779268{font-size:3em;}"];␊
14252
bar.__hash = "2141779268";␊
143-
const baz = new String("div{font-size:3em;}");␊
53+
const baz = ["div{font-size:3em;}"];␊
14454
baz.__hash = "2141779268";␊
145-
const a = new String(`div{font-size:${size}em;}`);␊
55+
const a = [\`div{font-size:${size}em;}\`];␊
14656
a.__hash = "262929833";␊
14757
export const uh = bar;␊
148-
export const foo = new String(`div.jsx-2433716433{color:${color};}`);␊
58+
export const foo = [\`div.jsx-2433716433{color:${color};}\`];␊
14959
foo.__hash = "2433716433";␊
15060
({␊
151-
styles: <_JSXStyle id={"1329679275"}>{`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}`}</_JSXStyle>,␊
61+
styles: <_JSXStyle id={"1329679275"}>{[\`div.jsx-1329679275{color:${colors.green.light};}\`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
15262
className: "jsx-1329679275"␊
15363
});␊
15464
const b = {␊
155-
styles: <_JSXStyle id={"1329679275"}>{`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}`}</_JSXStyle>,␊
65+
styles: <_JSXStyle id={"1329679275"}>{[\`div.jsx-1329679275{color:${colors.green.light};}\`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
15666
className: "jsx-1329679275"␊
15767
};␊
15868
␊
15969
const dynamic = colors => {␊
16070
const b = {␊
161-
styles: <_JSXStyle id={"3325296745"} dynamic={[colors.green.light]}>{`div.__jsx-style-dynamic-selector{color:${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}`}</_JSXStyle>,␊
71+
styles: <_JSXStyle id={"3325296745"} dynamic={[colors.green.light]}>{[\`div.__jsx-style-dynamic-selector{color:${colors.green.light};}\`, "a.__jsx-style-dynamic-selector{color:red;}"]}</_JSXStyle>,␊
16272
className: _JSXStyle.dynamic([["3325296745", [colors.green.light]]])␊
16373
};␊
16474
};␊
16575
␊
16676
export default {␊
167-
styles: <_JSXStyle id={"3290112549"}>{`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:${color};}`}</_JSXStyle>,␊
77+
styles: <_JSXStyle id={"3290112549"}>{["div.jsx-3290112549{font-size:3em;}", \`p.jsx-3290112549{color:${color};}\`]}</_JSXStyle>,␊
16878
className: "jsx-3290112549"␊
16979
};`
17080

@@ -177,21 +87,47 @@ Generated by [AVA](https://ava.li).
17787
_defaultExport.__hash = "2141779268";␊
17888
module.exports = _defaultExport;`
17989

180-
## use external stylesheet and dynamic element
90+
## (optimized) transpiles external stylesheets (CommonJS modules)
18191

18292
> Snapshot 1
18393
184-
`import _JSXStyle from "styled-jsx/style";␊
185-
import styles from './styles2';␊
186-
export default (({␊
187-
level = 1␊
188-
}) => {␊
189-
const Element = `h${level}`;␊
190-
return <Element className={`jsx-${styles.__hash}` + " " + "root"}>␊
191-
<p className={`jsx-${styles.__hash}`}>dynamic element</p>␊
192-
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
193-
</Element>;␊
194-
});`
94+
`const _defaultExport = ["div.jsx-2141779268{font-size:3em;}"];␊
95+
_defaultExport.__hash = "2141779268";␊
96+
module.exports = _defaultExport;`
97+
98+
## does not transpile non-styled-jsx tagged teplate literals
99+
100+
> Snapshot 1
101+
102+
`import css from 'hell';␊
103+
const color = 'red';␊
104+
const bar = css\`␊
105+
div {␊
106+
font-size: 3em;␊
107+
}␊
108+
\`;␊
109+
export const uh = bar;␊
110+
export const foo = css\`␊
111+
div {␊
112+
color: ${color};␊
113+
}␊
114+
\`;␊
115+
export default css\`␊
116+
div {␊
117+
font-size: 3em;␊
118+
}␊
119+
p {␊
120+
color: ${color};␊
121+
}␊
122+
\`;␊
123+
const Title = styled.h1\`␊
124+
color: red;␊
125+
font-size: 50px;␊
126+
\`;␊
127+
const AnotherTitle = Title.extend\`␊
128+
color: blue;␊
129+
\`;␊
130+
export const Component = () => <AnotherTitle>My page</AnotherTitle>;`
195131

196132
## use external stylesheets
197133

@@ -203,23 +139,34 @@ Generated by [AVA](https://ava.li).
203139
const styles2 = require('./styles2');␊
204140
␊
205141
import { foo as styles3 } from './styles';␊
206-
export default (() => <div className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}`}>␊
207-
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}` + " " + "foo"}>test</p>␊
208-
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}`}>woot</p>␊
142+
export default (() => <div className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\`}>␊
143+
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\` + " " + "foo"}>test</p>␊
144+
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\`}>woot</p>␊
209145
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>␊
210146
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>␊
211-
<div className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}`}>woot</div>␊
147+
<div className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\`}>woot</div>␊
212148
<_JSXStyle id={"1646697228"}>{"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}"}</_JSXStyle>␊
213149
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
214150
</div>);␊
215-
export const Test = () => <div className={"jsx-1646697228 " + `jsx-${styles3.__hash}`}>␊
216-
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash}` + " " + "foo"}>test</p>␊
217-
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash}`}>woot</p>␊
151+
export const Test = () => <div className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\`}>␊
152+
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\` + " " + "foo"}>test</p>␊
153+
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\`}>woot</p>␊
218154
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>␊
219-
<div className={"jsx-1646697228 " + `jsx-${styles3.__hash}`}>woot</div>␊
155+
<div className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\`}>woot</div>␊
220156
<_JSXStyle id={"1646697228"}>{"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}"}</_JSXStyle>␊
221157
</div>;`
222158

159+
## use external stylesheets (multi-line)
160+
161+
> Snapshot 1
162+
163+
`import _JSXStyle from "styled-jsx/style";␊
164+
import styles from './styles';␊
165+
export default (() => <div className={\`jsx-${styles.__hash}\`}>␊
166+
<p className={\`jsx-${styles.__hash}\`}>test</p>␊
167+
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
168+
</div>);`
169+
223170
## use external stylesheets (global only)
224171

225172
> Snapshot 1
@@ -238,13 +185,66 @@ Generated by [AVA](https://ava.li).
238185
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
239186
</div>);`
240187

241-
## use external stylesheets (multi-line)
188+
## injects JSXStyle for nested scope
242189

243190
> Snapshot 1
244191
245192
`import _JSXStyle from "styled-jsx/style";␊
246-
import styles from './styles';␊
247-
export default (() => <div className={`jsx-${styles.__hash}`}>␊
248-
<p className={`jsx-${styles.__hash}`}>test</p>␊
249-
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
250-
</div>);`
193+
␊
194+
function test() {␊
195+
({␊
196+
styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
197+
className: "jsx-2886504620"␊
198+
});␊
199+
}`
200+
201+
## use external stylesheet and dynamic element
202+
203+
> Snapshot 1
204+
205+
`import _JSXStyle from "styled-jsx/style";␊
206+
import styles from './styles2';␊
207+
export default (({␊
208+
level = 1␊
209+
}) => {␊
210+
const Element = \`h${level}\`;␊
211+
return <Element className={\`jsx-${styles.__hash}\` + " " + "root"}>␊
212+
<p className={\`jsx-${styles.__hash}\`}>dynamic element</p>␊
213+
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
214+
</Element>;␊
215+
});`
216+
217+
## Makes sure that style nodes are not re-used
218+
219+
> Snapshot 1
220+
221+
`"use strict";␊
222+
␊
223+
var _style = _interopRequireDefault(require("styled-jsx/style"));␊
224+
␊
225+
var _App = _interopRequireDefault(require("./App.styles"));␊
226+
␊
227+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
228+
␊
229+
function Test() {␊
230+
return <div>␊
231+
<_style.default id={_App.default.__hash}>{_App.default}</_style.default>␊
232+
</div>;␊
233+
}`
234+
235+
## Make sure that it works with the new automatic transform
236+
237+
> Snapshot 1
238+
239+
`import { jsx as _jsx } from "react/jsx-runtime";␊
240+
import _JSXStyle from "styled-jsx/style";␊
241+
const A = {␊
242+
styles: /*#__PURE__*/_jsx(_JSXStyle, {␊
243+
id: "2723508961",␊
244+
children: "div.jsx-2723508961{color:green;}"␊
245+
}),␊
246+
className: "jsx-2723508961"␊
247+
};␊
248+
export default function IndexPage() {␊
249+
return JSON.stringify(A);␊
250+
}`

‎test/snapshots/external.js.snap‎

-35 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)