diff --git a/index.tsx b/index.tsx index 73c6812..5cee831 100644 --- a/index.tsx +++ b/index.tsx @@ -42,9 +42,9 @@ export function react2angular( render() { if (!this.isDestroyed) { render( - , - this.$element[0] - ) + , + this.$element[0] + ) } } componentWillUnmount() { diff --git a/package.json b/package.json index 424b35f..2f592ed 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,9 @@ "main:esnext": "index.es2015.js", "typings": "index.d.ts", "scripts": { - "build": "npm run clean && tsc -d -t es2015 && mv ./index.js ./index.es2015.js && tsc -t es5", + "build": "npm run clean && npm run lint && tsc -d -t es2015 && mv ./index.js ./index.es2015.js && tsc -t es5", "clean": "rimraf ./*.d.ts && rimraf ./*.map", - "lint": "tslint -p ./tsconfig.json index.tsx test.tsx", + "lint": "tslint --fix -p ./tsconfig.json index.tsx test.tsx", "pretest": "npm run build", "prepublishOnly": "npm test", "test": "karma start --single-run", @@ -52,7 +52,7 @@ "@types/prop-types": "^15.5.8", "@types/react": "^16.8.1", "@types/react-dom": "^16.0.11", - "angular-mocks": "^1.7.6", + "angular-mocks": "1.6.9", "angular-resource": "^1.7.6", "browserify": "^16.2.3", "jasmine": "^3.3.1", diff --git a/test.tsx b/test.tsx index 24158a2..a3d62ed 100644 --- a/test.tsx +++ b/test.tsx @@ -1,4 +1,13 @@ -import { bootstrap, element as $, IAugmentedJQuery, ICompileService, IHttpService, IQService, module } from 'angular' +import { + bootstrap, + element as $, + IAugmentedJQuery, + ICompileService, + IComponentOptions, IController, + IHttpService, + IQService, IScope, + module +} from 'angular' import * as angular from 'angular' import 'angular-mocks' import { $http, $q, $rootScope } from 'ngimport' @@ -103,19 +112,49 @@ function TestSeven(props: Props) { } interface TestEightProps { - onComponentWillUnmount: any, - onRender: any, + onChange: jasmine.Spy, + onComponentWillUnmount: jasmine.Spy, + onRender: jasmine.Spy, values: string[], } class TestEight extends React.Component { render() { this.props.onRender() - return this.props.values.map((value, index) =>
{value}
) + return this.props.values + .map((value, index) =>
{value}
) } componentWillUnmount() { this.props.onComponentWillUnmount() + this.props.onChange(this.props.values + .map(val => `${val}ss`)) + } +} + +class TestEightWrapper implements IComponentOptions { + bindings = { + onComponentWillUnmount: '<', + onRender: '<', + values: '<' + } + template = ` + ` + controller = class implements IController { + values!: string[] + + constructor( + private $scope: IScope + ){} + + onChange = (values: string[]) => { + this.values = values + this.$scope.$apply() + } } } @@ -125,7 +164,7 @@ const TestAngularThree = react2angular(TestThree) const TestAngularFour = react2angular(TestFour) const TestAngularSix = react2angular(TestSix, ['foo'], ['$http', '$element', 'testSixService', 'foo']) const TestAngularSeven = react2angular(TestSeven, null, ['foo']) -const TestAngularEight = react2angular(TestEight, ['values', 'onComponentWillUnmount', 'onRender']) +const TestAngularEight = react2angular(TestEight, ['values', 'onComponentWillUnmount', 'onRender', 'onChange']) module('test', ['bcherny/ngimport']) .component('testAngularOne', TestAngularOne) @@ -137,6 +176,7 @@ module('test', ['bcherny/ngimport']) .component('testAngularSix', TestAngularSix) .component('testAngularSeven', TestAngularSeven) .component('testAngularEight', TestAngularEight) + .component('testAngularEightWrapper', new TestEightWrapper()) bootstrap($(), ['test'], { strictDi: true }) @@ -374,25 +414,30 @@ describe('react2angular', () => { expect(element.find('span').length).toBe(0) }) - // it('should not call render after component unmount', () => { - // const componentWillUnmountSpy = jasmine.createSpy('componentWillUnmount') - // const renderSpy = jasmine.createSpy('render') + it('should not call render after component unmount', () => { + const componentWillUnmountSpy = jasmine.createSpy('componentWillUnmount') + const renderSpy = jasmine.createSpy('render') - // const scope = Object.assign($rootScope.$new(true), { - // onComponentWillUnmount: componentWillUnmountSpy, - // onRender: renderSpy, - // values: ['val1'] - // }) - // const element = $(``) + const scope = Object.assign($rootScope.$new(true), { + onComponentWillUnmount: componentWillUnmountSpy, + onRender: renderSpy, + values: ['val1'] + }) + const element = $(` + `) - // $compile(element)(scope) - // $rootScope.$apply() - // scope.values = ['newVal1'] - // scope.$destroy() - - // expect(componentWillUnmountSpy).not.toHaveBeenCalledBefore(renderSpy) - // }) + $compile(element)(scope) + const innerScope = angular + .element(element.find('test-angular-eight')) + .scope() + $rootScope.$apply() + renderSpy.calls.reset() + innerScope.$destroy() + expect(componentWillUnmountSpy).not.toHaveBeenCalledBefore(renderSpy) + }) }) - })