gopeeker 0.1.3

package/__tests__/get-state.spec.ts

@@ -0,0 +1,111 @@
+import { act } from '@testing-library/react-hooks'
+import { createStore } from '../src/index'
+import { counter } from './helper/model'
+import { createHook } from './helper/createHook'
+
+describe('getState test', () => {
+  it('call getState with no parameter should return all model state', () => {
+    const store = createStore({
+      counter,
+    })
+    const { Provider, useModel } = store
+
+    const { result } = createHook(Provider, useModel, 'counter')
+
+    const increase = result.current.reducers.increase
+    const decrease = result.current.reducers.decrease
+
+    expect(store.getState()).toEqual({
+      counter: {
+        count: 0,
+        data: {
+          a: 1,
+          b: '2',
+        },
+      },
+    })
+
+    act(() => {
+      increase()
+    })
+    expect(result.current.state.count).toBe(1)
+
+    expect(store.getState()).toEqual({
+      counter: {
+        count: 1,
+        data: {
+          a: 1,
+          b: '2',
+        },
+      },
+    })
+
+    act(() => {
+      decrease()
+    })
+    expect(store.getState()).toEqual({
+      counter: {
+        count: 0,
+        data: {
+          a: 1,
+          b: '2',
+        },
+      },
+    })
+  })
+
+  it('call getState with parameter should return specific model state', () => {
+    const store = createStore({
+      counter,
+    })
+    const { Provider, useModel } = store
+
+    const { result } = createHook(Provider, useModel, 'counter')
+
+    const increase = result.current.reducers.increase
+    const decrease = result.current.reducers.decrease
+
+    expect(store.getState('counter')).toEqual({
+      count: 0,
+      data: {
+        a: 1,
+        b: '2',
+      },
+    })
+
+    act(() => {
+      increase()
+    })
+    expect(result.current.state.count).toBe(1)
+
+    expect(store.getState('counter')).toEqual({
+      count: 1,
+      data: {
+        a: 1,
+        b: '2',
+      },
+    })
+
+    act(() => {
+      decrease()
+    })
+    expect(store.getState('counter')).toEqual({
+      count: 0,
+      data: {
+        a: 1,
+        b: '2',
+      },
+    })
+  })
+
+  it('call getState with not exist parameter should throw error', () => {
+    const store = createStore({
+      counter,
+    })
+
+    // @ts-ignore
+    expect(() => store.getState('counter1')).toThrow(
+      'Invariant Failed: [store.getState] Expected the modelName to be one of counter, but got counter1'
+    )
+  })
+})

package/__tests__/helper/CountClassComponent.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { RootModel } from './store'
+
+interface CounterProps {
+  state: RootModel['counter']['state']
+  reducers: RootModel['counter']['reducers']
+  effects: RootModel['counter']['effects']
+}
+
+export class Counter extends React.Component<CounterProps> {
+  render() {
+    const { state, reducers, effects } = this.props
+
+    return (
+      <div>
+        <div data-testid="count">{state.count}</div>
+        <div data-testid="increase" onClick={reducers.increase} />
+        <div data-testid="decrease" onClick={reducers.decrease} />
+        <div data-testid="increaseAsync" onClick={effects.increaseAsync} />
+      </div>
+    )
+  }
+}

package/__tests__/helper/CountFunctionComponent.tsx

