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.

Sign up for GitHub

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

Jump to bottom

test: upgrade ava #807

Merged
merged 2 commits into from Aug 15, 2022
Merged

test: upgrade ava #807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8044641
test: upgrade ava
huozhi Aug 13, 2022
d12b06d
Merge branch 'main' into update-ava
ijjk Aug 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

Binary file modified test/snapshots/attribute.js.snap
View file
Open in desktop
Binary file not shown.
270 changes: 135 additions & 135 deletions test/snapshots/external.js.md
View file
Open in desktop
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
Open in desktop
Binary file not shown.