Shallow render ActivityIndicator tests

These snapshots should be improved by flattening the React Native style
object.
This commit is contained in:
Nicolas Gallagher
2017-09-18 19:47:03 -07:00
parent 63daff7f80
commit 6942e4e417
2 changed files with 253 additions and 113 deletions

View File

@@ -1,18 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
<div
<View
accessibilityRole="progressbar"
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
style={
Array [
15,
undefined,
]
}
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-visibility-11j9u27 rn-width-19wmn03"
<View
style={
Array [
19,
17,
18,
16,
]
}
>
<svg
height="100%"
viewbox="0 0 32 32"
viewBox="0 0 32 32"
width="100%"
>
<circle
@@ -20,35 +32,58 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
strokeWidth="4"
style={
Object {
"opacity": 0.2,
"stroke": "#1976D2",
}
}
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
strokeWidth="4"
style={
Object {
"stroke": "#1976D2",
"strokeDasharray": 80,
"strokeDashoffset": 60,
}
}
/>
</svg>
</div>
</div>
</View>
</View>
`;
exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
<div
<View
accessibilityRole="progressbar"
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
style={
Array [
15,
undefined,
]
}
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
<View
style={
Array [
19,
17,
false,
false,
]
}
>
<svg
height="100%"
viewbox="0 0 32 32"
viewBox="0 0 32 32"
width="100%"
>
<circle
@@ -56,71 +91,94 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
strokeWidth="4"
style={
Object {
"opacity": 0.2,
"stroke": "#1976D2",
}
}
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
strokeWidth="4"
style={
Object {
"stroke": "#1976D2",
"strokeDasharray": 80,
"strokeDashoffset": 60,
}
}
/>
</svg>
</div>
</div>
</View>
</View>
`;
exports[`components/ActivityIndicator prop "color" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
>
<svg
height="100%"
viewbox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:red;opacity:0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:red;stroke-dasharray:80;stroke-dashoffset:60;"
/>
</svg>
</div>
</div>
<circle
cx="16"
cy="16"
fill="none"
r="14"
strokeWidth="4"
style={
Object {
"opacity": 0.2,
"stroke": "red",
}
}
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
strokeWidth="4"
style={
Object {
"stroke": "red",
"strokeDasharray": 80,
"strokeDashoffset": 60,
}
}
/>
</svg>
`;
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
<div
<View
accessibilityRole="progressbar"
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
style={
Array [
15,
undefined,
]
}
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
<View
style={
Array [
19,
17,
18,
false,
]
}
>
<svg
height="100%"
viewbox="0 0 32 32"
viewBox="0 0 32 32"
width="100%"
>
<circle
@@ -128,35 +186,58 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
strokeWidth="4"
style={
Object {
"opacity": 0.2,
"stroke": "#1976D2",
}
}
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
strokeWidth="4"
style={
Object {
"stroke": "#1976D2",
"strokeDasharray": 80,
"strokeDashoffset": 60,
}
}
/>
</svg>
</div>
</div>
</View>
</View>
`;
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
<div
<View
accessibilityRole="progressbar"
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
style={
Array [
15,
undefined,
]
}
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-visibility-11j9u27 rn-width-19wmn03"
<View
style={
Array [
19,
17,
18,
16,
]
}
>
<svg
height="100%"
viewbox="0 0 32 32"
viewBox="0 0 32 32"
width="100%"
>
<circle
@@ -164,35 +245,58 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
strokeWidth="4"
style={
Object {
"opacity": 0.2,
"stroke": "#1976D2",
}
}
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
strokeWidth="4"
style={
Object {
"stroke": "#1976D2",
"strokeDasharray": 80,
"strokeDashoffset": 60,
}
}
/>
</svg>
</div>
</div>
</View>
</View>
`;
exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
<div
<View
accessibilityRole="progressbar"
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
style={
Array [
15,
undefined,
]
}
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1r8g8re rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-1acpoxo"
<View
style={
Array [
20,
17,
false,
false,
]
}
>
<svg
height="100%"
viewbox="0 0 32 32"
viewBox="0 0 32 32"
width="100%"
>
<circle
@@ -200,36 +304,61 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
strokeWidth="4"
style={
Object {
"opacity": 0.2,
"stroke": "#1976D2",
}
}
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
strokeWidth="4"
style={
Object {
"stroke": "#1976D2",
"strokeDasharray": 80,
"strokeDashoffset": 60,
}
}
/>
</svg>
</div>
</div>
</View>
</View>
`;
exports[`components/ActivityIndicator prop "size" is a number 1`] = `
<div
<View
accessibilityRole="progressbar"
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
style={
Array [
15,
undefined,
]
}
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
style="height:30px;width:30px;"
<View
style={
Array [
Object {
"height": 30,
"width": 30,
},
17,
false,
false,
]
}
>
<svg
height="100%"
viewbox="0 0 32 32"
viewBox="0 0 32 32"
width="100%"
>
<circle
@@ -237,18 +366,29 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
strokeWidth="4"
style={
Object {
"opacity": 0.2,
"stroke": "#1976D2",
}
}
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
strokeWidth="4"
style={
Object {
"stroke": "#1976D2",
"strokeDasharray": 80,
"strokeDashoffset": 60,
}
}
/>
</svg>
</div>
</div>
</View>
</View>
`;

View File

@@ -2,46 +2,46 @@
import ActivityIndicator from '..';
import React from 'react';
import { render } from 'enzyme';
import { shallow } from 'enzyme';
describe('components/ActivityIndicator', () => {
describe('prop "animating"', () => {
test('is "true"', () => {
const component = render(<ActivityIndicator animating={true} />);
const component = shallow(<ActivityIndicator animating={true} />);
expect(component).toMatchSnapshot();
});
test('is "false"', () => {
const component = render(<ActivityIndicator animating={false} />);
const component = shallow(<ActivityIndicator animating={false} />);
expect(component).toMatchSnapshot();
});
});
test('prop "color"', () => {
const component = render(<ActivityIndicator color="red" />);
const component = shallow(<ActivityIndicator color="red" />).find('svg');
expect(component).toMatchSnapshot();
});
describe('prop "hidesWhenStopped"', () => {
test('is "true"', () => {
const component = render(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
const component = shallow(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
expect(component).toMatchSnapshot();
});
test('is "false"', () => {
const component = render(<ActivityIndicator animating={false} hidesWhenStopped={false} />);
const component = shallow(<ActivityIndicator animating={false} hidesWhenStopped={false} />);
expect(component).toMatchSnapshot();
});
});
describe('prop "size"', () => {
test('is "large"', () => {
const component = render(<ActivityIndicator size="large" />);
const component = shallow(<ActivityIndicator size="large" />);
expect(component).toMatchSnapshot();
});
test('is a number', () => {
const component = render(<ActivityIndicator size={30} />);
const component = shallow(<ActivityIndicator size={30} />);
expect(component).toMatchSnapshot();
});
});