Permalink
Browse files

Add some initial tests for StyledNativeComponent

  • Loading branch information...
kitten committed Apr 20, 2017
1 parent 0e2bda5 commit aec38e4be6245c718df4b568695d8914020548c2
Showing with 220 additions and 2 deletions.
  1. +9 −0 .jest.native.json
  2. +5 −1 package.json
  3. +1 −1 src/models/StyledNativeComponent.js
  4. +205 −0 src/native/test/native.test.js
View
@@ -0,0 +1,9 @@
{
"rootDir": ".",
"globals": {
"__DEV__": true
},
"testRegex": "./src/native/test/.*.js$",
"preset": "react-native",
"testEnvironment": "jsdom"
}
View
@@ -13,7 +13,8 @@
"prebuild:dist": "rm -rf dist/*",
"build:dist": "rollup -c && rollup -c --environment PRODUCTION",
"build:watch": "npm run build:lib -- --watch",
"test": "jest",
"test": "jest && npm run test:native",
"test:native": "jest -c .jest.native.json",
"test:watch": "npm run test -- --watch",
"flow": "flow check",
"lint": "eslint src",
@@ -112,6 +113,9 @@
"jest": {
"roots": [
"<rootDir>/src/"
],
"testPathIgnorePatterns": [
"<rootDir>/src/native"
]
},
"lint-staged": {
@@ -106,8 +106,8 @@ export default (constructWithOptions: Function) => {
}
if (!isStyledComponent(target)) {
propsForElement.innerRef = undefined
propsForElement.ref = innerRef
delete propsForElement.innerRef
}
return createElement(target, propsForElement, children)
@@ -0,0 +1,205 @@
import 'react-native'
import React from 'react'
import styled from '../index'
import { shallow, mount } from 'enzyme'
// NOTE: These tests are like the ones for Web but a "light-version" of them
// This is mostly due to the similar logic
describe('native', () => {
it('should not throw an error when called', () => {
styled.View``
})
it('should generate inline styles', () => {
const Comp = styled.View``
const wrapper = shallow(<Comp />)
const view = wrapper.find('View').first()
expect(view.prop('style')).toEqual([ {}, undefined ])
})
it('should combine inline styles and the style prop', () => {
const Comp = styled.View`
padding-top: 10;
`
const style = { opacity: 0.9 }
const wrapper = shallow(<Comp style={style} />)
const view = wrapper.find('View').first()
expect(view.prop('style')).toEqual([ { paddingTop: 10 }, style ])
})
describe('extending', () => {
it('should combine styles of extending components', () => {
const Parent = styled.View`opacity: 0.9;`
const Child = Parent.extend`padding: 10px;`
const parent = shallow(<Parent />)
const child = shallow(<Child />)
expect(parent.find('View').prop('style')).toEqual([
{ opacity: 0.9 },
undefined
])
expect(child.find('View').prop('style')).toEqual([
{
opacity: 0.9,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 10
}, undefined
])
})
})
describe('attrs', () => {
it('works fine with an empty object', () => {
const Comp = styled.View.attrs({})``
const wrapper = shallow(<Comp />)
const view = wrapper.find('View').first()
expect(view.props()).toEqual({
style: [ {}, undefined ]
})
})
it('passes simple props on', () => {
const Comp = styled.View.attrs({
test: true
})``
const wrapper = shallow(<Comp />)
const view = wrapper.find('View').first()
expect(view.props()).toEqual({
style: [ {}, undefined ],
test: true
})
})
it('calls an attr-function with context', () => {
const Comp = styled.View.attrs({
copy: props => props.test
})``
const test = 'Put that cookie down!'
const wrapper = shallow(<Comp test={test} />)
const view = wrapper.find('View').first()
expect(view.props()).toEqual({
style: [ {}, undefined ],
copy: test,
test,
})
})
it('merges multiple calls', () => {
const Comp = styled.View.attrs({
first: 'first',
test: '_'
}).attrs({
second: 'second',
test: 'test'
})``
const wrapper = shallow(<Comp />)
const view = wrapper.find('View').first()
expect(view.props()).toEqual({
style: [ {}, undefined ],
first: 'first',
second: 'second',
test: 'test',
})
})
it('merges attrs when inheriting SC', () => {
const Parent = styled.View.attrs({
first: 'first',
})``
const Child = Parent.extend.attrs({
second: 'second'
})``
const wrapper = shallow(<Child />)
const view = wrapper.find('View').first()
expect(view.props()).toEqual({
style: [ {}, undefined ],
first: 'first',
second: 'second',
})
})
})
describe('expanded API', () => {
it('should attach a displayName', () => {
const Comp = styled.View``
expect(Comp.displayName).toBe('Styled(View)')
const CompTwo = styled.View.withConfig({ displayName: 'Test' })``
expect(CompTwo.displayName).toBe('Test')
})
it('should allow multiple calls to be chained', () => {
const Comp = styled.View
.withConfig({ displayName: 'Test1' })
.withConfig({ displayName: 'Test2' })
``
expect(Comp.displayName).toBe('Test2')
})
})
describe('innerRef', () => {
it('should pass the ref to the component', () => {
const Comp = styled.View``
const ref = jest.fn()
const wrapper = mount(<Comp innerRef={ref} />)
const view = wrapper.find('View').first()
// $FlowFixMe
expect(ref).toHaveBeenCalledWith(view.node)
expect(view.prop('innerRef')).toBeFalsy()
})
class InnerComponent extends React.Component {
render() {
return null
}
}
it('should not leak the innerRef prop to the wrapped child', () => {
const OuterComponent = styled(InnerComponent)``
const ref = jest.fn()
const wrapper = mount(<OuterComponent innerRef={ref} />)
const innerComponent = wrapper.find(InnerComponent).first()
// $FlowFixMe
expect(ref).toHaveBeenCalledWith(innerComponent.node)
expect(innerComponent.prop('innerRef')).toBeFalsy()
})
it('should pass the innerRef to the wrapped styled component', () => {
const InnerComponent = styled.View``
const OuterComponent = styled(InnerComponent)``
const ref = jest.fn()
const wrapper = mount(<OuterComponent innerRef={ref} />)
const view = wrapper.find('View').first()
const innerComponent = wrapper.find(InnerComponent).first()
// $FlowFixMe
expect(ref).toHaveBeenCalledWith(view.node)
expect(innerComponent.prop('innerRef')).toBe(ref)
})
})
})

0 comments on commit aec38e4

Please sign in to comment.