Skip to content

Commit

Permalink
test: upgrade ava (#807)
Browse files Browse the repository at this point in the history 
Co-authored-by: JJ Kasper <jj@jjsweb.site>
  • Loading branch information
@huozhi @ijjk
huozhi and ijjk authored Aug 15, 2022
1 parent 3c2a77b commit 41443ab
Show file tree
Hide file tree
Showing 15 changed files with 1,068 additions and 1,568 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
"@babel/runtime": "7.12.5",
"@babel/types": "7.15.0",
"@vercel/ncc": "0.33.1",
"ava": "1.2.1",
"ava": "4.3.1",
"babel-plugin-macros": "2.8.0",
"convert-source-map": "1.7.0",
"eslint": "7.32.0",
Expand Down
3 changes: 2 additions & 1 deletion test/.babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
],
"sourceMaps": false
}
166 changes: 83 additions & 83 deletions test/snapshots/attribute.js.md
View file

Large diffs are not rendered by default.

Binary file modified test/snapshots/attribute.js.snap
View file
Binary file not shown.
270 changes: 135 additions & 135 deletions test/snapshots/external.js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,169 +2,79 @@

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

Generated by [AVA](https://ava.li).
Generated by [AVA](https://avajs.dev).

## (optimized) transpiles external stylesheets
## transpiles external stylesheets

> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import colors, { size } from './constants';␊
const color = 'red';␊
const bar = ["div.jsx-2141779268{font-size:3em;}"];␊
const bar = new String("div.jsx-2141779268{font-size:3em;}");␊
bar.__hash = "2141779268";␊
const baz = ["div{font-size:3em;}"];␊
const baz = new String("div{font-size:3em;}");␊
baz.__hash = "2141779268";␊
const a = [`div{font-size:${size}em;}`];␊
const a = new String(\`div{font-size:${size}em;}\`);␊
a.__hash = "262929833";␊
export const uh = bar;␊
export const foo = [`div.jsx-2433716433{color:${color};}`];␊
export const foo = new String(\`div.jsx-2433716433{color:${color};}\`);␊
foo.__hash = "2433716433";␊
({␊
styles: <_JSXStyle id={"1329679275"}>{[`div.jsx-1329679275{color:${colors.green.light};}`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
styles: <_JSXStyle id={"1329679275"}>{\`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,␊
className: "jsx-1329679275"␊
});␊
const b = {␊
styles: <_JSXStyle id={"1329679275"}>{[`div.jsx-1329679275{color:${colors.green.light};}`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
styles: <_JSXStyle id={"1329679275"}>{\`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}\`}</_JSXStyle>,␊
className: "jsx-1329679275"␊
};␊
␊
const dynamic = colors => {␊
const b = {␊
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>,␊
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>,␊
className: _JSXStyle.dynamic([["3325296745", [colors.green.light]]])␊
};␊
};␊
␊
export default {␊
styles: <_JSXStyle id={"3290112549"}>{["div.jsx-3290112549{font-size:3em;}", `p.jsx-3290112549{color:${color};}`]}</_JSXStyle>,␊
styles: <_JSXStyle id={"3290112549"}>{\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:${color};}\`}</_JSXStyle>,␊
className: "jsx-3290112549"␊
};`

## (optimized) transpiles external stylesheets (CommonJS modules)

> Snapshot 1
`const _defaultExport = ["div.jsx-2141779268{font-size:3em;}"];␊
_defaultExport.__hash = "2141779268";␊
module.exports = _defaultExport;`

## Make sure that it works with the new automatic transform

> Snapshot 1
`import { jsx as _jsx } from "react/jsx-runtime";␊
import _JSXStyle from "styled-jsx/style";␊
const A = {␊
styles: /*#__PURE__*/_jsx(_JSXStyle, {␊
id: "2723508961",␊
children: "div.jsx-2723508961{color:green;}"␊
}),␊
className: "jsx-2723508961"␊
};␊
export default function IndexPage() {␊
return JSON.stringify(A);␊
}`

## Makes sure that style nodes are not re-used

> Snapshot 1
`"use strict";␊
␊
var _style = _interopRequireDefault(require("styled-jsx/style"));␊
␊
var _App = _interopRequireDefault(require("./App.styles"));␊
␊
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
␊
function Test() {␊
return <div>␊
<_style.default id={_App.default.__hash}>{_App.default}</_style.default>␊
</div>;␊
}`

## does not transpile non-styled-jsx tagged teplate literals

> Snapshot 1
`import css from 'hell';␊
const color = 'red';␊
const bar = css`␊
div {␊
font-size: 3em;␊
}␊
`;␊
export const uh = bar;␊
export const foo = css`␊
div {␊
color: ${color};␊
}␊
`;␊
export default css`␊
div {␊
font-size: 3em;␊
}␊
p {␊
color: ${color};␊
}␊
`;␊
const Title = styled.h1`␊
color: red;␊
font-size: 50px;␊
`;␊
const AnotherTitle = Title.extend`␊
color: blue;␊
`;␊
export const Component = () => <AnotherTitle>My page</AnotherTitle>;`

## injects JSXStyle for nested scope

> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
␊
function test() {␊
({␊
styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
className: "jsx-2886504620"␊
});␊
}`

## transpiles external stylesheets
## (optimized) transpiles external stylesheets

> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import colors, { size } from './constants';␊
const color = 'red';␊
const bar = new String("div.jsx-2141779268{font-size:3em;}");␊
const bar = ["div.jsx-2141779268{font-size:3em;}"];␊
bar.__hash = "2141779268";␊
const baz = new String("div{font-size:3em;}");␊
const baz = ["div{font-size:3em;}"];␊
baz.__hash = "2141779268";␊
const a = new String(`div{font-size:${size}em;}`);␊
const a = [\`div{font-size:${size}em;}\`];␊
a.__hash = "262929833";␊
export const uh = bar;␊
export const foo = new String(`div.jsx-2433716433{color:${color};}`);␊
export const foo = [\`div.jsx-2433716433{color:${color};}\`];␊
foo.__hash = "2433716433";␊
({␊
styles: <_JSXStyle id={"1329679275"}>{`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}`}</_JSXStyle>,␊
styles: <_JSXStyle id={"1329679275"}>{[\`div.jsx-1329679275{color:${colors.green.light};}\`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
className: "jsx-1329679275"␊
});␊
const b = {␊
styles: <_JSXStyle id={"1329679275"}>{`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}`}</_JSXStyle>,␊
styles: <_JSXStyle id={"1329679275"}>{[\`div.jsx-1329679275{color:${colors.green.light};}\`, "a.jsx-1329679275{color:red;}"]}</_JSXStyle>,␊
className: "jsx-1329679275"␊
};␊
␊
const dynamic = colors => {␊
const b = {␊
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>,␊
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>,␊
className: _JSXStyle.dynamic([["3325296745", [colors.green.light]]])␊
};␊
};␊
␊
export default {␊
styles: <_JSXStyle id={"3290112549"}>{`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:${color};}`}</_JSXStyle>,␊
styles: <_JSXStyle id={"3290112549"}>{["div.jsx-3290112549{font-size:3em;}", \`p.jsx-3290112549{color:${color};}\`]}</_JSXStyle>,␊
className: "jsx-3290112549"␊
};`

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

