utils test cases finished, linting errors fixed

Author: Can-Sahin

app/components/A/tests/index.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { ReactReduxContext } from 'react-redux';
+import { useStore } from 'react-redux';
 
-import getInjectors from './sagaInjectors';
+import { getInjectors } from './sagaInjectors';
 import { InjectSagaParams, LifeStore } from 'types';
 
 /**
@@ -25,7 +25,7 @@ export default function hocWithSaga<P>({ key, saga, mode }: InjectSagaParams) {
     class InjectSaga extends React.Component<P> {
       public static WrappedComponent = WrappedComponent;
 
-      public static contextType = ReactReduxContext;
+      // public static contextType = ReactReduxContext;
       public injectors: any;
 
       public static displayName = `withSaga(${WrappedComponent.displayName ||
@@ -55,9 +55,9 @@ export default function hocWithSaga<P>({ key, saga, mode }: InjectSagaParams) {
 }
 
 const useInjectSaga = ({ key, saga, mode }: InjectSagaParams) => {
-  const context = React.useContext(ReactReduxContext);
+  const store = useStore() as LifeStore;
   React.useEffect(() => {
-    const injectors = getInjectors(context.store as LifeStore);
+    const injectors = getInjectors(store);
     injectors.injectSaga(key, { saga: saga, mode: mode });
 
     return () => {

app/utils/injectSaga.tsx

@@ -8,7 +8,7 @@ import createReducer from '../reducers';
 import { LifeStore } from 'types';
 import { Reducer } from 'redux';
 
-export function injectReducerFactory(store: LifeStore, isValid: boolean) {
+export function injectReducerFactory(store: LifeStore, isValid: boolean = false) {
   return function injectReducer(key: string, reducer: Reducer<object>) {
     if (!isValid) {
       checkStore(store);
@@ -33,7 +33,7 @@ export function injectReducerFactory(store: LifeStore, isValid: boolean) {
   };
 }
 
-export default function getInjectors(store: LifeStore) {
+export function getInjectors(store: LifeStore) {
   checkStore(store);
 
   return {

app/utils/reducerInjectors.ts

@@ -7,7 +7,6 @@ export class ResponseError extends Error {
     this.response = response;
   }
 }
-
 /**
  * Parses the JSON returned by a network request
  *
@@ -16,6 +15,9 @@ export class ResponseError extends Error {
  * @return {object}          The parsed JSON from the request
  */
 function parseJSON(response) {
+  if (response.status === 204 || response.status === 205) {
+    return null;
+  }
   return response.json();
 }
 
@@ -26,12 +28,14 @@ function parseJSON(response) {
  *
  * @return {object|undefined} Returns either the response, or throws an error
  */
-function checkStatus(response): Response {
+function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
     return response;
   }
 
-  throw new ResponseError(response);
+  const error = new ResponseError(response.statusText);
+  error.response = response;
+  throw error;
 }
 
 /**
@@ -40,12 +44,10 @@ function checkStatus(response): Response {
  * @param  {string} url       The URL we want to request
  * @param  {object} [options] The options we want to pass to "fetch"
  *
- * @return {object}           An object containing either "data" or "err"
+ * @return {object}           The response data
  */
-export default function request(url: string, options?: RequestInit): Promise<{ } | { err: ResponseError }> {
-  return fetch(url, options)
-    .then(checkStatus)
-    .then(parseJSON)
-    .then((data) => (data))
-    .catch((err) => (err));
+export default async function request(url: string, options?: RequestInit): Promise<{ } | { err: ResponseError }> {
+  const fetchResponse = await fetch(url, options);
+  const response = await checkStatus(fetchResponse);
+  return parseJSON(response);
 }

app/utils/request.ts

@@ -32,7 +32,7 @@ const checkDescriptor = (descriptor: SagaDescriptor) => {
   );
 };
 
