TRMM/tacticalrmm-web
1
0
Fork 0
mirror of https://github.com/jpros/tacticalrmm-web.git synced 2026-01-20 03:50:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

More Vue tests and fixes

Browse Source
This commit is contained in:
Josh Krawczyk
2020-05-14 17:08:09 -04:00
parent ca8570e879
commit 73f0bda2a6
7 changed files with 152 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -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": {

4
package.json
View File

@@ -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": [

11
src/components/automation/AutomationManager.vue
View File

@@ -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", {});

39
src/components/automation/modals/PolicyForm.vue
View File

@@ -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();

6
src/store/automation.js
View File

@@ -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");
});
}
}

28
tests/unit/automation/automationmanager.spec.js
View File

@@ -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();

117
tests/unit/automation/automationmodals.spec.js
View File

@@ -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");
});
});