Merge 43ae773 into 7a7048a

package.json

@@ -46,7 +46,8 @@
     "test:clean": "rimraf ./coverage",
     "test:nowatch": "tsdx test --coverage",
     "test:report": "tsdx test --coverage && coveralls < ./coverage/lcov.info",
-    "test:watch": "tsdx test --coverage --watch",
+    "test:watch": "tsdx test --watch",
+    "test:watchcoverage": "tsdx test --watchAll --coverage",
     "types": "tsc --p tsconfig.json"
   },
   "dependencies": {},
@@ -92,10 +93,13 @@
     }
   },
   "jest": {
+    "coverageDirectory": "coverage",
     "collectCoverageFrom": [
-      "packages/*/src/**/*.{js,jsx,ts,tsx}",
-      "!packages/*/src/(index|serviceWorker|setupTests).*",
-      "!packages/*/src/**/*.(ignored|stories|test).{js,jsx,ts,tsx}"
+      "packages/*/src/**/*.{js,jsx,ts,tsx}"
+    ],
+    "coveragePathIgnorePatterns": [
+      ".*\\.(ignored|stories|test)\\.*",
+      "packages/dev-helpers/"
     ]
   },
   "workspaces": [

packages/dev-helpers/package.json

@@ -23,8 +23,8 @@
   ],
   "source": "src/index.ts",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "jsnext:main": "dist/index.esm.js",
+  "module": "dist/react-hibernate-dev-helpers.esm.js",
+  "jsnext:main": "dist/react-hibernate-dev-helpers.esm.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
@@ -49,9 +49,10 @@
     "format:verify": "prettier --list-different .",
     "lint": "tsdx lint . --max-warnings 0",
     "release:changelog": "standard-version --skip.commit --skip.tag --release-as ",
-    "test:clean": "rimraf ./coverage",
+    "test:clean": "rimraf ./coverage-local",
     "test:nowatch": "tsdx test --coverage --passWithNoTests",
-    "test:watch": "tsdx test --coverage --watch --passWithNoTests",
+    "test:watch": "tsdx test --watch --passWithNoTests",
+    "test:watchcoverage": "tsdx test --watchAll --coverage --passWithNoTests",
     "types": "tsc --p tsconfig.json"
   },
   "dependencies": {
@@ -70,6 +71,12 @@
     "react-dom": ">=16.8.0"
   },
   "jest": {
-    "coverageDirectory": "coverage-local"
+    "coverageDirectory": "coverage-local",
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}"
+    ],
+    "coveragePathIgnorePatterns": [
+      ".*\\.(ignored|stories|test)\\.*"
+    ]
   }
 }

packages/dev-helpers/src/components/RenderCount.tsx

@@ -3,20 +3,13 @@ import React, { useRef } from 'react';
 
 import Typography from '@material-ui/core/Typography';
 
-interface RenderCountProps {
-  prefix?: string;
-}
-
-const RenderCount: React.FC<RenderCountProps> = (props) => {
-  const { prefix = 'Render count: ' } = props;
-
+const RenderCount: React.FC = () => {
   const renderCountRef = useRef(0);
   renderCountRef.current++;
 
   return (
     <Typography variant="body1">
-      {prefix}
-      {renderCountRef.current}
+      (I've rendered {renderCountRef.current} {renderCountRef.current === 1 ? 'time' : 'times'})
     </Typography>
   );
 };

packages/dev-helpers/src/jest/index.ts

@@ -1,4 +1,4 @@
+export { default as renderWithReduxContext } from './renderWithReduxContext';
 export { default as renderWithRouterContext } from './renderWithRouterContext';
-export * from './renderWithRouterContext';
 
 export * from './suppressReactDevErrors';

packages/dev-helpers/src/jest/renderWithReduxContext.tsx

@@ -0,0 +1,14 @@
+import React, { ReactElement, ComponentType } from 'react';
+import { isElement } from 'react-is';
+import { Store } from 'redux';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react';
+
+const renderWithReduxContext = (
+  AppRoot: ReactElement | ComponentType,
+  store: Store,
+): ReturnType<typeof render> => {
+  return render(<Provider store={store}>{isElement(AppRoot) ? AppRoot : <AppRoot />}</Provider>);
+};
+
+export default renderWithReduxContext;

packages/dev-helpers/src/redux/index.ts

@@ -1,7 +1,6 @@
 export { default as reduxDecorator } from './reduxDecorator';
-export * from './reduxDecorator';
 
 export { default as useCountSelector } from './useCountSelector';
-export * from './useCountSelector';
+export { default as useStateSelector } from './useStateSelector';
 
 export * from './store';

packages/dev-helpers/src/redux/useStateSelector.ts

@@ -0,0 +1,11 @@
+import { useSelector } from 'react-redux';
+
+import { DevHelperState } from './store';
+
+const stateSelector = (state: DevHelperState) => state;
+
+const useStateSelector = (): DevHelperState => {
+  return useSelector(stateSelector);
+};
+
+export default useStateSelector;

packages/react-hibernate/package.json

@@ -24,8 +24,8 @@
   ],
   "source": "src/index.ts",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "jsnext:main": "dist/index.esm.js",
+  "module": "dist/react-hibernate.esm.js",
+  "jsnext:main": "dist/react-hibernate.esm.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
@@ -50,9 +50,10 @@
     "format:verify": "prettier --list-different .",
     "lint": "tsdx lint . --max-warnings 0",
     "release:changelog": "standard-version --skip.commit --skip.tag --release-as ",
-    "test:clean": "rimraf ./coverage",
+    "test:clean": "rimraf ./coverage-local",
     "test:nowatch": "tsdx test --coverage --passWithNoTests",
-    "test:watch": "tsdx test --coverage --watch --passWithNoTests",
+    "test:watch": "tsdx test --watch --passWithNoTests",
+    "test:watchcoverage": "tsdx test --watchAll --coverage --passWithNoTests",
     "types": "tsc --p tsconfig.json"
   },
   "dependencies": {
@@ -69,6 +70,12 @@
     "react-dom": ">=16.8.0"
   },
   "jest": {
-    "coverageDirectory": "coverage-local"
+    "coverageDirectory": "coverage-local",
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}"
+    ],
+    "coveragePathIgnorePatterns": [
+      ".*\\.(ignored|stories|test)\\.*"
+    ]
   }
 }