@@ -0,0 +1,56 @@
+import React, { useImperativeHandle } from 'react'
+import { store } from './store'
+
+export interface CounterProps {
+  onRender?: () => void
+}
+
+export const Counter: React.FC<CounterProps> = ({ onRender }) => {
+  const { state, reducers, effects } = store.useModel('counter')
+
+  if (onRender) {
+    onRender()
+  }
+
+  if (effects.increaseAsync.loading) {
+    return <div>Loading ...</div>
+  }
+
+  return (
+    <div>
+      <div data-testid="count">{state.count}</div>
+      <div data-testid="increase" onClick={reducers.increase} />
+      <div data-testid="decrease" onClick={reducers.decrease} />
+      <div data-testid="increaseAsync" onClick={effects.increaseAsync} />
+    </div>
+  )
+}
+
+export const Counter1: React.FC<CounterProps> = ({ onRender }) => {
+  const { state, reducers, effects } = store.useModel('counter')
+
+  if (onRender) {
+    onRender()
+  }
+
+  return (
+    <div>
+      <div data-testid="count1">{state.count}</div>
+      <div data-testid="increase1" onClick={reducers.increase} />
+      <div data-testid="decrease1" onClick={reducers.decrease} />
+      <div data-testid="increaseAsync1" onClick={effects.increaseAsync} />
+    </div>
+  )
+}
+
+export const CounterWithRef = store.withProviderForwardRef<any>(
+  React.forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => {
+      return {
+        methodFromUseImperativeHandle: () => true,
+      }
+    })
+
+    return <></>
+  })
+)

package/__tests__/helper/MultiCountClassComponent.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { RootModel } from './store'
+
+interface CounterProps {
+	[c: string]: RootModel
+}
+
+export class CounterWithContextName extends React.Component<CounterProps> {
+  render() {
+    const {
+			forDobux: {
+				counter,
+				counter2
+			}
+		} = this.props
+
+    return (
+      <div>
+        <div data-testid="count-1">{counter.state.count}</div>
+        <div data-testid="increase-1" onClick={counter.reducers.increase} />
+        <div data-testid="decrease-1" onClick={counter.reducers.decrease} />
+        <div data-testid="increaseAsync-1" onClick={counter.effects.increaseAsync} />
+
+				<div data-testid="count-2">{counter2.state.count}</div>
+        <div data-testid="increase-2" onClick={counter2.reducers.increase} />
+        <div data-testid="decrease-2" onClick={counter2.reducers.decrease} />
+        <div data-testid="increaseAsync-2" onClick={counter2.effects.increaseAsync} />
+      </div>
+    )
+  }
+}
+
+export class CounterWithDefault extends React.Component<CounterProps> {
+  render() {
+    const {
+			models: {
+				counter,
+				counter2
+			}
+		} = this.props
+
+    return (
+      <div>
+        <div data-testid="count-1">{counter.state.count}</div>
+        <div data-testid="increase-1" onClick={counter.reducers.increase} />
+        <div data-testid="decrease-1" onClick={counter.reducers.decrease} />
+        <div data-testid="increaseAsync-1" onClick={counter.effects.increaseAsync} />
+
+				<div data-testid="count-2">{counter2.state.count}</div>
+        <div data-testid="increase-2" onClick={counter2.reducers.increase} />
+        <div data-testid="decrease-2" onClick={counter2.reducers.decrease} />
+        <div data-testid="increaseAsync-2" onClick={counter2.effects.increaseAsync} />
+      </div>
+    )
+  }
+}
+
+export class CounterWithSameContextName extends React.Component<{
+  models: string,
+  myModel: any
+}> {
+  render() {
+    return <div data-testid="show-models">{this.props.models}</div>
+  }
+}
+
+export class CounterWithOtherContextName extends React.Component<{
+  myProp: string,
+  myModel: any
+}> {
+  render() {
+    return <div>
+      <div data-testid="show-myProp">{this.props.myProp}</div>
+      <div data-testid="show-myModel">{this.props.myModel.state.count}</div>
+    </div>
+  }
+}

package/__tests__/helper/createHook.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import { MapStateToModel } from '../../src/types'
+
+export function createHook(
+  Provider: React.FC,
+  hook: any,
+  namespace?: string,
+  mapStateToModel?: MapStateToModel<any>
+) {
+  // https://react-hooks-testing-library.com/usage/advanced-hooks#context
+  return renderHook(() => hook(namespace, mapStateToModel), {
+    wrapper: props => <Provider {...props}>{props.children}</Provider>,
+  })
+}

