Merge pull request #38 from contiamo/mutate-error-handling

Improve Mutation data/error return

.gitignore

@@ -90,7 +90,10 @@ typings/
 # dotenv environment variables file
 .env
 
-#!! ERROR: vscode is undefined. Use list command to see defined gitignore types !!#
+public
+lib
 
-
-# End of https://www.gitignore.io/api/node,macos,vscode
+# Files managed by operational-scripts
+tslint.json
+tsconfig.json
+.prettierrc

.travis.yml

@@ -13,5 +13,5 @@ env:
 
 # When Travis gets notified of a new build, do this
 script:
-  - yarn ci
+  - yarn test
   - yarn danger ci

CHANGELOG.md

@@ -3,6 +3,9 @@
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
 - [Changelog](#changelog)
+  - [v4.1.2](#v412)
+  - [v4.1.1](#v411)
+  - [v4.1.0](#v410)
   - [v4.0.1](#v401)
   - [v4.0.0](#v400)
   - [v4.0.0-9](#v400-9)
@@ -18,6 +21,30 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v4.1.2](https://github.com/contiamo/restful-react/compare/v4.1.1...v4.1.2)
+
+> 5 September 2018
+
+- Update tsconfig because Greenkeeper changed things [`45c8210`](https://github.com/contiamo/restful-react/commit/45c82106964b424d9a1803ecc18305c39f9c37bc)
+
+#### [v4.1.1](https://github.com/contiamo/restful-react/compare/v4.1.0...v4.1.1)
+
+> 5 September 2018
+
+#### [v4.1.0](https://github.com/contiamo/restful-react/compare/v4.0.1...v4.1.0)
+
+> 5 September 2018
+
+- Add debounce [`#35`](https://github.com/contiamo/restful-react/pull/35)
+- Add a debounce option to `Get` [`#32`](https://github.com/contiamo/restful-react/pull/32)
+- Update dependencies to enable Greenkeeper 🌴 [`#34`](https://github.com/contiamo/restful-react/pull/34)
+- v4.0.2: Updated error handling [`#31`](https://github.com/contiamo/restful-react/pull/31)
+- Improve the error layer [`#30`](https://github.com/contiamo/restful-react/pull/30)
+- 4.0.1 [`#27`](https://github.com/contiamo/restful-react/pull/27)
+- More meaningful examples in Docs [`ab00173`](https://github.com/contiamo/restful-react/commit/ab00173a133a15198df46bf755fe6c6a98095514)
+- Update description of props [`9c9a242`](https://github.com/contiamo/restful-react/commit/9c9a24264cceba8605c451a04b65b344606cfbbc)
+- Update casing [`49b231d`](https://github.com/contiamo/restful-react/commit/49b231de79f97c112e83dec913c0aa9b271321ab)
+
 #### [v4.0.1](https://github.com/contiamo/restful-react/compare/v4.0.0...v4.0.1)
 
 > 14 August 2018

dangerfile.ts

@@ -1,6 +1,5 @@
 import * as child_process from "child_process";
 import { danger, markdown, warn } from "danger";
-import jest from "danger-plugin-jest";
 import * as fs from "fs";
 import { includes } from "lodash";
 
@@ -56,5 +55,3 @@ if (fs.existsSync("tslint-errors.json")) {
     markdown(tslintMarkdown);
   }
 }
-
-jest();

package.json

@@ -1,11 +1,11 @@
 {
   "name": "restful-react",
   "description": "A declarative client from RESTful React Apps",
-  "version": "4.0.1",
+  "version": "4.1.2",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
-    "dist"
+    "lib"
   ],
   "engines": {
     "vscode": "^1.22.0"
@@ -33,40 +33,22 @@
     "url": "https://github.com/contiamo/restful-react"
   },
   "scripts": {
-    "test": "jest",
-    "watch": "rollup -cw",
-    "build": "rollup -c",
-    "precommit": "lint-staged",
+    "start": "operational-scripts start",
+    "test": "operational-scripts test",
+    "build": "operational-scripts build --for npm",
     "preversion": "npm run build",
     "version": "auto-changelog -p && git add CHANGELOG.md",
     "lint": "tslint src/**/*{ts,tsx} --project .",
-    "ci": "npm run jest && npm run lint",
-    "jest": "jest --outputFile test-results.json --json"
-  },
-  "lint-staged": {
-    "*.md": [
-      "prettier --write",
-      "doctoc",
-      "git add"
-    ],
-    "*.json": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.(tsx|ts)": [
-      "tslint --fix --project .",
-      "prettier --write",
-      "git add"
-    ]
+    "prepublishOnly": "operational-scripts prepare"
   },
   "devDependencies": {
+    "@operational/scripts": "^1.1.2",
     "@types/jest": "^23.3.1",
     "@types/lodash": "^4.14.116",
     "@types/nock": "^9.3.0",
     "@types/react": "^16.4.1",
     "auto-changelog": "^1.8.0",
     "danger": "^3.8.4",
-    "danger-plugin-jest": "^1.1.0",
     "doctoc": "^1.3.1",
     "husky": "^0.14.3",
     "isomorphic-fetch": "^2.2.1",
@@ -77,8 +59,6 @@
     "prettier": "^1.13.5",
     "react-dom": "^16.4.2",
     "react-testing-library": "^5.0.0",
-    "rollup": "^0.65.0",
-    "rollup-plugin-typescript2": "^0.17.0",
     "ts-jest": "^23.1.4",
     "tslint": "^5.10.0",
     "tslint-config-prettier": "^1.13.0",
@@ -92,20 +72,5 @@
   },
   "peerDependencies": {
     "react": "^16.4.1"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "testURL": "http://localhost"
   }
 }

src/Mutate.test.tsx

@@ -77,4 +77,124 @@ describe("Mutate", () => {
       expect(children.mock.calls[2][1].loading).toEqual(false);
     });
   });
+  describe("POST", () => {
+    it("should call the correct url", async () => {
+      nock("https://my-awesome-api.fake")
+        .post("/")
+        .reply(200, { id: 1 });
+
+      const children = jest.fn();
+      children.mockReturnValue(<div />);
+
+      // setup - first render
+      render(
+        <RestfulProvider base="https://my-awesome-api.fake">
+          <Mutate verb="POST" path="">
+            {children}
+          </Mutate>
+        </RestfulProvider>,
+      );
+
+      await wait(() => expect(children.mock.calls.length).toBe(1));
+      expect(children.mock.calls[0][1].loading).toEqual(false);
+      expect(children.mock.calls[0][0]).toBeDefined();
+
+      // post action
+      children.mock.calls[0][0]();
+      await wait(() => expect(children.mock.calls.length).toBe(3));
+
+      // transition state
+      expect(children.mock.calls[1][1].loading).toEqual(true);
+
+      // after post state
+      expect(children.mock.calls[2][1].loading).toEqual(false);
+    });
+
+    it("should send the correct body", async () => {
+      nock("https://my-awesome-api.fake")
+        .post("/", { foo: "bar" })
+        .reply(200, { id: 1 });
+
+      const children = jest.fn();
+      children.mockReturnValue(<div />);
+
+      // setup - first render
+      render(
+        <RestfulProvider base="https://my-awesome-api.fake">
+          <Mutate verb="POST" path="">
+            {children}
+          </Mutate>
+        </RestfulProvider>,
+      );
+
+      await wait(() => expect(children.mock.calls.length).toBe(1));
+      expect(children.mock.calls[0][1].loading).toEqual(false);
+      expect(children.mock.calls[0][0]).toBeDefined();
+
+      // post action
+      children.mock.calls[0][0]({ foo: "bar" });
+      await wait(() => expect(children.mock.calls.length).toBe(3));
+
+      // transition state
+      expect(children.mock.calls[1][1].loading).toEqual(true);
+
+      // after post state
+      expect(children.mock.calls[2][1].loading).toEqual(false);
+    });
+
+    it("should return the correct data", async () => {
+      nock("https://my-awesome-api.fake")
+        .post("/")
+        .reply(200, { id: 1 });
+
+      const children = jest.fn();
+      children.mockReturnValue(<div />);
+
+      // setup - first render
+      render(
+        <RestfulProvider base="https://my-awesome-api.fake">
+          <Mutate verb="POST" path="">
+            {children}
+          </Mutate>
+        </RestfulProvider>,
+      );
+
+      await wait(() => expect(children.mock.calls.length).toBe(1));
+      expect(children.mock.calls[0][1].loading).toEqual(false);
+      expect(children.mock.calls[0][0]).toBeDefined();
+
+      // post action
+      expect(await children.mock.calls[0][0]()).toEqual({ id: 1 });
+    });
+
+    it("should return the data and the message on error", async () => {
+      nock("https://my-awesome-api.fake")
+        .post("/")
+        .reply(500, { error: "oh no… not again…" });
+
+      const children = jest.fn();
+      children.mockReturnValue(<div />);
+
+      // setup - first render
+      render(
+        <RestfulProvider base="https://my-awesome-api.fake">
+          <Mutate verb="POST" path="">
+            {children}
+          </Mutate>
+        </RestfulProvider>,
+      );
+
+      await wait(() => expect(children.mock.calls.length).toBe(1));
+      expect(children.mock.calls[0][1].loading).toEqual(false);
+      expect(children.mock.calls[0][0]).toBeDefined();
+
+      // post action
+      return children.mock.calls[0][0]().catch(error => {
+        expect(error).toEqual({
+          data: { error: "oh no… not again…" },
+          message: "Failed to fetch: 500 Internal Server Error",
+        });
+      });
+    });
+  });
 });

src/Mutate.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import RestfulReactProvider, { RestfulReactConsumer, RestfulReactProviderProps } from "./Context";
 import { GetState } from "./Get";
+import { processResponse } from "./util/processResponse";
 
 /**
  * An enumeration of states that a fetchable
@@ -122,18 +123,17 @@ class ContextlessMutate<TData, TError> extends React.Component<MutateProps<TData
     });
 
     const response = await fetch(request);
+    const { data, responseError } = await processResponse(response);
 
-    if (!response.ok) {
-      const responseData = await response.json();
+    if (!response.ok || responseError) {
       this.setState({
         loading: false,
-        error: { data: responseData, message: `Failed to fetch: ${response.status} ${response.statusText}` },
       });
-      throw response;
+      throw { data, message: `Failed to fetch: ${response.status} ${response.statusText}` };
     }
 
     this.setState({ loading: false });
-    return response;
+    return data;
   };
 
   public render() {