fix(engine): adding tests and fixes

packages/@lwc/engine/src/framework/decorators/api.ts

@@ -9,7 +9,7 @@ import { isRendering, vmBeingRendered, isBeingConstructed } from "../invoker";
 import { isObject, isNull, isTrue, toString, isFalse } from "../../shared/language";
 import { observeMutation, notifyMutation, ObservingRecord, resetObservingRecord, getCurrentObservingRecord, setCurrentObservingRecord } from "../watcher";
 import { ComponentInterface, ComponentConstructor } from "../component";
-import { VM, getComponentVM } from "../vm";
+import { VM, getComponentVM, renderVM } from "../vm";
 import { isUndefined, isFunction } from "../../shared/language";
 import { reactiveMembrane } from "../membrane";
 import { getDecoratorsRegisteredMeta } from "./register";
@@ -116,12 +116,19 @@ function getObservingAccessorRecord(vm: VM, set: (v: any) => void): ObservingAcc
             if (isFalse(this.debounced)) {
                 this.debounced = true;
                 addCallbackToNextTick(() => {
-                    if (!isNull(this.debounced)) {
+                    if (isTrue(this.debounced)) {
+                        const { isDirty: dirtyStateBeforeSetterCall } = vm;
                         set.call(vm.component, this.value);
                         // debouncing after the call to the original setter to prevent
-                        // infinite cycles if the setter itself is mutating things that
+                        // infinity loop if the setter itself is mutating things that
                         // were accessed during the previous invocation.
                         this.debounced = false;
+                        if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && vm.idx > 0) {
+                            // immediate rehydration due to a setter driven mutation, otherwise
+                            // the component will get rendered on the second tick, which it is not
+                            // desirable.
+                            renderVM(vm);
+                        }
                     }
                 });
             }

packages/integration-karma/test/reactivity/setters/index.spec.js

@@ -0,0 +1,34 @@
+import { createElement } from 'test-utils';
+
+import Parent from 'x/parent';
+
+describe('Reactivity for setters', () => {
+
+    it('should not alter rendering if they are not invoked', () => {
+        let elm = createElement('x-test', { is: Parent });
+        document.body.appendChild(elm);
+        expect(elm.getRenderingCounter()).toBe(1);
+        expect(elm.shadowRoot.querySelector('x-child.first').getRenderingCounter()).toBe(1);
+    });
+
+    it('should react to changes in parent by calling the setter on the child once', () => {
+        let elm = createElement('x-test', { is: Parent });
+        document.body.appendChild(elm);
+        elm.addNewItem(4);
+        return Promise.resolve().then(() => {
+            expect(elm.getRenderingCounter()).toBe(1);
+            expect(elm.shadowRoot.querySelector('x-child.second').getRenderingCounter()).toBe(2);
+            expect(elm.shadowRoot.querySelector('x-child.second').shadowRoot.querySelectorAll('li').length).toBe(4);
+        });
+    });
+
+    it('should ignore string value passed to setters', () => {
+        let elm = createElement('x-test', { is: Parent });
+        document.body.appendChild(elm);
+        elm.setCity('sanfrancisco');
+        return Promise.resolve().then(() => {
+            expect(elm.getRenderingCounter()).toBe(2);
+            expect(elm.shadowRoot.querySelector('x-child.third').getRenderingCounter()).toBe(2);
+        });
+    });
+});

packages/integration-karma/test/reactivity/setters/x/child/child.html

@@ -0,0 +1,10 @@
+<template>
+    <ul>
+        <template for:each={normalizedItems} for:item="item">
+            <li key={item.key}>{item.label}</li>
+        </template>
+    </ul>
+    <p>
+        City: {normalizedCity}
+    </p>
+</template>

packages/integration-karma/test/reactivity/setters/x/child/child.js

@@ -0,0 +1,38 @@
+import { LightningElement, api, track } from 'lwc';
+
+export default class Test extends LightningElement {
+    counter = 0;
+    @track normalizedItems = [];
+
+    @api
+    get items() {
+        return this.normalizedItems;
+    }
+    set items(items) {
+        this.originalItems = items;
+        this.normalizedItems = items.map((item)=> {
+            const normalizedItem = {
+                key : `id-${item}`,
+                label : item
+            };
+
+            return normalizedItem;
+        });
+    }
+
+    @track normalizedCity = '';
+    @api
+    get city() {
+        return this.normalizedCity;
+    }
+    set city(name) {
+        this.normalizedCity = name.trim();
+    }
+
+    @api getRenderingCounter() {
+        return this.counter;
+    }
+    renderedCallback() {
+        this.counter++;
+    }
+}

packages/integration-karma/test/reactivity/setters/x/parent/parent.html

@@ -0,0 +1,5 @@
+<template>
+    <x-child class="first"></x-child>
+    <x-child class="second" items={items}></x-child>
+    <x-child class="third" city={city}></x-child>
+</template>

packages/integration-karma/test/reactivity/setters/x/parent/parent.js

@@ -0,0 +1,19 @@
+import { LightningElement, api, track } from 'lwc';
+
+export default class Test extends LightningElement {
+    counter = 0;
+    @track items = [1,2,3];
+    @track city = 'miami';
+    @api addNewItem(item) {
+        this.items.push(item);
+    }
+    @api getRenderingCounter() {
+        return this.counter;
+    }
+    @api setCity(v) {
+        return this.city = v;
+    }
+    renderedCallback() {
+        this.counter++;
+    }
+}