(fix) Showing test run date on duration graph tooltip in local timezo…

…ne (#194)
craigatk · Oct 2, 2020 · 8137fe6 · 8137fe6
1 parent 962ef12
commit 8137fe6
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 5 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -54,6 +54,7 @@
     "axios-case-converter": "0.3.0",
     "material-table": "1.55.0",
     "moment": "2.24.0",
+    "moment-timezone": "0.5.31",
     "pretty-bytes": "5.3.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",

diff --git a/ui/projektor.jest.json b/ui/projektor.jest.json
@@ -3,7 +3,6 @@
   "results": [
     "jestResults/*.xml"
   ],
-  "exitWithFailure": true,
   "projectName": "ui-jest",
   "coverage": [
     "coverage/*.xml"

diff --git a/ui/src/Repository/Timeline/RepositoryTimelineGraph.tsx b/ui/src/Repository/Timeline/RepositoryTimelineGraph.tsx
@@ -26,6 +26,7 @@ const RepositoryTimelineGraph = ({
 }: RepositoryTimelineGraphProps) => {
   const data = timeline.timelineEntries.map((entry) => ({
     date: moment.utc(entry.createdTimestamp).format("YYYY-MM-DD hh:mm:ss"),
+    createdTimestamp: entry.createdTimestamp,
     publicId: entry.publicId,
     duration: entry.cumulativeDuration,
     totalTestCount: entry.totalTestCount,

diff --git a/ui/src/Repository/Timeline/RepositoryTimelineGraphTooltip.tsx b/ui/src/Repository/Timeline/RepositoryTimelineGraphTooltip.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { makeStyles } from "@material-ui/styles";
-import moment from "moment";
+import moment from "moment-timezone";
 
 const useStyles = makeStyles(() => ({
   box: {
@@ -22,8 +22,11 @@ const RepositoryTimelineGraphTooltip = (props) => {
   const classes = useStyles({});
 
   if (props.payload && props.payload.length >= 1) {
-    const { date, duration, totalTestCount } = props.payload[0].payload;
-    const dateMoment = moment(date);
+    const {
+      createdTimestamp,
+      duration,
+      totalTestCount,
+    } = props.payload[0].payload;
 
     return (
       <div className={classes.box} data-testid="timeline-graph-tooltip">
@@ -40,7 +43,7 @@ const RepositoryTimelineGraphTooltip = (props) => {
         <div className={classes.line}>
           <span className={classes.label}>Run date</span>
           <span data-testid="timeline-tooltip-run-date">
-            {dateMoment.format("MMM Do YYYY h:mm a")}
+            {moment(createdTimestamp).format("MMM Do YYYY, h:mm a")}
           </span>
         </div>
       </div>

diff --git a/ui/src/Repository/Timeline/__tests__/RepositoryTimelineGraphTooltip.spec.tsx b/ui/src/Repository/Timeline/__tests__/RepositoryTimelineGraphTooltip.spec.tsx
@@ -0,0 +1,35 @@
+import "@testing-library/jest-dom/extend-expect";
+import React from "react";
+import { render } from "@testing-library/react";
+import moment from "moment-timezone";
+import RepositoryTimelineGraphTooltip from "../RepositoryTimelineGraphTooltip";
+
+describe("RepositoryTimelineGraphTooltip", () => {
+  beforeEach(() => {
+    // Set the default timezone so it uses the same timezone when
+    // running locally and when running in CI.
+    moment.tz.setDefault("America/Chicago");
+  });
+
+  afterEach(() => {
+    moment.tz.setDefault();
+  });
+
+  it("should display run date in local timezone", () => {
+    const createdTimestamp = moment.utc("2020-10-02T11:03:04.580Z").toDate();
+    const duration = 170;
+    const totalTestCount = 15;
+
+    const props = {
+      payload: [{ payload: { createdTimestamp, duration, totalTestCount } }],
+    };
+
+    const { getByTestId } = render(
+      <RepositoryTimelineGraphTooltip {...props} />
+    );
+
+    expect(getByTestId("timeline-tooltip-run-date")).toHaveTextContent(
+      "Oct 2nd 2020, 6:03 am"
+    );
+  });
+});
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -5887,6 +5887,13 @@ mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+[email protected]:
+  version "0.5.31"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.31.tgz#9c40d8c5026f0c7ab46eda3d63e49c155148de05"
+  integrity sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==
+  dependencies:
+    moment ">= 2.9.0"
+
 [email protected]:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
@@ -5897,6 +5904,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
   integrity sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==
 
+"moment@>= 2.9.0":
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.0.tgz#fcbef955844d91deb55438613ddcec56e86a3425"
+  integrity sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"