Merge pull request #2966 from OpenNeuroOrg/tests/date-fixes

Test fixes for date instability
OpenNeuroOrg · Jan 4, 2024 · c08d472 · c08d472
2 parents 02c41aa + ac76341
commit c08d472
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 39 deletions.
diff --git a/.../openneuro-app/src/scripts/components/__tests__/__snapshots__/date-distance.spec.tsx.snap b/.../openneuro-app/src/scripts/components/__tests__/__snapshots__/date-distance.spec.tsx.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DataTable component > renders date distance components 1`] = `
+<DocumentFragment>
+  2022-02-04 - about 2 years ago
+</DocumentFragment>
+`;
diff --git a/packages/openneuro-app/src/scripts/components/__tests__/date-distance.spec.tsx b/packages/openneuro-app/src/scripts/components/__tests__/date-distance.spec.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+import { vi } from "vitest"
+import { render } from "@testing-library/react"
+import { DateDistance } from "../date-distance"
+
+describe("DataTable component", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2024, 1, 4))
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+  it("renders date distance components", () => {
+    const date = new Date(2022, 1, 4).toISOString()
+    const { asFragment } = render(<DateDistance date={date} />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})
diff --git a/packages/openneuro-app/src/scripts/components/date-distance.tsx b/packages/openneuro-app/src/scripts/components/date-distance.tsx
@@ -0,0 +1,10 @@
+import React from "react"
+import formatDistanceToNow from "date-fns/formatDistanceToNow"
+import parseISO from "date-fns/parseISO"
+import { formatDate } from "../utils/date"
+
+export function DateDistance({ date }) {
+  const formattedDate = formatDate(date)
+  const distance = formatDistanceToNow(parseISO(date))
+  return <>{formattedDate} - {distance} ago</>
+}
diff --git a/packages/openneuro-app/src/scripts/dataset/__tests__/snapshot-container.spec.tsx b/packages/openneuro-app/src/scripts/dataset/__tests__/snapshot-container.spec.tsx
@@ -15,6 +15,13 @@ const defProps = {
 }
 
 describe("SnapshotContainer component", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date("2023-12-01"))
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
   it("renders successfully", () => {
     const { asFragment } = render(<SnapshotContainer {...defProps} />, {
       wrapper: MockAppWrapper,

diff --git a/packages/openneuro-app/src/scripts/dataset/components/VersionList.tsx b/packages/openneuro-app/src/scripts/dataset/components/VersionList.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { Link } from "react-router-dom"
 import { Dropdown } from "@openneuro/components/dropdown"
+import { formatDate } from "../../utils/date"
 
 export interface VersionListProps {
   items: {
@@ -19,9 +20,6 @@ export interface VersionListProps {
   dateModified: string
   datasetId?: string
 }
-const formatDate = (dateObject) =>
-  new Date(dateObject).toISOString().split("T")[0]
-
 export const VersionList = ({
   items,
   selected,
@@ -41,7 +39,8 @@ export const VersionList = ({
     <>
       <div className="active-version">
         <div>{selected === "draft" ? "Draft" : selected}</div>
-        {selected === "draft" ? "Updated" : "Created"}: {dateModified}
+        {selected === "draft" ? "Updated" : "Created"}:{" "}
+        {formatDate(dateModified)}
       </div>
       {items.length
         ? (
@@ -68,7 +67,7 @@ export const VersionList = ({
                         {selected === "draft" ? "*" : ""}
                       </span>
                     </span>
-                    {dateModified}
+                    {formatDate(dateModified)}
                   </Link>
                 </li>
                 {items.map((item, index) => (

diff --git a/packages/openneuro-app/src/scripts/dataset/draft-container.tsx b/packages/openneuro-app/src/scripts/dataset/draft-container.tsx
@@ -3,8 +3,6 @@ import Markdown from "markdown-to-jsx"
 import Helmet from "react-helmet"
 import { Navigate, useLocation } from "react-router-dom"
 import pluralize from "pluralize"
-import formatDistanceToNow from "date-fns/formatDistanceToNow"
-import parseISO from "date-fns/parseISO"
 import { pageTitle } from "../resources/strings.js"
 
 import { DatasetPageTabContainer } from "./routes/styles/dataset-page-tab-container"
@@ -37,15 +35,13 @@ import { DOILink } from "./fragments/doi-link"
 
 import { TabRoutesDraft } from "./routes/tab-routes-draft"
 import { FollowToggles } from "./common/follow-toggles"
+import { DateDistance } from "../components/date-distance"
 
 export interface DraftContainerProps {
   dataset
   tag?: string
 }
 
-const formatDate = (dateObject) =>
-  new Date(dateObject).toISOString().split("T")[0]
-
 // Helper function for getting version from URL
 const snapshotVersion = (location) => {
   const matches = location.pathname.match(/versions\/(.*?)(\/|$)/)
@@ -65,13 +61,6 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
     ? summary.sessions.length
     : 1
 
-  const dateAdded = formatDate(dataset.created)
-  const dateAddedDifference = formatDistanceToNow(parseISO(dataset.created))
-  const dateModified = formatDate(dataset.draft.modified)
-  const dateUpdatedDifference = formatDistanceToNow(
-    parseISO(dataset.draft.modified),
-  )
-
   const [cookies] = useCookies()
   const profile = getUnexpiredProfile(cookies)
   const isAdmin = profile?.admin
@@ -213,7 +202,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                       items={dataset.snapshots}
                       className="version-dropdown"
                       activeDataset={activeDataset}
-                      dateModified={dateModified}
+                      dateModified={dataset.draft.modified}
                       selected={selectedVersion}
                       setSelected={setSelectedVersion}
                     />
@@ -278,8 +267,8 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                 heading="Uploaded by"
                 item={
                   <>
-                    <Username user={dataset.uploader} /> on {dateAdded} -{" "}
-                    {dateAddedDifference} ago
+                    <Username user={dataset.uploader} /> on{" "}
+                    <DateDistance date={dataset.created} />
                   </>
                 }
               />
@@ -289,7 +278,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                     heading="Last Updated"
                     item={
                       <>
-                        {dateModified} - {dateUpdatedDifference} ago
+                        <DateDistance date={dataset.draft.modified} />
                       </>
                     }
                   />

diff --git a/packages/openneuro-app/src/scripts/dataset/snapshot-container.tsx b/packages/openneuro-app/src/scripts/dataset/snapshot-container.tsx
@@ -5,8 +5,6 @@ import { DatasetPageTabContainer } from "./routes/styles/dataset-page-tab-contai
 import DatasetQueryContext from "../datalad/dataset/dataset-query-context.js"
 import { Link, useLocation, useParams } from "react-router-dom"
 import pluralize from "pluralize"
-import formatDistanceToNow from "date-fns/formatDistanceToNow"
-import parseISO from "date-fns/parseISO"
 import { pageTitle } from "../resources/strings.js"
 import Validation from "../validation/validation.jsx"
 import { config } from "../config"
@@ -41,9 +39,7 @@ import { DOILink } from "./fragments/doi-link"
 import { TabRoutesSnapshot } from "./routes/tab-routes-snapshot"
 import schemaGenerator from "../utils/json-ld.js"
 import { FollowToggles } from "./common/follow-toggles"
-
-const formatDate = (dateObject) =>
-  new Date(dateObject).toISOString().split("T")[0]
+import { DateDistance } from "../components/date-distance"
 
 // Helper function for getting version from URL
 const snapshotVersion = (location) => {
@@ -75,11 +71,6 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
     ? summary.sessions.length
     : 1
 
-  const dateAdded = formatDate(dataset.created)
-  const dateAddedDifference = formatDistanceToNow(parseISO(dataset.created))
-  const dateModified = formatDate(snapshot.created)
-  const dateUpdatedDifference = formatDistanceToNow(parseISO(snapshot.created))
-
   const [cookies] = useCookies()
   const profile = getUnexpiredProfile(cookies)
   const isAdmin = profile?.admin
@@ -209,7 +200,7 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                       items={dataset.snapshots}
                       className="version-dropdown"
                       activeDataset={activeDataset}
-                      dateModified={dateModified}
+                      dateModified={snapshot.created}
                       selected={selectedVersion}
                       setSelected={setSelectedVersion}
                     />
@@ -275,20 +266,16 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                 heading="Uploaded by"
                 item={
                   <>
-                    <Username user={dataset.uploader} /> on {dateAdded} -{" "}
-                    {dateAddedDifference} ago
+                    <Username user={dataset.uploader} /> on{" "}
+                    <DateDistance date={dataset.created} />
                   </>
                 }
               />
 
               {dataset.snapshots.length && (
                 <MetaDataBlock
                   heading="Last Updated"
-                  item={
-                    <>
-                      {dateModified} - {dateUpdatedDifference} ago
-                    </>
-                  }
+                  item={<DateDistance date={snapshot.created} />}
                 />
               )}
               <MetaDataBlock heading="Sessions" item={numSessions} />