-export function injectSagaFactory(store: LifeStore, isValid: boolean) {
+export function injectSagaFactory(store: LifeStore, isValid: boolean = false) {
   return function injectSaga(
     key: string,
     descriptor: SagaDescriptor = {},
@@ -76,7 +76,7 @@ export function injectSagaFactory(store: LifeStore, isValid: boolean) {
   };
 }
 
-export function ejectSagaFactory(store: LifeStore, isValid: boolean) {
+export function ejectSagaFactory(store: LifeStore, isValid: boolean = false) {
   return function ejectSaga(key: string) {
     if (!isValid) {
       checkStore(store);
@@ -98,7 +98,7 @@ export function ejectSagaFactory(store: LifeStore, isValid: boolean) {
   };
 }
 
-export default function getInjectors(store: LifeStore) {
+export function getInjectors(store: LifeStore) {
   checkStore(store);
 
   return {

app/utils/sagaInjectors.ts

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loadable should render LazyComponent after waiting for it to load 1`] = `
+<div>
+  My lazy-loaded component
+</div>
+`;
+
+exports[`loadable should render fallback if given one 1`] = `
+<div>
+  Loading
+</div>
+`;
+
+exports[`loadable should render null by default 1`] = `null`;

app/utils/tests/__snapshots__/loadable.test.tsx.snap

@@ -2,14 +2,17 @@
  * Test injectors
  */
 
-import * as React from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 import renderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
 
 import configureStore from '../../configureStore';
 import { getInjectors } from '../reducerInjectors';
 
+import { createMemoryHistory } from 'history';
+
+const memoryHistory = createMemoryHistory();
 jest.mock('../reducerInjectors');
 
 import { useInjectReducer } from '../injectReducer';
@@ -19,9 +22,6 @@ const Component = () => null;
 
 const reducer = s => s;
 
-import { createMemoryHistory } from 'history';
-
-const memoryHistory = createMemoryHistory();
 
 describe('injectReducer decorator', () => {
   let store;

app/utils/tests/injectReducer.test.tsx

@@ -2,15 +2,18 @@
  * Test injectors
  */
 
-import * as React from 'react';
-
 import { put } from 'redux-saga/effects';
-import { shallow } from 'enzyme';
-
+import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
 
 import configureStore from '../../configureStore';
+import injectSaga, { useInjectSaga } from '../injectSaga';
+import { getInjectors } from '../sagaInjectors';
+
+
 import { createMemoryHistory } from 'history';
-import { DAEMON } from '../constants';
 
 const memoryHistory = createMemoryHistory();
 
@@ -21,19 +24,17 @@ function* testSaga() {
   yield put({ type: 'TEST', payload: 'yup' });
 }
 
+jest.mock('../sagaInjectors');
 describe('injectSaga decorator', () => {
   let store;
   let injectors;
   let ComponentWithSaga;
-  let injectSaga;
 
   beforeAll(() => {
-    jest.mock('../sagaInjectors', () => ({
-      __esModule: true,
-      default: jest.fn().mockImplementation(() => injectors),
-    }));
-
-    injectSaga = require('../injectSaga').default;
+    const mockedGetInjectors = (getInjectors as unknown) as jest.Mock<
+      typeof getInjectors
+    >; // compiler doesn't know that it's mocked. So manually cast it.
+    mockedGetInjectors.mockImplementation(() => injectors);
   });
 
   beforeEach(() => {
@@ -45,28 +46,35 @@ describe('injectSaga decorator', () => {
     ComponentWithSaga = injectSaga({
       key: 'test',
       saga: testSaga,
-      mode: DAEMON,
+      mode: 'testMode',
     })(Component);
-    jest.unmock('../sagaInjectors');
   });
 
   it('should inject given saga, mode, and props', () => {
     const props = { test: 'test' };
-    shallow(<ComponentWithSaga {...props} />, { context: { store: store } });
+    renderer.create(
+      // tslint:disable-next-line: jsx-wrap-multiline
+      <Provider store={store}>
+        <ComponentWithSaga {...props} />
+      </Provider>,
+    );
 
     expect(injectors.injectSaga).toHaveBeenCalledTimes(1);
     expect(injectors.injectSaga).toHaveBeenCalledWith(
       'test',
-      { saga: testSaga, mode: DAEMON },
+      { saga: testSaga, mode: 'testMode' },
       props,
     );
   });
 
   it('should eject on unmount with a correct saga key', () => {
     const props = { test: 'test' };
-    const renderedComponent = shallow(<ComponentWithSaga {...props} />, {
-      context: { store: store },
-    });
+    const renderedComponent = renderer.create(
+      // tslint:disable-next-line: jsx-wrap-multiline
+      <Provider store={store}>
+        <ComponentWithSaga {...props} />
+      </Provider>,
+    );
     renderedComponent.unmount();
 
     expect(injectors.ejectSaga).toHaveBeenCalledTimes(1);
@@ -82,10 +90,73 @@ describe('injectSaga decorator', () => {
 
   it('should propagate props', () => {
     const props = { testProp: 'test' };
-    const renderedComponent = shallow(<ComponentWithSaga {...props} />, {
-      context: { store: store },
+    const renderedComponent = renderer.create(
+      // tslint:disable-next-line: jsx-wrap-multiline
+      <Provider store={store}>
+        <ComponentWithSaga {...props} />
+      </Provider>,
+    );
+    const {
+      props: { children },
+    } = renderedComponent.getInstance();
+    expect(children.props).toEqual(props);
+  });
+});
+
+describe('useInjectSaga hook', () => {
+  let store;
+  let injectors;
+  let ComponentWithSaga;
+
+  beforeAll(() => {
+    const mockedGetInjectors = (getInjectors as unknown) as jest.Mock<
+      typeof getInjectors
+    >; // compiler doesn't know that it's mocked. So manually cast it.
+    mockedGetInjectors.mockImplementation(() => injectors);  });
+
+  beforeEach(() => {
+    store = configureStore({}, memoryHistory);
+    injectors = {
+      injectSaga: jest.fn(),
+      ejectSaga: jest.fn(),
+    };
+    ComponentWithSaga = () => {
+      useInjectSaga({
+        key: 'test',
+        saga: testSaga,
+        mode: 'testMode',
+      });
+      return null;
+    };
+  });
+
+  it('should inject given saga and mode', () => {
+    const props = { test: 'test' };
+    render(
+      // tslint:disable-next-line: jsx-wrap-multiline
+      <Provider store={store}>
+        <ComponentWithSaga {...props} />
+      </Provider>,
+    );
+
+    expect(injectors.injectSaga).toHaveBeenCalledTimes(1);
+    expect(injectors.injectSaga).toHaveBeenCalledWith('test', {
+      saga: testSaga,
+      mode: 'testMode',
     });
+  });
 
-    expect(renderedComponent.prop('testProp')).toBe('test');
+  it('should eject on unmount with a correct saga key', () => {
+    const props = { test: 'test' };
+    const { unmount } = render(
+      // tslint:disable-next-line: jsx-wrap-multiline
+      <Provider store={store}>
+        <ComponentWithSaga {...props} />
+      </Provider>,
+    );
+    unmount();
+
+    expect(injectors.ejectSaga).toHaveBeenCalledTimes(1);
+    expect(injectors.ejectSaga).toHaveBeenCalledWith('test');
   });
 });