add some e2e tests for computed values for @Watch()s

test/karma/test-app/components.d.ts

@@ -71,6 +71,10 @@ export namespace Components {
     interface ComputedPropertiesStateDecorator {
         "changeStates": () => Promise<void>;
     }
+    interface ComputedPropertiesWatchDecorator {
+        "first": string;
+        "last": string;
+    }
     interface ConditionalBasic {
     }
     interface ConditionalRerender {
@@ -481,6 +485,12 @@ declare global {
         prototype: HTMLComputedPropertiesStateDecoratorElement;
         new (): HTMLComputedPropertiesStateDecoratorElement;
     };
+    interface HTMLComputedPropertiesWatchDecoratorElement extends Components.ComputedPropertiesWatchDecorator, HTMLStencilElement {
+    }
+    var HTMLComputedPropertiesWatchDecoratorElement: {
+        prototype: HTMLComputedPropertiesWatchDecoratorElement;
+        new (): HTMLComputedPropertiesWatchDecoratorElement;
+    };
     interface HTMLConditionalBasicElement extends Components.ConditionalBasic, HTMLStencilElement {
     }
     var HTMLConditionalBasicElement: {
@@ -1230,6 +1240,7 @@ declare global {
         "computed-properties-prop-decorator": HTMLComputedPropertiesPropDecoratorElement;
         "computed-properties-prop-decorator-reflect": HTMLComputedPropertiesPropDecoratorReflectElement;
         "computed-properties-state-decorator": HTMLComputedPropertiesStateDecoratorElement;
+        "computed-properties-watch-decorator": HTMLComputedPropertiesWatchDecoratorElement;
         "conditional-basic": HTMLConditionalBasicElement;
         "conditional-rerender": HTMLConditionalRerenderElement;
         "conditional-rerender-root": HTMLConditionalRerenderRootElement;
@@ -1413,6 +1424,10 @@ declare namespace LocalJSX {
     }
     interface ComputedPropertiesStateDecorator {
     }
+    interface ComputedPropertiesWatchDecorator {
+        "first"?: string;
+        "last"?: string;
+    }
     interface ConditionalBasic {
     }
     interface ConditionalRerender {
@@ -1723,6 +1738,7 @@ declare namespace LocalJSX {
         "computed-properties-prop-decorator": ComputedPropertiesPropDecorator;
         "computed-properties-prop-decorator-reflect": ComputedPropertiesPropDecoratorReflect;
         "computed-properties-state-decorator": ComputedPropertiesStateDecorator;
+        "computed-properties-watch-decorator": ComputedPropertiesWatchDecorator;
         "conditional-basic": ConditionalBasic;
         "conditional-rerender": ConditionalRerender;
         "conditional-rerender-root": ConditionalRerenderRoot;
@@ -1867,6 +1883,7 @@ declare module "@stencil/core" {
             "computed-properties-prop-decorator": LocalJSX.ComputedPropertiesPropDecorator & JSXBase.HTMLAttributes<HTMLComputedPropertiesPropDecoratorElement>;
             "computed-properties-prop-decorator-reflect": LocalJSX.ComputedPropertiesPropDecoratorReflect & JSXBase.HTMLAttributes<HTMLComputedPropertiesPropDecoratorReflectElement>;
             "computed-properties-state-decorator": LocalJSX.ComputedPropertiesStateDecorator & JSXBase.HTMLAttributes<HTMLComputedPropertiesStateDecoratorElement>;
+            "computed-properties-watch-decorator": LocalJSX.ComputedPropertiesWatchDecorator & JSXBase.HTMLAttributes<HTMLComputedPropertiesWatchDecoratorElement>;
             "conditional-basic": LocalJSX.ConditionalBasic & JSXBase.HTMLAttributes<HTMLConditionalBasicElement>;
             "conditional-rerender": LocalJSX.ConditionalRerender & JSXBase.HTMLAttributes<HTMLConditionalRerenderElement>;
             "conditional-rerender-root": LocalJSX.ConditionalRerenderRoot & JSXBase.HTMLAttributes<HTMLConditionalRerenderRootElement>;

test/karma/test-app/computed-properties-prop-decorator/karma.spec.ts

@@ -1,6 +1,6 @@
 import { setupDomTests, waitForChanges } from '../util';
 
-describe('conditional-basic', function () {
+describe('computed-properties-peop-decorator', function () {
   const { setupDom, tearDownDom } = setupDomTests(document);
   let app: HTMLElement;
 

test/karma/test-app/computed-properties-state-decorator/karma.spec.ts

@@ -1,6 +1,6 @@
 import { setupDomTests, waitForChanges } from '../util';
 
-describe('conditional-basic', function () {
+describe('computed-properties-state-decorator', function () {
   const { setupDom, tearDownDom } = setupDomTests(document);
   let app: HTMLElement;
 

test/karma/test-app/computed-properties-watch-decorator/cmp.tsx

@@ -0,0 +1,48 @@
+import { Component, h, Prop, Watch } from '@stencil/core';
+
+enum Foo {
+  // names are explicitly different to ensure we aren't
+  // just resolving the declaration name.
+  BAR = 'first',
+}
+
+const MyProp = 'last';
+
+@Component({
+  tag: 'computed-properties-watch-decorator',
+})
+export class ComputedPropertiesWatchDecorator {
+  @Prop() [Foo.BAR] = 'no';
+
+  @Prop() [MyProp] = 'content';
+
+  firstNameCalledWith: any;
+  lastNameCalledWith: any;
+
+  @Watch(Foo.BAR)
+  onFirstNameChange(newVal: string, oldVal: string, attrName: string) {
+    this.firstNameCalledWith = {
+      newVal,
+      oldVal,
+      attrName,
+    };
+  }
+
+  @Watch(MyProp)
+  onLastNameChange(newVal: string, oldVal: string, attrName: string) {
+    this.lastNameCalledWith = {
+      newVal,
+      oldVal,
+      attrName,
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <p>First name called with: {this.firstNameCalledWith ? JSON.stringify(this.firstNameCalledWith) : 'not yet'}</p>
+        <p>Last name called with: {this.lastNameCalledWith ? JSON.stringify(this.lastNameCalledWith) : 'not yet'}</p>
+      </div>
+    );
+  }
+}

test/karma/test-app/computed-properties-watch-decorator/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf8" />
+<script src="./build/testapp.esm.js" type="module"></script>
+<script src="./build/testapp.js" nomodule></script>
+
+<computed-properties-watch-decorator></computed-properties-watch-decorator>
+
+<button type="button">Trigger watch callbacks</button>
+
+<script>
+  document.querySelector('button').addEventListener('click', () => {
+    const cmp = document.querySelector('computed-properties-watch-decorator');
+    cmp.setAttribute('first', 'Bob');
+    cmp.setAttribute('last', 'Builder');
+  });
+</script>

test/karma/test-app/computed-properties-watch-decorator/karma.spec.ts

@@ -0,0 +1,38 @@
+import { setupDomTests, waitForChanges } from '../util';
+
+describe('computed-properties-watch-decorator', function () {
+  const { setupDom, tearDownDom } = setupDomTests(document);
+  let app: HTMLElement;
+
+  beforeEach(async () => {
+    app = await setupDom('/computed-properties-watch-decorator/index.html');
+  });
+  afterEach(tearDownDom);
+
+  it('triggers the watch callback when the associated prop changes', async () => {
+    const el = app.querySelector('computed-properties-watch-decorator');
+    expect(el.innerText).toBe('First name called with: not yet\n\nLast name called with: not yet');
+
+    const button = app.querySelector('button');
+    expect(button).toBeDefined();
+
+    button.click();
+    await waitForChanges();
+
+    const firstNameCalledWith = {
+      newVal: 'Bob',
+      oldVal: 'no',
+      attrName: 'first',
+    };
+    const lastNameCalledWith = {
+      newVal: 'Builder',
+      oldVal: 'content',
+      attrName: 'last',
+    };
+    expect(el.innerText).toBe(
+      `First name called with: ${JSON.stringify(firstNameCalledWith)}\n\nLast name called with: ${JSON.stringify(
+        lastNameCalledWith,
+      )}`,
+    );
+  });
+});