Skip to content

Commit

Permalink
handle 204 no content responses
Browse files Browse the repository at this point in the history
  • Loading branch information
@mercedesb
mercedesb committed Mar 1, 2020
1 parent de8f8aa commit c50c9f4
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 39 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-use-fetch-api",
"version": "1.0.4",
"version": "1.0.5",
"description": "React hook for making simple JSON API requests using the browser Fetch API",
"author": "Mercedes Bernard",
"repository": {
Expand Down
8 changes: 7 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@ async function fetchData(url, method, data) {
}
return response;
})
.then(response => response.json());
.then(response => {
if (response.status === 204) {
return {};
} else {
return response.json();
}
});

return response;
}
Expand Down
170 changes: 133 additions & 37 deletions test/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ let url;
let data;
let status;
let ok;
let mockResponse = {};
let mockResponse = { data: "here" };
let mockJsonPromise = Promise.resolve(mockResponse);
let mockFetchPromise;

Expand Down Expand Up @@ -56,22 +56,47 @@ describe("useApi", () => {
});

describe("when the response is successful", () => {
it("returns the response as json", done => {
const { get } = useApi();
const response = get(url);
expect(response).toEqual(mockJsonPromise);
describe("when the status code is 204 No Content", () => {
beforeEach(() => {
status = 204;
mockFetchPromise = Promise.resolve({
status: status,
ok: ok,
json: () => Promise.resolve({})
});

global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
});

process.nextTick(() => {
global.fetch.mockClear();
done();
it("returns an empty json object", done => {
const { get } = useApi();
const response = get(url);
expect(response).toEqual(Promise.resolve({}));

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});

describe("when the status code is any other successful status", () => {
it("returns the response as json", done => {
const { get } = useApi();
const response = get(url);
expect(response).toEqual(mockJsonPromise);

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});
});

describe("when the response is not successful", () => {
describe("when the status code is 401 Unauthorized", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos/1";
status = 401;
ok = false;
mockFetchPromise = Promise.resolve({
Expand Down Expand Up @@ -102,7 +127,6 @@ describe("useApi", () => {

describe("when the status code is any other error ", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos/1";
status = 500;
ok = false;
mockFetchPromise = Promise.resolve({
Expand Down Expand Up @@ -164,22 +188,47 @@ describe("useApi", () => {
});

describe("when the response is successful", () => {
it("returns the response as json", done => {
const { post } = useApi();
const response = post(url, data);
expect(response).toEqual(mockJsonPromise);
describe("when the status code is 204 No Content", () => {
beforeEach(() => {
status = 204;
mockFetchPromise = Promise.resolve({
status: status,
ok: ok,
json: () => Promise.resolve({})
});

global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
});

process.nextTick(() => {
global.fetch.mockClear();
done();
it("returns an empty json object", done => {
const { post } = useApi();
const response = post(url, data);
expect(response).toEqual(Promise.resolve({}));

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});

describe("when the status code is any other successful status", () => {
it("returns the response as json", done => {
const { post } = useApi();
const response = post(url, data);
expect(response).toEqual(mockJsonPromise);

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});
});

describe("when the response is not successful", () => {
describe("when the status code is 401 Unauthorized", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos";
data = { title: "Gotta do all the things!", completed: false };
status = 401;
ok = false;
Expand Down Expand Up @@ -211,7 +260,6 @@ describe("useApi", () => {

describe("when the status code is any other error ", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos";
status = 500;
ok = false;
mockFetchPromise = Promise.resolve({
Expand Down Expand Up @@ -273,22 +321,47 @@ describe("useApi", () => {
});

describe("when the response is successful", () => {
it("returns the response as json", done => {
const { put } = useApi();
const response = put(url, data);
expect(response).toEqual(mockJsonPromise);
describe("when the status code is 204 No Content", () => {
beforeEach(() => {
status = 204;
mockFetchPromise = Promise.resolve({
status: status,
ok: ok,
json: () => Promise.resolve({})
});

global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
});

process.nextTick(() => {
global.fetch.mockClear();
done();
it("returns an empty json object", done => {
const { put } = useApi();
const response = put(url, data);
expect(response).toEqual(Promise.resolve({}));

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});

describe("when the status code is any other successful status", () => {
it("returns the response as json", done => {
const { put } = useApi();
const response = put(url, data);
expect(response).toEqual(mockJsonPromise);

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});
});

describe("when the response is not successful", () => {
describe("when the status code is 401 Unauthorized", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos";
data = { title: "Gotta do all the things!", completed: false };
status = 401;
ok = false;
Expand Down Expand Up @@ -320,7 +393,6 @@ describe("useApi", () => {

describe("when the status code is any other error ", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos";
status = 500;
ok = false;
mockFetchPromise = Promise.resolve({
Expand Down Expand Up @@ -381,22 +453,47 @@ describe("useApi", () => {
});

describe("when the response is successful", () => {
it("returns the response as json", done => {
const { del } = useApi();
const response = del(url);
expect(response).toEqual(mockJsonPromise);
describe("when the status code is 204 No Content", () => {
beforeEach(() => {
status = 204;
mockFetchPromise = Promise.resolve({
status: status,
ok: ok,
json: () => Promise.resolve({})
});

global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
});

process.nextTick(() => {
global.fetch.mockClear();
done();
it("returns an empty json object", done => {
const { del } = useApi();
const response = del(url);
expect(response).toEqual(Promise.resolve({}));

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});

describe("when the status code is any other successful status", () => {
it("returns the response as json", done => {
const { del } = useApi();
const response = del(url);
expect(response).toEqual(mockJsonPromise);

process.nextTick(() => {
global.fetch.mockClear();
done();
});
});
});
});

describe("when the response is not successful", () => {
describe("when the status code is 401 Unauthorized", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos/1";
status = 401;
ok = false;
mockFetchPromise = Promise.resolve({
Expand Down Expand Up @@ -427,7 +524,6 @@ describe("useApi", () => {

describe("when the status code is any other error ", () => {
beforeEach(() => {
url = "https://jsonplaceholder.typicode.com/todos/1";
status = 500;
ok = false;
mockFetchPromise = Promise.resolve({
Expand Down

0 comments on commit c50c9f4

Please sign in to comment.