Fix support for appOptions.el being provided as a domElement. Resolves …

…#42. (#43)

src/single-spa-vue.js

@@ -75,6 +75,10 @@ function mount(opts, mountedInstances, props) {
         }
       } else {
         domEl = appOptions.el;
+        if (!domEl.id) {
+          domEl.id = `single-spa-application:${props.name}`;
+        }
+        appOptions.el = `#${CSS.escape(domEl.id)}`;
       }
     } else {
       const htmlId = `single-spa-application:${props.name}`;

src/single-spa-vue.test.js

@@ -94,7 +94,7 @@ describe("single-spa-vue", () => {
       });
   });
 
-  it(`uses the appOptions.el domElement if provided, and wraps the single-spa application in a container div`, () => {
+  it(`uses the appOptions.el domElement (with id) if provided, and wraps the single-spa application in a container div`, () => {
     const domEl = Object.assign(document.createElement("div"), {
       id: "my-custom-el-2"
     });
@@ -115,6 +115,14 @@ describe("single-spa-vue", () => {
     return lifecycles
       .bootstrap(props)
       .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(Vue).toHaveBeenCalledWith({
+          data: {
+            name: "test-app"
+          },
+          el: `#my-custom-el-2 .single-spa-container`
+        });
+      })
       .then(() => {
         expect(
           document.querySelector(`#my-custom-el-2 .single-spa-container`)
@@ -123,6 +131,39 @@ describe("single-spa-vue", () => {
       });
   });
 
+  it(`uses the appOptions.el domElement (without id) if provided, and wraps the single-spa application in a container div`, () => {
+    const domEl = document.createElement("div");
+
+    document.body.appendChild(domEl);
+
+    const lifecycles = new singleSpaVue({
+      Vue,
+      appOptions: {
+        el: domEl
+      }
+    });
+
+    const htmlId = CSS.escape("single-spa-application:test-app");
+
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(Vue).toHaveBeenCalledWith({
+          data: {
+            name: "test-app"
+          },
+          el: `#${htmlId} .single-spa-container`
+        });
+      })
+      .then(() => {
+        expect(
+          document.querySelector(`#${htmlId} .single-spa-container`)
+        ).toBeTruthy();
+        domEl.remove();
+      });
+  });
+
   it(`throws an error if appOptions.el is not passed in as a string or dom element`, () => {
     expect(() => {
       new singleSpaVue({