test: add missing test to ListItem.test.js (callstack#1191)

pdcprod · Jul 8, 2019 · ae6258c · ae6258c
1 parent f61393d
commit ae6258c
Show file tree

Hide file tree

Showing 2 changed files with 241 additions and 1 deletion.
diff --git a/src/components/__tests__/ListItem.test.js b/src/components/__tests__/ListItem.test.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import ListItem from '../List/ListItem.tsx';
 import ListIcon from '../List/ListIcon.tsx';
+import Chip from '../Chip';
 
 it('renders list item with title and description', () => {
  const tree = renderer
@@ -64,3 +65,32 @@ it('renders list item with custom title and description styles', () => {
 
  expect(tree).toMatchSnapshot();
 });
+
+it('renders list item with custom description', () => {
+ const tree = renderer
+ .create(
+ <ListItem
+ title="List Item with custom description"
+ description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
+ <View>
+ <Text
+ numberOfLines={2}
+ ellipsizeMode={ellipsizeMode}
+ style={{ color: descriptionColor, fontSize }}
+ >
+ React Native Paper is a high-quality, standard-compliant Design
+ Design library that has you covered in all major use-cases.
+ </Text>
+ <View>
+ <Chip icon="picture-as-pdf" onPress={() => {}}>
+ DOCS.pdf
+ </Chip>
+ </View>
+ </View>
+ )}
+ />
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -1,5 +1,215 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders list item with custom description 1`] = `
+<View
+ accessible={true}
+ isTVSelectable={true}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Array [
+ false,
+ Array [
+ Object {
+ "padding": 8,
+ },
+ undefined,
+ ],
+ ]
+ }
+>
+ <View
+ style={
+ Object {
+ "flexDirection": "row",
+ }
+ }
+ >
+ <View
+ pointerEvents="none"
+ style={
+ Array [
+ Object {
+ "marginVertical": 6,
+ "paddingLeft": 8,
+ },
+ Object {
+ "flex": 1,
+ "justifyContent": "center",
+ },
+ ]
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "color": "#000000",
+ "fontFamily": "System",
+ "fontWeight": "400",
+ "textAlign": "left",
+ "writingDirection": "ltr",
+ },
+ Array [
+ Object {
+ "fontSize": 16,
+ },
+ Object {
+ "color": "rgba(0, 0, 0, 0.87)",
+ },
+ undefined,
+ ],
+ ]
+ }
+ >
+ List Item with custom description
+ </Text>
+ <View>
+ <Text
+ numberOfLines={2}
+ style={
+ Object {
+ "color": "rgba(0, 0, 0, 0.54)",
+ "fontSize": 14,
+ }
+ }
+ >
+ React Native Paper is a high-quality, standard-compliant Design Design library that has you covered in all major use-cases.
+ </Text>
+ <View>
+ <View
+ style={
+ Object {
+ "backgroundColor": "#ebebeb",
+ "borderColor": "#ebebeb",
+ "borderRadius": 16,
+ "borderStyle": "solid",
+ "borderWidth": 0.5,
+ "elevation": 0,
+ }
+ }
+ >
+ <View
+ accessibilityRole="button"
+ accessibilityStates={Array []}
+ accessible={true}
+ isTVSelectable={true}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Array [
+ Object {
+ "overflow": "hidden",
+ },
+ Object {
+ "borderRadius": 16,
+ },
+ ]
+ }
+ >
+ <View
+ style={
+ Object {
+ "alignItems": "center",
+ "flexDirection": "row",
+ "paddingHorizontal": 4,
+ }
+ }
+ >
+ <View
+ style={
+ Array [
+ Object {
+ "padding": 4,
+ },
+ null,
+ ]
+ }
+ >
+ <Text
+ accessibilityElementsHidden={true}
+ allowFontScaling={false}
+ importantForAccessibility="no-hide-descendants"
+ pointerEvents="none"
+ style={
+ Array [
+ Object {
+ "color": "rgba(0, 0, 0, 0.54)",
+ "fontSize": 18,
+ },
+ Array [
+ Object {
+ "transform": Array [
+ Object {
+ "scaleX": 1,
+ },
+ ],
+ },
+ Object {
+ "backgroundColor": "transparent",
+ },
+ ],
+ Object {
+ "fontFamily": "Material Icons",
+ "fontStyle": "normal",
+ "fontWeight": "normal",
+ },
+ Object {},
+ ]
+ }
+ >
+ 
+ </Text>
+ </View>
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "color": "#000000",
+ "fontFamily": "System",
+ "fontWeight": "400",
+ "textAlign": "left",
+ "writingDirection": "ltr",
+ },
+ Array [
+ Object {
+ "lineHeight": 24,
+ "marginVertical": 4,
+ "minHeight": 24,
+ "textAlignVertical": "center",
+ },
+ Object {
+ "color": "rgba(0, 0, 0, 0.87)",
+ "marginLeft": 4,
+ "marginRight": 8,
+ },
+ undefined,
+ ],
+ ]
+ }
+ >
+ DOCS.pdf
+ </Text>
+ </View>
+ </View>
+ </View>
+ </View>
+ </View>
+ </View>
+ </View>
+</View>
+`;
+
 exports[`renders list item with custom title and description styles 1`] = `
 <View
  accessible={true}