added fixed timezone and base date for DateFromNow stories

scm-ui/ui-components/src/DateFromNow.js

@@ -13,6 +13,15 @@ const supportedLocales = {
 
 type Props = {
   date?: string,
+  timeZone?: string,
+
+  /**
+   * baseDate is the date from which the distance is calculated,
+   * default is the current time (new Date()). This property
+   * is required to keep snapshots tests green over the time on
+   * ci server.
+   */
+  baseDate?: string,
 
   // context props
   i18n: any
@@ -34,11 +43,23 @@ class DateFromNow extends React.Component<Props> {
   };
 
   createOptions = () => {
-    const locale = this.getLocale();
+    const { timeZone } = this.props;
-    return {
+    const options: Object = {
-      locale,
+      addSuffix: true,
-      addSuffix: true
+      locate: this.getLocale(),
     };
+    if (timeZone) {
+      options.timeZone = timeZone;
+    }
+    return options;
+  };
+
+  getBaseDate = () => {
+    const { baseDate } = this.props;
+    if (baseDate) {
+      return parseISO(baseDate);
+    }
+    return new Date();
   };
 
   render() {
@@ -46,7 +67,7 @@ class DateFromNow extends React.Component<Props> {
     if (date) {
       const isoDate = parseISO(date);
       const options = this.createOptions();
-      const distance = formatDistance(isoDate, new Date(), options);
+      const distance = formatDistance(isoDate, this.getBaseDate(), options);
       const formatted = format(isoDate, "yyyy-MM-dd HH:mm:ss", options);
       return <DateElement title={formatted}>{distance}</DateElement>;
     }

scm-ui/ui-components/src/DateFromNow.stories.js

@@ -2,13 +2,24 @@ import React from "react";
 import DateFromNow from "./DateFromNow";
 import { storiesOf } from "@storybook/react";
 
+const baseProps = {
+  timeZone: "Europe/Berlin",
+  baseDate: "2019-10-12T13:56:42+02:00"
+};
+
 storiesOf("DateFromNow", module).add("Default", () => (
   <div>
     <p>
-      <DateFromNow date="2009-06-30T18:30:00+02:00" />
+      <DateFromNow date="2009-06-30T18:30:00+02:00" {...baseProps} />
     </p>
     <p>
-      <DateFromNow date="2019-06-30T18:30:00+02:00" />
+      <DateFromNow date="2019-06-30T18:30:00+02:00" {...baseProps} />
+    </p>
+    <p>
+      <DateFromNow date="2019-10-12T13:56:40+02:00" {...baseProps} />
+    </p>
+    <p>
+      <DateFromNow date="2019-10-11T13:56:40+02:00" {...baseProps} />
     </p>
   </div>
 ));