Display Date object using toString instead of toISOString (firefox-devtools#8125)

* change isoString date to localeString

* Make date format use toString() instead

* change test timezone to EA time

* fix linting suggestions

* Fix code formating

* fix failing lint

* throw if date is invalid

* modify tests for invalid date

* fix lint issues

* run yarn lint to check failing lints

* add comment

* Update date-time.js

Author: GettyOrawo

package.json

@@ -29,7 +29,7 @@
     "mochir": "yarn mochi -- --repeat 10 --",
     "mochih": "yarn mochi -- --headless --",
     "mochici": "mochii --mc ./firefox --ci --default-test-path devtools/client/debugger/new --headless --",
-    "test": "jest",
+    "test": "TZ=Africa/Nairobi jest",
     "test:watch": "jest --watch",
     "test:coverage": "yarn test --coverage",
     "test:all": "yarn test; yarn lint; yarn flow",

packages/devtools-reps/package.json

@@ -9,7 +9,7 @@
     "firefox": "./node_modules/.bin/start-firefox --start --location https://firefox-devtools.github.io/debugger-examples/",
     "chrome": "./node_modules/.bin/start-chrome",
     "license-check": "devtools-license-check",
-    "test": "jest --projects jest.config.js"
+    "test": "TZ=Africa/Nairobi jest --projects jest.config.js"
   },
   "author": "",
   "license": "MPL-2.0",

packages/devtools-reps/src/reps/date-time.js

@@ -22,16 +22,18 @@ function DateTime(props) {
   const grip = props.object;
   let date;
   try {
+    const dateObject = new Date(grip.preview.timestamp);
+    // Calling `toISOString` will throw if the date is invalid,
+    // so we can render an `Invalid Date` element.
+    dateObject.toISOString();
+
     date = span(
       {
         "data-link-actor-id": grip.actor,
         className: "objectBox"
       },
       getTitle(grip),
-      span(
-        { className: "Date" },
-        new Date(grip.preview.timestamp).toISOString()
-      )
+      span({ className: "Date" }, dateObject.toString())
     );
   } catch (e) {
     date = span({ className: "objectBox" }, "Invalid Date");

packages/devtools-reps/src/reps/tests/date-time.js

@@ -26,7 +26,9 @@ describe("test DateTime", () => {
       })
     );
 
-    expect(renderedComponent.text()).toEqual("Date 2016-03-30T21:17:24.859Z");
+    expect(renderedComponent.text()).toEqual(
+      "Date Thu Mar 31 2016 00:17:24 GMT+0300 (East Africa Time)"
+    );
     expectActorAttribute(renderedComponent, stub.actor);
   });
 });