fix(e2e): adds events to hello world static.

Extends e2e test to cover events.

Author: rkirov

modules/examples/e2e_test/hello_world/hello_world_spec.es6

@@ -9,7 +9,14 @@ describe('hello world', function () {
  it('should greet', function() {
  browser.get(URL);
 
- expect(getGreetingText('hello-app')).toBe('hello world!');
+ expect(getComponentText('hello-app', '.greeting')).toBe('hello world!');
+ });
+
+ it('should change greeting', function() {
+ browser.get(URL);
+
+ clickComponentButton('hello-app', '.changeButton');
+ expect(getComponentText('hello-app', '.greeting')).toBe('howdy world!');
  });
  });
 
@@ -19,12 +26,23 @@ describe('hello world', function () {
  it('should greet', function() {
  browser.get(URL);
 
- expect(getGreetingText('hello-app')).toBe('hello world!');
+ expect(getComponentText('hello-app', '.greeting')).toBe('hello world!');
+ });
+
+ it('should change greeting', function() {
+ browser.get(URL);
+
+ clickComponentButton('hello-app', '.changeButton');
+ expect(getComponentText('hello-app', '.greeting')).toBe('howdy world!');
  });
  });
 
 });
 
-function getGreetingText(selector) {
- return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.firstChild.textContent');
+function getComponentText(selector, innerSelector) {
+ return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.querySelector("'+innerSelector+'").textContent');
+}
+
+function clickComponentButton(selector, innerSelector) {
+ return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.querySelector("'+innerSelector+'").click()');
 }

modules/examples/src/hello_world/index_common.js

@@ -20,8 +20,8 @@ import {bootstrap, Component, Decorator, TemplateConfig, NgElement} from 'core/c
  // The template for the component.
  // Expressions in the template (like {{greeting}}) are evaluated in the
  // context of the HelloCmp class below.
- inline: `<div>{{greeting}} <span red>world</span>!</div>
- <button (click)="changeGreeting()">change greeting</button>`,
+ inline: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
+ <button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
  // All directives used in the template need to be specified. This allows for
  // modularity (RedDec can only be used in this template)
  // and better tooling (the template can be invalidated if the attribute is

modules/examples/src/hello_world/index_static.js

@@ -19,7 +19,8 @@ function setup() {
  componentServices: [app.GreetingService],
  template: new TemplateConfig({
  directives: [app.RedDec],
- inline: `{{greeting}} <span red>world</span>!`})
+ inline: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
+ <button class="changeButton" (click)="changeGreeting()">change greeting</button>`})
  })]
  });
 
@@ -84,6 +85,10 @@ function setup() {
  reflector.registerSetters({
  "greeting": (a,v) => a.greeting = v
  });
+
+ reflector.registerMethods({
+ "changeGreeting": (obj, args) => obj.changeGreeting()
+ });
 }
 
 export function main() {