fixed storyshot test which renders a DateFromNow without baseDate

scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx

@@ -31,16 +31,15 @@ import RepositoryEntry from "./RepositoryEntry";
 import { Binder, BinderContext } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
 import Image from "../Image";
-import classNames from "classnames";
 import Icon from "../Icon";
 
+const baseDate = "2020-03-26T12:13:42+02:00";
+
 const Spacing = styled.div`
   margin: 2rem;
 `;
 
-const Container: FC = ({children}) => (
+const Container: FC = ({ children }) => <Spacing className="box box-link-shadow">{children}</Spacing>;
-  <Spacing className="box box-link-shadow">{children}</Spacing>
-);
 
 const bindAvatar = (binder: Binder, avatar: string) => {
   binder.bind("repos.repository-avatar", () => {
@@ -63,18 +62,21 @@ const bindQuickLink = (binder: Binder, extension: ReactNode) => {
 const withBinder = (binder: Binder, repository: Repository) => {
   return (
     <BinderContext.Provider value={binder}>
-      <RepositoryEntry repository={repository}/>
+      <RepositoryEntry repository={repository} baseDate={baseDate} />
     </BinderContext.Provider>
   );
 };
 
-const QuickLink = <a className="level-item"><Icon className="fa-lg" name="fas fa-code-branch fa-rotate-180 fa-fw"
+const QuickLink = (
-                                                  color="inherit"/></a>;
+  <a className="level-item">
+    <Icon className="fa-lg" name="fas fa-code-branch fa-rotate-180 fa-fw" color="inherit" />
+  </a>
+);
 
 storiesOf("RepositoryEntry", module)
   .addDecorator(storyFn => <Container>{storyFn()}</Container>)
   .add("Default", () => {
-    return <RepositoryEntry repository={repository}/>;
+    return <RepositoryEntry repository={repository} baseDate={baseDate} />;
   })
   .add("Avatar EP", () => {
     const binder = new Binder("avatar");

scm-ui/ui-components/src/repos/RepositoryEntry.tsx

@@ -28,8 +28,13 @@ import RepositoryEntryLink from "./RepositoryEntryLink";
 import RepositoryAvatar from "./RepositoryAvatar";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
+type DateProp = Date | string;
+
 type Props = {
   repository: Repository;
+  // @VisibleForTesting
+  // the baseDate is only to avoid failing snapshot tests
+  baseDate?: DateProp;
 };
 
 class RepositoryEntry extends React.Component<Props> {
@@ -77,10 +82,10 @@ class RepositoryEntry extends React.Component<Props> {
     );
   };
 
-  createFooterRight = (repository: Repository) => {
+  createFooterRight = (repository: Repository, baseDate?: DateProp) => {
     return (
       <small className="level-item">
-        <DateFromNow date={repository.creationDate} />
+        <DateFromNow baseDate={baseDate} date={repository.creationDate} />
       </small>
     );
   };
@@ -95,10 +100,10 @@ class RepositoryEntry extends React.Component<Props> {
   };
 
   render() {
-    const { repository } = this.props;
+    const { repository, baseDate } = this.props;
     const repositoryLink = this.createLink(repository);
     const footerLeft = this.createFooterLeft(repository, repositoryLink);
-    const footerRight = this.createFooterRight(repository);
+    const footerRight = this.createFooterRight(repository, baseDate);
     const title = this.createTitle();
     return (
       <CardColumn