Merge pull request #69 from jorilallo/jori/store-refactor

Store setup + frontend Jest

.flowconfig

@@ -6,6 +6,7 @@
 .*/node_modules/react-side-effect/.*
 .*/node_modules/fbjs/.*
 .*/node_modules/config-chain/.*
+*.test.js
 
 [libs]
 

frontend/components/Alert/Alert.test.js

@@ -1,7 +1,5 @@
 /* eslint-disable */
 import React from 'react';
-import { snap } from 'utils/testUtils';
-
 import Alert from '.';
 
 test('renders default as info', () => {

frontend/components/Alert/__snapshots__/Alert.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders danger 1`] = `
+<Flex
+  align="center"
+  className="container danger"
+  justify="center"
+>
+  danger
+</Flex>
+`;
+
+exports[`renders default as info 1`] = `
+<Flex
+  align="center"
+  className="container info"
+  justify="center"
+>
+  default
+</Flex>
+`;
+
+exports[`renders info 1`] = `
+<Flex
+  align="center"
+  className="container info"
+  justify="center"
+>
+  info
+</Flex>
+`;
+
+exports[`renders success 1`] = `
+<Flex
+  align="center"
+  className="container success"
+  justify="center"
+>
+  success
+</Flex>
+`;
+
+exports[`renders warning 1`] = `
+<Flex
+  align="center"
+  className="container warning"
+  justify="center"
+>
+  warning
+</Flex>
+`;

frontend/components/Document/components/DocumentHtml/DocumentHtml.test.js

@@ -1,16 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import DocumentHtml from './DocumentHtml';
-import { shallow } from 'enzyme';
-
-const testHtml = `
-  <h1>test document</h1>
-  <p>Hello! <a href="/internal">internal link</a></p>
-  <p>Aliens <a href="/external">external link</a></p>
-`;
-
-test('renders', () => {
-  const wrapper = shallow(<DocumentHtml html={testHtml} />);
-  expect(wrapper.find('.document').length).toBe(1);
-});

frontend/models/Collection.js

@@ -0,0 +1,50 @@
+// @flow
+import { extendObservable, action, computed, runInAction } from 'mobx';
+import invariant from 'invariant';
+import _ from 'lodash';
+
+import ApiClient, { client } from 'utils/ApiClient';
+import stores from 'stores';
+import ErrorsStore from 'stores/ErrorsStore';
+import type { NavigationNode } from 'types';
+
+class Collection {
+  createdAt: string;
+  description: ?string;
+  id: string;
+  name: string;
+  type: 'atlas' | 'journal';
+  navigationTree: NavigationNode;
+  updatedAt: string;
+  url: string;
+
+  client: ApiClient;
+  errors: ErrorsStore;
+
+  /* Actions */
+
+  @action update = async () => {
+    try {
+      const res = await this.client.post('/collections.info', { id: this.id });
+      invariant(res && res.data, 'API response should be available');
+      const { data } = res;
+      runInAction('Collection#update', () => {
+        this.updateData(data);
+      });
+    } catch (e) {
+      this.errors.add('Collection failed loading');
+    }
+  };
+
+  updateData(data: Collection) {
+    extendObservable(this, data);
+  }
+
+  constructor(collection: Collection) {
+    this.updateData(collection);
+    this.client = client;
+    this.errors = stores.errors;
+  }
+}
+
+export default Collection;

frontend/models/Collection.test.js

@@ -0,0 +1,58 @@
+/* eslint-disable */
+import Collection from './Collection';
+
+jest.mock('utils/ApiClient', () => ({
+  client: { post: {} },
+}));
+jest.mock('stores', () => ({ errors: {} }));
+
+describe('Collection model', () => {
+  test('should initialize with data', () => {
+    const collection = new Collection({
+      id: 123,
+      name: 'Engineering',
+    });
+    expect(collection.name).toBe('Engineering');
+  });
+
+  describe('#update', () => {
+    test('should update', async () => {
+      const collection = new Collection({
+        id: 123,
+        name: 'Engineering',
+      });
+      collection.client = {
+        post: jest.fn(() => ({
+          data: {
+            name: 'New collection',
+          },
+        })),
+      };
+
+      await collection.update();
+
+      expect(collection.client.post).toHaveBeenCalledWith('/collections.info', {
+        id: 123,
+      });
+      expect(collection.name).toBe('New collection');
+    });
+
+    test('should report errors', async () => {
+      const collection = new Collection({
+        id: 123,
+      });
+      collection.client = {
+        post: jest.fn(() => Promise.reject),
+      };
+      collection.errors = {
+        add: jest.fn(),
+      };
+
+      await collection.update();
+
+      expect(collection.errors.add).toHaveBeenCalledWith(
+        'Collection failed loading'
+      );
+    });
+  });
+});

frontend/scenes/Atlas/AtlasStore.js

@@ -2,7 +2,7 @@
 import { observable, action, computed } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import type { Collection } from 'types';
+import Collection from 'models/Collection';
 
 const store = new class AtlasStore {
   @observable collection: ?(Collection & { recentDocuments?: Object[] });
@@ -25,7 +25,7 @@ const store = new class AtlasStore {
       const res = await client.get('/collections.info', { id });
       invariant(res && res.data, 'Data should be available');
       const { data } = res;
-      this.collection = data;
+      this.collection = new Collection(data);
       successCallback(data);
     } catch (e) {
       console.error('Something went wrong');

frontend/scenes/Dashboard/DashboardStore.js

@@ -2,7 +2,8 @@
 import { observable, action, runInAction } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import type { Pagination, Collection } from 'types';
+import type { Pagination } from 'types';
+import Collection from 'models/Collection';
 
 type Options = {
   team: Object,
@@ -30,7 +31,7 @@ class DashboardStore {
       );
       const { data, pagination } = res;
       runInAction('fetchCollections', () => {
-        this.collections = data;
+        this.collections = data.map(collection => new Collection(collection));
         this.pagination = pagination;
       });
     } catch (e) {

frontend/stores/ErrorsStore.js

@@ -0,0 +1,18 @@
+// @flow
+import { observable, action } from 'mobx';
+
+class UiStore {
+  @observable errors = observable.array([]);
+
+  /* Actions */
+
+  @action add = (errorMessage: string): void => {
+    this.errors.push(errorMessage);
+  };
+
+  @action remove = (index: number): void => {
+    this.errors.splice(index, 1);
+  };
+}
+
+export default UiStore;

frontend/stores/ErrorsStore.test.js

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import ErrorsStore from './ErrorsStore';
+
+// Actions
+describe('ErrorsStore', () => {
+  let store;
+
+  beforeEach(() => {
+    store = new ErrorsStore();
+  });
+
+  test('#add should add errors', () => {
+    expect(store.errors.length).toBe(0);
+    store.add('first error');
+    store.add('second error');
+    expect(store.errors.length).toBe(2);
+  });
+
+  test('#remove should remove errors', () => {
+    store.add('first error');
+    store.add('second error');
+    expect(store.errors.length).toBe(2);
+    store.remove(0);
+    expect(store.errors.length).toBe(1);
+    expect(store.errors[0]).toBe('second error');
+  });
+});

frontend/stores/index.js

@@ -2,10 +2,12 @@
 import { autorunAsync } from 'mobx';
 import UserStore, { USER_STORE } from './UserStore';
 import UiStore, { UI_STORE } from './UiStore';
+import ErrorsStore from './ErrorsStore';
 
 const stores = {
   user: new UserStore(),
   ui: new UiStore(),
+  errors: new ErrorsStore(),
 };
 
 // Persist stores to localStorage

frontend/types/index.js

@@ -19,20 +19,9 @@ export type NavigationNode = {
   children: Array<NavigationNode>,
 };
 
-export type Collection = {
-  createdAt: string,
-  description: ?string,
-  id: string,
-  name: string,
-  type: 'atlas' | 'journal',
-  navigationTree: NavigationNode,
-  updatedAt: string,
-  url: string,
-};
-
 export type Document = {
   collaborators: Array<User>,
-  collection: Collection,
+  collection: Object,
   createdAt: string,
   createdBy: string,
   html: string,

frontend/utils/setupJest.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+const snap = children => {
+  const wrapper = shallow(children);
+  expect(toJson(wrapper)).toMatchSnapshot();
+};
+
+global.snap = snap;

frontend/utils/testUtils.js

@@ -1,10 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-const snap = children => {
-  const component = renderer.create(children);
-  expect(component).toMatchSnapshot();
-};
-
-export { snap };

package.json

@@ -28,7 +28,7 @@
   },
   "jest": {
     "verbose": false,
-    "testPathDirs": [
+    "roots": [
       "frontend"
     ],
     "moduleNameMapper": {
@@ -48,6 +48,7 @@
       "frontend"
     ],
     "setupFiles": [
+      "<rootDir>/frontend/utils/setupJest.js",
       "<rootDir>/__mocks__/window.js"
     ]
   },
@@ -171,13 +172,14 @@
     "webpack": "1.13.2"
   },
   "devDependencies": {
-    "babel-jest": "^15.0.0",
-    "enzyme": "^2.4.1",
+    "babel-jest": "^20.0.0",
+    "enzyme": "2.8.2",
+    "enzyme-to-json": "^1.5.1",
     "fetch-test-server": "^1.1.0",
     "flow-bin": "^0.45.0",
     "identity-obj-proxy": "^3.0.0",
     "ignore-loader": "0.1.1",
-    "jest-cli": "^15.1.1",
+    "jest-cli": "^20.0.0",
     "koa-webpack-dev-middleware": "1.4.5",
     "koa-webpack-hot-middleware": "1.0.3",
     "lint-staged": "^3.4.0",
@@ -187,4 +189,4 @@
     "react-addons-test-utils": "^15.3.1",
     "react-test-renderer": "^15.3.1"
   }
-}
+}