## use external stylesheet and dynamic element
## (optimized) transpiles external stylesheets (CommonJS modules)

> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import styles from './styles2';␊
export default (({␊
level = 1␊
}) => {␊
const Element = `h${level}`;␊
return <Element className={`jsx-${styles.__hash}` + " " + "root"}>␊
<p className={`jsx-${styles.__hash}`}>dynamic element</p>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</Element>;␊
});`
`const _defaultExport = ["div.jsx-2141779268{font-size:3em;}"];␊
_defaultExport.__hash = "2141779268";␊
module.exports = _defaultExport;`

## does not transpile non-styled-jsx tagged teplate literals

> Snapshot 1
`import css from 'hell';␊
const color = 'red';␊
const bar = css\`␊
div {␊
font-size: 3em;␊
}␊
\`;␊
export const uh = bar;␊
export const foo = css\`␊
div {␊
color: ${color};␊
}␊
\`;␊
export default css\`␊
div {␊
font-size: 3em;␊
}␊
p {␊
color: ${color};␊
}␊
\`;␊
const Title = styled.h1\`␊
color: red;␊
font-size: 50px;␊
\`;␊
const AnotherTitle = Title.extend\`␊
color: blue;␊
\`;␊
export const Component = () => <AnotherTitle>My page</AnotherTitle>;`

