fix(render): State updates in componentWillLoad should not cause render

Closes #449
ionic-team · Feb 9, 2018 · 9f7061d · 9f7061d
1 parent 09c6ea4
commit 9f7061d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/src/core/instance/proxy-members.ts b/src/core/instance/proxy-members.ts
@@ -166,7 +166,7 @@ export function setValue(plt: PlatformApi, elm: HostElement, memberName: string,
         }
       }
 
-      if (!plt.activeRender) {
+      if (!plt.activeRender && elm.$rendered) {
         // looks like this value actually changed, so we've got work to do!
         // but only if we've already created an instance, otherwise just chill out
         // queue that we need to do an update, but don't worry about queuing

diff --git a/src/core/instance/test/proxy-component.spec.ts b/src/core/instance/test/proxy-component.spec.ts
@@ -1,4 +1,4 @@
-import { ComponentConstructor, ComponentInstance, ComponentMeta, PlatformApi } from '../../../declarations';
+import { ComponentConstructor, ComponentInstance, ComponentMeta, HostElement, PlatformApi } from '../../../declarations';
 import { MEMBER_TYPE, PROP_TYPE } from '../../../util/constants';
 import { mockDomApi, mockPlatform } from '../../../testing/mocks';
 import { proxyComponentInstance } from '../proxy-component-instance';
@@ -45,23 +45,26 @@ describe('proxy-component', () => {
 
   });
 
-  describe('has changed', () => {
+  describe('has changed, if it has rendered once', () => {
 
     it('instance number changed', () => {
+      elm.$rendered = true;
       spyOn(plt.queue, 'add');
       proxyComponentInstance(plt, CmpConstructor, elm, instance);
       instance.num = 141.622;
       expect(plt.queue.add).toHaveBeenCalled();
     });
 
     it('instance string changed', () => {
+      elm.$rendered = true;
       spyOn(plt.queue, 'add');
       proxyComponentInstance(plt, CmpConstructor, elm, instance);
       instance.str = 'kph';
       expect(plt.queue.add).toHaveBeenCalled();
     });
 
     it('instance boolean changed', () => {
+      elm.$rendered = true;
       spyOn(plt.queue, 'add');
       proxyComponentInstance(plt, CmpConstructor, elm, instance);
       instance.bool = false;
@@ -70,23 +73,26 @@ describe('proxy-component', () => {
 
   });
 
-  describe('no change', () => {
+  describe('no change, if it has rendered once', () => {
 
     it('instance number unchanged', () => {
+      elm.$rendered = true;
       spyOn(plt.queue, 'add');
       proxyComponentInstance(plt, CmpConstructor, elm, instance);
       instance.num = 88;
       expect(plt.queue.add).not.toHaveBeenCalled();
     });
 
     it('instance string unchanged', () => {
+      elm.$rendered = true;
       spyOn(plt.queue, 'add');
       proxyComponentInstance(plt, CmpConstructor, elm, instance);
       instance.str = 'mph';
       expect(plt.queue.add).not.toHaveBeenCalled();
     });
 
     it('instance boolean unchanged', () => {
+      elm.$rendered = true;
       spyOn(plt.queue, 'add');
       proxyComponentInstance(plt, CmpConstructor, elm, instance);
       instance.bool = true;
@@ -95,10 +101,38 @@ describe('proxy-component', () => {
 
   });
 
+  describe('does not queue another render if it hasnt rendered yet', () => {
+
+    it('instance number changed', () => {
+      elm.$rendered = false;
+      spyOn(plt.queue, 'add');
+      proxyComponentInstance(plt, CmpConstructor, elm, instance);
+      instance.num = 1234;
+      expect(plt.queue.add).not.toHaveBeenCalled();
+    });
+
+    it('instance string changed', () => {
+      elm.$rendered = false;
+      spyOn(plt.queue, 'add');
+      proxyComponentInstance(plt, CmpConstructor, elm, instance);
+      instance.str = 'asdfasdf';
+      expect(plt.queue.add).not.toHaveBeenCalled();
+    });
+
+    it('instance boolean changed', () => {
+      elm.$rendered = false;
+      spyOn(plt.queue, 'add');
+      proxyComponentInstance(plt, CmpConstructor, elm, instance);
+      instance.bool = false;
+      expect(plt.queue.add).not.toHaveBeenCalled();
+    });
+
+  });
+
 
   let plt: PlatformApi;
   const domApi = mockDomApi();
-  let elm: any;
+  let elm: HostElement;
   let instance: ComponentInstance;
   let CmpConstructor: ComponentConstructor;