test(web): api/index.jsx

web/config/setupTests.js

@@ -12,3 +12,11 @@ Object.defineProperty(window, 'matchMedia', {
  dispatchEvent: jest.fn(),
  }),
 });
+
+window.fetch = () => Promise.resolve();
+
+beforeEach(() => {
+ jest.spyOn(window, 'fetch').mockImplementation(async (url, opts = {}) => {
+ throw new Error(`Unexpected fetch to ${url}, ${JSON.stringify(opts)}`);
+ });
+});

web/src/api/__mocks__/baseUrl.js

@@ -0,0 +1 @@
+export const baseUrl = 'http:https://base-url.local:5000';

web/src/api/__tests__/index.test.jsx

@@ -0,0 +1,116 @@
+import { h } from 'preact';
+import { ApiProvider, useFetch, useApiHost } from '..';
+import { render, screen } from '@testing-library/preact';
+
+jest.mock('../baseUrl');
+
+describe('useApiHost', () => {
+ test('is set from the baseUrl', async () => {
+ function Test() {
+ const apiHost = useApiHost();
+ return <div>{apiHost}</div>;
+ }
+ render(
+ <ApiProvider>
+ <Test />
+ </ApiProvider>
+ );
+ expect(screen.queryByText('http:https://base-url.local:5000')).toBeInTheDocument();
+ });
+});
+
+describe('useFetch', () => {
+ function Test() {
+ const { data, status } = useFetch('/api/tacos');
+ return (
+ <div>
+ <span>{data ? data.returnData : ''}</span>
+ <span>{status}</span>
+ </div>
+ );
+ }
+ test('loads data', async () => {
+ const fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(
+ (url) =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
+ }, 1);
+ })
+ );
+
+ render(
+ <ApiProvider>
+ <Test />
+ </ApiProvider>
+ );
+
+ expect(screen.queryByText('loading')).toBeInTheDocument();
+ expect(screen.queryByText('yep')).not.toBeInTheDocument();
+
+ jest.runAllTimers();
+ await screen.findByText('loaded');
+ expect(fetchSpy).toHaveBeenCalledWith('http:https://base-url.local:5000/api/tacos');
+
+ expect(screen.queryByText('loaded')).toBeInTheDocument();
+ expect(screen.queryByText('yep')).toBeInTheDocument();
+ });
+
+ test('sets error if response is not okay', async () => {
+ jest.spyOn(window, 'fetch').mockImplementation(
+ (url) =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({ ok: false });
+ }, 1);
+ })
+ );
+
+ render(
+ <ApiProvider>
+ <Test />
+ </ApiProvider>
+ );
+
+ expect(screen.queryByText('loading')).toBeInTheDocument();
+ jest.runAllTimers();
+ await screen.findByText('error');
+ });
+
+ test('does not re-fetch if the query has already been made', async () => {
+ const fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(
+ (url) =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
+ }, 1);
+ })
+ );
+
+ const { rerender } = render(
+ <ApiProvider>
+ <Test key={0} />
+ </ApiProvider>
+ );
+
+ expect(screen.queryByText('loading')).toBeInTheDocument();
+ expect(screen.queryByText('yep')).not.toBeInTheDocument();
+
+ jest.runAllTimers();
+ await screen.findByText('loaded');
+ expect(fetchSpy).toHaveBeenCalledWith('http:https://base-url.local:5000/api/tacos');
+
+ rerender(
+ <ApiProvider>
+ <Test key={1} />
+ </ApiProvider>
+ );
+
+ expect(screen.queryByText('loaded')).toBeInTheDocument();
+ expect(screen.queryByText('yep')).toBeInTheDocument();
+
+ jest.runAllTimers();
+
+ expect(fetchSpy).toHaveBeenCalledTimes(1);
+ });
+});

web/src/api/baseUrl.js

@@ -0,0 +1 @@
+export const baseUrl = import.meta.env.SNOWPACK_PUBLIC_API_HOST || window.baseUrl || '';

web/src/api/index.jsx

@@ -1,9 +1,8 @@
+import { baseUrl } from './baseUrl';
 import { h, createContext } from 'preact';
 import produce from 'immer';
 import { useContext, useEffect, useReducer } from 'preact/hooks';
 
-export const ApiHost = createContext(import.meta.env.SNOWPACK_PUBLIC_API_HOST || window.baseUrl || '');
-
 export const FetchStatus = {
  NONE: 'none',
  LOADING: 'loading',
@@ -12,11 +11,11 @@ export const FetchStatus = {
 };
 
 const initialState = Object.freeze({
- host: import.meta.env.SNOWPACK_PUBLIC_API_HOST || window.baseUrl || '',
+ host: baseUrl,
  queries: {},
 });
-export const Api = createContext(initialState);
-export default Api;
+
+const Api = createContext(initialState);
 
 function reducer(state, { type, payload, meta }) {
  switch (type) {
@@ -65,8 +64,12 @@ export function useFetch(url, fetchId) {
  async function fetchData() {
  await dispatch({ type: 'REQUEST', payload: { url, fetchId } });
  const response = await fetch(`${state.host}${url}`);
- const data = await response.json();
- await dispatch({ type: 'RESPONSE', payload: { url, ok: response.ok, data, fetchId } });
+ try {
+ const data = await response.json();
+ await dispatch({ type: 'RESPONSE', payload: { url, ok: response.ok, data, fetchId } });
+ } catch (e) {
+ await dispatch({ type: 'RESPONSE', payload: { url, ok: false, data: null, fetchId } });
+ }
  }
 
  fetchData();