[Mocks] Postpone component lifecycle events to next loop (#7505)

wix · Apr 17, 2022 · 7aaddce · 7aaddce
1 parent ff03c2a
commit 7aaddce
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -240,4 +240,7 @@ website/package-lock.json
 artifacts/
 
 # Navigation mocks
-Mock*
+lib/Mock/*.js
+lib/Mock/*.d.ts
+Mock.js
+Mock.d.ts
diff --git a/lib/Mock/Layouts/ComponentNode.ts b/lib/Mock/Layouts/ComponentNode.ts
@@ -18,43 +18,47 @@ export default class ComponentNode extends ParentNode {
 
   public componentDidAppear() {
     if (this.componentDidMountOnce) {
-      events.invokeComponentWillAppear({
-        componentName: this.data.name,
-        componentId: this.nodeId,
-        componentType: 'Component',
-      });
-      events.invokeComponentDidAppear({
+      setTimeout(() => {
+        events.invokeComponentWillAppear({
+          componentName: this.data.name,
+          componentId: this.nodeId,
+          componentType: 'Component',
+        });
+        events.invokeComponentDidAppear({
+          componentName: this.data.name,
+          componentId: this.nodeId,
+          componentType: 'Component',
+        });
+
+        this.buttonsDidAppear(
+          _.concat(
+            this.data.options.topBar?.rightButtons || [],
+            this.data.options.topBar?.leftButtons || []
+          )
+        );
+        this.titleChanged(undefined, this.data.options.topBar?.title);
+      }, 0);
+    } else {
+      this.componentDidAppearPending = true;
+    }
+  }
+
+  public componentDidDisappear() {
+    setTimeout(() => {
+      events.invokeComponentDidDisappear({
         componentName: this.data.name,
         componentId: this.nodeId,
         componentType: 'Component',
       });
 
-      this.buttonsDidAppear(
+      this.buttonsDidDisappear(
         _.concat(
           this.data.options.topBar?.rightButtons || [],
           this.data.options.topBar?.leftButtons || []
         )
       );
-      this.titleChanged(undefined, this.data.options.topBar?.title);
-    } else {
-      this.componentDidAppearPending = true;
-    }
-  }
-
-  public componentDidDisappear() {
-    events.invokeComponentDidDisappear({
-      componentName: this.data.name,
-      componentId: this.nodeId,
-      componentType: 'Component',
-    });
-
-    this.buttonsDidDisappear(
-      _.concat(
-        this.data.options.topBar?.rightButtons || [],
-        this.data.options.topBar?.leftButtons || []
-      )
-    );
-    this.titleChanged(this.data.options.topBar?.title);
+      this.titleChanged(this.data.options.topBar?.title);
+    }, 0);
   }
 
   titleChanged(oldTitle: any, newTitle?: any) {