Jest tests (#35)

* Adds tests for vue

* Adds tests and fixes flush

* Update main.workflow

* Adds more tests

.babelrc

@@ -1,18 +1,9 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": [
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        "regenerator": true
-      }
-    ]
-  ]
+  "presets": [["@babel/preset-env", { "modules": false }]],
+  "plugins": [["@babel/plugin-transform-runtime", { "regenerator": true }]],
+  "env": {
+    "test": {
+      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
+    }
+  }
 }

.github/main.workflow

@@ -1,23 +1,28 @@
-workflow "Release" {
+workflow "Build, Test and Release" {
   on = "push"
   resolves = [
-    "release",
+    "Release",
   ]
 }
 
-action "test" {
+action "go test" {
   uses = "./.github/golang/"
 }
 
-action "is-tag" {
+action "npm test" {
+  uses = "actions/npm@master"
+  args = "it"
+}
+
+action "Tag" {
   uses = "actions/bin/filter@master"
-  needs = ["test"]
+  needs = ["go test", "npm test"]
   args = "tag"
 }
 
-action "release" {
+action "Release" {
   uses = "./.github/goreleaser/"
-  needs = ["is-tag"]
+  needs = ["Tag"]
   args = "release"
   secrets = ["GITHUB_TOKEN", "DOCKER_USERNAME", "DOCKER_PASSWORD"]
 }

assets/App.vue

@@ -43,7 +43,6 @@ export default {
   },
   async created() {
     await this.fetchContainerList();
-    this.title = `${this.containers.length} containers - Dozzle`;
     es = new EventSource(`${BASE_PATH}/api/events/stream`);
     es.addEventListener("containers-changed", e => setTimeout(this.fetchContainerList, 1000), false);
   },
@@ -56,6 +55,7 @@ export default {
   methods: {
     async fetchContainerList() {
       this.containers = await (await fetch(`${BASE_PATH}/api/containers.json`)).json();
+      this.title = `${this.containers.length} containers - Dozzle`;
     }
   },
   watch: {

assets/tests/__snapshots__/app.spec.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> renders correctly 1`] = `
+<div
+  class="columns is-marginless"
+>
+  <aside
+    class="column menu is-2-desktop is-3-tablet"
+  >
+    <a
+      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
+      role="button"
+    >
+      <span />
+       
+      <span />
+       
+      <span />
+    </a>
+     
+    <h1
+      class="title has-text-warning is-marginless"
+    >
+      Dozzle
+    </h1>
+     
+    <p
+      class="menu-label is-hidden-mobile"
+    >
+      Containers
+    </p>
+     
+    <ul
+      class="menu-list is-hidden-mobile"
+    >
+      <li>
+        <router-link-stub
+          active-class="is-active"
+          to="[object Object]"
+        >
+          <div
+            class="hide-overflow"
+          >
+            Test 1
+          </div>
+        </router-link-stub>
+      </li>
+      <li>
+        <router-link-stub
+          active-class="is-active"
+          to="[object Object]"
+        >
+          <div
+            class="hide-overflow"
+          >
+            Test 2
+          </div>
+        </router-link-stub>
+      </li>
+    </ul>
+  </aside>
+   
+  <div
+    class="column is-offset-2-desktop is-offset-3-tablet"
+  >
+    <router-view-stub />
+  </div>
+</div>
+`;

assets/tests/app.spec.js

@@ -0,0 +1,31 @@
+import fetchMock from "fetch-mock";
+import EventSource from "eventsourcemock";
+import { shallowMount } from "@vue/test-utils";
+import App from "../App";
+
+describe("<App />", () => {
+  const stubs = ["router-link", "router-view"];
+  beforeEach(() => {
+    global.BASE_PATH = "";
+    global.EventSource = EventSource;
+    fetchMock.getOnce("/api/containers.json", [{ id: "abc", name: "Test 1" }, { id: "xyz", name: "Test 2" }]);
+  });
+  afterEach(() => fetchMock.reset());
+
+  test("is a Vue instance", async () => {
+    const wrapper = shallowMount(App, { stubs });
+    expect(wrapper.isVueInstance()).toBeTruthy();
+  });
+
+  test("has right title", async () => {
+    const wrapper = shallowMount(App, { stubs });
+    await fetchMock.flush();
+    expect(wrapper.vm.title).toBe("2 containers - Dozzle");
+  });
+
+  test("renders correctly", async () => {
+    const wrapper = shallowMount(App, { stubs });
+    await fetchMock.flush();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

package.json

@@ -10,7 +10,8 @@
   "prebuild": "npm run clean",
   "build": "npx parcel build --no-source-maps --public-url '__BASE__' assets/index.html -d static",
   "clean": "rm -rf static/ a_main-packr.go",
-  "release": "goreleaser --rm-dist"
+  "release": "goreleaser --rm-dist",
+  "test": "jest"
  },
  "repository": {
   "type": "git",
@@ -33,13 +34,22 @@
   "@babel/core": "^7.4.5",
   "@babel/plugin-transform-runtime": "^7.4.4",
   "@vue/component-compiler-utils": "^3.0.0",
+  "@vue/test-utils": "^1.0.0-beta.29",
+  "babel-core": "^7.0.0-bridge.0",
+  "babel-jest": "^24.8.0",
   "concurrently": "^4.1.0",
+  "eventsourcemock": "^2.0.0",
+  "fetch-mock": "^7.3.3",
   "husky": "^2.4.1",
+  "jest": "^24.8.0",
+  "jest-serializer-vue": "^2.0.2",
   "lint-staged": "^8.2.0",
+  "node-fetch": "^2.6.0",
   "parcel-bundler": "^1.12.3",
   "prettier": "^1.18.2",
   "sass": "^1.21.0",
   "vue-hot-reload-api": "^2.3.3",
+  "vue-jest": "^3.0.4",
   "vue-template-compiler": "^2.6.10"
  },
  "husky": {
@@ -59,5 +69,19 @@
  ],
  "alias": {
   "vue": "./node_modules/vue/dist/vue.esm.js"
+ },
+ "jest": {
+  "moduleFileExtensions": [
+   "js",
+   "json",
+   "vue"
+  ],
+  "snapshotSerializers": [
+   "jest-serializer-vue"
+  ],
+  "transform": {
+   ".*\\.vue$": "vue-jest",
+   ".+\\.js$": "babel-jest"
+  }
  }
 }