lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tests for StatsOverview component

Browse Source
This commit is contained in:
MariaZ
2022-09-20 10:59:28 +02:00
parent 5c2a80c5c2
commit e2e320927b
2 changed files with 353 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/components/common/StatsOverview.spec.js
+32
View File
@@ -0,0 +1,32 @@
import React from 'react'
import { render } from '@testing-library/react-native'
import StatsOverview from '../../../components/common/StatsOverview'
jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: (str, options) => {
return str + (options ? JSON.stringify(options) : '')
},
}),
}))
describe('StatsOverview screen', () => {
test('when provided correct, renders it', async () => {
const data = [
[21, 'shortest'],
[21, 'longest'],
[0, 'standard deviation'],
[2, 'completed cycles'],
]
const { toJSON } = render(<StatsOverview data={data} />)
expect(toJSON()).toMatchSnapshot()
})
test('when provided empty data, renders nothing (does not break)', async () => {
const data = []
const { toJSON } = render(<StatsOverview data={data} />)
expect(toJSON()).toMatchSnapshot()
})
})
test/components/common/__snapshots__/StatsOverview.spec.js.snap
+321
View File
@@ -0,0 +1,321 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StatsOverview screen when provided correct, renders it 1`] = `
Array [
<View
style={
Object {
"flexDirection": "row",
}
}
>
<View
style={
Object {
"alignItems": "flex-end",
"flex": 3,
"justifyContent": "center",
}
}
>
<Text
ellipsizeMode="clip"
numberOfLines={1}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#3A2671",
"fontFamily": "Jost-Bold",
"fontSize": 64.28571428571428,
"marginRight": 8.571428571428571,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
21
</Text>
</View>
<View
style={
Object {
"flex": 5,
"flexDirection": "row",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={2}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#F38337",
"fontFamily": "Jost-Bold",
"fontSize": 27.857142857142858,
"margin": 15,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
shortest
</Text>
</View>
</View>,
<View
style={
Object {
"flexDirection": "row",
}
}
>
<View
style={
Object {
"alignItems": "flex-end",
"flex": 3,
"justifyContent": "center",
}
}
>
<Text
ellipsizeMode="clip"
numberOfLines={1}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#3A2671",
"fontFamily": "Jost-Bold",
"fontSize": 64.28571428571428,
"marginRight": 8.571428571428571,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
21
</Text>
</View>
<View
style={
Object {
"flex": 5,
"flexDirection": "row",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={2}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#F38337",
"fontFamily": "Jost-Bold",
"fontSize": 27.857142857142858,
"margin": 15,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
longest
</Text>
</View>
</View>,
<View
style={
Object {
"flexDirection": "row",
}
}
>
<View
style={
Object {
"alignItems": "flex-end",
"flex": 3,
"justifyContent": "center",
}
}
>
<Text
ellipsizeMode="clip"
numberOfLines={1}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#3A2671",
"fontFamily": "Jost-Bold",
"fontSize": 64.28571428571428,
"marginRight": 8.571428571428571,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
0
</Text>
</View>
<View
style={
Object {
"flex": 5,
"flexDirection": "row",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={2}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#F38337",
"fontFamily": "Jost-Bold",
"fontSize": 27.857142857142858,
"margin": 15,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
standard deviation
</Text>
<Text
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#3A2671",
"fontFamily": "Jost-Bold",
"fontSize": 64.28571428571428,
"marginRight": 8.571428571428571,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
*
</Text>
</View>
</View>,
<View
style={
Object {
"flexDirection": "row",
}
}
>
<View
style={
Object {
"alignItems": "flex-end",
"flex": 3,
"justifyContent": "center",
}
}
>
<Text
ellipsizeMode="clip"
numberOfLines={1}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#3A2671",
"fontFamily": "Jost-Bold",
"fontSize": 64.28571428571428,
"marginRight": 8.571428571428571,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
2
</Text>
</View>
<View
style={
Object {
"flex": 5,
"flexDirection": "row",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={2}
style={
Array [
Object {
"color": "#555",
"fontFamily": "Jost-Book",
"fontSize": 34.285714285714285,
},
Object {
"color": "#F38337",
"fontFamily": "Jost-Bold",
"fontSize": 27.857142857142858,
"margin": 15,
"textAlignVertical": "center",
"textTransform": "uppercase",
},
]
}
>
completed cycles
</Text>
</View>
</View>,
]
`;
exports[`StatsOverview screen when provided empty data, renders nothing (does not break) 1`] = `null`;