Adds more tests and changes files (#36)

assets/App.vue

@@ -31,14 +31,15 @@ export default {
   name: "App",
   data() {
     return {
-      title: "Dozzle",
+      title: "",
       containers: [],
       showNav: false
     };
   },
   metaInfo() {
     return {
-      title: this.title
+      title: this.title,
+      titleTemplate: "%s - Dozzle"
     };
   },
   async created() {
@@ -55,7 +56,7 @@ export default {
   methods: {
     async fetchContainerList() {
       this.containers = await (await fetch(`${BASE_PATH}/api/containers.json`)).json();
-      this.title = `${this.containers.length} containers - Dozzle`;
+      this.title = `${this.containers.length} containers`;
     }
   },
   watch: {

assets/__snapshots__/app.spec.js.snap

@@ -34,28 +34,22 @@ exports[`<App /> renders correctly 1`] = `
       class="menu-list is-hidden-mobile"
     >
       <li>
-        <router-link-stub
-          active-class="is-active"
-          to="[object Object]"
-        >
+        <a>
           <div
             class="hide-overflow"
           >
             Test 1
           </div>
-        </router-link-stub>
+        </a>
       </li>
       <li>
-        <router-link-stub
-          active-class="is-active"
-          to="[object Object]"
-        >
+        <a>
           <div
             class="hide-overflow"
           >
             Test 2
           </div>
-        </router-link-stub>
+        </a>
       </li>
     </ul>
   </aside>

assets/app.spec.js

@@ -1,10 +1,10 @@
 import fetchMock from "fetch-mock";
 import EventSource from "eventsourcemock";
-import { shallowMount } from "@vue/test-utils";
-import App from "../App";
+import { shallowMount, RouterLinkStub } from "@vue/test-utils";
+import App from "./App";
 
 describe("<App />", () => {
-  const stubs = ["router-link", "router-view"];
+  const stubs = { RouterLink: RouterLinkStub, "router-view": true };
   beforeEach(() => {
     global.BASE_PATH = "";
     global.EventSource = EventSource;
@@ -20,7 +20,7 @@ describe("<App />", () => {
   test("has right title", async () => {
     const wrapper = shallowMount(App, { stubs });
     await fetchMock.flush();
-    expect(wrapper.vm.title).toBe("2 containers - Dozzle");
+    expect(wrapper.vm.title).toContain("2 containers");
   });
 
   test("renders correctly", async () => {
@@ -28,4 +28,18 @@ describe("<App />", () => {
     await fetchMock.flush();
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  test("renders router-link correctly", async () => {
+    const wrapper = shallowMount(App, { stubs });
+    await fetchMock.flush();
+    expect(wrapper.find(RouterLinkStub).props().to).toMatchInlineSnapshot(`
+      Object {
+        "name": "container",
+        "params": Object {
+          "id": "abc",
+          "name": "Test 1",
+        },
+      }
+    `);
+  });
 });

assets/pages/Container.spec.js

@@ -0,0 +1,55 @@
+import EventSource from "eventsourcemock";
+import { sources } from "eventsourcemock";
+import { shallowMount } from "@vue/test-utils";
+import Container from "./Container";
+
+describe("<Container />", () => {
+  beforeEach(() => {
+    global.BASE_PATH = "";
+    global.EventSource = EventSource;
+  });
+
+  test("is a Vue instance", async () => {
+    const wrapper = shallowMount(Container);
+    expect(wrapper.isVueInstance()).toBeTruthy();
+  });
+
+  test("renders correctly", async () => {
+    const wrapper = shallowMount(Container);
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test("should connect to EventSource", async () => {
+    shallowMount(Container, {
+      propsData: { id: "abc" }
+    });
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
+  });
+
+  test("should close EventSource", async () => {
+    const wrapper = shallowMount(Container, {
+      propsData: { id: "abc" }
+    });
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    wrapper.destroy();
+    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
+  });
+
+  test("should parse messages", async () => {
+    const wrapper = shallowMount(Container, {
+      propsData: { id: "abc" }
+    });
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-13T00:55:42.459034602Z "This is a message."` });
+    const [{ dateRelative, ...other }, _] = wrapper.vm.messages;
+
+    expect(other).toMatchInlineSnapshot(`
+      Object {
+        "date": 2019-06-13T00:55:42.459Z,
+        "key": 0,
+        "message": " \\"This is a message.\\"",
+      }
+    `);
+  });
+});

assets/pages/Index.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from "@vue/test-utils";
+import Index from "./Index";
+
+describe("<Index />", () => {
+  test("is a Vue instance", () => {
+    const wrapper = shallowMount(Index);
+    expect(wrapper.isVueInstance()).toBeTruthy();
+  });
+
+  test("renders correctly", () => {
+    const wrapper = shallowMount(Index);
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

assets/pages/__snapshots__/Container.spec.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Container /> renders correctly 1`] = `
+<div
+  class="is-fullheight"
+>
+  <div
+    class="search columns is-gapless is-vcentered"
+    style="display: none;"
+  >
+    <div
+      class="column"
+    >
+      <p
+        class="control has-icons-left"
+      >
+        <input
+          class="input"
+          placeholder="Filter"
+          type="text"
+        />
+         
+        <span
+          class="icon is-small is-left"
+        >
+          <i
+            class="fas fa-search"
+          />
+        </span>
+      </p>
+    </div>
+     
+    <div
+      class="column is-1 has-text-centered"
+    >
+      <button
+        class="delete is-medium"
+      />
+    </div>
+  </div>
+   
+  <ul
+    class="events"
+  />
+   
+  <scrollbar-notification-stub
+    messages=""
+  />
+</div>
+`;

assets/pages/__snapshots__/Index.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Index /> renders correctly 1`] = `
+<div
+  class="hero is-fullheight is-dark"
+>
+  <div
+    class="hero-body"
+  >
+    <div
+      class="container has-text-centered"
+    >
+      <h1
+        class="title"
+      >
+        Please choose a container from the list to view the logs
+      </h1>
+    </div>
+  </div>
+</div>
+`;

package.json

@@ -76,6 +76,18 @@
    "json",
    "vue"
   ],
+  "coveragePathIgnorePatterns": [
+   "node_modules"
+  ],
+  "testPathIgnorePatterns": [
+   "node_modules"
+  ],
+  "transformIgnorePatterns": [
+   "node_modules"
+  ],
+  "watchPathIgnorePatterns": [
+   "<rootDir>/node_modules/"
+  ],
   "snapshotSerializers": [
    "jest-serializer-vue"
   ],