Add replaceMode onto User Options (#73)

* chore: add conditional for replaceMode, so we only append the container class when mode is false

* refactor: run prettier format

* test: add tests for replaceMode

Co-authored-by: Marco A. Bomfim <[email protected]>

src/single-spa-vue.js

@@ -104,7 +104,9 @@ function mount(opts, mountedInstances, props) {
         }
       }
 
-      appOptions.el = appOptions.el + " .single-spa-container";
+      if (!opts.replaceMode) {
+        appOptions.el = appOptions.el + " .single-spa-container";
+      }
 
       // single-spa-vue@>=2 always REPLACES the `el` instead of appending to it.
       // We want domEl to stick around and not be replaced. So we tell Vue to mount

src/single-spa-vue.test.js

@@ -472,4 +472,55 @@ describe("single-spa-vue", () => {
     await lifecycles.unmount(props);
     expect(appMock.unmount).toHaveBeenCalled();
   });
+
+  it(`mounts a Vue instance in specified element, if replaceMode is true`, () => {
+    const domEl = document.createElement("div");
+    const htmlId = CSS.escape("single-spa-application:test-app");
+
+    document.body.appendChild(domEl);
+
+    const lifecycles = new singleSpaVue({
+      Vue,
+      appOptions: {
+        el: domEl,
+      },
+      replaceMode: true,
+    });
+
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => expect(Vue.mock.calls[0][0].el).toBe(`#${htmlId}`))
+      .then(() => {
+        expect(document.querySelector(`#${htmlId}`)).toBeTruthy();
+        domEl.remove();
+      });
+  });
+
+  it(`mounts a Vue instance with ' .single-spa-container' if replaceMode is false or not provided`, () => {
+    const domEl = document.createElement("div");
+    const htmlId = CSS.escape("single-spa-application:test-app");
+
+    document.body.appendChild(domEl);
+
+    const lifecycles = new singleSpaVue({
+      Vue,
+      appOptions: {
+        el: domEl,
+      },
+    });
+
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() =>
+        expect(Vue.mock.calls[0][0].el).toBe(`#${htmlId} .single-spa-container`)
+      )
+      .then(() => {
+        expect(
+          document.querySelector(`#${htmlId} .single-spa-container`)
+        ).toBeTruthy();
+        domEl.remove();
+      });
+  });
 });