fixing tests

.eslintrc.json

@@ -11,7 +11,9 @@
     "jsx-a11y/href-no-hash": "off",
     "import/no-extraneous-dependencies": "off",
     "react/no-array-index-key": "off",
-    "import/no-cycle": "off"
+    "import/no-cycle": "off",
+    "import/prefer-default-export": "off",
+    "no-plusplus": "off"
   },
   "env": {
     "jest": true

src/animation/fade.js

@@ -36,7 +36,11 @@ const Fade = ({ children, style = {}, ...props }) => {
 
   const customStyle = { opacity: animation };
 
-  return <Animated.View  style={[style, customStyle]} {...props}>{children}</Animated.View>;
+  return (
+    <Animated.View style={[style, customStyle]} {...props}>
+      {children}
+    </Animated.View>
+  );
 };
 
 Fade.propTypes = {

src/imageContent/__tests__/__snapshots__/imageContent.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`ImageContent should match snapshot 1`] = `
 <Paragraph
-  animate="fade"
+  animation="fade"
   color="#ff0000"
   firstLineWidth="30%"
   lastLineWidth="50%"
@@ -16,7 +16,7 @@ exports[`ImageContent should match snapshot 1`] = `
 
 exports[`ImageContent should match snapshot with left element 1`] = `
 <Paragraph
-  animate="fade"
+  animation="fade"
   color="#ff0000"
   firstLineWidth="30%"
   lastLineWidth="50%"
@@ -30,7 +30,7 @@ exports[`ImageContent should match snapshot with left element 1`] = `
 
 exports[`ImageContent should match snapshot with right element 1`] = `
 <Paragraph
-  animate="fade"
+  animation="fade"
   color="#ff0000"
   firstLineWidth="30%"
   lastLineWidth="50%"

src/imageContent/__tests__/imageContent.test.js

@@ -12,7 +12,7 @@ describe('ImageContent', () => {
       position: 'left',
       size: 50,
       hasRadius: true,
-      animate: 'fade',
+      animation: 'fade',
       lineNumber: 8,
       textSize: 13,
       color: '#ff0000',

src/imageContent/imageContent.js

@@ -1,7 +1,7 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Paragraph } from "../paragraph/paragraph";
-import { Media } from "../shapes";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Paragraph } from '../paragraph/paragraph';
+import { Media } from '../shapes';
 
 export const ImageContent = ({
   position,
@@ -15,10 +15,8 @@ export const ImageContent = ({
   firstLineWidth,
   ...props
 }) => {
-  const LeftComponent = () =>
-    position === "left" ? <Media hasRadius={hasRadius} /> : null;
-  const RightComponent = () =>
-    position === "right" ? <Media hasRadius={hasRadius} /> : null;
+  const LeftComponent = () => (position === 'left' ? <Media hasRadius={hasRadius} /> : null);
+  const RightComponent = () => (position === 'right' ? <Media hasRadius={hasRadius} /> : null);
 
   return (
     <Paragraph
@@ -45,17 +43,17 @@ ImageContent.propTypes = {
   color: PropTypes.string,
   width: PropTypes.string,
   lastLineWidth: PropTypes.string,
-  firstLineWidth: PropTypes.string
+  firstLineWidth: PropTypes.string,
 };
 
 ImageContent.defaultProps = {
-  position: "left",
+  position: 'left',
   size: 40,
   hasRadius: false,
   animation: null,
   textSize: 12,
-  color: "#efefef",
-  width: "100%",
-  lastLineWidth: "100%",
-  firstLineWidth: "100%"
+  color: '#efefef',
+  width: '100%',
+  lastLineWidth: '100%',
+  firstLineWidth: '100%',
 };

src/line/line.js

@@ -1,16 +1,16 @@
-import React from "react";
-import { View } from "react-native";
+import React from 'react';
+import { View } from 'react-native';
 
 export const Line = ({
   textSize = 12,
-  color = "#efefef",
-  width = "100%",
+  color = '#efefef',
+  width = '100%',
   style,
   noMargin = false,
   ...props
 }) => {
   const height = textSize;
-  const alignSelf = "stretch";
+  const alignSelf = 'stretch';
   const backgroundColor = color;
   const borderRadius = textSize / 4;
   const marginBottom = noMargin ? 0 : textSize;
@@ -21,7 +21,7 @@ export const Line = ({
     backgroundColor,
     borderRadius,
     width,
-    marginBottom
+    marginBottom,
   };
 
   return <View style={[computedStyle, style]} {...props} />;

src/paragraph/__tests__/__snapshots__/paragraph.spec.js.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Paragraph should match snapshot 1`] = `
-<Placeholder>
+<Placeholder
+  whenReadyRender={[Function]}
+>
   <Line
     color="green"
     key="0"

src/paragraph/paragraph.js

@@ -1,7 +1,7 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Line } from "../line/line";
-import { Placeholder } from "../placeholder/placeholder";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Line } from '../line/line';
+import { Placeholder } from '../placeholder/placeholder';
 
 export const Paragraph = ({
   lineNumber,
@@ -17,22 +17,11 @@ export const Paragraph = ({
 
   for (let i = 0; i < lineNumber; i++) {
     if (i === 0) {
-      lines.push(
-        <Line
-          textSize={textSize}
-          color={color}
-          width={firstLineWidth}
-          key={i}
-        />
-      );
+      lines.push(<Line textSize={textSize} color={color} width={firstLineWidth} key={i} />);
     } else if (i === lineNumber - 1) {
-      lines.push(
-        <Line textSize={textSize} color={color} width={lastLineWidth} key={i} />
-      );
+      lines.push(<Line textSize={textSize} color={color} width={lastLineWidth} key={i} />);
     } else {
-      lines.push(
-        <Line textSize={textSize} color={color} width={width} key={i} />
-      );
+      lines.push(<Line textSize={textSize} color={color} width={width} key={i} />);
     }
   }
 
@@ -49,13 +38,13 @@ Paragraph.propTypes = {
   color: PropTypes.string,
   width: PropTypes.string,
   lastLineWidth: PropTypes.string,
-  firstLineWidth: PropTypes.string
+  firstLineWidth: PropTypes.string,
 };
 
 Paragraph.defaultProps = {
   textSize: 12,
-  color: "#efefef",
-  width: "100%",
-  lastLineWidth: "100%",
-  firstLineWidth: "100%"
+  color: '#efefef',
+  width: '100%',
+  lastLineWidth: '100%',
+  firstLineWidth: '100%',
 };

src/placeholder/placeholder.js

@@ -24,7 +24,7 @@ const makeRoot = (animation) => {
     const Animation = Animations[animation];
 
     if (!Animation) {
-      throw new Error(`Animation "${animation}" doesn\'t exist in the library`);
+      throw new Error(`Animation "${animation}" doesn't exist in the library`);
     }
 
     return Animation;

