feat(integration): new tests for text input

The new tests target:
- `property-binding` in `@aurelia/runtime` including diff. binding modes
- `value-attribute-observer` in `@aurelia/runtime-html`

packages/__tests__/integration/app/app.html

@@ -6,6 +6,12 @@
     <read-only-text value.one-time="text1"></read-only-text>
     <read-only-text value.bind="text2"></read-only-text>
     <read-only-text value.to-view="text3"></read-only-text>
+
+    <text-input id="input-static" value="input0"></text-input>
+    <text-input id="input-one-time" value.one-time="inputOneTime"></text-input>
+    <text-input id="input-two-way" value.two-way="inputTwoWay"></text-input>
+    <text-input id="input-to-view" value.to-view="inputToView"></text-input>
+    <text-input id="input-from-view" value.from-view="inputFromView"></text-input>
   </div>
 
 </template>

packages/__tests__/integration/app/app.ts

@@ -8,6 +8,11 @@ export class App {
   private text2 = 'text2';
   private text3 = 'text3';
 
+  public inputOneTime = 'input1';
+  public inputTwoWay = 'input2';
+  public inputToView = 'input3';
+  public inputFromView: string = 'input4';
+
   public changeTexts() {
     this.text1 = 'newText1';
     this.text2 = 'newText2';

packages/__tests__/integration/app/atoms/index.ts

@@ -1,8 +1,13 @@
 import { IContainer } from '@aurelia/kernel';
 import { ReadOnlyText } from './read-only-text/read-only-text';
+import { TextInput } from './text-input/text-input';
 
 export const atoms = {
   register(container: IContainer) {
-    container.register(ReadOnlyText);
+    container
+      .register(
+        ReadOnlyText,
+        TextInput
+      );
   }
 };

packages/__tests__/integration/app/atoms/read-only-text/read-only-text.ts

@@ -5,6 +5,7 @@ import template from './read-only-text.html';
  * Potential test coverage targets:
  * - `@aurelia/runtime`
  *   - `interpolation-binding`
+ *   - `property-binding`, different binding modes, such as `one-time`, and `to-view`.
  * - `@aurelia/runtime-html`
  *   - `setter-observer`
  *   - `element-property-accessor`

packages/__tests__/integration/app/atoms/text-input/text-input.html

@@ -0,0 +1 @@
+<input value.bind="value">

packages/__tests__/integration/app/atoms/text-input/text-input.ts

@@ -0,0 +1,15 @@
+import { bindable, customElement } from '@aurelia/runtime';
+import template from './text-input.html';
+
+/**
+ * Potential test coverage targets:
+ * - `@aurelia/runtime`
+ *   - `property-binding`, different binding modes, such as `two-way`, `one-time`, `to-view`, and `from-view`.
+ * - `@aurelia/runtime-html`
+ *   - `value-attribute-observer`
+ * @export
+ */
+@customElement({ name: 'text-input', template })
+export class TextInput {
+  @bindable public value: string;
+}

packages/__tests__/integration/integration.spec.ts

@@ -1,5 +1,8 @@
+import { toArray } from '@aurelia/kernel';
 import { assert, fail } from '@aurelia/testing';
 import { startup, TestExecutionContext } from './app/startup';
+import { CustomElement } from '@aurelia/runtime';
+import { App } from './app/app';
 
 describe.only('app', function () {
 
@@ -18,9 +21,9 @@ describe.only('app', function () {
     }
   }
 
-  it('has some readonly texts', async function () {
+  it('has some readonly texts with different binding modes', async function () {
     await executeTest(({ host }) => {
-      const actual = Array.from(host.querySelectorAll('read-only-text')).map(getText);
+      const actual = toArray(host.querySelectorAll('read-only-text')).map(getText);
       const expected = new Array(actual.length).fill(0).map((_, i) => `text${i}`);
 
       assert.deepStrictEqual(actual, expected);
@@ -32,10 +35,81 @@ describe.only('app', function () {
       (host.querySelector('button#staticTextChanger') as unknown as HTMLButtonElement).click();
       await ctx.lifecycle.nextFrame;
 
-      const actual = Array.from(host.querySelectorAll('read-only-text')).map(getText);
+      const actual = toArray(host.querySelectorAll('read-only-text')).map(getText);
       const expected = ['text0', 'text1', 'newText2', 'newText3'];
 
       assert.deepStrictEqual(actual, expected);
     });
   });
+
+  it('has some textual inputs with different binding modes', async function () {
+    await executeTest(({ host }) => {
+      const _static: HTMLInputElement = host.querySelector('#input-static input');
+      const oneTime: HTMLInputElement = host.querySelector('#input-one-time input');
+      const twoWay: HTMLInputElement = host.querySelector('#input-two-way input');
+      const toView: HTMLInputElement = host.querySelector('#input-to-view input');
+      const fromView: HTMLInputElement = host.querySelector('#input-from-view input');
+
+      assert.equal(_static.value, 'input0');
+      assert.equal(oneTime.value, 'input1');
+      assert.equal(twoWay.value, 'input2');
+      assert.equal(toView.value, 'input3');
+      assert.equal(fromView.value, '');
+    });
+  });
+
+  it('changes in the text-input are reflected correctly', async function () {
+    await executeTest(async ({ host, ctx }) => {
+      const oneTime: HTMLInputElement = host.querySelector('#input-one-time input');
+      const twoWay: HTMLInputElement = host.querySelector('#input-two-way input');
+      const toView: HTMLInputElement = host.querySelector('#input-to-view input');
+      const fromView: HTMLInputElement = host.querySelector('#input-from-view input');
+
+      const newInputs = new Array(4).fill(0).map((_, i) => `new input ${i + 1}`);
+
+      oneTime.value = newInputs[0];
+      oneTime.dispatchEvent(new Event('change'));
+
+      twoWay.value = newInputs[1];
+      twoWay.dispatchEvent(new Event('change'));
+
+      toView.value = newInputs[2];
+      toView.dispatchEvent(new Event('change'));
+
+      fromView.value = newInputs[3];
+      fromView.dispatchEvent(new Event('change'));
+
+      ctx.lifecycle.processRAFQueue(undefined);
+
+      const { viewModel } = CustomElement.behaviorFor(host) as unknown as { viewModel: App };
+      assert.equal(viewModel.inputOneTime, 'input1');
+      assert.equal(viewModel.inputTwoWay, newInputs[1]);
+      assert.equal(viewModel.inputToView, 'input3');
+      assert.equal(viewModel.inputFromView, newInputs[3]);
+    });
+  });
+
+  it('changes in the vm property are reflected in text-inputs correctly', async function () {
+    await executeTest(async ({ host, ctx }) => {
+      const newInputs = new Array(4).fill(0).map((_, i) => `new input ${i + 1}`);
+      const { viewModel } = CustomElement.behaviorFor(host) as unknown as { viewModel: App };
+      viewModel.inputOneTime = newInputs[0];
+      viewModel.inputTwoWay = newInputs[1];
+      viewModel.inputToView = newInputs[2];
+      viewModel.inputFromView = newInputs[3];
+
+      ctx.lifecycle.processRAFQueue(undefined);
+
+      const oneTime: HTMLInputElement = host.querySelector('#input-one-time input');
+      const twoWay: HTMLInputElement = host.querySelector('#input-two-way input');
+      const toView: HTMLInputElement = host.querySelector('#input-to-view input');
+      const fromView: HTMLInputElement = host.querySelector('#input-from-view input');
+
+      assert.equal(oneTime.value, 'input1');
+      assert.equal(twoWay.value, newInputs[1]);
+      assert.equal(toView.value, newInputs[2]);
+      assert.equal(fromView.value, '');
+    });
+  });
+
 });

packages/runtime-html/src/observation/value-attribute-observer.ts

@@ -15,6 +15,10 @@ export interface ValueAttributeObserver
 
 // TODO: handle file attribute properly again, etc
 
+/**
+ * Observer for non-radio, non-checkbox input.
+ * @export
+ */
 @subscriberCollection()
 export class ValueAttributeObserver implements IAccessor<unknown> {
   public readonly lifecycle: ILifecycle;