Wait for mount to finish before unmounting parcels. Resolves single-spa#656. (single-spa#660)

Author: Joel Denning

spec/parcels/app-mounts-parcel.spec.js

@@ -294,6 +294,37 @@ describe("applications mounting parcels :", () => {
         expect(p2.getStatus()).toBe(singleSpa.NOT_MOUNTED);
       });
   });
+
+  // https://github.com/single-spa/single-spa/issues/656
+  it(`successfully unmounts a parcel that is unmounted before mount finishes`, async () => {
+    let shouldAppBeMounted = false,
+      parcel;
+
+    singleSpa.registerApplication(
+      "immediate-unmount",
+      app,
+      () => shouldAppBeMounted
+    );
+
+    parcelConfig = {
+      mount: () =>
+        new Promise((resolve) => {
+          setTimeout(resolve, 50);
+        }),
+      async unmount() {},
+    };
+
+    shouldAppBeMounted = true;
+
+    return singleSpa.triggerAppChange().then(() => {
+      parcel = app.mountProps.mountParcel(parcelConfig, {
+        domElement: document.createElement("div"),
+      });
+
+      shouldAppBeMounted = false;
+      return singleSpa.triggerAppChange();
+    });
+  });
 });
 
 function createParcelConfig() {

spec/parcels/mount-root-parcel.spec.js

@@ -117,6 +117,15 @@ describe(`root parcels`, () => {
     });
     await parcel.mountPromise;
   });
+
+  // https://github.com/single-spa/single-spa/issues/656
+  it(`can unmount a parcel that is still waiting for mount to finish`, async () => {
+    const parcelConfig = createParcelConfig();
+    const parcel = singleSpa.mountRootParcel(parcelConfig, {
+      domElement: document.createElement("div"),
+    });
+    await parcel.unmount();
+  });
 });
 
 function createParcelConfig(opts = {}) {

src/parcels/mount-parcel.js

@@ -90,19 +90,21 @@ export function mountParcel(config, customProps) {
     customProps,
     parentName: toName(owningAppOrParcel),
     unmountThisParcel() {
-      if (parcel.status !== MOUNTED) {
-        throw Error(
-          formatErrorMessage(
-            6,
-            __DEV__ &&
-              `Cannot unmount parcel '${name}' -- it is in a ${parcel.status} status`,
-            name,
-            parcel.status
-          )
-        );
-      }
-
-      return toUnmountPromise(parcel, true)
+      return mountPromise
+        .then(() => {
+          if (parcel.status !== MOUNTED) {
+            throw Error(
+              formatErrorMessage(
+                6,
+                __DEV__ &&
+                  `Cannot unmount parcel '${name}' -- it is in a ${parcel.status} status`,
+                name,
+                parcel.status
+              )
+            );
+          }
+          return toUnmountPromise(parcel, true);
+        })
         .then((value) => {
           if (parcel.parentName) {
             delete owningAppOrParcel.parcels[parcel.id];