fix: wrong time display at 12 am/pm (#10)

* fix: wrong time display at 12 am/pm

* test: add tests for 12am/pm

Author: hohaicongthuan

src/Clock.spec.js

@@ -159,4 +159,18 @@ describe("Clock.vue", () => {
     expect(wrapper.find(".clock__hour")[0].text()).toContain("09");
     expect(wrapper.find(".clock__ampm")[0].text()).toContain("pm");
   });
+
+  it("displays 12pm (noon/midday) in twelveHour mode", () => {
+    clock.tick(12 * hours);
+    const wrapper = mount(Clock, { propsData: { twelveHour: true } });
+    expect(wrapper.find(".clock__hour")[0].text()).toContain("12");
+    expect(wrapper.find(".clock__ampm")[0].text()).toContain("pm");
+  });
+
+  it("displays 12am (midnight) in twelveHour mode", () => {
+    clock.tick(0 * hours);
+    const wrapper = mount(Clock, { propsData: { twelveHour: true } });
+    expect(wrapper.find(".clock__hour")[0].text()).toContain("12");
+    expect(wrapper.find(".clock__ampm")[0].text()).toContain("am");
+  });
 });

src/Clock.vue

@@ -40,13 +40,13 @@ const getMinutes = () => padZero(getDate().getMinutes());
 
 const getHour = twelveHour => {
   let hours = getDate().getHours();
-  if (twelveHour && hours > 12) {
-    hours = hours - 12;
+  if (twelveHour) {
+    hours = hours % 12 || 12;
   }
   return padZero(hours);
 };
 
-const getAmPm = () => (getDate().getHours() > 12 ? "pm" : "am");
+const getAmPm = () => (getDate().getHours() >= 12 ? "pm" : "am");
 
 export default {
   name: "vue-digital-clock",