packages/react-pauseable-containers/package.json

@@ -28,8 +28,8 @@
   ],
   "source": "src/index.ts",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "jsnext:main": "dist/index.esm.js",
+  "module": "dist/react-pauseable-containers.esm.js",
+  "jsnext:main": "dist/react-pauseable-containers.esm.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
@@ -54,9 +54,10 @@
     "format:verify": "prettier --list-different .",
     "lint": "tsdx lint . --max-warnings 0",
     "release:changelog": "standard-version --skip.commit --skip.tag --release-as ",
-    "test:clean": "rimraf ./coverage",
-    "test:nowatch": "tsdx test --coverage --passWithNoTests",
-    "test:watch": "tsdx test --coverage --watch --passWithNoTests",
+    "test:clean": "rimraf ./coverage-local",
+    "test:nowatch": "tsdx test --coverage",
+    "test:watch": "tsdx test --watch",
+    "test:watchcoverage": "tsdx test --watchAll --coverage",
     "types": "tsc --p tsconfig.json"
   },
   "dependencies": {
@@ -80,7 +81,13 @@
     }
   },
   "jest": {
-    "coverageDirectory": "coverage-local"
+    "coverageDirectory": "coverage-local",
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}"
+    ],
+    "coveragePathIgnorePatterns": [
+      ".*\\.(ignored|stories|test)\\.*"
+    ]
   },
   "gitHead": "ea7266569cd13e20be67f2ac7d50758a1151254a"
 }

packages/react-pauseable-containers/src/PauseableComponentContainer.test.tsx

@@ -0,0 +1,38 @@
+/* eslint-env jest */
+import '@testing-library/jest-dom/extend-expect';
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { PauseableComponentContainer } from '.';
+
+describe('PauseableComponentContainer', () => {
+  it('allows updates', () => {
+    const { rerender } = render(
+      <PauseableComponentContainer shouldUpdate={true}>First render</PauseableComponentContainer>,
+    );
+
+    expect(screen.queryByText('First render')).toBeInTheDocument();
+
+    rerender(
+      <PauseableComponentContainer shouldUpdate={true}>Second render</PauseableComponentContainer>,
+    );
+
+    expect(screen.queryByText('First render')).not.toBeInTheDocument();
+    expect(screen.queryByText('Second render')).toBeInTheDocument();
+  });
+
+  it('prevents updates', () => {
+    const { rerender } = render(
+      <PauseableComponentContainer shouldUpdate={false}>First render</PauseableComponentContainer>,
+    );
+
+    expect(screen.queryByText('First render')).toBeInTheDocument();
+
+    rerender(
+      <PauseableComponentContainer shouldUpdate={false}>Second render</PauseableComponentContainer>,
+    );
+
+    expect(screen.queryByText('First render')).toBeInTheDocument();
+    expect(screen.queryByText('Second render')).not.toBeInTheDocument();
+  });
+});

packages/react-pauseable-containers/src/PauseableReduxContainer.test.tsx

@@ -0,0 +1,59 @@
+/* eslint-env jest */
+import '@testing-library/jest-dom/extend-expect';
+import * as React from 'react';
+import { screen } from '@testing-library/react';
+
+import {
+  createDevHelperStore,
+  incrementAction,
+  renderWithReduxContext,
+  useCountSelector,
+} from 'react-hibernate-dev-helpers';
+
+import { PauseableReduxContainer } from '.';
+import { act } from 'react-dom/test-utils';
+
+const CountDisplay: React.FC = () => {
+  const count = useCountSelector();
+  return <div>count = {count}</div>;
+};
+
+describe('PauseableReduxContainer', () => {
+  it('allows updates', () => {
+    const myStore = createDevHelperStore();
+
+    renderWithReduxContext(
+      <PauseableReduxContainer shouldUpdate={true}>
+        <CountDisplay />
+      </PauseableReduxContainer>,
+      myStore,
+    );
+
+    expect(screen.queryByText('count = 0')).toBeInTheDocument();
+
+    act(() => {
+      myStore.dispatch(incrementAction());
+    });
+
+    expect(screen.queryByText('count = 1')).toBeInTheDocument();
+  });
+
+  it('prevents updates', () => {
+    const myStore = createDevHelperStore();
+
+    renderWithReduxContext(
+      <PauseableReduxContainer shouldUpdate={false}>
+        <CountDisplay />
+      </PauseableReduxContainer>,
+      myStore,
+    );
+
+    expect(screen.queryByText('count = 0')).toBeInTheDocument();
+
+    act(() => {
+      myStore.dispatch(incrementAction());
+    });
+
+    expect(screen.queryByText('count = 0')).toBeInTheDocument();
+  });
+});

packages/react-pauseable-containers/src/index.ts

@@ -2,3 +2,5 @@ export { default as PauseableComponentContainer } from './PauseableComponentCont
 export * from './PauseableComponentContainer';
 export { default as PauseableReduxContainer } from './PauseableReduxContainer';
 export * from './PauseableReduxContainer';
+
+export * from './types';