Skip to content
Permalink
Browse files

Adding tests and improving style. Updating snapshots

  • Loading branch information...
dminones committed Jul 10, 2019
1 parent 6c3dd7b commit 983bdbf51fa686609783cae485e5fabd2936756f
@@ -1,20 +1,23 @@
// @flow
import React from 'react'
import { TextInput } from 'react-native-paper'
import { TextInput } from 'react-native'
import normalize from 'react-native-elements/src/helpers/normalizeText'
import { withStyles } from '../../../lib/styles'

const InputText = (props: any) => {
return <TextInput {...props} />
return <TextInput style={props.styles.input} {...props} />
}

const getStylesFromProps = ({ theme }) => {
return {
input: {
...theme.fontStyle,
fontSize: normalize(24),
fontWeight: '500',
textTransform: 'uppercase'
fontStyle: theme.fonts.slab,
color: theme.colors.darkGray,
borderBottomStyle: 'solid',
borderBottomWidth: normalize(1),
padding: theme.sizes.default,
borderBottomColor: theme.colors.darkGray
}
}
}
@@ -0,0 +1,27 @@
import React from 'react'
import renderer from 'react-test-renderer'
import InputText from '../InputText'
import { withThemeProvider } from './__util__'

// Note: test renderer must be required after react-native.

