Updated Tests to use @quasar/testing package.

.env

@@ -1,2 +0,0 @@
-PROD_URL = "https://api.example.com"
-DEV_URL = "http://192.168.99.150:8000"

.env.example

@@ -0,0 +1,5 @@
+PROD_URL = "https://api.example.com"
+DEV_URL = "https://api.example.com"
+APP_URL = "https://app.example.com"
+DEV_HOST = 0.0.0.0
+DEV_PORT = 80

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
   // cache: false,
   // verbose: true,
   // watch: true,
-  collectCoverage: true,
+  collectCoverage: false,
   coverageDirectory: '<rootDir>/test/jest/coverage',
   collectCoverageFrom: [
     '<rootDir>/src/**/*.vue',
@@ -44,16 +44,18 @@ module.exports = {
     '^test-utils$': '<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.js',
     '^quasar$': '<rootDir>/node_modules/quasar/dist/quasar.common.js',
     '^~/(.*)$': '<rootDir>/$1',
+    '^@/(.*)$': '<rootDir>/src/$1',
     '^src/(.*)$': '<rootDir>/src/$1',
-    '.*css$': '<rootDir>/test/jest/utils/stub.css'
+    '.*css$': '<rootDir>/test/jest/utils/stub.css',
+
   },
   transform: {
     '.*\\.vue$': 'vue-jest',
     '.*\\.js$': 'babel-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
     // use these if NPM is being flaky
-    // '.*\\.vue$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
-    // '.*\\.js$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
+    //'.*\\.vue$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
+    //'.*\\.js$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
   },
   transformIgnorePatterns: [
     '<rootDir>/node_modules/(?!quasar/lang)'

package.json

@@ -6,21 +6,24 @@
   "scripts": {
     "serve": "quasar dev",
     "build": "quasar build",
-    "__test:unit": "vue-cli-service test:unit"
+    "test:unit": "quasar test --unit jest"
   },
   "dependencies": {
-    "@quasar/extras": "^1.8.1",
+    "@quasar/extras": "^1.8.2",
     "axios": "^0.19.2",
     "dotenv": "^8.2.0",
-    "quasar": "^1.12.2"
+    "quasar": "^1.12.3"
   },
   "devDependencies": {
-    "@quasar/app": "^1.9.5",
+    "@quasar/app": "^1.9.6",
+    "@quasar/cli": "^1.0.7",
     "@quasar/quasar-app-extension-testing": "^1.0.0",
     "@quasar/quasar-app-extension-testing-unit-jest": "^1.0.1",
-    "flush-promises": "^1.0.2"
+    "core-js": "^2.6.11",
+    "flush-promises": "^1.0.2",
+    "fs-extra": "^9.0.1"
   },
   "browserslist": [
     "last 1 version, not dead, ie >= 11"
   ]
-}
+}

quasar.conf.js

@@ -60,8 +60,9 @@ module.exports = function () {
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
       https: false,
-      host: "192.168.99.150",
-      port: 8080,
+      host: process.env.DEV_HOST,
+      port: process.env.DEV_PORT,
+      public: process.env.APP_URL,
       open: false
     },
 

quasar.extensions.json

@@ -6,6 +6,8 @@
   },
   "@quasar/testing-unit-jest": {
     "babel": "babelrc",
-    "options": []
+    "options": [
+      "scripts"
+    ]
   }
 }

test/jest/__tests__/App.spec.js

