diff --git a/src/store.ts b/src/store.ts index cce288d9..1bc24d33 100644 --- a/src/store.ts +++ b/src/store.ts @@ -27,9 +27,11 @@ export function connect(mapStateToProps) { this.updateProps(nextProps, false); } }); + super.mounted(); } willUnmount() { this.env.store.off("update", this); + super.willUnmount(); } updateProps(nextProps, forceUpdate) { nextProps = Object.assign(nextProps, this.__widget__.currentStoreProps); diff --git a/tests/store.test.ts b/tests/store.test.ts index 5fa3855d..4fed145c 100644 --- a/tests/store.test.ts +++ b/tests/store.test.ts @@ -106,4 +106,52 @@ describe("connecting a component to store", () => { await nextTick(); expect(fixture.innerHTML).toMatchSnapshot(); }); + + test("connected child components with custom hooks", async () => { + let steps: any = []; + class Child extends Component { + inlineTemplate = `
`; + mounted() { + steps.push('child:mounted'); + } + willUnmount() { + steps.push('child:willUnmount') + } + destroyed() { + steps.push('child:destroyed'); + } + } + + const ConnectedChild = connect(s => s)(Child); + + class Parent extends Component { + inlineTemplate = ` +
+ +
`; + widgets = { ConnectedChild }; + + constructor(env: Env) { + super(env); + this.state = { child: true }; + } + } + + const store = new Store({ state: {} }); + (env).store = store; + const parent = new Parent(env); + + await parent.mount(fixture); + expect(steps).toEqual([ + 'child:mounted', + ]); + + await parent.updateState({ child: false }); + expect(steps).toEqual([ + 'child:mounted', + 'child:willUnmount', + 'child:destroyed', + ]); + }); + });