From f5388493b5ef5e120368067f43d9f86bc7f7d68d Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Wed, 13 Sep 2023 16:15:02 -0400 Subject: [PATCH] add some e2e tests for computed values for `@Watch()`s --- test/karma/test-app/components.d.ts | 17 +++++++ .../karma.spec.ts | 2 +- .../karma.spec.ts | 2 +- .../cmp.tsx | 48 +++++++++++++++++++ .../index.html | 16 +++++++ .../karma.spec.ts | 38 +++++++++++++++ 6 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 test/karma/test-app/computed-properties-watch-decorator/cmp.tsx create mode 100644 test/karma/test-app/computed-properties-watch-decorator/index.html create mode 100644 test/karma/test-app/computed-properties-watch-decorator/karma.spec.ts diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts index af1d4e18ba5b..dc1d89604ed8 100644 --- a/test/karma/test-app/components.d.ts +++ b/test/karma/test-app/components.d.ts @@ -71,6 +71,10 @@ export namespace Components { interface ComputedPropertiesStateDecorator { "changeStates": () => Promise; } + 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; "computed-properties-prop-decorator-reflect": LocalJSX.ComputedPropertiesPropDecoratorReflect & JSXBase.HTMLAttributes; "computed-properties-state-decorator": LocalJSX.ComputedPropertiesStateDecorator & JSXBase.HTMLAttributes; + "computed-properties-watch-decorator": LocalJSX.ComputedPropertiesWatchDecorator & JSXBase.HTMLAttributes; "conditional-basic": LocalJSX.ConditionalBasic & JSXBase.HTMLAttributes; "conditional-rerender": LocalJSX.ConditionalRerender & JSXBase.HTMLAttributes; "conditional-rerender-root": LocalJSX.ConditionalRerenderRoot & JSXBase.HTMLAttributes; diff --git a/test/karma/test-app/computed-properties-prop-decorator/karma.spec.ts b/test/karma/test-app/computed-properties-prop-decorator/karma.spec.ts index 737469b3615b..2a5462c274a8 100644 --- a/test/karma/test-app/computed-properties-prop-decorator/karma.spec.ts +++ b/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; diff --git a/test/karma/test-app/computed-properties-state-decorator/karma.spec.ts b/test/karma/test-app/computed-properties-state-decorator/karma.spec.ts index 987e97a55207..91adf00a59e8 100644 --- a/test/karma/test-app/computed-properties-state-decorator/karma.spec.ts +++ b/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; diff --git a/test/karma/test-app/computed-properties-watch-decorator/cmp.tsx b/test/karma/test-app/computed-properties-watch-decorator/cmp.tsx new file mode 100644 index 000000000000..66366ac90a5e --- /dev/null +++ b/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 ( +
+

First name called with: {this.firstNameCalledWith ? JSON.stringify(this.firstNameCalledWith) : 'not yet'}

+

Last name called with: {this.lastNameCalledWith ? JSON.stringify(this.lastNameCalledWith) : 'not yet'}

+
+ ); + } +} diff --git a/test/karma/test-app/computed-properties-watch-decorator/index.html b/test/karma/test-app/computed-properties-watch-decorator/index.html new file mode 100644 index 000000000000..4d6953779ea8 --- /dev/null +++ b/test/karma/test-app/computed-properties-watch-decorator/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/test/karma/test-app/computed-properties-watch-decorator/karma.spec.ts b/test/karma/test-app/computed-properties-watch-decorator/karma.spec.ts new file mode 100644 index 000000000000..07fd78f21b1a --- /dev/null +++ b/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, + )}`, + ); + }); +});