Setup tests with TS (#3)

* Migrate Enterprise Login

* Fix types for enterprise login

* Migrate comms test

* Migrate component with test

* Setup Circle CI

* Fix circle config

* Add webpack build config

* Test Loading Component

.circleci/config.yml

@@ -0,0 +1,75 @@
+version: 2.1
+
+executors:
+  node:
+    docker:
+      - image: circleci/node:10.17.0
+
+commands:
+  install-dependencies:
+    description: 'Install Dependencies'
+    steps:
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile
+
+  restore-yarn:
+    description: 'Restore Yarn Package Cache'
+    steps:
+      - restore_cache:
+          key: yarn-packages-{{ checksum "yarn.lock" }}
+
+  save-yarn:
+    description: 'Save Yarn Package Cache'
+    steps:
+      - save_cache:
+          key: yarn-packages-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+
+jobs:
+  setup:
+    executor: node
+    steps:
+      - checkout
+      - restore-yarn
+      - install-dependencies
+      - save-yarn
+      - persist_to_workspace:
+          root: ./
+          paths:
+            - ./
+
+  run-unit-tests:
+    executor: node
+    steps:
+      - attach_workspace:
+          at: ./
+      - run:
+          name: Run Prettier (Check)
+          command: yarn prettier-check
+      - run:
+          name: Run Jest
+          command: yarn test --coverage
+
+  build-ts:
+    executor: node
+    steps:
+      - attach_workspace:
+          at: ./
+      - run:
+          name: 'Build TS'
+          command: yarn build
+
+workflows:
+  version: 2.1
+
+  run-tests:
+    jobs:
+      - setup
+      - run-unit-tests:
+          requires:
+            - setup
+      - build-ts:
+          requires:
+            - setup

package.json

@@ -4,15 +4,15 @@
   "description": "GitHub Notifications on your menu bar.",
   "main": "main.js",
   "scripts": {
-    "build": "webpack --config webpack.config.js --production",
-    "watch": "webpack --config webpack.config.js --watch",
+    "build": "webpack --config webpack.prod.js",
+    "watch": "webpack --config webpack.common.js --watch",
     "package": "electron-packager . Gitify --overwrite --platform=darwin --arch=x64 --electron-version=1.6.10 --asar=true --icon=images/app-icon.icns --prune --ignore='src' --ignore='coverage'",
     "codesign": "bash scripts/codesign.bash",
     "dist": "yarn build && yarn package && yarn codesign",
     "prettier-check": "prettier --check 'src/**/*.{js,ts,tsx}'",
     "prettier": "prettier --single-quote --trailing-comma es5 --write 'src/**/*.{js,ts,tsx}'",
     "jest": "jest",
-    "test": "yarn prettier-check && yarn jest -- --coverage",
+    "test": "yarn jest",
     "start": "electron . –enable-logging"
   },
   "repository": {
@@ -47,6 +47,8 @@
   },
   "homepage": "https://www.gitify.io/",
   "jest": {
+    "preset": "ts-jest/presets/js-with-ts",
+    "testEnvironment": "jsdom",
     "coverageThreshold": {
       "global": {
         "lines": 95
@@ -94,19 +96,24 @@
     "typescript": "^3.7.3"
   },
   "devDependencies": {
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^24.0.24",
+    "@types/node": "^12.12.21",
     "@types/react": "^16.9.16",
     "@types/react-redux": "^7.1.5",
     "babel-jest": "=20.0.3",
     "electron": "=7.1.3",
     "electron-packager": "=8.7.0",
     "enzyme": "=2.8.2",
-    "jest": "=20.0.4",
+    "jest": "^24.9.0",
     "nock": "=9.0.13",
     "prettier": "=1.19.1",
     "react-test-renderer": "=16.12.0",
     "redux-logger": "=3.0.6",
     "redux-mock-store": "=1.2.3",
+    "ts-jest": "^24.2.0",
     "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10"
+    "webpack-cli": "^3.3.10",
+    "webpack-merge": "^4.2.2"
   }
 }

src/js/components/__snapshots__/oops.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/oops.js should render itself & its children 1`] = `
+<div
+  className="container-fluid main-container notifications errored"
+>
+  <h2>
+    Oops something went wrong.
+  </h2>
+  <h4>
+    Couldn't get your notifications.
+  </h4>
+  <h1
+    className="emoji"
+  >
+    😔
+  </h1>
+</div>
+`;
+
+exports[`components/oops.tsx should render itself & its children 1`] = `
+<div
+  className="container-fluid main-container notifications errored"
+>
+  <h2>
+    Oops something went wrong.
+  </h2>
+  <h4>
+    Couldn't get your notifications.
+  </h4>
+  <h1
+    className="emoji"
+  >
+    😔
+  </h1>
+</div>
+`;

src/js/components/loading.test.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { shallow, mount } from 'enzyme';
+import { Map } from 'immutable';
+import * as NProgress from 'nprogress';
+
+import { Loading, mapStateToProps } from './loading';
+
+jest.mock('nprogress', () => {
+  return {
+    configure: jest.fn(),
+    start: jest.fn(),
+    done: jest.fn(),
+    remove: jest.fn(),
+  };
+});
+
+describe('components/loading.js', function() {
+  beforeEach(() => {
+    NProgress.configure.mockReset();
+    NProgress.start.mockReset();
+    NProgress.done.mockReset();
+    NProgress.remove.mockReset();
+  });
+
+  it('should test the mapStateToProps method', () => {
+    const state = {
+      notifications: Map({
+        isFetching: false,
+      }),
+    };
+
+    const mappedProps = mapStateToProps(state);
+
+    expect(mappedProps.isLoading).toBeFalsy();
+  });
+
+  it('should check that NProgress is getting called in getDerivedStateFromProps (loading)', function() {
+    const { container } = render(<Loading isLoading={true} />);
+
+    expect(container.innerHTML).toBe('');
+    expect(NProgress.configure).toHaveBeenCalledTimes(1);
+    expect(NProgress.start).toHaveBeenCalledTimes(1);
+  });
+
+  it('should check that NProgress is getting called in getDerivedStateFromProps (not loading)', function() {
+    const { container } = render(<Loading isLoading={false} />);
+
+    expect(container.innerHTML).toBe('');
+    expect(NProgress.configure).toHaveBeenCalledTimes(1);
+    expect(NProgress.done).toHaveBeenCalledTimes(1);
+  });
+
+  it('should remove NProgress on unmount', function() {
+    const { unmount } = render(<Loading isLoading={false} />);
+    expect(NProgress.remove).toHaveBeenCalledTimes(0);
+    unmount();
+    expect(NProgress.remove).toHaveBeenCalledTimes(1);
+  });
+});

src/js/components/loading.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import NProgress from 'nprogress';
+import * as NProgress from 'nprogress';
 
 interface IProps {
   isLoading: boolean;
@@ -13,10 +13,6 @@ export class Loading extends React.PureComponent<IProps> {
     NProgress.configure({
       showSpinner: false,
     });
-
-    if (this.props.isLoading) {
-      NProgress.start();
-    }
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -26,7 +22,7 @@ export class Loading extends React.PureComponent<IProps> {
       NProgress.done();
     }
 
-    return null;
+    return {};
   }
 
   componentWillUnmount() {