Added a child to replace the root element with for test running

Author: CaptainAchilles

template/test/unit/spec/SideNav.spec.ts

@@ -16,22 +16,25 @@ describe("SideNav.vue", () => {
             main.id = "app";
             document.body.appendChild(main);
         }
+        const mountPoint = document.createElement("div");
+        mountPoint.id = "mountMe";
+        document.getElementById("app").appendChild(mountPoint);
     });
 
     it("Hides Links Intially", () => {
-        let vm = new SideNav().$mount("#app");
-        
+        let vm = new SideNav().$mount("#mountMe");
+
         // The only child is the "Toggle Links" item
         assert.equal(vm.$el.children.length, 1);
     });
 
     it("Shows links when clicked", (done) => {
-        let vm = new SideNav().$mount("#app");
-        
+        let vm = new SideNav().$mount("#mountMe");
+
         // The only child is the "Toggle Links" item
         assert.equal(vm.$el.children.length, 1);
         (vm.$el.children[0] as HTMLElement).click();
-        
+
         Vue.nextTick(() => {
             // There are 3 links + 1 toggle link item.
             assert.equal(vm.$el.children.length, 4);
@@ -41,7 +44,7 @@ describe("SideNav.vue", () => {
 
 
     it("Toggles links properly", (done) => {
-        let vm = new SideNav().$mount("#app");
+        let vm = new SideNav().$mount("#mountMe");
 
         // The only child is the "Toggle Links" item
         assert.equal(vm.$el.children.length, 1);
@@ -51,7 +54,7 @@ describe("SideNav.vue", () => {
             assert.equal(vm.$el.children.length, 4);
             (vm.$el.children[0] as HTMLElement).click();
 
-            Vue.nextTick(function() {
+            Vue.nextTick(() => {
                 // Clicking it again should hide all links
                 assert.equal(vm.$el.children.length, 1);
                 done();

template/test/unit/spec/WinnerIsYou.spec.ts

@@ -5,6 +5,7 @@ const assert = chai.assert;
 
 const WinnerIsYou = Vue.extend(WinnerIsYouComponent);
 
+
 describe("WinnerIsYou.vue", () => {
     beforeEach(() => {
         let main = document.getElementById("app");
@@ -15,17 +16,21 @@ describe("WinnerIsYou.vue", () => {
             main.id = "app";
             document.body.appendChild(main);
         }
+
+        const mountPoint = document.createElement("div");
+        mountPoint.id = "mountMe";
+        document.getElementById("app").appendChild(mountPoint);
     });
 
     it("Renders nothing when showText undefined", () => {
-        let vm = new WinnerIsYou().$mount("#app") as IWinnerIsYou;
-    
+        let vm = new WinnerIsYou().$mount("#mountMe") as IWinnerIsYou;
+
         assert.equal(vm.text, "");
         assert.equal(vm.$el.textContent, "");
     });
-    
+
     it("Updates correctly", (done) => {
-        let vm = new WinnerIsYou().$mount("#app") as IWinnerIsYou;
+        let vm = new WinnerIsYou().$mount("#mountMe") as IWinnerIsYou;
         assert.equal(vm.text, "");
         assert.equal(vm.$el.textContent, "");
         vm.showText = "This page is intentionally styled poorly";
@@ -38,9 +43,9 @@ describe("WinnerIsYou.vue", () => {
             done();
         });
     });
-    
+
     it("Captializes correctly", (done) => {
-        let vm = new WinnerIsYou().$mount("#app") as IWinnerIsYou;
+        let vm = new WinnerIsYou().$mount("#mountMe") as IWinnerIsYou;
         assert.equal(vm.text, "");
         assert.equal(vm.$el.textContent, "");
         vm.showText = "This page is intentionally styled poorly";
@@ -53,7 +58,7 @@ describe("WinnerIsYou.vue", () => {
             assert.equal(vm.$el.textContent,
                 "ALTERNATIVE TEXT".toUpperCase());
             vm.doStuff();
-            
+
             Vue.nextTick(() => {
                 assert.equal(vm.showAlternate, false);
                 assert.equal(vm.text, "This page is intentionally styled poorly".toUpperCase());