describe('InputText', () => {
const WrappedInputText = withThemeProvider(InputText)

it('renders without errors', () => {
const tree = renderer.create(<WrappedInputText />)
expect(tree.toJSON()).toBeTruthy()
})

it('empty matches snapshot', () => {
const component = renderer.create(<WrappedInputText />)
const tree = component.toJSON()
expect(tree).toMatchSnapshot()
})

it('matches snapshot', () => {
const component = renderer.create(<WrappedInputText value="Text" />)
const tree = component.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -0,0 +1,232 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`InputText empty matches snapshot 1`] = `
<div
className="css-view-1dbjc4n"
style={
Object {
"WebkitBoxFlex": 1,
"WebkitFlexBasis": "0%",
"WebkitFlexGrow": 1,
"WebkitFlexShrink": 1,
"flexBasis": "0%",
"flexGrow": 1,
"flexShrink": 1,
"msFlexNegative": 1,
"msFlexPositive": 1,
"msFlexPreferredSize": "0%",
}
}
>
<input
autoCapitalize="sentences"
autoComplete="on"
autoCorrect="on"
className="css-textinput-1cwyjr8"
data-focusable={true}
dir="auto"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onSelect={[Function]}
readOnly={false}
spellCheck={true}
style={
Object {
"borderBottomColor": "rgba(66,69,74,1.00)",
"borderBottomStyle": "solid",
"borderBottomWidth": "1px",
"color": "rgba(66,69,74,1.00)",
"fontSize": "18px",
"fontStyle": "RobotoSlab-Regular",
"paddingBottom": "8px",
"paddingLeft": "8px",
"paddingRight": "8px",
"paddingTop": "8px",
"textAlign": "center",
}
}
styles={
Object {
"input": Object {
"borderBottomColor": "#42454A",
"borderBottomStyle": "solid",
"borderBottomWidth": 1,
"color": "#42454A",
"fontSize": 18,
"fontStyle": "RobotoSlab-Regular",
"padding": 8,
"textAlign": "center",
},
}
}
theme={
Object {
"colors": Object {
"accent": "#03dac4",
"backdrop": "rgba(0, 0, 0, 0.5)",
"background": "#f6f6f6",
"blue": "#006EA0",
"darkBlue": "#0C263D",
"darkGray": "#42454A",
"disabled": "rgba(0, 0, 0, 0.26)",
"error": "#B00020",
"gray50Percent": "#CBCBCB",
"green": "#00C3AE",
"lightGray": "#EEE",
"notification": "#f50057",
"orange": "#F8AF40",
"placeholder": "#CBCBCB",
"primary": "#00AFFF",
"purple": "#9F6A9D",
"red": "#FA6C77",
"surface": "#ffffff",
"text": "#222",
},
"dark": false,
"fontStyle": Object {
"color": "#555",
"fontSize": 18,
"textAlign": "center",
},
"fonts": Object {
"light": "Roboto-Light, Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"medium": "Roboto-Medium, Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"regular": "Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"slab": "RobotoSlab-Regular",
"slabBold": "RobotoSlab-Bold",
"thin": "Roboto-Thin, Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
},
"paddings": Object {
"mainContainerPadding": 8,
},
"roundness": 4,
"sizes": Object {
"default": 8,
"defaultDouble": 16,
"defaultHalf": 4,
},
}
}
type="text"
/>
</div>
`;

exports[`InputText matches snapshot 1`] = `
<div
className="css-view-1dbjc4n"
style={
Object {
"WebkitBoxFlex": 1,
"WebkitFlexBasis": "0%",
"WebkitFlexGrow": 1,
"WebkitFlexShrink": 1,
"flexBasis": "0%",
"flexGrow": 1,
"flexShrink": 1,
"msFlexNegative": 1,
"msFlexPositive": 1,
"msFlexPreferredSize": "0%",
}
}
>
<input
autoCapitalize="sentences"
autoComplete="on"
autoCorrect="on"
className="css-textinput-1cwyjr8"
data-focusable={true}
dir="auto"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onSelect={[Function]}
readOnly={false}
spellCheck={true}
style={
Object {
"borderBottomColor": "rgba(66,69,74,1.00)",
"borderBottomStyle": "solid",
"borderBottomWidth": "1px",
"color": "rgba(66,69,74,1.00)",
"fontSize": "18px",
"fontStyle": "RobotoSlab-Regular",
"paddingBottom": "8px",
"paddingLeft": "8px",
"paddingRight": "8px",
"paddingTop": "8px",
"textAlign": "center",
}
}
styles={
Object {
"input": Object {
"borderBottomColor": "#42454A",
"borderBottomStyle": "solid",
"borderBottomWidth": 1,
"color": "#42454A",
"fontSize": 18,
"fontStyle": "RobotoSlab-Regular",
"padding": 8,
"textAlign": "center",
},
}
}
theme={
Object {
"colors": Object {
"accent": "#03dac4",
"backdrop": "rgba(0, 0, 0, 0.5)",
"background": "#f6f6f6",
"blue": "#006EA0",
"darkBlue": "#0C263D",
"darkGray": "#42454A",
"disabled": "rgba(0, 0, 0, 0.26)",
"error": "#B00020",
"gray50Percent": "#CBCBCB",
"green": "#00C3AE",
"lightGray": "#EEE",
"notification": "#f50057",
"orange": "#F8AF40",
"placeholder": "#CBCBCB",
"primary": "#00AFFF",
"purple": "#9F6A9D",
"red": "#FA6C77",
"surface": "#ffffff",
"text": "#222",
},
"dark": false,
"fontStyle": Object {
"color": "#555",
"fontSize": 18,
"textAlign": "center",
},
"fonts": Object {
"light": "Roboto-Light, Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"medium": "Roboto-Medium, Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"regular": "Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"slab": "RobotoSlab-Regular",
"slabBold": "RobotoSlab-Bold",
"thin": "Roboto-Thin, Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
},
"paddings": Object {
"mainContainerPadding": 8,
},
"roundness": 4,
"sizes": Object {
"default": 8,
"defaultDouble": 16,
"defaultHalf": 4,
},
}
}
type="text"
value="Text"
/>
</div>
`;
@@ -0,0 +1,9 @@
import React from 'react'
import { Provider as PaperProvider } from 'react-native-paper'
import { theme as defaultTheme } from '../../../../theme/styles'

export const withThemeProvider = (Component, theme = defaultTheme) => props => (
<PaperProvider theme={theme}>
<Component {...props} />
</PaperProvider>
)

0 comments on commit 983bdbf

Please sign in to comment.
You can’t perform that action at this time.