diff options
Diffstat (limited to '@linaria/packages/react/__tests__')
3 files changed, 434 insertions, 0 deletions
diff --git a/@linaria/packages/react/__tests__/__snapshots__/styled.test.js.snap b/@linaria/packages/react/__tests__/__snapshots__/styled.test.js.snap new file mode 100644 index 0000000..e4cd67b --- /dev/null +++ b/@linaria/packages/react/__tests__/__snapshots__/styled.test.js.snap @@ -0,0 +1,143 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`applies CSS variables in style prop 1`] = ` +<div + className="abcdefg" + size={24} + style={ + Object { + "--bar": "20px", + "--baz": "24px", + "--foo": "tomato", + } + } +> + This is a test +</div> +`; + +exports[`does not filter attributes for components 1`] = ` +<div> + voila +</div> +`; + +exports[`does not filter attributes for custom elements 1`] = ` +<my-element + className="abcdefg" + unknownAttribute="voila" +> + This is a test +</my-element> +`; + +exports[`filters unknown html attributes for HTML tag 1`] = ` +<div + className="abcdefg" +> + This is a test +</div> +`; + +exports[`forwards as prop when wrapping another styled component 1`] = ` +<a + className="hijklmn abcdefg" +> + This is a test +</a> +`; + +exports[`handles wrapping another styled component 1`] = ` +<div + className="hijklmn abcdefg" +> + This is a test +</div> +`; + +exports[`merges CSS variables with custom style prop 1`] = ` +<div + className="abcdefg" + style={ + Object { + "--foo": "tomato", + "bar": "baz", + } + } +> + This is a test +</div> +`; + +exports[`provides linaria component className for composition as last item in props.className 1`] = ` +<div + className="some-another-class abcdefg abcdefg--primary abcdefg--accessibility" +> + original classname used for composition +</div> +`; + +exports[`renders component with display name and class name 1`] = ` +<div + className="abcdefg" +> + This is a test +</div> +`; + +exports[`renders tag with display name and class name 1`] = ` +<h1 + className="abcdefg" +> + This is a test +</h1> +`; + +exports[`replaces custom component with as prop for primitive 1`] = ` +<a + className="abcdefg" + id="test" +> + This is a test +</a> +`; + +exports[`replaces primitive with as prop for custom component 1`] = ` +<div + className="abcdefg" + foo="bar" + id="test" + style={ + Object { + "fontSize": 12, + } + } +> + This is a test +</div> +`; + +exports[`replaces simple component with as prop 1`] = ` +<a + className="abcdefg" + id="test" +> + This is a test +</a> +`; + +exports[`supports extra class prop 1`] = ` +<div + className="primary abcdefg" +> + This is a test +</div> +`; + +exports[`supports extra className prop 1`] = ` +<div + className="primary abcdefg" +> + This is a test +</div> +`; diff --git a/@linaria/packages/react/__tests__/detect-core-js.test.js b/@linaria/packages/react/__tests__/detect-core-js.test.js new file mode 100644 index 0000000..22bfbe4 --- /dev/null +++ b/@linaria/packages/react/__tests__/detect-core-js.test.js @@ -0,0 +1,35 @@ +import cp from 'child_process'; + +const waitForProcess = async (process) => { + return new Promise((resolve) => { + let output = ''; + process.stdout.on('data', (chunk) => { + output += chunk.toString(); + }); + process.on('close', () => { + resolve(output); + }); + }); +}; + +it('Ensures that package do not include core-js dependency after build', async () => { + // eslint-disable-next-line import/no-extraneous-dependencies + const packageJSON = require('@linaria/babel-preset/package.json'); + const buildScript = packageJSON.scripts['build:lib']; + + const proc = cp.exec(buildScript, { + stdio: 'ignore', + env: { + ...process.env, + DEBUG_CORE_JS: 'true', + }, + }); + const result = await waitForProcess(proc); + // run `DEBUG_CORE_JS=true yarn build:lib` to debug issues with introduced core-js dependency + expect(result).not.toContain( + 'The corejs3 polyfill added the following polyfills' + ); + expect(result).toContain( + 'Based on your code and targets, the corejs3 polyfill did not add any polyfill' + ); +}, 15000); diff --git a/@linaria/packages/react/__tests__/styled.test.js b/@linaria/packages/react/__tests__/styled.test.js new file mode 100644 index 0000000..8f38ab2 --- /dev/null +++ b/@linaria/packages/react/__tests__/styled.test.js @@ -0,0 +1,256 @@ +const React = require('react'); +const renderer = require('react-test-renderer'); +const styled = require('../src').styled; + +it('renders tag with display name and class name', () => { + const Test = styled('h1')({ + name: 'TestComponent', + class: 'abcdefg', + }); + + expect(Test.displayName).toBe('TestComponent'); + expect(Test.__linaria.className).toBe('abcdefg'); + expect(Test.__linaria.extends).toBe('h1'); + + const tree = renderer.create(<Test>This is a test</Test>); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('renders component with display name and class name', () => { + const Custom = (props) => <div {...props} />; + + const Test = styled(Custom)({ + name: 'TestComponent', + class: 'abcdefg', + }); + + expect(Test.displayName).toBe('TestComponent'); + expect(Test.__linaria.className).toBe('abcdefg'); + expect(Test.__linaria.extends).toBe(Custom); + + const tree = renderer.create(<Test>This is a test</Test>); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('applies CSS variables in style prop', () => { + const Test = styled('div')({ + name: 'TestComponent', + class: 'abcdefg', + vars: { + foo: ['tomato'], + bar: [20, 'px'], + baz: [(props) => props.size, 'px'], + }, + }); + + const tree = renderer.create(<Test size={24}>This is a test</Test>); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('merges CSS variables with custom style prop', () => { + const Test = styled('div')({ + name: 'TestComponent', + class: 'abcdefg', + vars: { + foo: ['tomato'], + }, + }); + + const tree = renderer.create( + <Test style={{ bar: 'baz' }}>This is a test</Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('supports extra className prop', () => { + const Test = styled('div')({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create(<Test className="primary">This is a test</Test>); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('supports extra class prop', () => { + const Test = styled('div')({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create(<Test class="primary">This is a test</Test>); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('replaces simple component with as prop', () => { + const Test = styled('button')({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create( + <Test as="a" id="test" foo="bar"> + This is a test + </Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('replaces custom component with as prop for primitive', () => { + const Custom = (props) => <div {...props} style={{ fontSize: 12 }} />; + + const Test = styled(Custom)({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create( + <Test as="a" id="test" foo="bar"> + This is a test + </Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('replaces primitive with as prop for custom component', () => { + const Custom = (props) => <div {...props} style={{ fontSize: 12 }} />; + + const Test = styled('div')({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create( + <Test as={Custom} id="test" foo="bar"> + This is a test + </Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('handles wrapping another styled component', () => { + const First = styled('div')({ + name: 'FirstComponent', + class: 'abcdefg', + }); + + const Second = styled(First)({ + name: 'SecondComponent', + class: 'hijklmn', + }); + + const tree = renderer.create(<Second>This is a test</Second>); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('forwards as prop when wrapping another styled component', () => { + const First = styled('div')({ + name: 'FirstComponent', + class: 'abcdefg', + }); + + const Second = styled(First)({ + name: 'SecondComponent', + class: 'hijklmn', + }); + + const tree = renderer.create(<Second as="a">This is a test</Second>); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('filters unknown html attributes for HTML tag', () => { + const Test = styled('div')({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create( + <Test unknownAttribute="voila">This is a test</Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('does not filter attributes for custom elements', () => { + const Test = styled('my-element')({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create( + <Test unknownAttribute="voila">This is a test</Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('does not filter attributes for components', () => { + const Custom = (props) => <div>{props.unknownAttribute}</div>; + + const Test = styled(Custom)({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create( + <Test unknownAttribute="voila">This is a test</Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('provides linaria component className for composition as last item in props.className', () => { + const Custom = (props) => { + const classnames = props.className.split(' '); + const linariaClassName = classnames[classnames.length - 1]; + const newClassNames = [ + props.className, + `${linariaClassName}--primary`, + `${linariaClassName}--accessibility`, + ].join(' '); + + return ( + <div className={newClassNames}> + original classname used for composition + </div> + ); + }; + + const Test = styled(Custom)({ + name: 'TestComponent', + class: 'abcdefg', + }); + + const tree = renderer.create( + <Test className="some-another-class">This is a test</Test> + ); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +it('throws when using as tag for template literal', () => { + expect( + () => + styled('div')` + color: blue; + ` + ).toThrow('Using the "styled" tag in runtime is not supported'); + + expect( + () => + styled.div` + color: blue; + ` + ).toThrow('Using the "styled" tag in runtime is not supported'); +}); |