Demonstrate bindable for aurelia/testing#77

tomtomau · Oct 17, 2017 · 61d0cda · 61d0cda
1 parent 9a8ed80
commit 61d0cda
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/skeleton-typescript-webpack/src/welcome.ts b/skeleton-typescript-webpack/src/welcome.ts
@@ -1,8 +1,9 @@
 //import {computedFrom} from 'aurelia-framework';
+import { bindable } from 'aurelia-framework';
 
 export class Welcome {
   heading: string = 'Welcome to the Aurelia Navigation App';
-  firstName: string = 'John';
+  @bindable() firstName: string = 'John';
   lastName: string = 'Doe';
   previousValue: string = this.fullName;
 

diff --git a/skeleton-typescript-webpack/test/unit/__snapshots__/welcome.spec.ts.snap b/skeleton-typescript-webpack/test/unit/__snapshots__/welcome.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WelcomeComponent should render correctly 1`] = `
-"<body><div><welcome class=\\"au-target\\" au-target-id=\\"6\\">
+"<body><div><welcome first-name.bind=\\"firstName\\" class=\\"au-target\\" au-target-id=\\"6\\">
   <section class=\\"au-animate\\">
     <h2>Welcome to the Aurelia Navigation App</h2>
     <form role=\\"form\\" submit.delegate=\\"submit()\\" class=\\"au-target\\" au-target-id=\\"2\\">
@@ -15,7 +15,7 @@ exports[`WelcomeComponent should render correctly 1`] = `
       </div>
       <div class=\\"form-group\\">
         <label>Full Name</label>
-        <p class=\\"help-block\\">JOHN DOE</p>
+        <p class=\\"help-block\\">PETER DOE</p>
       </div>
       <button type=\\"submit\\" class=\\"btn btn-default\\">Submit</button>
     </form>

diff --git a/skeleton-typescript-webpack/test/unit/welcome.spec.ts b/skeleton-typescript-webpack/test/unit/welcome.spec.ts
@@ -8,7 +8,7 @@ describe('WelcomeComponent', () => {
   beforeEach(async () => {
     component = StageComponent
       .withResources(PLATFORM.moduleName('welcome'))
-      .inView('<welcome></welcome>')
+      .inView('<welcome first-name.bind="firstName"></welcome>')
       .boundTo({
         heading: 'Something else',
         firstName: 'Peter'
@@ -25,7 +25,7 @@ describe('WelcomeComponent', () => {
 
   it('should render first name', () => {
     const nameElement = document.querySelector('#fn') as HTMLInputElement;
-    expect(nameElement.value).toBe('John');
+    expect(nameElement.value).toBe('Peter');
   });
 
   afterEach(() => {