From 9e2135d92308c0df96d7f2e195eb3ddeadd33192 Mon Sep 17 00:00:00 2001
From: Amir <amirraminfar@google.com>
Date: Thu, 13 Jun 2019 11:21:52 -0700
Subject: [PATCH] Adds more tests

---
 assets/pages/Container.spec.js | 34 +++++++++++++++++++++++++++-------
 package-lock.json              |  6 ++++++
 package.json                   |  1 +
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/assets/pages/Container.spec.js b/assets/pages/Container.spec.js
index 1ea7eb56..d5de0a5f 100644
--- a/assets/pages/Container.spec.js
+++ b/assets/pages/Container.spec.js
@@ -1,6 +1,7 @@
 import EventSource from "eventsourcemock";
 import { sources } from "eventsourcemock";
 import { shallowMount } from "@vue/test-utils";
+import MockDate from "mockdate";
 import Container from "./Container";
 
 describe("<Container />", () => {
@@ -9,6 +10,8 @@ describe("<Container />", () => {
     global.EventSource = EventSource;
   });
 
+  afterEach(() => MockDate.reset());
+
   test("is a Vue instance", async () => {
     const wrapper = shallowMount(Container);
     expect(wrapper.isVueInstance()).toBeTruthy();
@@ -37,19 +40,36 @@ describe("<Container />", () => {
   });
 
   test("should parse messages", async () => {
+    MockDate.set("6/12/2019");
     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;
+    const [message, _] = wrapper.vm.messages;
 
-    expect(other).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-13T00:55:42.459Z,
-        "key": 0,
-        "message": " \\"This is a message.\\"",
-      }
+    expect(message).toMatchInlineSnapshot(`
+            Object {
+              "date": 2019-06-13T00:55:42.459Z,
+              "dateRelative": "today at 5:55 PM",
+              "key": 0,
+              "message": " \\"This is a message.\\"",
+            }
+        `);
+  });
+
+  test("should render messages", async () => {
+    MockDate.set("6/12/2019");
+    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."` });
+
+    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
+      <ul class="events">
+        <li class="event"><span class="date">today at 5:55 PM</span> <span class="text"> "This is a message."</span></li>
+      </ul>
     `);
   });
 });
diff --git a/package-lock.json b/package-lock.json
index 058fe394..09d05c52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6989,6 +6989,12 @@
         }
       }
     },
+    "mockdate": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mockdate/-/mockdate-2.0.2.tgz",
+      "integrity": "sha1-WuDA6vj+I+AJzQH5iJtCxPY0rxI=",
+      "dev": true
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/package.json b/package.json
index affe205e..c57d1d7a 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
   "jest": "^24.8.0",
   "jest-serializer-vue": "^2.0.2",
   "lint-staged": "^8.2.0",
+  "mockdate": "^2.0.2",
   "node-fetch": "^2.6.0",
   "parcel-bundler": "^1.12.3",
   "prettier": "^1.18.2",