package/__tests__/helper/model.ts

@@ -0,0 +1,7 @@
+import { createModel } from '../../src'
+import { RootModel } from './store'
+import { config } from './shared'
+
+export const counter = createModel<RootModel, 'counter'>()(config)
+
+export const counter2 = createModel<RootModel, 'counter2'>()(config)

package/__tests__/helper/ref.ts

@@ -0,0 +1,15 @@
+export const unsafeGetTestingRef = (tree, component) => {
+  // Unsafe way to get access to a ref property. Uses internal _fiber property of a ReactTestingInstance since AFAIK react-test-renderer does not expose refs in any other way
+  const node = tree.root.findByType(component)
+
+  expect(node).not.toBeNull()
+  expect(node._fiber).not.toBeNull()
+  expect(node._fiber).not.toBeUndefined()
+
+  const ref = node._fiber.ref
+
+  expect(ref).not.toBeNull()
+  expect(ref).not.toBeUndefined()
+
+  return ref
+}

package/__tests__/helper/shared.ts

@@ -0,0 +1,58 @@
+export function wait(ms: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms)
+  })
+}
+
+export const defaultStoreOptions = {
+  autoReset: false,
+  devtools: true,
+  name: 'dobuxStore',
+}
+
+export const config = {
+  state: {
+    count: 0,
+    data: {
+      a: 1,
+      b: '2',
+    },
+  },
+  reducers: {
+    increase(state: any) {
+      state.count++
+    },
+    decrease(state: any) {
+      state.count--
+    },
+  },
+  effects: (store: any, rootStore: any) => ({
+    async increaseAsync() {
+      await wait(10)
+      store.reducers.increase()
+    },
+
+    async decreaseAsync() {
+      await wait(10)
+      store.reducers.decrease()
+    },
+
+    async fetchError() {
+      return new Promise((_, reject) => {
+        reject('customer error')
+      })
+    },
+  }),
+}
+
+export const defaultModelOptions = {
+  storeName: 'dobuxStore',
+  name: 'counter',
+  config: {
+    ...config,
+    effects: {},
+  },
+  rootModel: Object.create(null),
+  autoReset: false,
+  devTools: true,
+}

package/__tests__/helper/store.ts

@@ -0,0 +1,6 @@
+import { createStore, Models } from '../../src'
+import * as models from './model'
+
+export type RootModel = Models<typeof models>
+
+export const store = createStore({ ...models })

package/__tests__/index.spec.ts

@@ -0,0 +1,88 @@
+import { createStore, createModel } from '../src'
+import { Store } from '../src/core/Store'
+import { config, defaultStoreOptions } from './helper/shared'
+
+describe('entry test', () => {
+  it('createStore should be defined', () => {
+    expect(createStore).toBeDefined()
+  })
+
+  it('should return the instance of Store when call createStore', () => {
+    const store = createStore(
+      {
+        counter: config,
+      },
+      defaultStoreOptions
+    )
+
+    expect(store).toBeInstanceOf(Store)
+  })
+
+  it('should pass boolean to autoReset', () => {
+    const store = createStore(
+      {
+        counter: config,
+      },
+      {
+        autoReset: true,
+      }
+    )
+
+    expect(store).toBeInstanceOf(Store)
+  })
+
+  it('should pass array to autoReset', () => {
+    const store = createStore(
+      {
+        counter: config,
+      },
+      {
+        autoReset: ['counter'],
+      }
+    )
+
+    expect(store).toBeInstanceOf(Store)
+  })
+
+  it('should pass boolean to devtools', () => {
+    const store = createStore(
+      {
+        counter: config,
+      },
+      {
+        devtools: true,
+      }
+    )
+
+    expect(store).toBeInstanceOf(Store)
+  })
+
+  it('should pass array to devtools', () => {
+    const store = createStore(
+      {
+        counter: config,
+      },
+      {
+        devtools: ['counter'],
+      }
+    )
+
+    expect(store).toBeInstanceOf(Store)
+  })
+
+  it('createModel should be defined', () => {
+    expect(createModel).toBeDefined()
+  })
+
+  it('should return the default value when config is invalid', () => {
+    const store = createModel()({
+      state: {
+        count: 0,
+      },
+    })
+
+    expect(store.state).toEqual({ count: 0 })
+    expect(store.reducers).toEqual({})
+    expect(typeof store.effects).toBe('function')
+  })
+})

