From 73f0bda2a6fb8070f1f3fbaa8034aa4cfa61999e Mon Sep 17 00:00:00 2001
From: Josh Krawczyk <josh@torchlake.com>
Date: Thu, 14 May 2020 17:08:09 -0400
Subject: [PATCH] More Vue tests and fixes

---
 package-lock.json                             |  12 +-
 package.json                                  |   4 +-
 .../automation/AutomationManager.vue          |  11 +-
 .../automation/modals/PolicyForm.vue          |  39 +++---
 src/store/automation.js                       |   6 +-
 .../unit/automation/automationmanager.spec.js |  28 ++---
 .../unit/automation/automationmodals.spec.js  | 117 ++++++++++++++++--
 7 files changed, 152 insertions(+), 65 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 80af573..4e306a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2100,9 +2100,9 @@
       "dev": true
     },
     "@vue/test-utils": {
-      "version": "1.0.0-beta.31",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.0-beta.31.tgz",
-      "integrity": "sha512-IlhSx5hyEVnbvDZ3P98R1jNmy88QAd/y66Upn4EcvxSD5D4hwOutl3dIdfmSTSXs4b9DIMDnEVjX7t00cvOnvg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.2.tgz",
+      "integrity": "sha512-pnRWJbb0cLqjSJIKRpqoSISeYtufEn8D16VmhlCrDWIVt4iAY4Og4JpOPmFytvtQVz96p6n7T6ERI55ue6n0Ew==",
       "dev": true,
       "requires": {
         "dom-event-types": "^1.0.0",
@@ -13127,9 +13127,9 @@
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
     "vue-cli-plugin-quasar": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/vue-cli-plugin-quasar/-/vue-cli-plugin-quasar-2.0.1.tgz",
-      "integrity": "sha512-j7dQywO916YBsp7GduSDBH4mdQEKZdkInmO3u0hpzJuybInTJYQb/oQKmq5XcLl/pV/9MAaxNx2g3CXuwY2tFQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-quasar/-/vue-cli-plugin-quasar-2.0.2.tgz",
+      "integrity": "sha512-wHtjjKEpTq1vAhiRHRids/DDx1r1A53q/LVc2PgeI7sycbBLDdGhY3+XnysmME+OMReecqOP1IhNC7b8hL09tA==",
       "dev": true
     },
     "vue-hot-reload-api": {
diff --git a/package.json b/package.json
index ca51276..73102b4 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,11 @@
     "@vue/cli-plugin-unit-jest": "^4.3.1",
     "@vue/cli-plugin-vuex": "~4.3.1",
     "@vue/cli-service": "~4.3.1",
-    "@vue/test-utils": "1.0.0-beta.31",
+    "@vue/test-utils": "~1.0.2",
     "babel-plugin-transform-imports": "1.5.0",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
-    "vue-cli-plugin-quasar": "~2.0.1",
+    "vue-cli-plugin-quasar": "^2.0.2",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [
diff --git a/src/components/automation/AutomationManager.vue b/src/components/automation/AutomationManager.vue
index 82f24d6..806f16a 100644
--- a/src/components/automation/AutomationManager.vue
+++ b/src/components/automation/AutomationManager.vue
@@ -4,7 +4,7 @@
       <q-bar>
         <q-btn
           ref="refresh"
-          @click="getPolicies; clearRow()"
+          @click="clearRow"
           class="q-mr-sm"
           dense
           flat
@@ -27,7 +27,7 @@
             unelevated
             no-caps
             icon="add"
-            @click="showPolicyFormModal = true; clearRow()"
+            @click="showPolicyFormModal = true;"
           />
           <q-btn
             ref="edit"
@@ -99,11 +99,11 @@
       </div>
 
       <q-card-section>
-        <PolicySubTableTabs :policypk="selected.id" />
+        <PolicySubTableTabs :policypk="selectedRow" />
       </q-card-section>
     </q-card>
     <q-dialog v-model="showPolicyFormModal">
-      <PolicyForm @close="showPolicyFormModal = false" @refresh="getPolicies; clearRow()" />
+      <PolicyForm :pk="selectedRow" @close="showPolicyFormModal = false" @refresh="clearRow" />
     </q-dialog>
     <q-dialog v-model="showPolicyOverviewModal">
       <PolicyOverview @close="showPolicyOverviewModal = false" />
@@ -190,7 +190,8 @@ export default {
       this.$store.dispatch("automation/loadPolicyChecks", keys[0]);
       this.$store.dispatch("automation/loadPolicyAutomatedTasks", keys[0]);
     },
-    clearRow() {
+    clearRow () {
+      this.getPolicies();
       this.$store.commit("automation/setSelectedPolicy", null);
       this.$store.commit("automation/setPolicyChecks", {});
       this.$store.commit("automation/setPolicyAutomatedTasks", {});
diff --git a/src/components/automation/modals/PolicyForm.vue b/src/components/automation/modals/PolicyForm.vue
index c5ea762..facc54c 100644
--- a/src/components/automation/modals/PolicyForm.vue
+++ b/src/components/automation/modals/PolicyForm.vue
@@ -1,6 +1,6 @@
 <template>
   <q-card style="width: 60vw">
-    <q-form @submit.prevent="submit">
+    <q-form ref="form" @submit="submit">
       <q-card-section class="row items-center">
         <div class="text-h6">{{ title }}</div>
         <q-space />
@@ -99,24 +99,18 @@ export default {
         this.name = r.data.name;
         this.desc = r.data.desc;
         this.active = r.data.active;
-        this.selectedAgents = r.data.agents.map(agent => {
-          return {
-            label: agent.hostname,
-            value: agent.pk
-          };
-        });
-        this.selectedSites = r.data.sites.map(site => {
-          return {
-            label: site.site,
-            value: site.id
-          };
-        });
-        this.selectedClients = r.data.clients.map(client => {
-          return {
-            label: client.client,
-            value: client.id
-          };
-        });
+        this.selectedAgents = r.data.agents.map(agent => ({
+          label: agent.hostname,
+          value: agent.pk
+        }) );
+        this.selectedSites = r.data.sites.map(site => ({
+          label: site.site,
+          value: site.id
+        }) );
+        this.selectedClients = r.data.clients.map(client => ({
+          label: client.client,
+          value: client.id
+        }) );
       });
     },
     submit() {
@@ -128,6 +122,7 @@ export default {
       this.$q.loading.show();
 
       let formData = {
+        id: this.pk,
         name: this.name,
         desc: this.desc,
         active: this.active,
@@ -138,11 +133,11 @@ export default {
 
       if (this.pk) {
         this.$store
-          .dispatch("automation/editPolicy", this.pk, formData)
+          .dispatch("automation/editPolicy", formData)
           .then(r => {
             this.$q.loading.hide();
             this.$emit("close");
-            this.$emit("edited");
+            this.$emit("refresh");
             this.notifySuccess("Policy edited!");
           })
           .catch(e => {
@@ -168,7 +163,7 @@ export default {
       this.$store
         .dispatch("loadClients")
         .then(r => {
-          this.clientOptions = this.formatClient(r.data);
+          this.clientOptions = this.formatClients(r.data);
         })
         .catch(e => {
           this.$q.loading.hide();
diff --git a/src/store/automation.js b/src/store/automation.js
index 3526df5..a3d7ec3 100644
--- a/src/store/automation.js
+++ b/src/store/automation.js
@@ -55,12 +55,12 @@ export default {
     addPolicy(context, data) {
       return axios.post("/automation/policies/", data);
     },
-    editpolicy(context, data) {
-      return axios.put(`/automation/policies/${this.pk}/`, formData)
+    editPolicy(context, data) {
+      return axios.put(`/automation/policies/${data.id}/`, data)
     },
     deletePolicy(context, pk) {
       return axios.delete(`/automation/policies/${pk}`).then(r => {
-        context.dispatch("getPolicies");
+        context.dispatch("loadPolicies");
       });
     }
   }
diff --git a/tests/unit/automation/automationmanager.spec.js b/tests/unit/automation/automationmanager.spec.js
index 7ff3ff2..0d72ff2 100644
--- a/tests/unit/automation/automationmanager.spec.js
+++ b/tests/unit/automation/automationmanager.spec.js
@@ -1,12 +1,12 @@
-import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
-import Vuex from 'vuex';
-import AutomationManager from '@/components/automation/AutomationManager';
+import { mount, createLocalVue, createWrapper } from "@vue/test-utils";
+import Vuex from "vuex";
+import AutomationManager from "@/components/automation/AutomationManager";
 import "@/quasar.js"
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe('AutomationManager.vue', () => {
+describe("AutomationManager.vue", () => {
 
   const policiesData = [
     {
@@ -108,7 +108,7 @@ describe('AutomationManager.vue', () => {
 
     const row = wrapper.findAll("tbody > tr.q-tr").wrappers[1];
 
-    row.trigger('click');
+    row.trigger("click");
 
     expect(mutations.setSelectedPolicy).toHaveBeenCalledWith(expect.anything(), 2);
     expect(actions.loadPolicyChecks).toHaveBeenCalledWith(expect.anything(), 2);
@@ -118,7 +118,7 @@ describe('AutomationManager.vue', () => {
 
   it("shows edit policy modal on edit button press", async () => {
 
-    const button = wrapper.find({ ref: "edit" });
+    const button = wrapper.findComponent({ ref: "edit" });
 
     expect(bodyWrapper.find(".q-dialog").exists()).toBe(false);
     await button.trigger("click")
@@ -131,9 +131,9 @@ describe('AutomationManager.vue', () => {
 
   });
 
-  it('shows add policy modal on button press', async () => {
+  it("shows add policy modal on button press", async () => {
 
-    const button = wrapper.find({ ref: "new" });
+    const button = wrapper.findComponent({ ref: "new" });
 
     expect(bodyWrapper.find(".q-dialog").exists()).toBe(false);
     await button.trigger("click");
@@ -141,9 +141,9 @@ describe('AutomationManager.vue', () => {
 
   });
 
-  it('deletes selected policy', async () => {
+  it("deletes selected policy", async () => {
 
-    const button = wrapper.find({ ref: "delete" });
+    const button = wrapper.findComponent({ ref: "delete" });
 
     expect(bodyWrapper.find(".q-dialog").exists()).toBe(false);
     // Select Row
@@ -158,18 +158,18 @@ describe('AutomationManager.vue', () => {
 
   });
 
-  it('shows overview modal when button clicked', async () => {
+  it("shows overview modal when button clicked", async () => {
 
-    const button = wrapper.find({ ref: "overview" });
+    const button = wrapper.findComponent({ ref: "overview" });
 
     expect(bodyWrapper.find(".q-dialog").exists()).toBe(false);
     await button.trigger("click");
     expect(bodyWrapper.find(".q-dialog").exists()).toBe(true);
   });
 
-  it('calls vuex loadPolicies action when refresh button clicked and clears selected', () => {
+  it("calls vuex loadPolicies action when refresh button clicked and clears selected", () => {
 
-    const button = wrapper.find({ ref: "refresh" });
+    const button = wrapper.findComponent({ ref: "refresh" });
 
     button.trigger("click");
     expect(actions.loadPolicies).toHaveBeenCalled();
diff --git a/tests/unit/automation/automationmodals.spec.js b/tests/unit/automation/automationmodals.spec.js
index c2dabcc..b8cfa90 100644
--- a/tests/unit/automation/automationmodals.spec.js
+++ b/tests/unit/automation/automationmodals.spec.js
@@ -1,34 +1,46 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import PolicyForm from '@/components/automation/modals/PolicyForm';
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import PolicyForm from "@/components/automation/modals/PolicyForm";
 import "@/quasar.js"
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe('PolicyForm.vue', () => {
+describe("PolicyForm.vue", () => {
 
   const clients = [];
   const sites = [];
   const agents = [];
 
-  const policy = {};
+  const policy = {
+    id: 1,
+    name: "Test Policy",
+    active: true,
+    clients: [{id: 1, client: "Test Name"}],
+    sites: [{id: 1, site: "Test Name"}],
+    agents: [{pk: 1, hostname: "Test Name"}]
+  };
 
+  let methods;
   let actions, rootActions, store;
 
   // Runs before every test
   beforeEach(() => {
 
+    methods = {
+      notifyError: () => jest.fn()
+    };
+
     rootActions = {
-      loadClients: jest.fn(() => clients),
-      loadSites: jest.fn(() => sites),
-      loadAgents: jest.fn(() => agents),
+      loadClients: jest.fn(() => new Promise(res => res({ data: clients }))),
+      loadSites: jest.fn(() => new Promise(res => res({ data: sites }))),
+      loadAgents: jest.fn(() => new Promise(res => res({ data: agents }))),
     };
 
     actions = {
-      loadPolicy: jest.fn(() => policy),
-      addPolicy: jest.fn(),
-      editPolicy: jest.fn(),
+      loadPolicy: jest.fn(() => new Promise(res => res({ data: policy }))),
+      addPolicy: jest.fn(() => new Promise(res => res())),
+      editPolicy: jest.fn(() => new Promise(res => res())),
     };
 
     store = new Vuex.Store({
@@ -75,10 +87,89 @@ describe('PolicyForm.vue', () => {
     expect(rootActions.loadAgents).toHaveBeenCalled();
     expect(actions.loadPolicy).toHaveBeenCalled();
 
-  })
+  });
 
   /*it("renders the client, site, and agent dropdowns correctly", async () => {
 
   })*/
+  
+  it("sends the correct add action on submit", async () => {
 
-})
+    const wrapper = mount(PolicyForm, {
+      localVue,
+      store,
+      methods: methods
+    });
+
+    wrapper.setData({name: "Test Name"});
+    const form = wrapper.findComponent({ ref: "form" });
+    form.vm.$emit("submit");
+    await wrapper.vm.$nextTick();
+    
+    expect(actions.addPolicy).toHaveBeenCalled();
+    expect(actions.editPolicy).not.toHaveBeenCalled();
+
+  });
+
+  it("sends the correct edit action on submit", async () => {
+
+    const wrapper = mount(PolicyForm, {
+      localVue,
+      store,
+      propsData: {
+        pk: 1
+      },
+      methods: methods
+    });
+
+    wrapper.setData({name: "TestName"})
+    const form = wrapper.findComponent({ ref: "form" });
+    form.vm.$emit("submit");
+    await wrapper.vm.$nextTick();
+
+    expect(actions.addPolicy).not.toHaveBeenCalled();
+    expect(actions.editPolicy).toHaveBeenCalled();
+    
+  });
+  
+  it("sends error when name isn't set on submit", async () => {
+
+    const wrapper = mount(PolicyForm, {
+      localVue,
+      store,
+      methods: methods
+    });
+
+    const form = wrapper.findComponent({ ref: "form" });
+    form.vm.$emit("submit");
+    await wrapper.vm.$nextTick();
+
+    expect(actions.addPolicy).not.toHaveBeenCalled();
+    expect(actions.editPolicy).not.toHaveBeenCalled();
+  });
+
+  it("Renders correct title on edit", () => {
+
+    const wrapper = mount(PolicyForm, {
+      localVue,
+      store,
+      propsData: {
+        pk: 1
+      }
+    });
+
+    expect(wrapper.vm.title).toBe("Edit Policy");
+  });
+
+  it("Renders correct title on add", () => {
+
+    const wrapper = mount(PolicyForm, {
+      localVue,
+      store,
+    });
+
+    expect(wrapper.vm.title).toBe("Add Policy");
+  });
+
+});
+