@@ -1,61 +0,0 @@
-/* eslint-disable */
-/**
- * @jest-environment jsdom
- */
-
-import { mount, createLocalVue, shallowMount } from '@vue/test-utils'
-import QBUTTON from './demo/QBtn-demo.vue'
-import * as All from 'quasar'
-// import langEn from 'quasar/lang/en-us' // change to any language you wish! => this breaks wallaby :(
-const { Quasar, date } = All
-
-const components = Object.keys(All).reduce((object, key) => {
-  const val = All[key]
-  if (val && val.component && val.component.name != null) {
-    object[key] = val
-  }
-  return object
-}, {})
-
-describe('Mount Quasar', () => {
-  const localVue = createLocalVue()
-  localVue.use(Quasar, { components }) // , lang: langEn
-
-  const wrapper = mount(QBUTTON, {
-    localVue
-  })
-  const vm = wrapper.vm
-
-  it('passes the sanity check and creates a wrapper', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-
-  it('has a created hook', () => {
-    expect(typeof vm.increment).toBe('function')
-  })
-
-  it('accesses the shallowMount', () => {
-    expect(vm.$el.textContent).toContain('rocket muffin')
-    expect(wrapper.text()).toContain('rocket muffin') // easier
-    expect(wrapper.find('p').text()).toContain('rocket muffin')
-  })
-
-  it('sets the correct default data', () => {
-    expect(typeof vm.counter).toBe('number')
-    const defaultData2 = QBUTTON.data()
-    expect(defaultData2.counter).toBe(0)
-  })
-
-  it('correctly updates data when button is pressed', () => {
-    const button = wrapper.find('button')
-    button.trigger('click')
-    expect(vm.counter).toBe(1)
-  })
-
-  it('formats a date without throwing exception', () => {
-    // test will automatically fail if an exception is thrown
-    // MMMM and MMM require that a language is 'installed' in Quasar
-    let formattedString = date.formatDate(Date.now(), 'YYYY MMMM MMM DD')
-    console.log('formattedString', formattedString)
-  })
-})

test/jest/__tests__/automation/automationmanager.spec.js

@@ -1,7 +1,7 @@
-import { mount, createLocalVue, createWrapper } from "@vue/test-utils";
+import { mount, createWrapper, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import AutomationManager from "@/components/automation/AutomationManager";
-import "@/quasar.js"
+import "../../utils/quasar.js";
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -127,7 +127,8 @@ describe("AutomationManager.vue", () => {
     expect(bodyWrapper.find(".q-menu").exists()).toBe(false);
 
     // Right Click on Row
-    await wrapper.find("tbody > tr.q-tr").trigger("contextmenu");
+    await wrapper.find("tbody > .q-tr").trigger("contextmenu");
+    await localVue.nextTick();
     expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
     await bodyWrapper.find("#context-edit").trigger("click");
 
@@ -187,6 +188,7 @@ describe("AutomationManager.vue", () => {
 
     // Right Click on Row
     await wrapper.find("tbody > tr.q-tr").trigger("contextmenu");
+    await localVue.nextTick();
     expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
     await bodyWrapper.find("#context-delete").trigger("click");
 
@@ -230,6 +232,7 @@ describe("AutomationManager.vue", () => {
 
     // Right Click on Row
     await wrapper.find("tbody > tr.q-tr").trigger("contextmenu");
+    await localVue.nextTick();
     expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
     await bodyWrapper.find("#context-relation").trigger("click");
 

test/jest/__tests__/automation/formmodal.spec.js

@@ -2,7 +2,7 @@ import { mount, createLocalVue } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import Vuex from "vuex";
 import PolicyForm from "@/components/automation/modals/PolicyForm";
-import "@/quasar.js";
+import "../../utils/quasar.js";
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

test/jest/__tests__/automation/policyadd.spec.js

@@ -1,7 +1,8 @@
-import { mount, createLocalVue, createWrapper } from "@vue/test-utils";
+import { mount, createLocalVue } from "test-utils";
+import flushpromises from "flush-promises";
 import Vuex from "vuex";
 import PolicyAdd from "@/components/automation/modals/PolicyAdd";
-import "@/quasar.js";
+import "../../utils/quasar.js";
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -73,8 +74,9 @@ describe.each([
     });
   });
 
-  it("calls vuex actions on mount", () => {
+  it("calls vuex actions on mount", async () => {
 
+    await flushpromises();
     expect(actions.loadPolicies).toHaveBeenCalled();
     expect(actions.getRelatedPolicies).toHaveBeenCalledWith(expect.anything(),
       {pk: pk, type: type}
@@ -87,18 +89,21 @@ describe.each([
     expect(wrapper.find(".text-h6").text()).toBe(`Edit policies assigned to ${type}`);
   });
 
-  it("renders correct amount of policies in dropdown", () => {
+  it("renders correct amount of policies in dropdown", async () => {
     
+    await flushpromises();
     expect(wrapper.vm.options).toHaveLength(3);
   });
 
-  it("renders correct amount of related policies in selected", () => {
+  it("renders correct amount of related policies in selected", async () => {
     
+    await flushpromises();
     expect(wrapper.vm.selected).toHaveLength(2);
   });
 
   it("sends correct data on form submit", async () => {
     
+    await flushpromises();
     const form = wrapper.findComponent({ ref: "form" });
 
     await form.vm.$emit("submit");

test/jest/__tests__/automation/policycheckstab.spec.js

@@ -1,7 +1,7 @@
-import { mount, shallowMount, createLocalVue, createWrapper } from "@vue/test-utils";
+import { mount, shallowMount, createWrapper, createLocalVue } from "@vue/test-utils";
 import PolicyChecksTab from "@/components/automation/PolicyChecksTab";
 import Vuex from "vuex";
-import "@/quasar.js";
+import "../../utils/quasar.js"
 
 // Import Test Data
 import {
@@ -14,7 +14,7 @@ import {
   eventlogcheck
 } from "./data.js";
 
-const localVue = createLocalVue();
+const localVue = createLocalVue()
 localVue.use(Vuex);
 
 const bodyWrapper = createWrapper(document.body);
@@ -34,7 +34,6 @@ describe("PolicyChecksTab.vue with no policy selected", () => {
   // Runs before every test
   beforeEach(() => {
 
-    // Create the Test store
     // Create the Test store
     state = {
       checks: [],
@@ -160,6 +159,7 @@ describe("PolicyChecksTab.vue with policy selected and no checks", () => {
       expect(bodyWrapper.find(".q-menu").exists()).toBe(false);
 
       await addButton.trigger("click");
+      await localVue.nextTick();
       expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
 
       // Selects correct menu item
@@ -268,6 +268,7 @@ describe("PolicyChecksTab.vue with policy selected and checks", () => {
 
       const row = wrapper.findAll(".q-table > tbody > .q-tr").wrappers[item.index];
       await row.trigger("contextmenu");
+      await localVue.nextTick();
       expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
       
       await bodyWrapper.find("#context-edit").trigger("click");
@@ -296,6 +297,7 @@ describe("PolicyChecksTab.vue with policy selected and checks", () => {
 
     const row = wrapper.findAll(".q-table > tbody > .q-tr").wrappers[0];
     await row.trigger("contextmenu");
+    await localVue.nextTick();
     expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
 
     await bodyWrapper.find("#context-status").trigger("click");
@@ -321,6 +323,7 @@ describe("PolicyChecksTab.vue with policy selected and checks", () => {
 
     const row = wrapper.findAll(".q-table > tbody > .q-tr").wrappers[0];
     await row.trigger("contextmenu");
+    await localVue.nextTick();
     expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
 
     await bodyWrapper.find("#context-delete").trigger("click");

test/jest/__tests__/automation/policyoverview.spec.js

@@ -1,8 +1,7 @@
 import { mount, createLocalVue } from "@vue/test-utils";
-import flushPromises from "flush-promises";
 import Vuex from "vuex";
 import PolicyOverview from "@/components/automation/PolicyOverview";
-import "@/quasar.js";
+import "../../utils/quasar.js";
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -91,7 +90,9 @@ describe("PolicyOverview.vue", () => {
 
   });
 
-  it("renders tree data", () => {
+  it("renders tree data", async () => {
+
+    await localVue.nextTick();
 
     const tree = wrapper.findComponent({ ref: "tree" });
 
@@ -110,7 +111,7 @@ describe("PolicyOverview.vue", () => {
     expect(site2.label).toBe("Site Name 2");
   });
 
-  it("selects tree node and updates data property with policy",() => {
+  it("selects tree node and updates data property with policy", async () => {
 
     // Expected rendered policy node data
     const returnData = {
@@ -119,6 +120,8 @@ describe("PolicyOverview.vue", () => {
       label: "Policy Name 1"
     };
 
+    await localVue.nextTick();
+    
     // Get second tree node which should be the first policy
     wrapper.findAll(".q-tree__node-header").wrappers[1].trigger("click");
 

test/jest/__tests__/automation/policytasksstab.spec.js

@@ -1,7 +1,7 @@
-import { mount, shallowMount, createLocalVue, createWrapper } from "@vue/test-utils";
+import { mount, shallowMount, createWrapper, createLocalVue } from "@vue/test-utils";
 import PolicyAutomatedTasksTab from "@/components/automation/PolicyAutomatedTasksTab";
 import Vuex from "vuex";
-import "@/quasar.js";
+import "../../utils/quasar.js";
 
 // Import Test Data
 import {
@@ -238,6 +238,7 @@ describe("PolicyChecksTab.vue with policy selected and checks", () => {
 
     const row = wrapper.findAll(".q-table > tbody > .q-tr").wrappers[0];
     await row.trigger("contextmenu");
+    await localVue.nextTick();
     expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
 
     await bodyWrapper.find("#context-status").trigger("click");
@@ -252,6 +253,7 @@ describe("PolicyChecksTab.vue with policy selected and checks", () => {
 
     const row = wrapper.findAll(".q-table > tbody > .q-tr").wrappers[0];
     await row.trigger("contextmenu");
+    await localVue.nextTick();
     expect(bodyWrapper.find(".q-menu").exists()).toBe(true);
 
     await bodyWrapper.find("#context-delete").trigger("click");

test/jest/__tests__/automation/relationview.spec.js

@@ -1,7 +1,7 @@
 import { mount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import RelationsView from "@/components/automation/modals/RelationsView";
-import "@/quasar.js"
+import "../../utils/quasar.js";
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

test/jest/__tests__/demo/QBtn-demo.vue

@@ -1,24 +0,0 @@
-<template>
-<div>
-  <p class="textContent">{{ input }}</p>
-  <span>{{ counter }}</span>
-  <q-btn id="mybutton" @click="increment()"></q-btn>
-</div>
-</template>
-
-<script>
-export default {
-  name: 'QBUTTON',
-  data () {
-    return {
-      counter: 0,
-      input: 'rocket muffin'
-    }
-  },
-  methods: {
-    increment () {
-      this.counter++
-    }
-  }
-}
-</script>

test/jest/utils/quasar.js

@@ -0,0 +1,33 @@
+import * as All from "quasar";
+import Vue from "vue";
+
+const { 
+  Quasar,
+  Dialog,
+  Loading,
+  LoadingBar,
+  Meta,
+  Notify,
+  ClosePopup } = All;
+
+const components = Object.keys(All).reduce((object, key) => {
+  const val = All[key];
+  if (val && val.component && val.component.name != null) {
+    object[key] = val;
+  }
+  return object;
+}, {});
+
+Vue.use(Quasar, { 
+  components,
+  plugins: [
+    Dialog,
+    Loading,
+    LoadingBar,
+    Meta,
+    Notify
+  ],
+  directives: [
+    ClosePopup
+  ]
+});