package/__tests__/model.spec.ts

@@ -0,0 +1,13 @@
+import { Model } from '../src/core/Model'
+
+describe('Model test', () => {
+  it('Model should be defined', () => {
+    expect(Model).toBeDefined()
+    expect(Model.prototype.constructor).toBe(Model)
+  })
+
+  it('should have valid api', () => {
+    expect(Object.keys(Model)).toEqual(['instances'])
+    expect(typeof Model.prototype.useModel).toBe('function')
+  })
+})

package/__tests__/multiple.spec.ts

@@ -0,0 +1,81 @@
+import { act } from '@testing-library/react-hooks'
+import { createStore } from '../src/index'
+import { counter } from './helper/model'
+import { createHook } from './helper/createHook'
+
+describe('multiple stores test', () => {
+  it('should multiple stores to be isolated', () => {
+    const { Provider: Provider1, useModel: useModel1 } = createStore({
+      counter,
+    })
+    const { Provider: Provider2, useModel: useModel2 } = createStore({
+      counter,
+    })
+
+    const { result: result1 } = createHook(Provider1, useModel1, 'counter')
+    const { result: result2 } = createHook(Provider2, useModel2, 'counter')
+
+    expect(result1.current.state.count).toBe(0)
+    expect(result2.current.state.count).toBe(0)
+  })
+
+  it('should be able to exec specific stores', () => {
+    const { Provider: Provider1, useModel: useModel1 } = createStore({
+      counter,
+    })
+    const { Provider: Provider2, useModel: useModel2 } = createStore({
+      counter,
+    })
+
+    const { result: result1 } = createHook(Provider1, useModel1, 'counter')
+    const { result: result2 } = createHook(Provider2, useModel2, 'counter')
+
+    act(() => {
+      result1.current.reducers.increase()
+      result2.current.reducers.decrease()
+    })
+
+    expect(result1.current.state.count).toBe(1)
+    expect(result2.current.state.count).toBe(-1)
+  })
+
+  it('should share state when use same model', async () => {
+    const { Provider, useModel } = createStore({
+      counter,
+    })
+
+    const { result: result1, waitForNextUpdate } = createHook(Provider, useModel, 'counter')
+    const { result: result2 } = createHook(Provider, useModel, 'counter')
+
+    expect(result1.current.state.count).toBe(0)
+    expect(result2.current.state.count).toBe(0)
+
+    act(() => {
+      result1.current.reducers.increase()
+    })
+
+    expect(result1.current.state.count).toBe(1)
+    expect(result2.current.state.count).toBe(1)
+
+    act(() => {
+      result2.current.reducers.decrease()
+    })
+
+    expect(result1.current.state.count).toBe(0)
+    expect(result2.current.state.count).toBe(0)
+
+    expect(result1.current.effects.increaseAsync.loading).toBeFalsy()
+    expect(result2.current.effects.increaseAsync.loading).toBeFalsy()
+
+    act(() => {
+      result1.current.effects.increaseAsync()
+    })
+    expect(result1.current.effects.increaseAsync.loading).toBeTruthy()
+    expect(result2.current.effects.increaseAsync.loading).toBeTruthy()
+
+    await waitForNextUpdate()
+
+    expect(result1.current.effects.increaseAsync.loading).toBeFalsy()
+    expect(result2.current.effects.increaseAsync.loading).toBeFalsy()
+  })
+})