-
Notifications
You must be signed in to change notification settings - Fork 109
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
252 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,6 @@ | ||
| .DS_Store | ||
| node_modules | ||
| *.d.ts | ||
| *.js | ||
| *.map | ||
| !karma.conf.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .DS_Store | ||
| node_modules | ||
| test* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| module.exports = function(config) { | ||
| config.set({ | ||
| basePath: '', | ||
| frameworks: ['source-map-support', 'browserify', 'jasmine'], | ||
| files: [ | ||
| './test.js' | ||
| ], | ||
| preprocessors: { | ||
| '*.js': ['browserify'] | ||
| }, | ||
| browserify: { | ||
| debug: true, | ||
| external: ['angular', 'angular-mocks'], | ||
| extensions: ['.js'], | ||
| transform: ['rollupify'] | ||
| }, | ||
| reporters: ['mocha'], | ||
| port: 9876, | ||
| colors: true, | ||
| // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG | ||
| logLevel: config.LOG_WARN, | ||
| autoWatch: true, | ||
| browsers: ['Chrome'], | ||
| singleRun: false, | ||
| concurrency: Infinity, | ||
| browserConsoleLogOptions: { | ||
| level: 'log', | ||
| terminal: true | ||
| }, | ||
| browserDisconnectTolerance: 30 | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,194 @@ | ||
| import { bootstrap, element as $, ICompileService, mock, module } from 'angular' | ||
| import 'angular-mocks' | ||
| import { $rootScope } from 'ngimport' | ||
| import * as React from 'react' | ||
| import { Simulate } from 'react-addons-test-utils' | ||
| import { angularize } from './' | ||
|
|
||
| interface Props { | ||
| foo: number | ||
| bar: string | ||
| baz: boolean[] | ||
| } | ||
|
|
||
| class Test extends React.Component<Props, void> { | ||
| class TestOne extends React.Component<Props, void> { | ||
| render() { | ||
| return <div> | ||
| <p>Foo: {this.props.foo}</p> | ||
| <p>Bar: {this.props.bar}</p> | ||
| <p>Baz: {this.props.baz.join(',')}</p> | ||
| <p>Bar: {this.props.bar.join(',')}</p> | ||
| <p onClick={() => this.props.baz(42)}>Baz</p> | ||
| {this.props.children} | ||
| </div> | ||
| } | ||
| componentWillUnmount() {} | ||
| } | ||
|
|
||
| const Test2: React.StatelessComponent<Props> = props => | ||
| const TestTwo: React.StatelessComponent<Props> = props => | ||
| <div> | ||
| <p>Foo: {props.foo}</p> | ||
| <p>Bar: {props.bar}</p> | ||
| <p>Baz: {props.baz.join(',')}</p> | ||
| <p>Bar: {props.bar.join(',')}</p> | ||
| <p onClick={() => props.baz(42)}>Baz</p> | ||
| {props.children} | ||
| </div> | ||
|
|
||
| const TestAngular = angularize(Test, ['foo', 'bar', 'baz']) | ||
| const Test2Angular = angularize(Test2, ['foo', 'bar', 'baz']) | ||
| const TestAngularOne = angularize(TestOne, ['foo', 'bar', 'baz']) | ||
| const TestAngularTwo = angularize(TestTwo, ['foo', 'bar', 'baz']) | ||
|
|
||
| module('test', []) | ||
| .component('testAngularOne', TestAngularOne) | ||
| .component('testAngularTwo', TestAngularTwo) | ||
|
|
||
| bootstrap($(), ['test']) | ||
|
|
||
| interface Props { | ||
| bar: boolean[] | ||
| baz(value: number): any | ||
| foo: number | ||
| } | ||
|
|
||
| describe('angularize', () => { | ||
|
|
||
| let $compile: any | ||
|
|
||
| beforeEach(() => { | ||
| mock.module('test') | ||
| mock.inject(function(_$compile_: ICompileService) { | ||
| $compile = _$compile_ | ||
| }) | ||
| }) | ||
|
|
||
| it('should give an angular component', () => { | ||
| expect(TestAngularOne.bindings).not.toBe(undefined) | ||
| expect(TestAngularOne.controller).not.toBe(undefined) | ||
| }) | ||
|
|
||
| describe('react classes', () => { | ||
|
|
||
| it('should render', () => { | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz: (value: number) => value + 1, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-one foo="foo" bar="bar" baz="baz"></test-angular-one>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| expect(element.find('p').length).toBe(3) | ||
| }) | ||
|
|
||
| it('should update', () => { | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz: (value: number) => value + 1, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-one foo="foo" bar="bar" baz="baz"></test-angular-one>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| expect(element.find('p').eq(1).text()).toBe('Bar: true,false') | ||
| scope.$apply(() => | ||
| scope.bar = [false, true, true] | ||
| ) | ||
| expect(element.find('p').eq(1).text()).toBe('Bar: false,true,true') | ||
| }) | ||
|
|
||
| it('should destroy', () => { | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz: (value: number) => value + 1, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-one foo="foo" bar="bar" baz="baz"></test-angular-one>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| spyOn(TestOne.prototype, 'componentWillUnmount') | ||
| scope.$destroy() | ||
| expect(TestOne.prototype.componentWillUnmount).toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('should take callbacks', () => { | ||
| const baz = jasmine.createSpy('baz') | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-one foo="foo" bar="bar" baz="baz"></test-angular-one>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| Simulate.click(element.find('p').eq(2)[0]) | ||
| expect(baz).toHaveBeenCalledWith(42) | ||
| }) | ||
|
|
||
| // TODO: support children | ||
| it('should not support children', () => { | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz: (value: number) => value + 1, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-one foo="foo" bar="bar" baz="baz"><span>Transcluded</span></test-angular-one>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| expect(element.find('span').length).toBe(0) | ||
| }) | ||
|
|
||
| }) | ||
|
|
||
| describe('react stateless components', () => { | ||
|
|
||
| it('should render', () => { | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz: (value: number) => value + 1, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-two foo="foo" bar="bar" baz="baz"></test-angular-two>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| expect(element.find('p').length).toBe(3) | ||
| }) | ||
|
|
||
| it('should update', () => { | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz: (value: number) => value + 1, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-two foo="foo" bar="bar" baz="baz"></test-angular-two>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| expect(element.find('p').eq(1).text()).toBe('Bar: true,false') | ||
| scope.$apply(() => | ||
| scope.bar = [false, true, true] | ||
| ) | ||
| expect(element.find('p').eq(1).text()).toBe('Bar: false,true,true') | ||
| }) | ||
|
|
||
| // TODO: figure out how to test this | ||
| xit('should destroy', () => {}) | ||
|
|
||
| it('should take callbacks', () => { | ||
| const baz = jasmine.createSpy('baz') | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-two foo="foo" bar="bar" baz="baz"></test-angular-two>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| Simulate.click(element.find('p').eq(2)[0]) | ||
| expect(baz).toHaveBeenCalledWith(42) | ||
| }) | ||
|
|
||
| // TODO: support children | ||
| it('should not support children', () => { | ||
| const scope = Object.assign($rootScope.$new(true), { | ||
| bar: [true, false], | ||
| baz: (value: number) => value + 1, | ||
| foo: 1 | ||
| }) | ||
| const element = $(`<test-angular-two foo="foo" bar="bar" baz="baz"><span>Transcluded</span></test-angular-two>`) | ||
| $compile(element)(scope) | ||
| $rootScope.$apply() | ||
| expect(element.find('span').length).toBe(0) | ||
| }) | ||
|
|
||
| }) | ||
|
|
||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters