octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Lots of updates

Browse Source
This commit is contained in:
Zhiyuan Zheng
2021-01-10 02:12:14 +01:00
parent 4a6229514f
commit 541e2a5601
28 changed files with 1001 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/components/Button.js
View File

@ -30,7 +30,7 @@ describe('Testing component button', () => {
it('with icon only', () => {
const onPress = jest.fn()
const { getByTestId, toJSON } = render(
<Button type='icon' content='x' onPress={onPress} />
<Button type='icon' content='X' onPress={onPress} />
)
fireEvent.press(getByTestId('base'))

1
__tests__/components/Menu/__snapshots__/Header.js.snap
View File

@ -16,6 +16,7 @@ exports[`Testing component menu header with text only 1`] = `
Object {
"fontSize": 14,
"fontWeight": "600",
"lineHeight": 20,
},
Object {
"color": "rgb(135, 135, 135)",

159
__tests__/components/Menu/__snapshots__/Row.js.snap
View File

@ -15,7 +15,7 @@ exports[`Testing component menu row loading state 1`] = `
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 50,
"minHeight": 50,
}
}
testID="base"
@ -34,28 +34,35 @@ exports[`Testing component menu row loading state 1`] = `
style={
Object {
"alignItems": "center",
"flex": 1,
"flexBasis": "70%",
"flex": 2,
"flexDirection": "row",
}
}
>
<Text
numberOfLines={1}
<View
style={
Array [
Object {
"flex": 1,
"fontSize": 16,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
Object {
"flex": 1,
}
}
>
test
</Text>
<Text
numberOfLines={1}
style={
Array [
Object {
"fontSize": 16,
"lineHeight": 22,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
}
>
test
</Text>
</View>
</View>
</View>
</View>
@ -76,7 +83,7 @@ exports[`Testing component menu row on press event 1`] = `
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 50,
"minHeight": 50,
}
}
testID="base"
@ -95,28 +102,35 @@ exports[`Testing component menu row on press event 1`] = `
style={
Object {
"alignItems": "center",
"flex": 1,
"flexBasis": "70%",
"flex": 2,
"flexDirection": "row",
}
}
>
<Text
numberOfLines={1}
<View
style={
Array [
Object {
"flex": 1,
"fontSize": 16,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
Object {
"flex": 1,
}
}
>
test
</Text>
<Text
numberOfLines={1}
style={
Array [
Object {
"fontSize": 16,
"lineHeight": 22,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
}
>
test
</Text>
</View>
</View>
</View>
</View>
@ -137,7 +151,7 @@ exports[`Testing component menu row with title and content 1`] = `
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 50,
"minHeight": 50,
}
}
testID="base"
@ -156,37 +170,44 @@ exports[`Testing component menu row with title and content 1`] = `
style={
Object {
"alignItems": "center",
"flex": 1,
"flexBasis": "70%",
"flex": 2,
"flexDirection": "row",
}
}
>
<Text
numberOfLines={1}
<View
style={
Array [
Object {
"flex": 1,
"fontSize": 16,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
Object {
"flex": 1,
}
}
>
test title
</Text>
<Text
numberOfLines={1}
style={
Array [
Object {
"fontSize": 16,
"lineHeight": 22,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
}
>
test title
</Text>
</View>
</View>
<View
style={
Object {
"alignItems": "center",
"flex": 1,
"flexBasis": "30%",
"flexDirection": "row",
"justifyContent": "flex-end",
"marginLeft": 16,
}
}
>
@ -196,6 +217,7 @@ exports[`Testing component menu row with title and content 1`] = `
Array [
Object {
"fontSize": 16,
"lineHeight": 22,
},
Object {
"color": "rgb(135, 135, 135)",
@ -226,7 +248,7 @@ exports[`Testing component menu row with title only 1`] = `
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 50,
"minHeight": 50,
}
}
testID="base"
@ -245,28 +267,35 @@ exports[`Testing component menu row with title only 1`] = `
style={
Object {
"alignItems": "center",
"flex": 1,
"flexBasis": "70%",
"flex": 2,
"flexDirection": "row",
}
}
>
<Text
numberOfLines={1}
<View
style={
Array [
Object {
"flex": 1,
"fontSize": 16,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
Object {
"flex": 1,
}
}
>
test title
</Text>
<Text
numberOfLines={1}
style={
Array [
Object {
"fontSize": 16,
"lineHeight": 22,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
}
>
test title
</Text>
</View>
</View>
</View>
</View>

59
__tests__/components/Timelines/Timeline/Shared/Card.js Normal file
View File

@ -0,0 +1,59 @@
import React from 'react'
import {
toBeDisabled,
toContainElement,
toHaveStyle,
toHaveTextContent
} from '@testing-library/jest-native'
import { cleanup, render } from '@testing-library/react-native/pure'
import Card from '@components/Timelines/Timeline/Shared/Card'
expect.extend({
toBeDisabled,
toContainElement,
toHaveStyle,
toHaveTextContent
})
describe('Testing component timeline card', () => {
afterEach(cleanup)
it('with text only', () => {
const { getByTestId, queryByTestId, toJSON } = render(
<Card
card={{
url: 'http://example.com',
title: 'Title'
}}
/>
)
expect(queryByTestId('image')).toBeNull()
expect(getByTestId('base')).toContainElement(getByTestId('title'))
expect(queryByTestId('description')).toBeNull()
expect(getByTestId('title')).toHaveTextContent('Title')
expect(toJSON()).toMatchSnapshot()
})
it('with text and description', () => {
const { getByTestId, queryByTestId, toJSON } = render(
<Card
card={{
url: 'http://example.com',
title: 'Title',
description: 'Description'
}}
/>
)
expect(queryByTestId('image')).toBeNull()
expect(getByTestId('base')).toContainElement(getByTestId('title'))
expect(getByTestId('base')).toContainElement(getByTestId('description'))
expect(getByTestId('title')).toHaveTextContent('Title')
expect(getByTestId('description')).toHaveTextContent('Description')
expect(toJSON()).toMatchSnapshot()
})
})

155
__tests__/components/Timelines/Timeline/Shared/__snapshots__/Card.js.snap Normal file
View File

@ -0,0 +1,155 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Testing component timeline card with text and description 1`] = `
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"borderRadius": 6,
"borderWidth": 0.5,
"flex": 1,
"flexDirection": "row",
"height": 104,
"marginTop": 16,
},
Object {
"borderColor": "rgba(18, 18, 18, 0.3)",
},
]
}
testID="base"
>
<View
style={
Object {
"flex": 1,
"padding": 8,
}
}
>
<Text
numberOfLines={2}
style={
Array [
Object {
"fontWeight": "600",
"marginBottom": 4,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
}
testID="title"
>
Title
</Text>
<Text
numberOfLines={1}
style={
Array [
Object {
"marginBottom": 4,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
}
testID="description"
>
Description
</Text>
<Text
numberOfLines={1}
style={
Object {
"color": "rgb(135, 135, 135)",
}
}
>
http://example.com
</Text>
</View>
</View>
`;
exports[`Testing component timeline card with text only 1`] = `
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"borderRadius": 6,
"borderWidth": 0.5,
"flex": 1,
"flexDirection": "row",
"height": 104,
"marginTop": 16,
},
Object {
"borderColor": "rgba(18, 18, 18, 0.3)",
},
]
}
testID="base"
>
<View
style={
Object {
"flex": 1,
"padding": 8,
}
}
>
<Text
numberOfLines={2}
style={
Array [
Object {
"fontWeight": "600",
"marginBottom": 4,
},
Object {
"color": "rgb(18, 18, 18)",
},
]
}
testID="title"
>
Title
</Text>
<Text
numberOfLines={1}
style={
Object {
"color": "rgb(135, 135, 135)",
}
}
>
http://example.com
</Text>
</View>
</View>
`;

763
__tests__/components/__snapshots__/Button.js.snap
View File

@ -1,393 +1,474 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Testing component button static button apply custom styling 1`] = `
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(18, 18, 18)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
Object {
"backgroundColor": "black",
},
]
}
testID="base"
>
<Text
<View>
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"color": "rgb(18, 18, 18)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 1,
}
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(18, 18, 18)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
Object {
"backgroundColor": "black",
},
]
}
testID="text"
testID="base"
>
test
</Text>
<Text
style={
Object {
"color": "rgb(18, 18, 18)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 1,
}
}
testID="text"
>
test
</Text>
</View>
</View>
`;
exports[`Testing component button static button disabled state 1`] = `
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(135, 135, 135)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="base"
>
<Text
<View>
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"color": "rgb(135, 135, 135)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 1,
}
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(135, 135, 135)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="text"
testID="base"
>
test
</Text>
<Text
style={
Object {
"color": "rgb(135, 135, 135)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 1,
}
}
testID="text"
>
test
</Text>
</View>
</View>
`;
exports[`Testing component button static button loading state 1`] = `
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(135, 135, 135)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="base"
>
<Text
style={
Object {
"color": "rgb(18, 18, 18)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 0,
}
}
testID="text"
>
test
</Text>
<View>
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"position": "absolute",
}
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(135, 135, 135)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="base"
>
<Text
style={
Object {
"color": "rgb(18, 18, 18)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 0,
}
}
testID="text"
>
test
</Text>
<View
style={
Object {
"alignItems": "center",
"height": 16,
"justifyContent": "center",
"opacity": 1,
"transform": Array [
Object {
"rotate": "0deg",
},
],
"width": 16,
"position": "absolute",
}
}
>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "73.27536734311887deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.7,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "46.49829517703514deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.8008696779414123,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "25.743213498935145deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.8875624559768125,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "11.201058030774364deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.9510040862404615,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "2.731234791722257deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.9881665278710133,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"alignItems": "center",
"height": 16,
"justifyContent": "center",
"opacity": 1,
"transform": Array [
Object {
"rotate": "0deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 1,
},
],
"width": 4,
"width": 16,
}
}
/>
>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "73.27536734311887deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.7,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "46.49829517703514deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.8008696779414123,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "25.743213498935145deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.8875624559768125,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "11.201058030774364deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.9510040862404615,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "2.731234791722257deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 0.9881665278710133,
},
],
"width": 4,
}
}
/>
<View
style={
Object {
"backgroundColor": "rgb(135, 135, 135)",
"borderRadius": 2,
"height": 4,
"position": "absolute",
"transform": Array [
Object {
"rotate": "0deg",
},
Object {
"translateY": -6,
},
Object {
"scale": 1,
},
],
"width": 4,
}
}
/>
</View>
</View>
</View>
</View>
`;
exports[`Testing component button static button with icon only 1`] = `
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(18, 18, 18)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="base"
>
<Text />
<View>
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(18, 18, 18)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="base"
>
<View
style={
Array [
Object {
"opacity": 1,
},
Object {
"alignItems": "center",
"height": 16,
"justifyContent": "center",
"width": 16,
},
]
}
>
<RNSVGSvgView
align="xMidYMid"
bbHeight={16}
bbWidth={16}
className=""
color={4279374354}
focusable={false}
height={16}
meetOrSlice={0}
minX={0}
minY={0}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
style={
Array [
Object {
"backgroundColor": "transparent",
"borderWidth": 0,
},
Object {
"flex": 0,
"height": 16,
"width": 16,
},
]
}
tintColor={4279374354}
vbHeight={24}
vbWidth={24}
width={16}
>
<RNSVGGroup
propList={
Array [
"stroke",
"strokeWidth",
"strokeLinecap",
"strokeLinejoin",
]
}
stroke={
Array [
2,
]
}
strokeLinecap={1}
strokeLinejoin={1}
strokeWidth={2}
>
<RNSVGPath
d="M18 6L6 18M6 6l12 12"
/>
</RNSVGGroup>
</RNSVGSvgView>
</View>
</View>
</View>
`;
exports[`Testing component button static button with text only 1`] = `
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(18, 18, 18)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="base"
>
<Text
<View>
<View
accessible={true}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"color": "rgb(18, 18, 18)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 1,
}
Array [
Object {
"alignItems": "center",
"borderRadius": 100,
"flexDirection": "row",
"justifyContent": "center",
},
Object {
"backgroundColor": "rgb(250, 250, 250)",
"borderColor": "rgb(18, 18, 18)",
"borderWidth": 1,
"paddingHorizontal": 16,
"paddingVertical": 8,
},
undefined,
]
}
testID="text"
testID="base"
>
Test Button
</Text>
<Text
style={
Object {
"color": "rgb(18, 18, 18)",
"fontSize": 16,
"fontWeight": undefined,
"opacity": 1,
}
}
testID="text"
>
Test Button
</Text>
</View>
</View>
`;