diff --git a/modules/examples/e2e_test/zippy_component/zippy_spec.dart b/modules/examples/e2e_test/zippy_component/zippy_spec.dart new file mode 100644 index 0000000000..8d232807d6 --- /dev/null +++ b/modules/examples/e2e_test/zippy_component/zippy_spec.dart @@ -0,0 +1,5 @@ +library examples.e2e_test.zippy_component.zippy_spec; + +main() { + +} diff --git a/modules/examples/e2e_test/zippy_component/zippy_spec.ts b/modules/examples/e2e_test/zippy_component/zippy_spec.ts new file mode 100644 index 0000000000..d1bb64b493 --- /dev/null +++ b/modules/examples/e2e_test/zippy_component/zippy_spec.ts @@ -0,0 +1,31 @@ +import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util'; + +describe('Zippy Component', function() { + + afterEach(verifyNoBrowserErrors); + + describe('dynamic reflection', function() { + var URL = 'examples/src/zippy_component/index.html'; + + beforeEach(function() { browser.get(URL); }); + + it('should change the zippy title depending on it\'s state', function() { + var zippyTitle = element(by.css('.zippy__title')); + + expect(zippyTitle.getText()).toEqual('▾ Details'); + zippyTitle.click(); + expect(zippyTitle.getText()).toEqual('▸ Details'); + }); + + it('should have zippy content', function() { + expect(element(by.css('.zippy__content')).getText()).toEqual('This is some content.'); + }); + + it('should toggle when the zippy title is clicked', function() { + element(by.css('.zippy__title')).click(); + expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(false); + element(by.css('.zippy__title')).click(); + expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(true); + }); + }); +}); diff --git a/modules/examples/src/zippy_component/index.html b/modules/examples/src/zippy_component/index.html new file mode 100644 index 0000000000..01b214421c --- /dev/null +++ b/modules/examples/src/zippy_component/index.html @@ -0,0 +1,11 @@ + + + Zippy Angular 2.0 + + + Loading... + + + $SCRIPTS$ + + diff --git a/modules/examples/src/zippy_component/index.ts b/modules/examples/src/zippy_component/index.ts new file mode 100644 index 0000000000..f03c4a5f79 --- /dev/null +++ b/modules/examples/src/zippy_component/index.ts @@ -0,0 +1,27 @@ +import {bootstrap, Component, View, NgFor} from 'angular2/angular2'; +import {reflector} from 'angular2/src/reflection/reflection'; +import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities'; +import {Zippy} from './zippy'; + +@Component({selector: 'zippy-app'}) +@View({ + template: ` + + This is some content. + + + `, + directives: [Zippy, NgFor] +}) +class ZippyApp { + logs: Array = []; + + pushLog(log: string) { this.logs.push(log); } +} + +export function main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(ZippyApp); +} diff --git a/modules/examples/src/zippy_component/zippy.html b/modules/examples/src/zippy_component/zippy.html new file mode 100644 index 0000000000..295334927a --- /dev/null +++ b/modules/examples/src/zippy_component/zippy.html @@ -0,0 +1,8 @@ +
+
+ {{ visible ? '▾' : '▸' }} {{title}} +
+
+ +
+
diff --git a/modules/examples/src/zippy_component/zippy.ts b/modules/examples/src/zippy_component/zippy.ts new file mode 100644 index 0000000000..641674f7ac --- /dev/null +++ b/modules/examples/src/zippy_component/zippy.ts @@ -0,0 +1,24 @@ +import {Component, View, EventEmitter} from 'angular2/angular2'; +import {ObservableWrapper} from 'angular2/src/facade/async'; + +@Component({ + selector: 'zippy', + properties: ['title'], + events: ['openHandler: open', 'closeHandler: close'] +}) +@View({templateUrl: 'zippy.html'}) +export class Zippy { + visible: boolean = true; + title: string = ''; + openHandler: EventEmitter = new EventEmitter(); + closeHandler: EventEmitter = new EventEmitter(); + + toggle() { + this.visible = !this.visible; + if (this.visible) { + ObservableWrapper.callNext(this.openHandler, null); + } else { + ObservableWrapper.callNext(this.closeHandler, null); + } + } +} diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts index ccb39fe28c..9c33b93fe9 100644 --- a/tools/broccoli/trees/browser_tree.ts +++ b/tools/broccoli/trees/browser_tree.ts @@ -46,6 +46,7 @@ const kServedPaths = [ 'examples/src/key_events', 'examples/src/sourcemap', 'examples/src/todo', + 'examples/src/zippy_component', 'examples/src/material/button', 'examples/src/material/checkbox', 'examples/src/material/dialog',