Merge pull request #87 from vankeisb/feature/support-unmount

support unmount

Author: vankeisb

samples/src/Samples/ProgramSample.test.tsx

@@ -1,29 +1,29 @@
 import { mount } from 'enzyme';
-import { Cmd, Dispatcher, Sub, Task } from 'tea-cup-core';
-import { extendJest, ProgramProps, updateUntilIdle } from 'react-tea-cup';
+import { Cmd, Dispatcher, noCmd, Port, Sub, Task } from 'tea-cup-core';
+import { DevTools, extendJest, Program, ProgramProps, updateUntilIdle } from 'react-tea-cup';
 import React from 'react';
 
 extendJest(expect);
 
-const init1: () => [number, Cmd<string>] = () => {
-  return [0, toCmd('go')];
-};
+// const toCmd = (msg: string) => Task.perform(Time.in(0), () => msg);
+const toCmd = (msg: string) => Task.perform(Task.succeed(0), () => msg);
 
-const view1: (dispatch: Dispatcher<string>, model: number) => React.ReactNode = (
-  dispatch: Dispatcher<string>,
-  model: number,
-) => {
-  return <div className={'count'}>{model}</div>;
-};
+describe('Test Program using updateUntilIdle()', () => {
+  const init1: () => [number, Cmd<string>] = () => {
+    return [0, toCmd('go')];
+  };
 
-const update1: (msg: string, model: number) => [number, Cmd<string>] = (msg: string, model: number) => {
-  return [model + 1, model < 5 ? toCmd('go') : Cmd.none()];
-};
+  const view1: (dispatch: Dispatcher<string>, model: number) => React.ReactNode = (
+    dispatch: Dispatcher<string>,
+    model: number,
+  ) => {
+    return <div className={'count'}>{model}</div>;
+  };
 
-// const toCmd = (msg: string) => Task.perform(Time.in(0), () => msg);
-const toCmd = (msg: string) => Task.perform(Task.succeed(0), () => msg);
+  const update1: (msg: string, model: number) => [number, Cmd<string>] = (msg: string, model: number) => {
+    return [model + 1, model < 5 ? toCmd('go') : Cmd.none()];
+  };
 
-describe('Test Program', () => {
   it('expect when program is idle', () => {
     const props: ProgramProps<number, string> = {
       init: init1,
@@ -38,3 +38,62 @@ describe('Test Program', () => {
     });
   });
 });
+
+describe('Test Program using DevTools', () => {
+  const init1: () => [ReadonlyArray<string>, Cmd<string>] = () => {
+    return noCmd([]);
+  };
+
+  const view1: (dispatch: Dispatcher<string>, model: ReadonlyArray<string>) => React.ReactNode = (
+    dispatch: Dispatcher<string>,
+    model: ReadonlyArray<string>,
+  ) => {
+    return <div className={'history'}>{model.join(' ')}</div>;
+  };
+
+  const update1: (msg: string, model: ReadonlyArray<string>) => [ReadonlyArray<string>, Cmd<string>] = (
+    msg: string,
+    model: ReadonlyArray<string>,
+  ) => {
+    return noCmd(model.concat([msg]));
+  };
+
+  const port1: Port<string> = new Port<string>();
+
+  it('stop dispatching when unmounted', () => {
+    const devTools = DevTools.init(window);
+    const props: ProgramProps<number, ReadonlyArray<string>> = {
+      init: init1,
+      view: view1,
+      update: update1,
+      subscriptions: () => port1.subscribe((msg) => msg),
+      devTools,
+    };
+
+    const wrapper = mount(<Program {...props} />);
+
+    expect(devTools.lastEvent().tag).toEqual('init');
+    expect(devTools.lastEvent().model).toEqual([]);
+    expect(devTools.lastModel()).toEqual([]);
+
+    port1.send('first');
+
+    expect(devTools.lastEvent().tag).toEqual('updated');
+    expect(devTools.lastEvent().msg).toEqual('first');
+    expect(devTools.lastModel()).toEqual(['first']);
+
+    port1.send('second');
+
+    expect(devTools.lastEvent().tag).toEqual('updated');
+    expect(devTools.lastEvent().msg).toEqual('second');
+    expect(devTools.lastModel()).toEqual(['first', 'second']);
+
+    wrapper.unmount();
+
+    port1.send('too-late');
+
+    expect(devTools.lastEvent().tag).toEqual('updated');
+    expect(devTools.lastEvent().msg).toEqual('second');
+    expect(devTools.lastModel()).toEqual(['first', 'second']);
+  });
+});

tea-cup/src/TeaCup/Program.ts

@@ -62,6 +62,9 @@ export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, nev
   }
 
   dispatch(msg: Msg) {
+    if (this.currentSub === undefined) {
+      return;
+    }
     if (this.props.devTools && this.props.devTools.isPaused()) {
       // do not process messages if we are paused
       return;
@@ -89,7 +92,7 @@ export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, nev
       const d = this.dispatch.bind(this);
 
       newSub.init(d);
-      prevSub && prevSub.release();
+      prevSub?.release();
 
       // perform commands in a separate timout, to
       // make sure that this dispatch is done
@@ -115,6 +118,11 @@ export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, nev
     }
   }
 
+  componentWillUnmount() {
+    this.currentSub?.release();
+    this.currentSub = undefined;
+  }
+
   componentDidMount() {
     const { devTools } = this.props;
     if (devTools) {

tea-cup/src/TeaCup/Testing.tsx

@@ -88,20 +88,20 @@ export function updateUntilIdle<Model, Msg, T>(
   fun: Trigger<Model, Msg, T>,
 ): Promise<[Model, T]> {
   return new Promise((resolve) => {
-    fun(<Program {...testableProps(resolve, props, fun)} />);
+    let wrapper = fun(<Program {...testableProps(resolve, props, () => wrapper)} />);
   });
 }
 
 function testableProps<Model, Msg, T>(
   resolve: ResolveType<Model, T>,
   props: ProgramProps<Model, Msg>,
-  fun: Trigger<Model, Msg, T>,
+  getWrapper: () => T,
 ) {
   const tprops: ProgramProps<TestableModel<Model, Msg, T>, Msg> = {
     init: initTestable(resolve, props.init),
     view: viewTestable(props.view),
     update: updateTestable(props.update),
-    subscriptions: suscriptionsTestable(props, fun),
+    subscriptions: subscriptionsTestable(props, getWrapper),
   };
   return tprops;
 }
@@ -150,21 +150,14 @@ function updateTestable<Model, Msg, T>(
   };
 }
 
-function suscriptionsTestable<Model, Msg, T>(
+function subscriptionsTestable<Model, Msg, T>(
   props: ProgramProps<Model, Msg>,
-  fun: Trigger<Model, Msg, T>,
+  getWrapper: () => T,
 ): ProgramProps<TestableModel<Model, Msg, T>, Msg>['subscriptions'] {
   return (model: TestableModel<Model, Msg, T>) => {
     const subs = props.subscriptions(model.model);
     if (model.cmds.length === 0) {
-      const result = fun(
-        <Program
-          init={() => [model.model, Cmd.none()]}
-          update={(msg, model) => [model, Cmd.none()]}
-          view={(d, m) => props.view(d, m)}
-          subscriptions={(d) => Sub.none()}
-        />,
-      );
+      const result = getWrapper();
       model.resolve([model.model, result]);
       return subs;
     }