Setup tests

Author: Nhacsam

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/no-extraneous-dependencies": [0],
+    "import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }],
+    "import/extensions": [2, { "js": "never", "json": "always" }]
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/**/*
+npm-debug.*

exemple/main.js

@@ -18,7 +18,7 @@ const TvShow = () => (
     <StatusBar barStyle="light-content" />
     <HeaderImageScrollView
       maxHeight={200}
-      minHeight={50}
+      minHeight={66}
       renderHeader={() => (
         <Image source={tvShowContent.image} style={styles.image} />
       )}

package.json

@@ -4,7 +4,10 @@
   "description": "ScrollView with an image in header which become a navbar",
   "main": "src/index.js",
   "scripts": {
-    "test": "jest"
+    "jest": "jest",
+    "jest:watch": "npm run jest -- --watch",
+    "lint": "eslint src/*.js",
+    "test": "npm run lint && npm run jest"
   },
   "files": [
     "README.md",
@@ -30,5 +33,26 @@
   "bugs": {
     "url": "https://github.com/bamlab/react-native-image-header-scroll-view/issues"
   },
-  "homepage": "https://github.com/bamlab/react-native-image-header-scroll-view#readme"
+  "homepage": "https://github.com/bamlab/react-native-image-header-scroll-view#readme",
+  "devDependencies": {
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^7.1.1",
+    "babel-jest": "^18.0.0",
+    "babel-preset-react-native": "^1.9.1",
+    "eslint": "^3.12.2",
+    "eslint-config-airbnb": "^13.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^2.0.0",
+    "eslint-plugin-react": "^6.8.0",
+    "jest": "^18.1.0",
+    "react": "^15.4.2",
+    "react-native": "^0.40.0",
+    "react-test-renderer": "^15.4.2"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/exemple/"
+    ]
+  }
 }

src/__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,55 @@
+exports[`test renders correctly by default 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }>
+  <ScrollView
+    onScroll={[Function]}
+    scrollEventThrottle={16}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }>
+    <View
+      style={
+        Object {
+          "paddingTop": 125,
+        }
+      } />
+  </ScrollView>
+  <View
+    style={
+      Object {
+        "height": 125,
+        "left": 0,
+        "overflow": "hidden",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }>
+    <View
+      style={
+        Object {
+          "backgroundColor": "black",
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "zIndex": 100,
+        }
+      } />
+    <View />
+  </View>
+</View>
+`;

src/__tests__/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import 'react-native';
+import ImageHeaderScrollView from '../index.js';
+import renderer from 'react-test-renderer';
+
+it('renders correctly by default', () => {
+  const tree = renderer.create(
+    <ImageHeaderScrollView />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/index.js

@@ -51,7 +51,10 @@ class ImageHeaderScrollView extends Component {
   }
 
   renderHeader() {
-    const headerHeight = this.interpolateOnImageHeight([this.props.maxHeight, this.props.minHeight]);
+    const headerHeight = this.interpolateOnImageHeight([
+      this.props.maxHeight,
+      this.props.minHeight,
+    ]);
     const overlayOpacity = this.interpolateOnImageHeight([0, this.props.maxOverlayOpacity]);
 
     const headerScale = this.state.scrollY.interpolate({
@@ -60,8 +63,9 @@ class ImageHeaderScrollView extends Component {
       extrapolate: 'clamp',
     });
 
+    const headerTransformStyle = { height: headerHeight, transform: [{ scale: headerScale }] };
     return (
-      <Animated.View style={[styles.header, { height: headerHeight, transform: [{ scale: headerScale }] }]}>
+      <Animated.View style={[styles.header, headerTransformStyle]}>
         <Animated.View style={[styles.blackOverlay, { opacity: overlayOpacity }]} />
         { this.props.renderHeader() }
       </Animated.View>
@@ -77,7 +81,7 @@ class ImageHeaderScrollView extends Component {
           onScroll={Animated.event(
             [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
           )}
-          >
+        >
           <Animated.View style={[{ paddingTop: this.props.maxHeight }, this.props.childrenStyle]}>
             {this.props.children}
           </Animated.View>