## use external stylesheets

Expand All @@ -203,23 +139,34 @@ Generated by [AVA](https://ava.li).
const styles2 = require('./styles2');␊
␊
import { foo as styles3 } from './styles';␊
export default (() => <div className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}`}>␊
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}` + " " + "foo"}>test</p>␊
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}`}>woot</p>␊
export default (() => <div className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\`}>␊
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\` + " " + "foo"}>test</p>␊
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\`}>woot</p>␊
<_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>␊
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>␊
<div className={"jsx-1646697228 " + `jsx-${styles3.__hash} jsx-${styles.__hash}`}>woot</div>␊
<div className={"jsx-1646697228 " + \`jsx-${styles3.__hash} jsx-${styles.__hash}\`}>woot</div>␊
<_JSXStyle id={"1646697228"}>{"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}"}</_JSXStyle>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</div>);␊
export const Test = () => <div className={"jsx-1646697228 " + `jsx-${styles3.__hash}`}>␊
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash}` + " " + "foo"}>test</p>␊
<p className={"jsx-1646697228 " + `jsx-${styles3.__hash}`}>woot</p>␊
export const Test = () => <div className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\`}>␊
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\` + " " + "foo"}>test</p>␊
<p className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\`}>woot</p>␊
<_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>␊
<div className={"jsx-1646697228 " + `jsx-${styles3.__hash}`}>woot</div>␊
<div className={"jsx-1646697228 " + \`jsx-${styles3.__hash}\`}>woot</div>␊
<_JSXStyle id={"1646697228"}>{"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}"}</_JSXStyle>␊
</div>;`

## use external stylesheets (multi-line)

> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import styles from './styles';␊
export default (() => <div className={\`jsx-${styles.__hash}\`}>␊
<p className={\`jsx-${styles.__hash}\`}>test</p>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</div>);`

## use external stylesheets (global only)

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

## use external stylesheets (multi-line)
## injects JSXStyle for nested scope

> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import styles from './styles';␊
export default (() => <div className={`jsx-${styles.__hash}`}>␊
<p className={`jsx-${styles.__hash}`}>test</p>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</div>);`
␊
function test() {␊
({␊
styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
className: "jsx-2886504620"␊
});␊
}`

## use external stylesheet and dynamic element

> Snapshot 1
`import _JSXStyle from "styled-jsx/style";␊
import styles from './styles2';␊
export default (({␊
level = 1␊
}) => {␊
const Element = \`h${level}\`;␊
return <Element className={\`jsx-${styles.__hash}\` + " " + "root"}>␊
<p className={\`jsx-${styles.__hash}\`}>dynamic element</p>␊
<_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
</Element>;␊
});`

## Makes sure that style nodes are not re-used

> Snapshot 1
`"use strict";␊
␊
var _style = _interopRequireDefault(require("styled-jsx/style"));␊
␊
var _App = _interopRequireDefault(require("./App.styles"));␊
␊
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
␊
function Test() {␊
return <div>␊
<_style.default id={_App.default.__hash}>{_App.default}</_style.default>␊
</div>;␊
}`

## Make sure that it works with the new automatic transform

> Snapshot 1
`import { jsx as _jsx } from "react/jsx-runtime";␊
import _JSXStyle from "styled-jsx/style";␊
const A = {␊
styles: /*#__PURE__*/_jsx(_JSXStyle, {␊
id: "2723508961",␊
children: "div.jsx-2723508961{color:green;}"␊
}),␊
className: "jsx-2723508961"␊
};␊
export default function IndexPage() {␊
return JSON.stringify(A);␊
}`
Binary file modified test/snapshots/external.js.snap
View file
Binary file not shown.
Loading

0 comments on commit 41443ab

Please sign in to comment.