feat(integration): tests for updateTrigger and if

`if` is not actively "assert"ed yet

packages/__tests__/integration/app/app.html

@@ -12,6 +12,9 @@
     <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>
+
+    <text-input id="blurred-input-two-way" value.two-way="inputBlrTw" trigger="blur"></text-input>
+    <text-input id="blurred-input-from-view" value.from-view="inputBlrFv" trigger="blur"></text-input>
   </div>
 
 </template>

packages/__tests__/integration/app/app.ts

@@ -11,7 +11,9 @@ export class App {
   public inputOneTime = 'input1';
   public inputTwoWay = 'input2';
   public inputToView = 'input3';
-  public inputFromView: string = 'input4';
+  public inputFromView = 'input4';
+  public inputBlrTw = 'input5';
+  public inputBlrFv = 'input6';
 
   public changeTexts() {
     this.text1 = 'newText1';

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

@@ -1 +1,2 @@
-<input value.bind="value">
+<input if.bind="trigger" value.bind="value & updateTrigger:trigger">
+<input else value.bind="value">

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

@@ -4,12 +4,19 @@ 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`.
+ *   - bindings
+ *     - `property-binding`, different binding modes, such as `two-way`, `one-time`, `to-view`, and `from-view`.
+ *   - custom-attributes
+ *     - `if` (template controller)
  * - `@aurelia/runtime-html`
- *   - `value-attribute-observer`
+ *   - bindings
+ *     - `value-attribute-observer`
+ *   - binding behavior
+ *     - `update-trigger`
  * @export
  */
 @customElement({ name: 'text-input', template })
 export class TextInput {
   @bindable public value: string;
+  @bindable public trigger: string = undefined;
 }

packages/__tests__/integration/integration.spec.ts

@@ -10,6 +10,11 @@ describe.only('app', function () {
     return el && el.textContent.replace(/\s\s+/g, ' ').trim();
   }
 
+  function getViewModel<T>(element: Element) {
+    const { viewModel } = CustomElement.behaviorFor(element) as unknown as { viewModel: T };
+    return viewModel;
+  }
+
   async function executeTest(testFunction: (ctx: TestExecutionContext) => Promise<void> | void) {
     const ctx = await startup();
     try {
@@ -49,16 +54,22 @@ describe.only('app', function () {
       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 blurredInputTw: HTMLInputElement = host.querySelector('#blurred-input-two-way input');
+      const blurredInputFv: HTMLInputElement = host.querySelector('#blurred-input-from-view input');
+
+      const vm = getViewModel<App>(host);
 
       assert.equal(_static.value, 'input0');
-      assert.equal(oneTime.value, 'input1');
-      assert.equal(twoWay.value, 'input2');
-      assert.equal(toView.value, 'input3');
+      assert.equal(oneTime.value, vm.inputOneTime);
+      assert.equal(twoWay.value, vm.inputTwoWay);
+      assert.equal(toView.value, vm.inputToView);
       assert.equal(fromView.value, '');
+      assert.equal(blurredInputTw.value, vm.inputBlrTw);
+      assert.equal(blurredInputFv.value, '');
     });
   });
 
-  it('changes in the text-input are reflected correctly', async function () {
+  it('changes in the text-input are reflected correctly as per binding mode', 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');
@@ -81,22 +92,22 @@ describe.only('app', function () {
 
       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]);
+      const vm = getViewModel<App>(host);
+      assert.equal(vm.inputOneTime, 'input1');
+      assert.equal(vm.inputTwoWay, newInputs[1]);
+      assert.equal(vm.inputToView, 'input3');
+      assert.equal(vm.inputFromView, newInputs[3]);
     });
   });
 
-  it('changes in the vm property are reflected in text-inputs correctly', async function () {
+  it('changes in the vm property are reflected in text-inputs correctly as per binding mode', 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];
+      const vm = getViewModel<App>(host);
+      vm.inputOneTime = newInputs[0];
+      vm.inputTwoWay = newInputs[1];
+      vm.inputToView = newInputs[2];
+      vm.inputFromView = newInputs[3];
 
       ctx.lifecycle.processRAFQueue(undefined);
 
@@ -112,4 +123,32 @@ describe.only('app', function () {
     });
   });
 
+  it('changes in the text-input are reflected correctly according to update-trigger event', async function () {
+    await executeTest(async ({ host, ctx }) => {
+      const twoWay: HTMLInputElement = host.querySelector('#blurred-input-two-way input');
+      const fromView: HTMLInputElement = host.querySelector('#blurred-input-from-view input');
+
+      const vm = getViewModel<App>(host);
+      assert.equal(twoWay.value, vm.inputBlrTw);
+      assert.equal(fromView.value, '');
+
+      const newInputFv = 'new blurred input fv', newInputTw = 'new blurred input tw';
+      twoWay.value = newInputTw;
+      twoWay.dispatchEvent(new Event('change'));
+      fromView.value = newInputFv;
+      fromView.dispatchEvent(new Event('change'));
+      ctx.lifecycle.processRAFQueue(undefined);
+
+      assert.notEqual(vm.inputBlrTw, newInputTw);
+      assert.notEqual(vm.inputBlrFv, newInputFv);
+
+      twoWay.dispatchEvent(new Event('blur'));
+      fromView.dispatchEvent(new Event('blur'));
+      ctx.lifecycle.processRAFQueue(undefined);
+
+      assert.equal(vm.inputBlrTw, newInputTw);
+      assert.equal(vm.inputBlrFv, newInputFv);
+    });
+  });
+
 });

packages/__tests__/integration/test-plan.md

@@ -28,14 +28,14 @@
   Captures the reference to DOM elements, CE, and CE VMs.
 
 #### Observers
-- `array-observer`: Observer for mutation in array?
+- `array-observer`: Observer for mutation in array
 - `collection-length-observer`: Observer for array length
 - `collection-size-observer`: Observer for set or map size
 - `computed-observer`: Observer for computed properties
-- `map-observer`: Observer for mutation in Map?
+- `map-observer`: Observer for mutation in Map
 - `proxy-observer`: Observer for the mutation of object property value when proxy strategy is used (TODO: have a CE for testing that utilizes proxy strategy)
 - `self-observer`: utilized for `@bindable`s with change handler
-- `set-observer`: Observer for mutation in Set?
+- `set-observer`: Observer for mutation in Set
 - `setter-observer`: Observer for the mutation of object property value when getter-setter strategy is used (default strategy, therefore no special CE will be required)
 
 #### Binding behaviors
@@ -259,3 +259,30 @@ The update of the display is triggered every 2 seconds via a signal.
 A `div` with a random number (as easier to generate :)) + plus a button that does something (for example console.logs the text).
 When the `div` is clicked, a new number is generated.
 Targets `self` binding behavior, as the button click does not trigger the change of number.
+
+**NOTE:**
+custom attributes with multiple bindables in different variants (one named value, none named value, with/without the default specified, with/without mode, with/without multi expressions, etc)
+
+From rluba:
+But that’s not the only problem! I’ve removed the toggle and changed the dropdown to:
+```typescript
+@customAttribute('au-dropdown')
+export class AuDropdown {
+    @bindable appendToBody: boolean;
+    @bindable({mode: BindingMode.twoWay}) open = false;
+    openChanged() {
+        console.log('Open changed', this.open);
+    }
+    appendToBodyChanged() {
+        console.log('Append', this.appendToBody);
+    }
+}
+```
+
+The usage code looks like this:
+```html
+<li au-dropdown="append-to-body.bind: true; open.bind: ddopen" class="nav-item">
+```
+
+The result?
+`appendToBodyChanged` gets called and `appendToBody` is set to the string `append-to-body.bind: true; open.bind: ddopen` (so the whole attribute value of au-dropdown). How on earth can that happen?

packages/__tests__/package.json

@@ -23,7 +23,7 @@
     "test-node:watch": "npm run test-node -- --watch --watch-extensions ts",
     "test-chrome:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
     "test-chrome:verbose": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
-    "test-chrome:watch:verbose": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
+    "test-chrome:watch:verbose": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js,html --reporter=mocha",
     "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --watch-extensions js",
     "test-chrome:debugger:verbose": "karma start karma.conf.js --browsers=ChromeDebugging --watch-extensions js --reporter=mocha",
     "copy-html": "node tasks/copy-html --verbose",

packages/__tests__/tasks/copy-html.js

@@ -73,7 +73,9 @@ function handleChange(eventName, src) {
 
 const watched = htmlSourceDirs.map((dir) => path.join(cwd, dir, '**/*.html'));
 
-const watcher = chokidar.watch(watched);
+const watcher = chokidar.watch(watched, {
+  awaitWriteFinish: true
+});
 watcher.on('all', handleChange);
 if (!toWatch) {
   watcher.on('ready', () => {