sriram10/react-native-material-textfield-new

View on GitHub
src/components/field-filled/__snapshots__/test.js.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders 1`] = `
<View
  onResponderRelease={[Function]}
  onStartShouldSetResponder={[Function]}
  pointerEvents="auto"
>
  <View
    style={
      Object {
        "alignItems": "flex-end",
        "backgroundColor": "rgb(204, 204, 204)",
        "borderTopLeftRadius": 4,
        "borderTopRightRadius": 4,
        "flexDirection": "row",
        "height": 56,
        "paddingBottom": 8,
        "paddingLeft": 12,
        "paddingRight": 12,
        "paddingTop": 8,
      }
    }
  >
    <View
      pointerEvents="none"
      style={
        Object {
          "bottom": 0,
          "left": 0,
          "overflow": "hidden",
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <View
        style={
          Object {
            "borderColor": "rgba(0, 0, 0, 0.38)",
            "borderStyle": "solid",
            "borderWidth": 0.5,
            "bottom": 0,
            "left": -3,
            "position": "absolute",
            "right": -3,
            "top": -3,
          }
        }
      />
    </View>
    <View
      style={
        Object {
          "alignSelf": "stretch",
          "flex": 1,
        }
      }
    >
      <View
        style={
          Object {
            "left": "-100%",
            "paddingLeft": "50%",
            "position": "absolute",
            "top": 0,
            "transform": Array [
              Object {
                "scale": 1,
              },
              Object {
                "translateY": 10,
              },
              Object {
                "translateX": 0,
              },
            ],
            "width": "200%",
          }
        }
      >
        <Text
          numberOfLines={1}
          style={
            Object {
              "color": "rgba(0, 0, 0, 0.38)",
              "fontSize": 16,
              "includeFontPadding": false,
              "lineHeight": 16,
              "textAlign": "left",
              "textAlignVertical": "top",
            }
          }
        >
          test
        </Text>
      </View>
      <View
        style={
          Object {
            "alignItems": "flex-end",
            "flex": 1,
            "flexDirection": "row",
          }
        }
      >
        <TextInput
          allowFontScaling={true}
          autoCapitalize="sentences"
          disableFullscreenUI={true}
          editable={true}
          onBlur={[Function]}
          onChange={[Function]}
          onChangeText={[Function]}
          onContentSizeChange={[Function]}
          onFocus={[Function]}
          rejectResponderTermination={true}
          selectionColor="rgb(0, 145, 234)"
          style={
            Array [
              Object {
                "flex": 1,
                "includeFontPadding": false,
                "margin": 0,
                "padding": 0,
                "paddingTop": 0,
                "textAlign": "left",
                "textAlignVertical": "top",
                "top": 2,
              },
              Object {
                "color": "rgba(0, 0, 0, .87)",
                "fontSize": 16,
                "height": 24,
              },
              undefined,
            ]
          }
          underlineColorAndroid="transparent"
          value=""
        />
      </View>
    </View>
  </View>
  <View
    style={
      Array [
        Object {
          "alignItems": "flex-start",
          "flexDirection": "row",
          "justifyContent": "flex-end",
          "minHeight": 8,
        },
        Object {
          "paddingLeft": 12,
          "paddingRight": 12,
        },
      ]
    }
  />
</View>
`;

exports[`renders accessory 1`] = `
<View
  onResponderRelease={[Function]}
  onStartShouldSetResponder={[Function]}
  pointerEvents="auto"
>
  <View
    style={
      Object {
        "alignItems": "flex-end",
        "backgroundColor": "rgb(204, 204, 204)",
        "borderTopLeftRadius": 4,
        "borderTopRightRadius": 4,
        "flexDirection": "row",
        "height": 56,
        "paddingBottom": 8,
        "paddingLeft": 12,
        "paddingRight": 12,
        "paddingTop": 8,
      }
    }
  >
    <View
      pointerEvents="none"
      style={
        Object {
          "bottom": 0,
          "left": 0,
          "overflow": "hidden",
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <View
        style={
          Object {
            "borderColor": "rgba(0, 0, 0, 0.38)",
            "borderStyle": "solid",
            "borderWidth": 0.5,
            "bottom": 0,
            "left": -3,
            "position": "absolute",
            "right": -3,
            "top": -3,
          }
        }
      />
    </View>
    <Image />
    <View
      style={
        Object {
          "alignSelf": "stretch",
          "flex": 1,
        }
      }
    >
      <View
        style={
          Object {
            "left": "-100%",
            "paddingLeft": "50%",
            "position": "absolute",
            "top": 0,
            "transform": Array [
              Object {
                "scale": 1,
              },
              Object {
                "translateY": 10,
              },
              Object {
                "translateX": 0,
              },
            ],
            "width": "200%",
          }
        }
      >
        <Text
          numberOfLines={1}
          style={
            Object {
              "color": "rgba(0, 0, 0, 0.38)",
              "fontSize": 16,
              "includeFontPadding": false,
              "lineHeight": 16,
              "textAlign": "left",
              "textAlignVertical": "top",
            }
          }
        >
          test
        </Text>
      </View>
      <View
        style={
          Object {
            "alignItems": "flex-end",
            "flex": 1,
            "flexDirection": "row",
          }
        }
      >
        <TextInput
          allowFontScaling={true}
          autoCapitalize="sentences"
          disableFullscreenUI={true}
          editable={true}
          onBlur={[Function]}
          onChange={[Function]}
          onChangeText={[Function]}
          onContentSizeChange={[Function]}
          onFocus={[Function]}
          rejectResponderTermination={true}
          selectionColor="rgb(0, 145, 234)"
          style={
            Array [
              Object {
                "flex": 1,
                "includeFontPadding": false,
                "margin": 0,
                "padding": 0,
                "paddingTop": 0,
                "textAlign": "left",
                "textAlignVertical": "top",
                "top": 2,
              },
              Object {
                "color": "rgba(0, 0, 0, .87)",
                "fontSize": 16,
                "height": 24,
              },
              undefined,
            ]
          }
          underlineColorAndroid="transparent"
          value=""
        />
      </View>
    </View>
  </View>
  <View
    style={
      Array [
        Object {
          "alignItems": "flex-start",
          "flexDirection": "row",
          "justifyContent": "flex-end",
          "minHeight": 8,
        },
        Object {
          "paddingLeft": 12,
          "paddingRight": 12,
        },
      ]
    }
  />
</View>
`;

exports[`renders counter 1`] = `
<View
  onResponderRelease={[Function]}
  onStartShouldSetResponder={[Function]}
  pointerEvents="auto"
>
  <View
    style={
      Object {
        "alignItems": "flex-end",
        "backgroundColor": "rgb(204, 204, 204)",
        "borderTopLeftRadius": 4,
        "borderTopRightRadius": 4,
        "flexDirection": "row",
        "height": 56,
        "paddingBottom": 8,
        "paddingLeft": 12,
        "paddingRight": 12,
        "paddingTop": 8,
      }
    }
  >
    <View
      pointerEvents="none"
      style={
        Object {
          "bottom": 0,
          "left": 0,
          "overflow": "hidden",
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <View
        style={
          Object {
            "borderColor": "rgba(0, 0, 0, 0.38)",
            "borderStyle": "solid",
            "borderWidth": 0.5,
            "bottom": 0,
            "left": -3,
            "position": "absolute",
            "right": -3,
            "top": -3,
          }
        }
      />
    </View>
    <View
      style={
        Object {
          "alignSelf": "stretch",
          "flex": 1,
        }
      }
    >
      <View
        style={
          Object {
            "left": "-100%",
            "paddingLeft": "50%",
            "position": "absolute",
            "top": 0,
            "transform": Array [
              Object {
                "scale": 0.75,
              },
              Object {
                "translateY": -2,
              },
              Object {
                "translateX": 0,
              },
            ],
            "width": "200%",
          }
        }
      >
        <Text
          numberOfLines={1}
          style={
            Object {
              "color": "rgba(0, 0, 0, 0.38)",
              "fontSize": 16,
              "includeFontPadding": false,
              "lineHeight": 16,
              "textAlign": "left",
              "textAlignVertical": "top",
            }
          }
        >
          test
        </Text>
      </View>
      <View
        style={
          Object {
            "alignItems": "flex-end",
            "flex": 1,
            "flexDirection": "row",
          }
        }
      >
        <TextInput
          allowFontScaling={true}
          autoCapitalize="sentences"
          disableFullscreenUI={true}
          editable={true}
          onBlur={[Function]}
          onChange={[Function]}
          onChangeText={[Function]}
          onContentSizeChange={[Function]}
          onFocus={[Function]}
          rejectResponderTermination={true}
          selectionColor="rgb(0, 145, 234)"
          style={
            Array [
              Object {
                "flex": 1,
                "includeFontPadding": false,
                "margin": 0,
                "padding": 0,
                "paddingTop": 0,
                "textAlign": "left",
                "textAlignVertical": "top",
                "top": 2,
              },
              Object {
                "color": "rgba(0, 0, 0, .87)",
                "fontSize": 16,
                "height": 24,
              },
              undefined,
            ]
          }
          underlineColorAndroid="transparent"
          value="text"
        />
      </View>
    </View>
  </View>
  <View
    style={
      Array [
        Object {
          "alignItems": "flex-start",
          "flexDirection": "row",
          "justifyContent": "flex-end",
          "minHeight": 8,
        },
        Object {
          "paddingLeft": 12,
          "paddingRight": 12,
        },
      ]
    }
  >
    <Text
      style={
        Array [
          Object {
            "backgroundColor": "transparent",
            "fontSize": 12,
            "lineHeight": 16,
            "marginLeft": 8,
            "paddingVertical": 2,
            "textAlign": "right",
          },
          undefined,
          Object {
            "color": "rgba(0, 0, 0, .38)",
          },
        ]
      }
    >
      4
       / 
      10
    </Text>
  </View>
</View>
`;

exports[`renders disabled value 1`] = `
<View
  onResponderRelease={[Function]}
  onStartShouldSetResponder={[Function]}
  pointerEvents="none"
>
  <View
    style={
      Object {
        "alignItems": "flex-end",
        "backgroundColor": "rgb(204, 204, 204)",
        "borderTopLeftRadius": 4,
        "borderTopRightRadius": 4,
        "flexDirection": "row",
        "height": 56,
        "paddingBottom": 8,
        "paddingLeft": 12,
        "paddingRight": 12,
        "paddingTop": 8,
      }
    }
  >
    <View
      pointerEvents="none"
      style={
        Object {
          "bottom": 0,
          "left": 0,
          "overflow": "hidden",
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <View
        style={
          Object {
            "borderColor": "rgba(0, 0, 0, .38)",
            "borderStyle": "dotted",
            "borderWidth": 1,
            "bottom": 0,
            "left": -3,
            "position": "absolute",
            "right": -3,
            "top": -3,
          }
        }
      />
    </View>
    <View
      style={
        Object {
          "alignSelf": "stretch",
          "flex": 1,
        }
      }
    >
      <View
        style={
          Object {
            "left": "-100%",
            "paddingLeft": "50%",
            "position": "absolute",
            "top": 0,
            "transform": Array [
              Object {
                "scale": 0.75,
              },
              Object {
                "translateY": -2,
              },
              Object {
                "translateX": 0,
              },
            ],
            "width": "200%",
          }
        }
      >
        <Text
          numberOfLines={1}
          style={
            Object {
              "color": "rgba(0, 0, 0, .38)",
              "fontSize": 16,
              "includeFontPadding": false,
              "lineHeight": 16,
              "textAlign": "left",
              "textAlignVertical": "top",
            }
          }
        >
          test
        </Text>
      </View>
      <View
        style={
          Object {
            "alignItems": "flex-end",
            "flex": 1,
            "flexDirection": "row",
          }
        }
      >
        <TextInput
          allowFontScaling={true}
          autoCapitalize="sentences"
          disableFullscreenUI={true}
          editable={false}
          onBlur={[Function]}
          onChange={[Function]}
          onChangeText={[Function]}
          onContentSizeChange={[Function]}
          onFocus={[Function]}
          rejectResponderTermination={true}
          selectionColor="rgb(0, 145, 234)"
          style={
            Array [
              Object {
                "flex": 1,
                "includeFontPadding": false,
                "margin": 0,
                "padding": 0,
                "paddingTop": 0,
                "textAlign": "left",
                "textAlignVertical": "top",
                "top": 2,
              },
              Object {
                "color": "rgba(0, 0, 0, .38)",
                "fontSize": 16,
                "height": 24,
              },
              undefined,
            ]
          }
          underlineColorAndroid="transparent"
          value="text"
        />
      </View>
    </View>
  </View>
  <View
    style={
      Array [
        Object {
          "alignItems": "flex-start",
          "flexDirection": "row",
          "justifyContent": "flex-end",
          "minHeight": 8,
        },
        Object {
          "paddingLeft": 12,
          "paddingRight": 12,
        },
      ]
    }
  />
</View>
`;

exports[`renders title 1`] = `
<View
  onResponderRelease={[Function]}
  onStartShouldSetResponder={[Function]}
  pointerEvents="auto"
>
  <View
    style={
      Object {
        "alignItems": "flex-end",
        "backgroundColor": "rgb(204, 204, 204)",
        "borderTopLeftRadius": 4,
        "borderTopRightRadius": 4,
        "flexDirection": "row",
        "height": 56,
        "paddingBottom": 8,
        "paddingLeft": 12,
        "paddingRight": 12,
        "paddingTop": 8,
      }
    }
  >
    <View
      pointerEvents="none"
      style={
        Object {
          "bottom": 0,
          "left": 0,
          "overflow": "hidden",
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <View
        style={
          Object {
            "borderColor": "rgba(0, 0, 0, 0.38)",
            "borderStyle": "solid",
            "borderWidth": 0.5,
            "bottom": 0,
            "left": -3,
            "position": "absolute",
            "right": -3,
            "top": -3,
          }
        }
      />
    </View>
    <View
      style={
        Object {
          "alignSelf": "stretch",
          "flex": 1,
        }
      }
    >
      <View
        style={
          Object {
            "left": "-100%",
            "paddingLeft": "50%",
            "position": "absolute",
            "top": 0,
            "transform": Array [
              Object {
                "scale": 1,
              },
              Object {
                "translateY": 10,
              },
              Object {
                "translateX": 0,
              },
            ],
            "width": "200%",
          }
        }
      >
        <Text
          numberOfLines={1}
          style={
            Object {
              "color": "rgba(0, 0, 0, 0.38)",
              "fontSize": 16,
              "includeFontPadding": false,
              "lineHeight": 16,
              "textAlign": "left",
              "textAlignVertical": "top",
            }
          }
        >
          test
        </Text>
      </View>
      <View
        style={
          Object {
            "alignItems": "flex-end",
            "flex": 1,
            "flexDirection": "row",
          }
        }
      >
        <TextInput
          allowFontScaling={true}
          autoCapitalize="sentences"
          disableFullscreenUI={true}
          editable={true}
          onBlur={[Function]}
          onChange={[Function]}
          onChangeText={[Function]}
          onContentSizeChange={[Function]}
          onFocus={[Function]}
          rejectResponderTermination={true}
          selectionColor="rgb(0, 145, 234)"
          style={
            Array [
              Object {
                "flex": 1,
                "includeFontPadding": false,
                "margin": 0,
                "padding": 0,
                "paddingTop": 0,
                "textAlign": "left",
                "textAlignVertical": "top",
                "top": 2,
              },
              Object {
                "color": "rgba(0, 0, 0, .87)",
                "fontSize": 16,
                "height": 24,
              },
              undefined,
            ]
          }
          underlineColorAndroid="transparent"
          value=""
        />
      </View>
    </View>
  </View>
  <View
    style={
      Array [
        Object {
          "alignItems": "flex-start",
          "flexDirection": "row",
          "justifyContent": "flex-end",
          "minHeight": 8,
        },
        Object {
          "paddingLeft": 12,
          "paddingRight": 12,
        },
      ]
    }
  >
    <Text
      style={
        Object {
          "backgroundColor": "transparent",
          "color": "rgba(0, 0, 0, .38)",
          "flex": 1,
          "fontSize": 12,
          "lineHeight": 16,
          "opacity": 1,
          "paddingVertical": 2,
          "textAlign": "left",
        }
      }
    >
      field
    </Text>
  </View>
</View>
`;

exports[`renders value 1`] = `
<View
  onResponderRelease={[Function]}
  onStartShouldSetResponder={[Function]}
  pointerEvents="auto"
>
  <View
    style={
      Object {
        "alignItems": "flex-end",
        "backgroundColor": "rgb(204, 204, 204)",
        "borderTopLeftRadius": 4,
        "borderTopRightRadius": 4,
        "flexDirection": "row",
        "height": 56,
        "paddingBottom": 8,
        "paddingLeft": 12,
        "paddingRight": 12,
        "paddingTop": 8,
      }
    }
  >
    <View
      pointerEvents="none"
      style={
        Object {
          "bottom": 0,
          "left": 0,
          "overflow": "hidden",
          "position": "absolute",
          "right": 0,
          "top": 0,
        }
      }
    >
      <View
        style={
          Object {
            "borderColor": "rgba(0, 0, 0, 0.38)",
            "borderStyle": "solid",
            "borderWidth": 0.5,
            "bottom": 0,
            "left": -3,
            "position": "absolute",
            "right": -3,
            "top": -3,
          }
        }
      />
    </View>
    <View
      style={
        Object {
          "alignSelf": "stretch",
          "flex": 1,
        }
      }
    >
      <View
        style={
          Object {
            "left": "-100%",
            "paddingLeft": "50%",
            "position": "absolute",
            "top": 0,
            "transform": Array [
              Object {
                "scale": 0.75,
              },
              Object {
                "translateY": -2,
              },
              Object {
                "translateX": 0,
              },
            ],
            "width": "200%",
          }
        }
      >
        <Text
          numberOfLines={1}
          style={
            Object {
              "color": "rgba(0, 0, 0, 0.38)",
              "fontSize": 16,
              "includeFontPadding": false,
              "lineHeight": 16,
              "textAlign": "left",
              "textAlignVertical": "top",
            }
          }
        >
          test
        </Text>
      </View>
      <View
        style={
          Object {
            "alignItems": "flex-end",
            "flex": 1,
            "flexDirection": "row",
          }
        }
      >
        <TextInput
          allowFontScaling={true}
          autoCapitalize="sentences"
          disableFullscreenUI={true}
          editable={true}
          onBlur={[Function]}
          onChange={[Function]}
          onChangeText={[Function]}
          onContentSizeChange={[Function]}
          onFocus={[Function]}
          rejectResponderTermination={true}
          selectionColor="rgb(0, 145, 234)"
          style={
            Array [
              Object {
                "flex": 1,
                "includeFontPadding": false,
                "margin": 0,
                "padding": 0,
                "paddingTop": 0,
                "textAlign": "left",
                "textAlignVertical": "top",
                "top": 2,
              },
              Object {
                "color": "rgba(0, 0, 0, .87)",
                "fontSize": 16,
                "height": 24,
              },
              undefined,
            ]
          }
          underlineColorAndroid="transparent"
          value="text"
        />
      </View>
    </View>
  </View>
  <View
    style={
      Array [
        Object {
          "alignItems": "flex-start",
          "flexDirection": "row",
          "justifyContent": "flex-end",
        },
        Object {
          "minHeight": 8,
          "paddingLeft": 12,
          "paddingRight": 12,
        },
      ]
    }
  />
</View>
`;