src/shapes/__tests__/placeholderStylify.test.js

@@ -1,24 +1,24 @@
-import React from "react";
-import { View } from "react-native";
-import { shallow } from "enzyme";
-import { stylify } from "../stylify";
+import React from 'react';
+import { View } from 'react-native';
+import { shallow } from 'enzyme';
+import { stylify } from '../stylify';
 
-describe("stylify", () => {
+describe('stylify', () => {
   let computeStyle;
   let Component;
 
   beforeEach(() => {
-    computeStyle = () => ({ backgroundColor: "red" });
+    computeStyle = () => ({ backgroundColor: 'red' });
     Component = props => <View {...props} />;
   });
 
-  it("should inject the passed style merged with the computed ones", () => {
+  it('should inject the passed style merged with the computed ones', () => {
     const StyledComponent = stylify(computeStyle)(Component);
     const wrapper = shallow(<StyledComponent style={{ marginLeft: 100 }} />);
 
-    expect(wrapper.find(Component).prop("style")).toEqual({
+    expect(wrapper.find(Component).prop('style')).toEqual({
       marginLeft: 100,
-      backgroundColor: "red"
+      backgroundColor: 'red',
     });
   });
 });

src/shapes/box/__tests__/box.style.spec.js

@@ -13,7 +13,10 @@ describe('computeStyleBox', () => {
 
   it('should have retrieved the computed styles', () => {
     const styles = computeStyleBox({
-      height: 1000, width: 1000, radius: 10, color: 'blue',
+      height: 1000,
+      width: 1000,
+      radius: 10,
+      color: 'blue',
     });
     expect(styles).toEqual({
       height: 1000,

src/shapes/index.js

@@ -1,7 +1,7 @@
-import { View } from "react-native";
-import { stylify } from "./stylify";
-import computeStyleMedia from "./media/media.style";
-import computeStyleBox from "./box/box.style";
+import { View } from 'react-native';
+import { stylify } from './stylify';
+import computeStyleMedia from './media/media.style';
+import computeStyleBox from './box/box.style';
 
 export const Media = stylify(computeStyleMedia)(View);
 export const Box = stylify(computeStyleBox)(View);

src/shapes/media/__tests__/media.style.test.js

@@ -9,9 +9,14 @@ describe('MediaStyle', () => {
       borderRadius: 40,
       backgroundColor: 'blue',
     };
-    expect(mediaStyle({
-      size: 80, color: 'blue', width: '100%', hasRadius: true,
-    })).toEqual(style);
+    expect(
+      mediaStyle({
+        size: 80,
+        color: 'blue',
+        width: '100%',
+        hasRadius: true,
+      }),
+    ).toEqual(style);
   });
 
   it('should provide a style object that respects the constraints and parameters', () => {

src/shapes/stylify.js

@@ -1,18 +1,18 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-export const stylify = computeStyles => Component => {
+export const stylify = computeStyles => (Component) => {
   const StyledComponent = ({ style, ...otherProps }) => {
     const styles = { ...computeStyles(otherProps), ...style };
     return <Component {...otherProps} style={styles} />;
   };
 
   StyledComponent.propTypes = {
-    style: PropTypes.shape({})
+    style: PropTypes.shape({}),
   };
 
   StyledComponent.defaultProps = {
-    style: {}
+    style: {},
   };
 
   return StyledComponent;