Add new component to display the date for when page was loaded

Rija Menage · Rija Menage · commit 2b16392dc642 · 2019-12-16T17:15:34.000+08:00
the function used for returning current date must be in 'methods:' not 'computed:'

because the later is cached on reactive dependencies so getting current time is not going to work.

We need to mock the current time in the test. Jasmine's Clock class is made for that purpose.
Just make sure Jasmine.clock() is called before the component is mounted otherwise
the component will pick up the real Date class.
diff --git a/src/App.vue b/src/App.vue
@@ -8,11 +8,14 @@
         <main>
             <UserNameComponent />
         </main>
-        <footer></footer>
+        <footer>
+            <PageInfoComponent />
+        </footer>
     </div>
 </template>
 <script>
 import UserNameComponent from './components/UserNameComponent.vue'
+import PageInfoComponent from './components/PageInfoComponent.vue'
 export default {
     data: function() {
         return {
@@ -23,7 +26,8 @@ export default {
         document.title = this.title
     },
     components: {
-        UserNameComponent
+        UserNameComponent,
+        PageInfoComponent
     }
 }
 </script>
diff --git a/src/components/PageInfoComponent.vue b/src/components/PageInfoComponent.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="footer">
+        Page loaded on the wonderful day of {{ loadedDate() }}
+    </div>
+</template>
+<style>
+</style>
+<script>
+	export default {
+		methods: {
+			loadedDate: function () {
+				return new Date().toDateString()
+			}
+		}
+	}
+</script>
diff --git a/test/PageInfoComponent.spec.js b/test/PageInfoComponent.spec.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import PageInfoComponent from '../src/components/PageInfoComponent.vue'
+
+const factory = function (values = {}) {
+  return shallowMount(PageInfoComponent, {
+    data () {
+      return {
+        ...values
+      }
+    }
+  })
+}
+
+describe('Page Info Component', function () {
+	it('should show the date the page was loaded', function () {
+
+		const theFakeNow = new Date('2016-05-03')
+	    jasmine.clock().mockDate(theFakeNow) //install the fake Date class and mock the current date
+		const wrapper = factory() //make sure this come after Date's class has been overwritten
+		expect(wrapper.find('.footer').text()).toContain(new Date().toDateString())
+	})
+})
