diff options
author | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:46:06 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:48:30 -0300 |
commit | 38acabfa6089ab8ac469c12b5f55022fb96935e5 (patch) | |
tree | 453dbf70000cc5e338b06201af1eaca8343f8f73 /@linaria/packages/interop/__tests__ | |
parent | f26125e039143b92dc0d84e7775f508ab0cdcaa8 (diff) | |
download | node-vendor-38acabfa6089ab8ac469c12b5f55022fb96935e5.tar.gz node-vendor-38acabfa6089ab8ac469c12b5f55022fb96935e5.tar.bz2 node-vendor-38acabfa6089ab8ac469c12b5f55022fb96935e5.zip |
Diffstat (limited to '@linaria/packages/interop/__tests__')
-rw-r--r-- | @linaria/packages/interop/__tests__/__snapshots__/index.test.js.snap | 73 | ||||
-rw-r--r-- | @linaria/packages/interop/__tests__/index.test.js | 117 |
2 files changed, 190 insertions, 0 deletions
diff --git a/@linaria/packages/interop/__tests__/__snapshots__/index.test.js.snap b/@linaria/packages/interop/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000..52a322f --- /dev/null +++ b/@linaria/packages/interop/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`styled-components css 1`] = ` +"import { css } from \\"styled-components\\"; +import Title from \\"./Title\\"; +export default css\` + & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} { + color: red; + } +\`;" +`; + +exports[`styled-components keeps linaria 1`] = ` +"import styled from \\"linaria/react\\"; +import Title from \\"./Title\\"; +export default styled.h1\` + & > \${Title} { + color: red; + } +\`;" +`; + +exports[`styled-components member expression as selector 1`] = ` +"import styled from \\"styled-components\\"; +import Title from \\"./Title\\"; +export default styled.h1\` + & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title.Small)} { + color: red; + } +\`;" +`; + +exports[`styled-components styled(Cmp) 1`] = ` +"import styled from \\"styled-components\\"; +import Cmp from \\"./Cmp\\"; +import Title from \\"./Title\\"; +export default styled(Cmp)\` + & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} { + color: red; + } +\`;" +`; + +exports[`styled-components styled(Cmp).attrs({}) 1`] = ` +"import styled from \\"styled-components\\"; +import Cmp from \\"./Cmp\\"; +import Title from \\"./Title\\"; +export default styled(Cmp).attrs(() => ({}))\` + & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} { + color: red; + } +\`;" +`; + +exports[`styled-components styled.h1 1`] = ` +"import styled from \\"styled-components\\"; +import Title from \\"./Title\\"; +export default styled.h1\` + & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} { + color: red; + } +\`;" +`; + +exports[`styled-components styled.h1.attrs({}) 1`] = ` +"import styled from \\"styled-components\\"; +import Title from \\"./Title\\"; +export default styled.h1.attrs(() => ({}))\` + & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} { + color: red; + } +\`;" +`; diff --git a/@linaria/packages/interop/__tests__/index.test.js b/@linaria/packages/interop/__tests__/index.test.js new file mode 100644 index 0000000..d6e6d86 --- /dev/null +++ b/@linaria/packages/interop/__tests__/index.test.js @@ -0,0 +1,117 @@ +const babel = require('@babel/core'); +const dedent = require('dedent'); +const plugin = require('../'); + +const getCode = (src) => { + const { code } = babel.transform(dedent(src), { plugins: [plugin] }); + return code; +}; + +describe('styled-components', function () { + it('keeps linaria', () => { + const code = getCode(` + import styled from "linaria/react"; + import Title from "./Title"; + + export default styled.h1\` + & > ${'${Title}'} { + color: red; + } + \`; + `); + + expect(code).toMatchSnapshot(); + }); + + it('css', () => { + const code = getCode(` + import { css } from "styled-components"; + import Title from "./Title"; + + export default css\` + & > ${'${Title}'} { + color: red; + } + \`; + `); + + expect(code).toMatchSnapshot(); + }); + + it('styled.h1', () => { + const code = getCode(` + import styled from "styled-components"; + import Title from "./Title"; + + export default styled.h1\` + & > ${'${Title}'} { + color: red; + } + \`; + `); + + expect(code).toMatchSnapshot(); + }); + + it('member expression as selector', () => { + const code = getCode(` + import styled from "styled-components"; + import Title from "./Title"; + + export default styled.h1\` + & > ${'${Title.Small}'} { + color: red; + } + \`; + `); + + expect(code).toMatchSnapshot(); + }); + + it('styled(Cmp)', () => { + const code = getCode(` + import styled from "styled-components"; + import Cmp from "./Cmp"; + import Title from "./Title"; + + export default styled(Cmp)\` + & > ${'${Title}'} { + color: red; + } + \`; + `); + + expect(code).toMatchSnapshot(); + }); + + it('styled(Cmp).attrs({})', () => { + const code = getCode(` + import styled from "styled-components"; + import Cmp from "./Cmp"; + import Title from "./Title"; + + export default styled(Cmp).attrs(() => ({}))\` + & > ${'${Title}'} { + color: red; + } + \`; + `); + + expect(code).toMatchSnapshot(); + }); + + it('styled.h1.attrs({})', () => { + const code = getCode(` + import styled from "styled-components"; + import Title from "./Title"; + + export default styled.h1.attrs(() => ({}))\` + & > ${'${Title}'} { + color: red; + } + \`; + `); + + expect(code).toMatchSnapshot(); + }); +}); |