feat: Update react-docgen to add typescript support (#20)

feat: move dependency to devDependency

docs: Update README

Author: mauriciosoares

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
-    "env"
+    "@babel/preset-env",
+    "@babel/preset-typescript"
   ]
 }

README.md

@@ -2,7 +2,7 @@
 
 > Magically generate fake props for your React tests 🔮
 
-`react-fake-props` parses your Component prop types using [react-docgen](https://github.com/reactjs/react-docgen) and generates fake props. Supports [Flow](https://flow.org) and [PropTypes](https://github.com/facebook/prop-types). Works great with [Jest](https://facebook.github.io/jest/) snapshots and [Enzyme](https://github.com/airbnb/enzyme).
+`react-fake-props` parses your Component prop types using [react-docgen](https://github.com/reactjs/react-docgen) and generates fake props. Supports [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org) and [PropTypes](https://github.com/facebook/prop-types). Works great with [Jest](https://facebook.github.io/jest/) snapshots and [Enzyme](https://github.com/airbnb/enzyme).
 
 <a href="https://www.patreon.com/typicode">
   <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
@@ -20,7 +20,20 @@ yarn add react-fake-props --dev
 
 ## Example
 
-Assuming the following Component with Flow types:
+Assuming the following Component with TypeScript:
+
+```jsx
+type Props = {
+  id: number
+  name: string
+}
+
+class Component extends React.Component<Props> {
+  // ...
+}
+```
+
+Or Flow types:
 
 ```jsx
 // @flow
@@ -74,7 +87,7 @@ To include optional props, pass `{ optional: true }`.
 
 Please note:
 - `custom` validators and `PropTypes.instanceOf` aren't supported, you'll still need to set them manually.
-- `react-fake-props` requires the component path to be passed, instead of the component itself, to be able to support Flow and PropTypes.
+- `react-fake-props` requires the component path to be passed, instead of the component itself, to be able to support TypeScript, Flow and PropTypes.
 
 ### For multiple components in single file
 

__tests__/__snapshots__/typescript.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fakeProps should return an object with all props faked (snapshot) 1`] = `
+Object {
+  "getFriend": [Function],
+  "onNameChange": [Function],
+  "person": Object {
+    "address": Object {
+      "pincode": 1,
+      "street": "person.address.street",
+      "street2": "person.address.street2",
+    },
+    "age": 1,
+    "family": Array [
+      1,
+    ],
+    "id": 1,
+    "name": "person.name",
+    "repos": Array [
+      Object {
+        "commits": Array [
+          Object {
+            "id": "person.repos.commits.id",
+            "message": "person.repos.commits.message",
+          },
+        ],
+        "demoSite": "person.repos.demoSite",
+        "npm": "person.repos.npm",
+        "url": "person.repos.url",
+      },
+    ],
+  },
+}
+`;
+
+exports[`fakeProps should return an object with no props (snapshot) 1`] = `Object {}`;
+
+exports[`fakeProps should return an object with required props faked (snapshot) 1`] = `
+Object {
+  "onNameChange": [Function],
+  "person": Object {
+    "address": Object {
+      "pincode": 1,
+      "street": "person.address.street",
+    },
+    "age": 1,
+    "id": 1,
+    "name": "person.name",
+    "repos": Array [
+      Object {
+        "commits": Array [
+          Object {
+            "id": "person.repos.commits.id",
+            "message": "person.repos.commits.message",
+          },
+        ],
+        "url": "person.repos.url",
+      },
+    ],
+  },
+}
+`;

__tests__/typescript.js

@@ -0,0 +1,69 @@
+import path from 'path'
+import fakeProps from '../src'
+
+const ComponentFile = path.join(
+  __dirname,
+  '../fixtures/typescript/Component.tsx'
+)
+const SimpleFile = path.join(__dirname, '../fixtures/typescript/Simple.tsx')
+const NoProps = require.resolve('../fixtures/typescript/NoProps.tsx')
+const Multiple = require.resolve('../fixtures/typescript/Multiple.tsx')
+
+describe('fakeProps', () => {
+  it('should return an object with no props (snapshot)', () => {
+    expect(fakeProps(NoProps)).toMatchSnapshot()
+  })
+
+  it('should return an object with required props faked (snapshot)', () => {
+    expect(fakeProps(ComponentFile)).toMatchSnapshot()
+  })
+
+  it('should return an object with all props faked (snapshot)', () => {
+    expect(fakeProps(ComponentFile, { optional: true })).toMatchSnapshot()
+  })
+
+  it('should return a person on calling getFriend prop function (test function generation)', () => {
+    const allProps = fakeProps(ComponentFile, { optional: true })
+    const friend = allProps.getFriend()
+
+    expect(friend.name).toBeDefined()
+    expect(friend.name).toBe('getFriend.name')
+    expect(friend.age).toBe(1)
+  })
+
+  it('should return more props with optional', () => {
+    const allProps = fakeProps(ComponentFile, { optional: true })
+    const requiredProps = fakeProps(ComponentFile)
+
+    const allPropsLength = Object.keys(allProps).length
+    const requiredPropsLength = Object.keys(requiredProps).length
+
+    expect(allPropsLength).toBeGreaterThan(requiredPropsLength)
+  })
+
+  it('should return an object with shape props faked', () => {
+    const props = fakeProps(SimpleFile)
+    const { requiredString, requiredObject } = props
+
+    expect(props).toEqual({
+      requiredString,
+      requiredObject: {
+        requiredString: requiredObject.requiredString
+      }
+    })
+  })
+
+  it('should prefix shape props', () => {
+    const props = fakeProps(SimpleFile)
+    expect(props.requiredObject.requiredString).toBe(
+      'requiredObject.requiredString'
+    )
+  })
+
+  it('should work with multiple components', () => {
+    const component = fakeProps(Multiple, { all: true }).find(
+      ({ displayName }) => displayName === 'First'
+    )
+    expect(component.props.requiredString).toBe('requiredString')
+  })
+})

fixtures/propTypes/Component.jsx

@@ -6,7 +6,7 @@ class Message {}
 
 class MyComponent extends React.Component {
   render () {
-    // ... do things with the props
+    return null
   }
 }
 

fixtures/typescript/Component.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+type Address = {
+  street: string
+  street2?: string
+  pincode: number
+}
+
+type Commit = {
+  id: string
+  message: string
+}
+
+type Repo = {
+  url: string
+  demoSite?: string
+  npm?: string
+  commits: Array<Commit>
+}
+
+type Person = {
+  id: number
+  name: string
+  age: number
+  address: Address
+  family?: Array<number>
+  repos: Array<Repo>
+}
+
+type Props = {
+  person: Person,
+  onNameChange: (id: number, newName: string) => any
+  getFriend?: (person: Person) => Person
+}
+
+function MyComponent(props: Props) {
+  return <></>
+}
+
+export default MyComponent

fixtures/typescript/Multiple.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+function connect(Component) {
+  return <div><Component /></div>
+}
+
+type Props = {
+  requiredString: string
+}
+
+function First(props: Props) {
+  return <></>
+}
+
+export function Second() {
+  return <div />
+}
+
+export default connect(First)

fixtures/typescript/NoProps.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+function NoProps() {
+  return <></>
+}
+
+export default NoProps

fixtures/typescript/Simple.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+type Props = {
+  requiredString: string
+  optionalString?: string
+  requiredObject: {
+    requiredString: string
+    optionalString?: string
+  }
+}
+
+function Simple(props: Props) {
+  return <></>
+}
+
+export default Simple