diff --git a/examples/typescript/components/Child.tsx b/examples/typescript/components/Child.tsx index 831e54c2..a934281f 100755 --- a/examples/typescript/components/Child.tsx +++ b/examples/typescript/components/Child.tsx @@ -1,15 +1,22 @@ import * as React from 'react'; -import { UIView } from '@uirouter/react'; +import { UIView, UIViewInjectedProps } from '@uirouter/react'; -export class Child extends React.Component { +export class Child extends React.Component { uiCanExit = () => { return Promise.resolve(); }; + componentDidMount() { + console.log('mounted'); + } + handleClick = () => { + this.props.transition.router.stateService.reload(); + }; render() { return (

Child

+
); } diff --git a/src/components/UIView.tsx b/src/components/UIView.tsx index 879f8054..30c3517f 100644 --- a/src/components/UIView.tsx +++ b/src/components/UIView.tsx @@ -243,7 +243,8 @@ class View extends Component { } this.uiViewData.config = newConfig; - let props = { ...resolves, transition: trans }; + const key = Date.now(); + let props = { ...resolves, transition: trans, key }; let newComponent = newConfig && newConfig.viewDecl && newConfig.viewDecl.component; this.setState({ diff --git a/src/components/__tests__/UIView.test.tsx b/src/components/__tests__/UIView.test.tsx index 3329a2ef..1a9c3745 100644 --- a/src/components/__tests__/UIView.test.tsx +++ b/src/components/__tests__/UIView.test.tsx @@ -57,7 +57,7 @@ const states = [ describe('', () => { describe('(unmounted)', () => { - let router; + let router: UIRouterReact; beforeEach(() => { router = new UIRouterReact(); router.plugin(memoryLocationPlugin); @@ -98,12 +98,12 @@ describe('', () => { }); describe('(mounted)', () => { - let router; + let router: UIRouterReact; beforeEach(() => { router = new UIRouterReact(); router.plugin(servicesPlugin); router.plugin(memoryLocationPlugin); - states.forEach(state => router.stateRegistry.register(state)); + states.forEach(state => router.stateRegistry.register(state as ReactStateDeclaration)); }); it('renders its State Component', () => { @@ -123,7 +123,7 @@ describe('', () => { name: '__state', component: Comp, resolve: [{ resolveFn: () => true, token: 'myresolve' }], - }); + } as ReactStateDeclaration); const wrapper = mount( @@ -141,7 +141,7 @@ describe('', () => { name: '__state', component: Comp, resolve: [{ token: 'foo', resolveFn: () => 'bar' }], - }); + } as ReactStateDeclaration); const wrapper = mount( @@ -158,7 +158,7 @@ describe('', () => { name: '__state', component: Comp, resolve: [{ token: 'transition', resolveFn: () => null }], - }); + } as ReactStateDeclaration); await router.stateService.go('__state'); @@ -268,5 +268,35 @@ describe('', () => { await router.stateService.go('withrenderprop'); expect(wrapper.html()).toEqual(`
withrenderpropbar
`); }); + + it('unmounts the State Component when calling stateService.reload(true)', async () => { + const componentDidMountWatcher = jest.fn(); + const componentWillUnmountWatcher = jest.fn(); + class TestUnmountComponent extends React.Component { + componentDidMount() { + componentDidMountWatcher(); + } + componentWillUnmount() { + componentWillUnmountWatcher(); + } + render() { + return
; + } + } + const testState = { + name: 'testunmount', + component: TestUnmountComponent, + }; + router.stateRegistry.register(testState); + const wrapper = mount( + + + , + ); + await router.stateService.go('testunmount'); + await router.stateService.reload('testunmount'); + expect(componentDidMountWatcher).toHaveBeenCalledTimes(2); + expect(componentWillUnmountWatcher).toHaveBeenCalledTimes(1); + }); }); });