Merge pull request #5 from mjolnirjs/release/0.1.0

WIP: add test units

.gitignore

@@ -7,5 +7,6 @@ node_modules
 .rts2_cache_umd
 dist
 
+coverage
 # local history
 .history

package.json

@@ -1,16 +1,16 @@
 {
   "name": "stated-bean",
-  "version": "0.1.0",
+  "version": "0.1.0-alpha",
   "main": "dist/index.js",
-  "module": "dist/x.esm.js",
+  "module": "dist/stated-bean.esm.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "tsdx test --env=jsdom"
+    "test": "tsdx test --env=jsdom --coverage"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -27,14 +27,20 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.17",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.8.5",
+    "@types/react-test-renderer": "^16.9.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "husky": "^3.0.3",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-test-renderer": "^16.9.0",
     "tsdx": "^0.7.2",
     "tslib": "^1.10.0",
     "typescript": "^3.5.3"

src/context/StatedBeanConsumer.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {
+  StatedBeanContextValue,
+  getStatedBeanContext,
+} from './StatedBeanContext';
+
+export interface StatedBeanConsumerProps {
+  children: (context: StatedBeanContextValue) => React.ReactNode;
+}
+
+export const StatedBeanConsumer: React.FC<StatedBeanConsumerProps> = ({
+  children,
+}) => {
+  const StatedBeanContext = getStatedBeanContext();
+  return (
+    <StatedBeanContext.Consumer>
+      {context => children(context)}
+    </StatedBeanContext.Consumer>
+  );
+};

src/context/index.ts

@@ -1,2 +1,3 @@
 export * from './StatedBeanContext';
 export * from './StatedBeanProvider';
+export * from './StatedBeanConsumer';

src/hooks/useStatedBean.ts

@@ -13,8 +13,12 @@ export function useStatedBean<T>(
     throw new Error('not found container');
   }
   const bean = context.container.getBean(type) as any;
+
+  if (bean === undefined) {
+    throw new Error('not found bean of ' + type);
+  }
   const change_event = Symbol.for(bean.constructor.name + '_change');
-  const [version, setVersion] = useState(0);
+  const [, setVersion] = useState(0);
 
   const beanChangeListener = (_bean: T, field: string) => {
     if (dependentFields === undefined) {

src/metadata/index.ts

@@ -1,11 +1,10 @@
 import { StatedBeanMetaStorage } from './storage';
 
 export function getMetadataStorage(): StatedBeanMetaStorage {
-  if (window.StateBeanMetadataStorage === undefined) {
-    window.StateBeanMetadataStorage = new StatedBeanMetaStorage();
-  }
-
-  return window.StateBeanMetadataStorage;
+  return (
+    (<any>window).StateBeanMetadataStorage ||
+    ((<any>window).StateBeanMetadataStorage = new StatedBeanMetaStorage())
+  );
 }
 
 export * from './storage';

src/metadata/storage.ts

@@ -40,4 +40,9 @@ export class StatedBeanMetaStorage {
   public getBeanMeta(name: string | symbol): StatedBeanMeta | undefined {
     return this.beans.get(name);
   }
+
+  public clear() {
+    this.beans.clear();
+    this.tempTypeFields = new WeakMap();
+  }
 }

test/__snapshots__/provider.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react provider StatedBeanProvider 1`] = `
+Array [
+  <div>
+    0
+     
+    <button
+      id="addBtn"
+      onClick={[Function]}
+    >
+      add
+    </button>
+  </div>,
+  <div>
+    0
+     
+    <button
+      id="addBtn"
+      onClick={[Function]}
+    >
+      add
+    </button>
+  </div>,
+]
+`;

test/metadata.test.ts

@@ -0,0 +1,45 @@
+import { getMetadataStorage } from '../src/metadata';
+import { StatedBean, Stated } from '../src';
+
+describe('metadata', () => {
+  let smapleStatedBeanName: string;
+
+  beforeAll(() => {
+    getMetadataStorage().clear();
+
+    @StatedBean()
+    class SampleStatedBean {
+      @Stated()
+      public statedField: number;
+
+      @Stated()
+      public statedField2: string;
+
+      public constructor() {
+        this.statedField = 0;
+        this.statedField2 = 'testStatedField';
+      }
+    }
+
+    smapleStatedBeanName = SampleStatedBean.name;
+  });
+
+  it('get metadata storage from window', () => {
+    const storage = getMetadataStorage();
+    expect(storage).not.toBeNull();
+  });
+
+  it('stated bean decorator metadata collected', () => {
+    const storage = getMetadataStorage();
+    const beanMeta = storage.getBeanMeta(smapleStatedBeanName);
+
+    expect(beanMeta).not.toBeNull();
+    expect(beanMeta!.name).toEqual(smapleStatedBeanName);
+    expect(beanMeta!.statedFields).not.toBeNull();
+
+    if (beanMeta !== undefined && beanMeta.statedFields !== undefined) {
+      const field1 = beanMeta.statedFields[0];
+      expect(field1.name).toEqual('statedField');
+    }
+  });
+});

test/provider.test.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as renderer from 'react-test-renderer';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+import { getMetadataStorage } from '../src/metadata';
+import {
+  StatedBean,
+  Stated,
+  StatedBeanConsumer,
+  StatedBeanProvider,
+  useStatedBean,
+  StatedBeanContextValue,
+} from '../src';
+import { ClassType } from '../src/types/ClassType';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('react provider', () => {
+  let TestStatedBean: ClassType;
+
+  class T {}
+
+  beforeAll(() => {
+    getMetadataStorage().clear();
+
+    @StatedBean()
+    class SampleStatedBean {
+      @Stated()
+      public statedField: number;
+
+      @Stated()
+      public statedField2: string;
+
+      public constructor() {
+        this.statedField = 0;
+        this.statedField2 = 'testStatedField';
+      }
+
+      addStatedField = () => {
+        this.statedField += 1;
+      };
+    }
+
+    TestStatedBean = SampleStatedBean;
+  });
+
+  it('StatedBeanProvider', () => {
+    const Sample = () => {
+      const bean = useStatedBean(TestStatedBean);
+
+      try {
+        expect(useStatedBean(T)).toThrow();
+      } catch (e) {}
+
+      expect(bean).not.toBeNull();
+      expect(bean.statedField).toEqual(0);
+
+      return (
+        <div>
+          {bean.statedField}{' '}
+          <button id="addBtn" onClick={bean.addStatedField}>
+            add
+          </button>
+        </div>
+      );
+    };
+
+    const App = () => {
+      return (
+        <StatedBeanProvider types={[TestStatedBean]}>
+          <Sample />
+          <StatedBeanProvider types={[TestStatedBean]}>
+            <Sample />
+          </StatedBeanProvider>
+        </StatedBeanProvider>
+      );
+    };
+
+    const app = renderer.create(<App />);
+    let tree = app.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('useStatedBean and change the stated field', () => {
+    const Sample = () => {
+      console.log('Sample useStatedBean');
+      const bean = useStatedBean(TestStatedBean);
+      return (
+        <div>
+          <span className="field">field={bean.statedField}</span>
+          <button onClick={bean.addStatedField}>add</button>
+        </div>
+      );
+    };
+
+    const App = () => {
+      return (
+        <StatedBeanProvider types={[TestStatedBean]}>
+          <Sample />
+        </StatedBeanProvider>
+      );
+    };
+
+    const app = mount(<App />);
+
+    expect(app.html().includes('field=0')).toBe(true);
+    const sample = app.find('Sample');
+    sample.find('button').simulate('click');
+    expect(app.html().includes('field=1')).toBe(true);
+  });
+
+  it('StatedBeanConsumer', () => {
+    const Sample = () => {
+      return (
+        <StatedBeanConsumer>
+          {(context: StatedBeanContextValue) => {
+            expect(context).not.toBeNull();
+            expect(context.container).not.toBeNull();
+
+            return null;
+          }}
+        </StatedBeanConsumer>
+      );
+    };
+
+    const App = () => {
+      return (
+        <StatedBeanProvider types={[TestStatedBean]}>
+          <Sample />
+        </StatedBeanProvider>
+      );
+    };
+
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

tsconfig.json

@@ -1,14 +1,9 @@
 {
-  "include": [
-    "src"
-  ],
+  "include": ["src", "test"],
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
@@ -26,13 +21,11 @@
     "noFallthroughCasesInSwitch": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
     "moduleResolution": "node",
     "baseUrl": "./src",
     "paths": {
-      "*": [
-        "src/*",
-        "node_modules/*"
-      ]
+      "*": ["src/*", "node_modules/*"]
     },
     "jsx": "react"
   }