diff options
Diffstat (limited to '__tests__/view/shell/mobile')
8 files changed, 2641 insertions, 0 deletions
diff --git a/__tests__/view/shell/mobile/Composer.test.tsx b/__tests__/view/shell/mobile/Composer.test.tsx new file mode 100644 index 000000000..7b84cfd88 --- /dev/null +++ b/__tests__/view/shell/mobile/Composer.test.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import {Composer} from '../../../../src/view/shell/mobile/Composer' +import renderer from 'react-test-renderer' +// import {render} from '../../../../jest/test-utils' + +describe('Composer', () => { + const mockedProps = { + active: true, + winHeight: 844, + replyTo: { + author: {avatar: undefined, displayName: 'Alice', handle: 'alice.test'}, + cid: 'bafyreieucrv36ylxrut4dr4jj264q2jj2vt2vfvhjfchgw3vua4gksvzia', + text: 'Captain, maybe we ought to turn on the searchlights now. No… that’s just what they’ll be expecting us to do.', + uri: 'at://did:plc:v3xz273ea2dzjpu2szsjzfue/app.bsky.feed.post/3jkcir3fhqv2u', + }, + onPost: jest.fn(), + onClose: jest.fn(), + } + it('renders correctly', () => { + const tree = renderer.create(<Composer {...mockedProps} />).toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/__tests__/view/shell/mobile/Menu.test.tsx b/__tests__/view/shell/mobile/Menu.test.tsx new file mode 100644 index 000000000..5305bd77a --- /dev/null +++ b/__tests__/view/shell/mobile/Menu.test.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import {Menu} from '../../../../src/view/shell/mobile/Menu' +import renderer from 'react-test-renderer' +// import {render} from '../../../../jest/test-utils' + +describe('Menu', () => { + const mockedProps = { + visible: true, + onClose: jest.fn(), + } + it('renders correctly', () => { + const tree = renderer.create(<Menu {...mockedProps} />).toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/__tests__/view/shell/mobile/TabsSelector.test.tsx b/__tests__/view/shell/mobile/TabsSelector.test.tsx new file mode 100644 index 000000000..7908f442e --- /dev/null +++ b/__tests__/view/shell/mobile/TabsSelector.test.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import {Animated} from 'react-native' +import renderer from 'react-test-renderer' +import {TabsSelector} from '../../../../src/view/shell/mobile/TabsSelector' +// import {render} from '../../../../jest/test-utils' + +describe('TabsSelector', () => { + const mockedProps = { + active: true, + tabMenuInterp: new Animated.Value(0), + onClose: jest.fn(), + } + it('renders correctly', () => { + const tree = renderer.create(<TabsSelector {...mockedProps} />).toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap new file mode 100644 index 000000000..6ced9871b --- /dev/null +++ b/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap @@ -0,0 +1,659 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Composer renders correctly 1`] = ` +<View + collapsable={false} + style={ + Object { + "backgroundColor": "#fff", + "bottom": 0, + "paddingTop": 24, + "position": "absolute", + "top": 0, + "transform": Array [ + Object { + "translateY": 844, + }, + ], + "width": "100%", + } + } +> + <View + onLayout={[Function]} + style={ + Array [ + Object { + "backgroundColor": "#fff", + "flex": 1, + "flexDirection": "column", + "height": "100%", + "padding": 15, + "paddingBottom": 0, + }, + Object { + "paddingBottom": 0, + }, + ] + } + > + <RCTSafeAreaView + emulateUnlessSupported={true} + style={ + Object { + "flex": 1, + } + } + > + <View + style={ + Object { + "alignItems": "center", + "flexDirection": "row", + "height": 55, + "paddingBottom": 10, + "paddingHorizontal": 5, + } + } + > + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "opacity": 1, + } + } + > + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "color": "#0085ff", + }, + Object { + "fontSize": 18, + }, + ], + ] + } + > + Cancel + </Text> + </View> + <View + style={ + Object { + "flex": 1, + } + } + /> + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "opacity": 1, + } + } + > + <BVLinearGradient + colors={ + Array [ + 4292542719, + 4294901882, + ] + } + endPoint={ + Object { + "x": 1, + "y": 1, + } + } + locations={null} + startPoint={ + Object { + "x": 0, + "y": 0, + } + } + style={ + Object { + "borderRadius": 20, + "paddingHorizontal": 20, + "paddingVertical": 6, + } + } + > + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "color": "#ffffff", + }, + Object { + "fontSize": 16, + }, + Object { + "fontWeight": "bold", + }, + ], + ] + } + > + Reply + </Text> + </BVLinearGradient> + </View> + </View> + <RCTScrollView + style={ + Object { + "flex": 1, + } + } + > + <View> + <View + style={ + Object { + "borderTopColor": "#e4e2e2", + "borderTopWidth": 1, + "flexDirection": "row", + "paddingBottom": 16, + "paddingTop": 16, + } + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight={50} + bbWidth={50} + focusable={false} + height={50} + meetOrSlice={0} + minX={0} + minY={0} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "flex": 0, + "height": 50, + "width": 50, + }, + ] + } + vbHeight={100} + vbWidth={100} + width={50} + > + <RNSVGGroup> + <RNSVGDefs> + <RNSVGLinearGradient + gradient={ + Array [ + 0, + -16742913, + 1, + -14631929, + ] + } + gradientTransform={null} + gradientUnits={0} + name="grad" + x1="0" + x2="1" + y1="0" + y2="1" + /> + </RNSVGDefs> + <RNSVGCircle + cx="50" + cy="50" + fill={ + Array [ + 1, + "grad", + ] + } + propList={ + Array [ + "fill", + ] + } + r="50" + /> + <RNSVGText + content={null} + dx={Array []} + dy={Array []} + fill={4294967295} + font={ + Object { + "fontSize": "50", + "fontWeight": "bold", + "textAnchor": "middle", + } + } + propList={ + Array [ + "fill", + ] + } + rotate={Array []} + x={ + Array [ + "50", + ] + } + y={ + Array [ + "67", + ] + } + > + <RNSVGTSpan + content="A" + dx={Array []} + dy={Array []} + font={Object {}} + rotate={Array []} + x={Array []} + y={Array []} + /> + </RNSVGText> + </RNSVGGroup> + </RNSVGSvgView> + <View + style={ + Object { + "flex": 1, + "paddingLeft": 13, + "paddingRight": 8, + } + } + > + <Text + onLongPress={[Function]} + onPress={[Function]} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "fontSize": 16, + }, + Object { + "fontWeight": "bold", + }, + Object { + "color": "#000000", + }, + ], + ] + } + > + Alice + </Text> + <Text + numberOfLines={6} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "fontSize": 16, + }, + Object { + "lineHeight": 20.8, + }, + Object { + "color": "#000000", + }, + ], + ] + } + > + Captain, maybe we ought to turn on the searchlights now. No… that’s just what they’ll be expecting us to do. + </Text> + </View> + </View> + <View + style={ + Array [ + Object { + "borderTopColor": "#e4e2e2", + "borderTopWidth": 1, + "flexDirection": "row", + "paddingTop": 16, + }, + Object { + "flex": 1, + }, + ] + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight={50} + bbWidth={50} + focusable={false} + height={50} + meetOrSlice={0} + minX={0} + minY={0} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "flex": 0, + "height": 50, + "width": 50, + }, + ] + } + vbHeight={100} + vbWidth={100} + width={50} + > + <RNSVGGroup> + <RNSVGDefs> + <RNSVGLinearGradient + gradient={ + Array [ + 0, + -1292135, + 1, + -2424577, + ] + } + gradientTransform={null} + gradientUnits={0} + name="grad" + x1="0" + x2="1" + y1="0" + y2="1" + /> + </RNSVGDefs> + <RNSVGCircle + cx="50" + cy="50" + fill={ + Array [ + 1, + "grad", + ] + } + propList={ + Array [ + "fill", + ] + } + r="50" + /> + <RNSVGText + content={null} + dx={Array []} + dy={Array []} + fill={4294967295} + font={ + Object { + "fontSize": "50", + "fontWeight": "bold", + "textAnchor": "middle", + } + } + propList={ + Array [ + "fill", + ] + } + rotate={Array []} + x={ + Array [ + "50", + ] + } + y={ + Array [ + "67", + ] + } + > + <RNSVGTSpan + content="X" + dx={Array []} + dy={Array []} + font={Object {}} + rotate={Array []} + x={Array []} + y={Array []} + /> + </RNSVGText> + </RNSVGGroup> + </RNSVGSvgView> + <TextInput + multiline={true} + onChangeText={[Function]} + placeholder="Write your reply" + placeholderTextColor="#968d8d" + scrollEnabled={true} + style={ + Object { + "alignSelf": "flex-start", + "color": "#000000", + "flex": 1, + "fontSize": 18, + "marginLeft": 8, + "padding": 5, + } + } + /> + </View> + </View> + </RCTScrollView> + <View + style={ + Object { + "alignItems": "center", + "backgroundColor": "#ffffff", + "borderTopColor": "#e4e2e2", + "borderTopWidth": 1, + "flexDirection": "row", + "paddingRight": 5, + "paddingVertical": 10, + } + } + > + <View + accessible={true} + collapsable={false} + focusable={true} + hitSlop={ + Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + } + } + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "opacity": 1, + "paddingLeft": 5, + } + } + > + < + icon={ + Array [ + "far", + "image", + ] + } + size={24} + style={ + Object { + "color": "#0085ff", + } + } + /> + </View> + <View + style={ + Object { + "flex": 1, + } + } + /> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "marginRight": 10, + }, + Object { + "color": undefined, + }, + ], + ] + } + > + 256 + </Text> + <View> + <View + indeterminateAnimationDuration={1000} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "overflow": "hidden", + }, + undefined, + ] + } + > + <RNSVGSvgView + bbHeight={30} + bbWidth={30} + collapsable={false} + focusable={false} + height={30} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object {}, + Object { + "flex": 0, + "height": 30, + "width": 30, + }, + ] + } + width={30} + > + <RNSVGGroup> + <RNSVGPath + d="M15 2.5 + A12.5 12.5 0 0 1 15 2.5" + propList={ + Array [ + "stroke", + "strokeWidth", + "strokeLinecap", + ] + } + stroke={4278221567} + strokeLinecap={0} + strokeWidth={3} + /> + <RNSVGPath + d="M15 0.5 + a14.5 14.5 0 0 1 0 29 + a14.5 14.5 0 0 1 0 -29" + propList={ + Array [ + "stroke", + "strokeWidth", + "strokeLinecap", + ] + } + stroke={4293190370} + strokeLinecap={0} + strokeWidth={1} + /> + </RNSVGGroup> + </RNSVGSvgView> + </View> + </View> + </View> + <View + collapsable={false} + style={ + Object { + "backgroundColor": "#ffffff", + "borderTopColor": "#e4e2e2", + "borderTopWidth": 1, + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 1334, + } + } + /> + </RCTSafeAreaView> + </View> +</View> +`; diff --git a/__tests__/view/shell/mobile/__snapshots__/Menu.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/Menu.test.tsx.snap new file mode 100644 index 000000000..78c34b967 --- /dev/null +++ b/__tests__/view/shell/mobile/__snapshots__/Menu.test.tsx.snap @@ -0,0 +1,837 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Menu renders correctly 1`] = ` +<View + style={ + Object { + "backgroundColor": "#ffffff", + "flex": 1, + } + } +> + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "alignItems": "center", + "flexDirection": "row", + "margin": 10, + "marginBottom": 6, + "opacity": 1, + } + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight={60} + bbWidth={60} + focusable={false} + height={60} + meetOrSlice={0} + minX={0} + minY={0} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "flex": 0, + "height": 60, + "width": 60, + }, + ] + } + vbHeight={100} + vbWidth={100} + width={60} + > + <RNSVGGroup> + <RNSVGDefs> + <RNSVGLinearGradient + gradient={ + Array [ + 0, + -1292135, + 1, + -2424577, + ] + } + gradientTransform={null} + gradientUnits={0} + name="grad" + x1="0" + x2="1" + y1="0" + y2="1" + /> + </RNSVGDefs> + <RNSVGCircle + cx="50" + cy="50" + fill={ + Array [ + 1, + "grad", + ] + } + propList={ + Array [ + "fill", + ] + } + r="50" + /> + <RNSVGText + content={null} + dx={Array []} + dy={Array []} + fill={4294967295} + font={ + Object { + "fontSize": "50", + "fontWeight": "bold", + "textAnchor": "middle", + } + } + propList={ + Array [ + "fill", + ] + } + rotate={Array []} + x={ + Array [ + "50", + ] + } + y={ + Array [ + "67", + ] + } + > + <RNSVGTSpan + content="X" + dx={Array []} + dy={Array []} + font={Object {}} + rotate={Array []} + x={Array []} + y={Array []} + /> + </RNSVGText> + </RNSVGGroup> + </RNSVGSvgView> + <View + style={ + Object { + "flex": 1, + } + } + > + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#2D2626", + "fontSize": 24, + "fontWeight": "bold", + "marginLeft": 12, + }, + ] + } + > + + </Text> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#423737", + "fontSize": 18, + "marginLeft": 12, + }, + ] + } + > + + </Text> + </View> + </View> + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "backgroundColor": "#f8f3f3", + "borderRadius": 8, + "flexDirection": "row", + "margin": 10, + "marginBottom": 0, + "opacity": 1, + "paddingHorizontal": 12, + "paddingVertical": 10, + } + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight={25} + bbWidth={25} + color={4284765268} + fill="none" + focusable={false} + height={25} + meetOrSlice={0} + minX={0} + minY={0} + stroke="currentColor" + strokeWidth={2} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#645454", + }, + Object { + "flex": 0, + "height": 25, + "width": 25, + }, + ] + } + tintColor={4284765268} + vbHeight={24} + vbWidth={24} + width={25} + > + <RNSVGGroup + fill={null} + propList={ + Array [ + "fill", + "stroke", + "strokeWidth", + ] + } + stroke={ + Array [ + 2, + ] + } + strokeWidth={2} + > + <RNSVGPath + d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" + propList={ + Array [ + "strokeLinecap", + "strokeLinejoin", + ] + } + strokeLinecap={1} + strokeLinejoin={1} + /> + </RNSVGGroup> + </RNSVGSvgView> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#423737", + "fontSize": 19, + "marginLeft": 8, + }, + ] + } + > + Search + </Text> + </View> + <View + style={ + Object { + "borderBottomColor": "#f8f3f3", + "borderBottomWidth": 1, + "paddingBottom": 10, + "paddingHorizontal": 10, + "paddingTop": 10, + } + } + > + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "alignItems": "center", + "flexDirection": "row", + "opacity": 1, + "paddingHorizontal": 6, + "paddingVertical": 8, + } + } + > + <View + style={ + Array [ + Object { + "alignItems": "center", + "height": 36, + "justifyContent": "center", + "marginRight": 12, + "width": 36, + }, + ] + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight="26" + bbWidth="26" + color={4282529591} + focusable={false} + height="26" + meetOrSlice={0} + minX={0} + minY={0} + stroke="currentColor" + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#423737", + }, + Object { + "flex": 0, + "height": 26, + "width": 26, + }, + ] + } + tintColor={4282529591} + vbHeight={48} + vbWidth={48} + width="26" + > + <RNSVGGroup + propList={ + Array [ + "stroke", + ] + } + stroke={ + Array [ + 2, + ] + } + > + <RNSVGPath + d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z" + propList={ + Array [ + "strokeWidth", + ] + } + strokeWidth={4} + /> + </RNSVGGroup> + </RNSVGSvgView> + </View> + <Text + numberOfLines={1} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "color": "#2D2626", + "fontSize": 19, + }, + undefined, + ], + ] + } + > + Home + </Text> + </View> + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "alignItems": "center", + "flexDirection": "row", + "opacity": 1, + "paddingHorizontal": 6, + "paddingVertical": 8, + } + } + > + <View + style={ + Array [ + Object { + "alignItems": "center", + "height": 36, + "justifyContent": "center", + "marginRight": 12, + "width": 36, + }, + ] + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight="28" + bbWidth="28" + color={4282529591} + fill="none" + focusable={false} + height="28" + meetOrSlice={0} + minX={0} + minY={0} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#423737", + }, + Object { + "flex": 0, + "height": 28, + "width": 28, + }, + ] + } + tintColor={4282529591} + vbHeight={24} + vbWidth={24} + width="28" + > + <RNSVGGroup + fill={null} + propList={ + Array [ + "fill", + ] + } + > + <RNSVGPath + d="M0 0h24v24H0z" + fill={null} + propList={ + Array [ + "fill", + ] + } + /> + <RNSVGPath + d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z" + fill={ + Array [ + 2, + ] + } + propList={ + Array [ + "fill", + ] + } + /> + </RNSVGGroup> + </RNSVGSvgView> + </View> + <Text + numberOfLines={1} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "color": "#2D2626", + "fontSize": 19, + }, + undefined, + ], + ] + } + > + Notifications + </Text> + </View> + </View> + <View + style={ + Object { + "borderBottomColor": "#f8f3f3", + "borderBottomWidth": 1, + "paddingBottom": 10, + "paddingHorizontal": 10, + "paddingTop": 10, + } + } + > + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "fontSize": 16, + "fontWeight": "bold", + "paddingHorizontal": 4, + "paddingVertical": 8, + }, + ] + } + > + Scenes + </Text> + </View> + <View + style={ + Object { + "borderBottomColor": "#f8f3f3", + "borderBottomWidth": 1, + "paddingBottom": 10, + "paddingHorizontal": 10, + "paddingTop": 10, + } + } + > + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "alignItems": "center", + "flexDirection": "row", + "opacity": 1, + "paddingHorizontal": 6, + "paddingVertical": 8, + } + } + > + <View + style={ + Array [ + Object { + "alignItems": "center", + "height": 36, + "justifyContent": "center", + "marginRight": 12, + "width": 36, + }, + ] + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight="30" + bbWidth="30" + color={4282529591} + fill="none" + focusable={false} + height="30" + meetOrSlice={0} + minX={0} + minY={0} + stroke="currentColor" + strokeWidth={2} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#423737", + }, + Object { + "flex": 0, + "height": 30, + "width": 30, + }, + ] + } + tintColor={4282529591} + vbHeight={24} + vbWidth={24} + width="30" + > + <RNSVGGroup + fill={null} + propList={ + Array [ + "fill", + "stroke", + "strokeWidth", + ] + } + stroke={ + Array [ + 2, + ] + } + strokeWidth={2} + > + <RNSVGPath + d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" + propList={ + Array [ + "strokeLinecap", + "strokeLinejoin", + ] + } + strokeLinecap={1} + strokeLinejoin={1} + /> + </RNSVGGroup> + </RNSVGSvgView> + </View> + <Text + numberOfLines={1} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "color": "#2D2626", + "fontSize": 19, + }, + undefined, + ], + ] + } + > + Create a scene + </Text> + </View> + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "alignItems": "center", + "flexDirection": "row", + "opacity": 1, + "paddingHorizontal": 6, + "paddingVertical": 8, + } + } + > + <View + style={ + Array [ + Object { + "alignItems": "center", + "height": 36, + "justifyContent": "center", + "marginRight": 12, + "width": 36, + }, + ] + } + > + <RNSVGSvgView + align="xMidYMid" + bbHeight="30" + bbWidth="30" + color={4282529591} + fill="none" + focusable={false} + height="30" + meetOrSlice={0} + minX={0} + minY={0} + stroke="currentColor" + strokeWidth={2} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#423737", + }, + Object { + "flex": 0, + "height": 30, + "width": 30, + }, + ] + } + tintColor={4282529591} + vbHeight={24} + vbWidth={24} + width="30" + > + <RNSVGGroup + fill={null} + propList={ + Array [ + "fill", + "stroke", + "strokeWidth", + ] + } + stroke={ + Array [ + 2, + ] + } + strokeWidth={2} + > + <RNSVGPath + d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" + propList={ + Array [ + "strokeLinecap", + "strokeLinejoin", + ] + } + strokeLinecap={1} + strokeLinejoin={1} + /> + <RNSVGPath + d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" + propList={ + Array [ + "strokeLinecap", + "strokeLinejoin", + ] + } + strokeLinecap={1} + strokeLinejoin={1} + /> + </RNSVGGroup> + </RNSVGSvgView> + </View> + <Text + numberOfLines={1} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "color": "#2D2626", + "fontSize": 19, + }, + undefined, + ], + ] + } + > + Settings + </Text> + </View> + </View> + <View + style={ + Object { + "paddingHorizontal": 14, + "paddingVertical": 18, + } + } + > + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#968d8d", + }, + ] + } + > + Build version + ( + ) + </Text> + </View> +</View> +`; diff --git a/__tests__/view/shell/mobile/__snapshots__/TabsSelector.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/TabsSelector.test.tsx.snap new file mode 100644 index 000000000..03e0636de --- /dev/null +++ b/__tests__/view/shell/mobile/__snapshots__/TabsSelector.test.tsx.snap @@ -0,0 +1,651 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TabsSelector renders correctly 1`] = ` +<View + collapsable={false} + style={ + Object { + "backgroundColor": "#fff", + "borderTopColor": "#e4e2e2", + "borderTopWidth": 1, + "bottom": 55, + "height": 320, + "opacity": 1, + "position": "absolute", + "transform": Array [ + Object { + "translateY": 320, + }, + ], + "width": "100%", + } + } +> + <View + onLayout={[Function]} + > + <View + style={ + Array [ + Object { + "padding": 10, + }, + Object { + "borderBottomColor": "#e4e2e2", + "borderBottomWidth": 1, + }, + ] + } + > + <View + style={ + Object { + "flexDirection": "row", + "paddingTop": 2, + } + } + > + <View + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Array [ + Object { + "alignItems": "center", + "backgroundColor": "#f8f3f3", + "borderRadius": 4, + "flex": 1, + "flexDirection": "row", + "justifyContent": "center", + "marginRight": 5, + "paddingLeft": 12, + "paddingRight": 16, + "paddingVertical": 10, + }, + ] + } + > + <View + style={ + Object { + "marginRight": 8, + } + } + > + < + icon="share" + size={16} + /> + </View> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "fontSize": 16, + "fontWeight": "500", + }, + ] + } + > + Share + </Text> + </View> + <View + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Array [ + Object { + "alignItems": "center", + "backgroundColor": "#f8f3f3", + "borderRadius": 4, + "flex": 1, + "flexDirection": "row", + "justifyContent": "center", + "marginRight": 5, + "paddingLeft": 12, + "paddingRight": 16, + "paddingVertical": 10, + }, + ] + } + > + <View + style={ + Object { + "marginRight": 8, + } + } + > + < + icon={ + Array [ + "far", + "clone", + ] + } + size={16} + /> + </View> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "fontSize": 16, + "fontWeight": "500", + }, + ] + } + > + Clone tab + </Text> + </View> + <View + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Array [ + Object { + "alignItems": "center", + "backgroundColor": "#f8f3f3", + "borderRadius": 4, + "flex": 1, + "flexDirection": "row", + "justifyContent": "center", + "marginRight": 5, + "paddingLeft": 12, + "paddingRight": 16, + "paddingVertical": 10, + }, + ] + } + > + <View + style={ + Object { + "marginRight": 8, + } + } + > + < + icon="plus" + size={16} + /> + </View> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "fontSize": 16, + "fontWeight": "500", + }, + ] + } + > + New tab + </Text> + </View> + </View> + </View> + <View + style={ + Array [ + Object { + "padding": 10, + }, + Object { + "borderBottomColor": "#e4e2e2", + "borderBottomWidth": 1, + }, + Object { + "backgroundColor": "#f8f3f3", + }, + ] + } + > + <RCTScrollView + style={ + Object { + "height": 240, + } + } + > + <View> + <View + collapsable={false} + forwardedRef={[Function]} + handlerTag={1} + handlerType="PanGestureHandler" + onGestureHandlerEvent={[Function]} + onGestureHandlerStateChange={[Function]} + onLayout={[Function]} + style={ + Object { + "overflow": "hidden", + } + } + > + <View + collapsable={false} + style={ + Object { + "bottom": 0, + "flexDirection": "row", + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + "transform": Array [ + Object { + "translateX": -10000, + }, + ], + } + } + > + <View + style={ + Array [ + Object { + "padding": 2, + }, + ] + } + /> + <View + onLayout={[Function]} + /> + </View> + <View + collapsable={false} + style={ + Object { + "bottom": 0, + "flexDirection": "row-reverse", + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + "transform": Array [ + Object { + "translateX": -10000, + }, + ], + } + } + > + <View + style={ + Array [ + Object { + "padding": 2, + }, + ] + } + /> + <View + onLayout={[Function]} + /> + </View> + <View + collapsable={false} + forwardedRef={[Function]} + handlerTag={2} + handlerType="TapGestureHandler" + onGestureHandlerEvent={[Function]} + onGestureHandlerStateChange={[Function]} + pointerEvents="auto" + style={ + Object { + "transform": Array [ + Object { + "translateX": -0, + }, + ], + } + } + > + <View + collapsable={false} + style={ + Object { + "height": 46, + "overflow": "hidden", + } + } + > + <View + collapsable={false} + forwardedRef={[Function]} + style={ + Object { + "alignItems": "center", + "backgroundColor": "#ffffff", + "borderColor": "#000000", + "borderRadius": 4, + "borderWidth": 1, + "flexDirection": "row", + "height": 42, + } + } + > + <View + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "alignItems": "center", + "flex": 1, + "flexDirection": "row", + "paddingLeft": 12, + "paddingVertical": 12, + } + } + > + <View + style={Object {}} + > + < + icon="house" + size={20} + /> + </View> + <Text + ellipsizeMode="tail" + numberOfLines={1} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "flex": 1, + "fontSize": 16, + "paddingHorizontal": 10, + }, + Object { + "fontWeight": "500", + }, + ], + ] + } + suppressHighlighting={true} + > + / + </Text> + </View> + <View + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "paddingRight": 16, + "paddingVertical": 16, + } + } + > + < + icon="x" + size={14} + style={ + Object { + "color": "#655", + } + } + /> + </View> + </View> + </View> + </View> + </View> + <View + collapsable={false} + forwardedRef={[Function]} + handlerTag={3} + handlerType="PanGestureHandler" + onGestureHandlerEvent={[Function]} + onGestureHandlerStateChange={[Function]} + onLayout={[Function]} + style={ + Object { + "overflow": "hidden", + } + } + > + <View + collapsable={false} + style={ + Object { + "bottom": 0, + "flexDirection": "row", + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + "transform": Array [ + Object { + "translateX": -10000, + }, + ], + } + } + > + <View + style={ + Array [ + Object { + "padding": 2, + }, + ] + } + /> + <View + onLayout={[Function]} + /> + </View> + <View + collapsable={false} + style={ + Object { + "bottom": 0, + "flexDirection": "row-reverse", + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + "transform": Array [ + Object { + "translateX": -10000, + }, + ], + } + } + > + <View + style={ + Array [ + Object { + "padding": 2, + }, + ] + } + /> + <View + onLayout={[Function]} + /> + </View> + <View + collapsable={false} + forwardedRef={[Function]} + handlerTag={4} + handlerType="TapGestureHandler" + onGestureHandlerEvent={[Function]} + onGestureHandlerStateChange={[Function]} + pointerEvents="auto" + style={ + Object { + "transform": Array [ + Object { + "translateX": -0, + }, + ], + } + } + > + <View + collapsable={false} + style={ + Object { + "height": 46, + "overflow": "hidden", + } + } + > + <View + collapsable={false} + forwardedRef={[Function]} + style={ + Object { + "alignItems": "center", + "backgroundColor": "#f8f3f3", + "borderColor": "#968d8d", + "borderRadius": 4, + "borderWidth": 1, + "flexDirection": "row", + "height": 42, + } + } + > + <View + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "alignItems": "center", + "flex": 1, + "flexDirection": "row", + "paddingLeft": 12, + "paddingVertical": 12, + } + } + > + <View + style={Object {}} + > + < + icon="bell" + size={20} + /> + </View> + <Text + ellipsizeMode="tail" + numberOfLines={1} + style={ + Array [ + Object { + "color": "#000000", + }, + Array [ + Object { + "flex": 1, + "fontSize": 16, + "paddingHorizontal": 10, + }, + false, + ], + ] + } + suppressHighlighting={true} + > + /notifications + </Text> + </View> + <View + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "paddingRight": 16, + "paddingVertical": 16, + } + } + > + < + icon="x" + size={14} + style={ + Object { + "color": "#655", + } + } + /> + </View> + </View> + </View> + </View> + </View> + </View> + </RCTScrollView> + </View> + </View> +</View> +`; diff --git a/__tests__/view/shell/mobile/__snapshots__/index.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/index.test.tsx.snap new file mode 100644 index 000000000..793668b73 --- /dev/null +++ b/__tests__/view/shell/mobile/__snapshots__/index.test.tsx.snap @@ -0,0 +1,421 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MobileShell renders correctly 1`] = ` +<BVLinearGradient + colors={ + Array [ + 4278222079, + 4278238463, + ] + } + endPoint={ + Object { + "x": 0, + "y": 1, + } + } + locations={null} + startPoint={ + Object { + "x": 0, + "y": 0.8, + } + } + style={ + Object { + "flex": 1, + "height": "100%", + } + } +> + <RCTSafeAreaView + emulateUnlessSupported={true} + style={ + Object { + "flex": 1, + } + } + > + <View + style={ + Object { + "flex": 1, + } + } + > + <View + style={ + Object { + "flex": 2, + "justifyContent": "center", + } + } + > + <View + style={ + Object { + "flexDirection": "row", + "justifyContent": "center", + } + } + > + <RNSVGSvgView + bbHeight="100" + bbWidth="100" + focusable={false} + height="100" + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "flex": 0, + "height": 100, + "width": 100, + }, + ] + } + width="100" + > + <RNSVGGroup> + <RNSVGCircle + cx="50" + cy="50" + fill={null} + propList={ + Array [ + "fill", + "stroke", + "strokeWidth", + ] + } + r="46" + stroke={4294967295} + strokeWidth={2} + /> + <RNSVGLine + propList={ + Array [ + "stroke", + "strokeWidth", + ] + } + stroke={4294967295} + strokeWidth={1} + x1="30" + x2="30" + y1="0" + y2="100" + /> + <RNSVGLine + propList={ + Array [ + "stroke", + "strokeWidth", + ] + } + stroke={4294967295} + strokeWidth={1} + x1="74" + x2="74" + y1="0" + y2="100" + /> + <RNSVGLine + propList={ + Array [ + "stroke", + "strokeWidth", + ] + } + stroke={4294967295} + strokeWidth={1} + x1="0" + x2="100" + y1="22" + y2="22" + /> + <RNSVGLine + propList={ + Array [ + "stroke", + "strokeWidth", + ] + } + stroke={4294967295} + strokeWidth={1} + x1="0" + x2="100" + y1="74" + y2="74" + /> + <RNSVGText + content={null} + dx={Array []} + dy={Array []} + fill={null} + font={ + Object { + "fontSize": "60", + "fontWeight": "bold", + "textAnchor": "middle", + } + } + propList={ + Array [ + "fill", + "stroke", + "strokeWidth", + ] + } + rotate={Array []} + stroke={4294967295} + strokeWidth={2} + x={ + Array [ + "52", + ] + } + y={ + Array [ + "70", + ] + } + > + <RNSVGTSpan + content="B" + dx={Array []} + dy={Array []} + font={Object {}} + rotate={Array []} + x={Array []} + y={Array []} + /> + </RNSVGText> + </RNSVGGroup> + </RNSVGSvgView> + </View> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#ffffff", + "fontSize": 68, + "fontWeight": "bold", + "textAlign": "center", + }, + ] + } + > + Bluesky + </Text> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#ffffff", + "fontSize": 18, + "textAlign": "center", + }, + ] + } + > + [ private beta ] + </Text> + </View> + <View + style={ + Object { + "flex": 1, + } + } + > + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "backgroundColor": "#0085ff", + "borderColor": "#ffffff", + "borderRadius": 10, + "borderWidth": 1, + "marginBottom": 20, + "marginHorizontal": 20, + "opacity": 1, + "paddingVertical": 16, + } + } + > + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#ffffff", + "fontSize": 18, + "fontWeight": "bold", + "textAlign": "center", + }, + ] + } + > + Create a new account + </Text> + </View> + <View + style={ + Object { + "marginBottom": 20, + } + } + > + <RNSVGSvgView + bbHeight="1" + bbWidth={750} + focusable={false} + height="1" + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "position": "absolute", + "top": 10, + }, + Object { + "flex": 0, + "height": 1, + "width": 750, + }, + ] + } + width={750} + > + <RNSVGGroup> + <RNSVGLine + propList={ + Array [ + "stroke", + "strokeWidth", + ] + } + stroke={4294967295} + strokeWidth="1" + x1="30" + x2={355} + y1="0" + y2="0" + /> + <RNSVGLine + propList={ + Array [ + "stroke", + "strokeWidth", + ] + } + stroke={4294967295} + strokeWidth="1" + x1={395} + x2={720} + y1="0" + y2="0" + /> + </RNSVGGroup> + </RNSVGSvgView> + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#ffffff", + "fontSize": 16, + "textAlign": "center", + }, + ] + } + > + or + </Text> + </View> + <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + Object { + "backgroundColor": "#0085ff", + "borderColor": "#ffffff", + "borderRadius": 10, + "borderWidth": 1, + "marginBottom": 20, + "marginHorizontal": 20, + "opacity": 1, + "paddingVertical": 16, + } + } + > + <Text + style={ + Array [ + Object { + "color": "#000000", + }, + Object { + "color": "#ffffff", + "fontSize": 18, + "fontWeight": "bold", + "textAlign": "center", + }, + ] + } + > + Sign in + </Text> + </View> + </View> + </View> + </RCTSafeAreaView> + <View + enablePanDownToClose={true} + index={-1} + keyboardBehavior="fillParent" + onChange={[Function]} + snapPoints={ + Array [ + "10%", + ] + } + > + <View /> + </View> +</BVLinearGradient> +`; diff --git a/__tests__/view/shell/mobile/index.test.tsx b/__tests__/view/shell/mobile/index.test.tsx new file mode 100644 index 000000000..96f161260 --- /dev/null +++ b/__tests__/view/shell/mobile/index.test.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import {MobileShell} from '../../../../src/view/shell/mobile' +import renderer from 'react-test-renderer' +import {SafeAreaProvider} from 'react-native-safe-area-context' +// import {render} from '../../../../jest/test-utils' + +describe('MobileShell', () => { + it('renders correctly', () => { + const tree = renderer + .create( + <SafeAreaProvider> + <MobileShell /> + </SafeAreaProvider>, + ) + .toJSON() + expect(tree).toMatchSnapshot() + }) +}) |