[withBreakpointObserver] Fix the order of mount/destroy triggers

When components are working with the same markup, it is necessary to
have a predicable order of `destroyed` and `mounted` hooks call. The
mount hook is delayed to the next loop with a `setTimeout(cb, 0)` call.

Author: titouanmathis

src/decorators/withBreakpointObserver.js

@@ -47,6 +47,29 @@ function testConflictingBreakpointConfiguration(instance) {
   }
 }
 
+/**
+ * Add the current instance to the resize service.
+ * @param {String} key      The key for the resize service callback.
+ * @param {Base}   instance The instance to observe.
+ */
+function addToResize(key, instance) {
+  testConflictingBreakpointConfiguration(instance);
+  const { add, has } = useResize();
+
+  if (!has(key)) {
+    add(key, function onResize({ breakpoint }) {
+      const action = testBreakpoints(instance, breakpoint);
+
+      // Always destroy before mounting
+      if (action === '$destroy' && instance.$isMounted) {
+        instance[action]();
+      } else if (action === '$mount' && !instance.$isMounted) {
+        setTimeout(() => instance[action](), 0);
+      }
+    });
+  }
+}
+
 /**
  * BreakpointObserver class.
  */
@@ -83,14 +106,7 @@ export default (BaseClass) =>
             return;
           }
 
-          testConflictingBreakpointConfiguration(this);
-
-          if (!has(key)) {
-            add(key, ({ breakpoint }) => {
-              const action = testBreakpoints(this, breakpoint);
-              this[action]();
-            });
-          }
+          addToResize(key, this);
         }
       });
       mutationObserver.observe(this.$el, { attributes: true });
@@ -100,12 +116,7 @@ export default (BaseClass) =>
         return this;
       }
 
-      testConflictingBreakpointConfiguration(this);
-      add(key, ({ breakpoint }) => {
-        const action = testBreakpoints(this, breakpoint);
-        this[action]();
-      });
-
+      addToResize(key, this);
       return this;
     }
 

tests/decorators/withBreakpointObserver.spec.js

@@ -114,6 +114,64 @@ describe('The withBreakpointObserver decorator', () => {
     }).toThrow(/Incorrect configuration/);
   });
 
+  it('should destroy components before mounting the others', async () => {
+    await resizeWindow({ width: 800 });
+    const fn = jest.fn();
+
+    class Mobile extends withBreakpointObserver(Base) {
+      get config() {
+        return { name: 'Mobile', inactiveBreakpoints: 'm' };
+      }
+
+      mounted() {
+        fn('Mobile', 'mounted')
+      }
+
+      destroyed() {
+        fn('Mobile', 'destroyed');
+      }
+    }
+
+    class Desktop extends withBreakpointObserver(Base) {
+      get config() {
+        return { name: 'Desktop', activeBreakpoints: 'm' };
+      }
+
+      mounted() {
+        fn('Desktop', 'mounted')
+      }
+
+      destroyed() {
+        fn('Desktop', 'destroyed');
+      }
+    }
+
+    class App extends Base {
+      get config() {
+        return {
+          name: 'App',
+          components: { Mobile, Desktop }
+        }
+      }
+    }
+
+    document.body.innerHTML = `
+      <div data-breakpoint>
+        <div data-component="Mobile"></div>
+        <div data-component="Desktop"></div>
+      </div>
+    `;
+
+    const app = new App(document.body);
+    expect(fn).toHaveBeenCalledWith('Desktop', 'mounted');
+    await resizeWindow({ width: 400 });
+    expect(fn).toHaveBeenNthCalledWith(2, 'Desktop', 'destroyed');
+    expect(fn).toHaveBeenNthCalledWith(3, 'Mobile', 'mounted');
+    await resizeWindow({ width: 800 });
+    expect(fn).toHaveBeenNthCalledWith(4, 'Mobile', 'destroyed');
+    expect(fn).toHaveBeenNthCalledWith(5, 'Desktop', 'mounted');
+  });
+
   it('should throw when breakpoints are not availabe', () => {
     expect(() => {
       document.body.innerHTML = '<div></div>';