Merge pull request #541 from IQSS/533-use-time-tag-with-datetime-and-…

…remove-hardcoded-format Add time tag to the date and change some date format to YYYY-MM-DD
IQSS · Nov 18, 2024 · 88d218a · 88d218a
2 parents 53a6a3f + b5c62f3
commit 88d218a
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 111 deletions.
diff --git a/...ns/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx b/...ns/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx
@@ -1,15 +1,17 @@
-import { FileDate as FileDateModel } from '../../../../../../../files/domain/models/FileMetadata'
 import { useTranslation } from 'react-i18next'
+import { FileDate as FileDateModel } from '../../../../../../../files/domain/models/FileMetadata'
 import { DateHelper } from '../../../../../../../shared/helpers/DateHelper'
 
-// TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
-
 export function FileDate({ date }: { date: FileDateModel }) {
   const { t } = useTranslation('files')
+
   return (
     <div>
       <span>
-        {t(`table.date.${date.type}`)} {DateHelper.toDisplayFormat(date.date)}
+        {t(`table.date.${date.type}`)}{' '}
+        <time dateTime={DateHelper.toISO8601Format(date.date)}>
+          {DateHelper.toDisplayFormat(date.date)}
+        </time>
       </span>
     </div>
   )

diff --git a/src/sections/file/file-embargo/FileEmbargoDate.tsx b/src/sections/file/file-embargo/FileEmbargoDate.tsx
@@ -12,23 +12,25 @@ interface FileEmbargoDateProps {
 export function FileEmbargoDate({
   embargo,
   datasetPublishingStatus,
-  format = 'short'
+  format = 'YYYY-MM-DD'
 }: FileEmbargoDateProps) {
   const { t } = useTranslation('files')
 
   if (!embargo) {
     return <></>
   }
 
-  // TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
-
   return (
     <div>
       <span>
         {t(embargoTypeOfDate(embargo.isActive, datasetPublishingStatus))}{' '}
-        {format === 'YYYY-MM-DD'
-          ? DateHelper.toDisplayFormatYYYYMMDD(embargo.dateAvailable)
-          : DateHelper.toDisplayFormat(embargo.dateAvailable)}
+        <time
+          dateTime={DateHelper.toISO8601Format(embargo.dateAvailable)}
+          data-testid="embargo-date">
+          {format === 'YYYY-MM-DD'
+            ? DateHelper.toISO8601Format(embargo.dateAvailable)
+            : DateHelper.toDisplayFormat(embargo.dateAvailable)}
+        </time>
       </span>
     </div>
   )

diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx
@@ -1,14 +1,14 @@
+import { Trans, useTranslation } from 'react-i18next'
 import { Accordion, Col, Row } from '@iqss/dataverse-design-system'
 import { FilePreview } from '../file-preview/FilePreview'
 import { FileLabels } from '../file-labels/FileLabels'
-import styles from './FileMetadata.module.scss'
 import { DateHelper } from '../../../shared/helpers/DateHelper'
 import { FileEmbargoDate } from '../file-embargo/FileEmbargoDate'
 import { BASE_URL } from '../../../config'
-import { Trans, useTranslation } from 'react-i18next'
 import { FileMetadata as FileMetadataModel } from '../../../files/domain/models/FileMetadata'
 import { FilePermissions } from '../../../files/domain/models/FilePermissions'
 import { DatasetPublishingStatus } from '../../../dataset/domain/models/Dataset'
+import styles from './FileMetadata.module.scss'
 
 interface FileMetadataProps {
   name: string
@@ -24,6 +24,7 @@ export function FileMetadata({
   datasetPublishingStatus
 }: FileMetadataProps) {
   const { t } = useTranslation('file')
+
   return (
     <Accordion defaultActiveKey="0">
       <Accordion.Item eventKey="0">
@@ -97,24 +98,29 @@ export function FileMetadata({
             <Col sm={3}>
               <strong>{t('metadata.fields.depositDate')}</strong>
             </Col>
-            {/* TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time */}
-            <Col>{DateHelper.toDisplayFormatYYYYMMDD(metadata.depositDate)}</Col>
+            <Col>
+              <time dateTime={DateHelper.toISO8601Format(metadata.depositDate)}>
+                {DateHelper.toISO8601Format(metadata.depositDate)}
+              </time>
+            </Col>
           </Row>
           {metadata.publicationDate && (
             <Row className={styles.row}>
               <Col sm={3}>
                 <strong>{t('metadata.fields.metadataReleaseDate')}</strong>
               </Col>
-              {/* TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time */}
-              <Col>{DateHelper.toDisplayFormatYYYYMMDD(metadata.publicationDate)}</Col>
+              <Col>
+                <time dateTime={DateHelper.toISO8601Format(metadata.publicationDate)}>
+                  {DateHelper.toISO8601Format(metadata.publicationDate)}
+                </time>
+              </Col>
             </Row>
           )}
           {(metadata.publicationDate || metadata.embargo) && (
             <Row className={styles.row}>
               <Col sm={3}>
                 <strong>{t('metadata.fields.publicationDate')}</strong>
               </Col>
-              {/* TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time */}
               <Col>
                 {metadata.embargo ? (
                   <FileEmbargoDate
@@ -123,7 +129,11 @@ export function FileMetadata({
                     format="YYYY-MM-DD"
                   />
                 ) : (
-                  DateHelper.toDisplayFormatYYYYMMDD(metadata.publicationDate)
+                  metadata.publicationDate && (
+                    <time dateTime={DateHelper.toISO8601Format(metadata.publicationDate)}>
+                      {DateHelper.toISO8601Format(metadata.publicationDate)}
+                    </time>
+                  )
                 )}
               </Col>
             </Row>

diff --git a/...aset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileDate.spec.tsx b/...aset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileDate.spec.tsx
@@ -8,6 +8,7 @@ describe('FileDate', () => {
     const date = { type: FileDateType.PUBLISHED, date: fileDate }
     cy.customMount(<FileDate date={date} />)
     const dateString = DateHelper.toDisplayFormat(fileDate)
-    cy.findByText(`Published ` + dateString).should('exist')
+    cy.findByText(`Published`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 })
diff --git a/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx b/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx
@@ -1,22 +1,17 @@
 import { FileEmbargoDate } from '../../../../../src/sections/file/file-embargo/FileEmbargoDate'
 import { DatasetPublishingStatus } from '../../../../../src/dataset/domain/models/Dataset'
 import { FileEmbargoMother } from '../../../files/domain/models/FileMetadataMother'
+import { DateHelper } from '../../../../../src/shared/helpers/DateHelper'
 
 describe('FileEmbargoDate', () => {
   it('renders the embargo date when embargo exists', () => {
     const embargoDate = new Date('2123-09-18')
     const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = DatasetPublishingStatus.RELEASED
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      }
-    )
-    cy.findByText(`Embargoed until ` + dateString).should('exist')
+    const dateString = DateHelper.toISO8601Format(embargoDate)
+    cy.findByText(`Embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 
   it('renders the until embargo date when embargo is not active and the file is not released', () => {
@@ -25,15 +20,10 @@ describe('FileEmbargoDate', () => {
     const status = DatasetPublishingStatus.RELEASED
 
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      }
-    )
-    cy.findByText(`Was embargoed until ` + dateString).should('exist')
+    const dateString = DateHelper.toISO8601Format(embargoDate)
+
+    cy.findByText(`Was embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 
   it('renders the draft until embargo date when embargo is active and the file is not released', () => {
@@ -42,23 +32,17 @@ describe('FileEmbargoDate', () => {
     const status = DatasetPublishingStatus.DRAFT
 
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      }
-    )
-    cy.findByText(`Draft: will be embargoed until ` + dateString).should('exist')
+    const dateString = DateHelper.toISO8601Format(embargoDate)
+
+    cy.findByText(`Draft: will be embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 
   it('renders an empty fragment when embargo is undefined', () => {
     const embargo = undefined
     const status = DatasetPublishingStatus.RELEASED
 
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-
     cy.findByText(/Draft: will be embargoed until/).should('not.exist')
     cy.findByText(/Embargoed until/).should('not.exist')
     cy.findByText(/Was embargoed until/).should('not.exist')
@@ -68,17 +52,12 @@ describe('FileEmbargoDate', () => {
     const embargoDate = new Date('2123-09-18')
     const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = DatasetPublishingStatus.RELEASED
+
     cy.customMount(
       <FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} format="YYYY-MM-DD" />
     )
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-      }
-    )
-    cy.findByText(`Embargoed until ` + dateString).should('exist')
+    const dateString = DateHelper.toISO8601Format(embargoDate)
+    cy.findByText(`Embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 })
diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx
@@ -214,9 +214,8 @@ describe('FileMetadata', () => {
         datasetPublishingStatus={file.datasetVersion.publishingStatus}
       />
     )
-
     cy.findByText('Deposit Date').should('exist')
-    cy.findByText(DateHelper.toDisplayFormatYYYYMMDD(file.metadata.depositDate)).should('exist')
+    cy.get('time').contains(DateHelper.toISO8601Format(file.metadata.depositDate)).should('exist')
   })
 
   it('renders the file Metadata Release Date', () => {
@@ -231,9 +230,11 @@ describe('FileMetadata', () => {
     )
 
     cy.findByText('Metadata Release Date').should('exist')
-    cy.findAllByText(
-      DateHelper.toDisplayFormatYYYYMMDD(metadataWithPublicationDate.publicationDate)
-    ).should('exist')
+    if (metadataWithPublicationDate.publicationDate) {
+      cy.findAllByText(
+        DateHelper.toISO8601Format(metadataWithPublicationDate.publicationDate)
+      ).should('exist')
+    }
   })
 
   it('does not render the file Metadata Release Date if the publication date does not exist', () => {
@@ -262,9 +263,11 @@ describe('FileMetadata', () => {
     )
 
     cy.findByText('Publication Date').should('exist')
-    cy.findAllByText(
-      DateHelper.toDisplayFormatYYYYMMDD(metadataWithPublicationDate.publicationDate)
-    ).should('exist')
+    if (metadataWithPublicationDate.publicationDate) {
+      cy.findAllByText(
+        DateHelper.toISO8601Format(metadataWithPublicationDate.publicationDate)
+      ).should('exist')
+    }
   })
 
   it('renders the file Publication Date with embargo', () => {
@@ -280,11 +283,11 @@ describe('FileMetadata', () => {
     )
 
     cy.findByText('Publication Date').should('exist')
-    cy.findByText(
-      `Embargoed until ${DateHelper.toDisplayFormatYYYYMMDD(
-        metadataWithPublicationDateEmbargoed.embargo?.dateAvailable
-      )}`
-    ).should('exist')
+    if (metadataWithPublicationDateEmbargoed.publicationDate) {
+      cy.findAllByText(
+        DateHelper.toISO8601Format(metadataWithPublicationDateEmbargoed.publicationDate)
+      ).should('exist')
+    }
   })
 
   it('does not render the file Publication Date if the publication date and embargo do not exist', () => {

diff --git a/tests/e2e-integration/e2e/sections/dataset/Dataset.spec.tsx b/tests/e2e-integration/e2e/sections/dataset/Dataset.spec.tsx
@@ -478,57 +478,39 @@ describe('Dataset', () => {
     })
 
     it('loads the embargoed files', () => {
-      cy.window().then((win) => {
-        // Get the browser's locale from the window object
-        const browserLocale = win.navigator.language
-
-        // Create a moment object in UTC and set the time to 12 AM (midnight)
-        const utcDate = moment.utc().startOf('day')
-
-        // Add 100 years to the UTC date
-        utcDate.add(100, 'years')
-        const dateString = utcDate.format('YYYY-MM-DD')
-
-        // Use the browser's locale to format the date using Intl.DateTimeFormat
-        const options: Intl.DateTimeFormatOptions = {
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric'
-        }
-        const expectedDate = new Intl.DateTimeFormat(browserLocale, options).format(
-          utcDate.toDate()
-        )
+      const utcDate = moment.utc().startOf('day').add(100, 'years')
+      const expectedDate = utcDate.toISOString().split('T')[0]
 
-        cy.wrap(
-          DatasetHelper.createWithFiles(FileHelper.createMany(1)).then((dataset) =>
-            DatasetHelper.embargoFiles(
-              dataset.persistentId,
-              [dataset.files ? dataset.files[0].id : 0],
-              dateString
-            )
+      cy.wrap(
+        DatasetHelper.createWithFiles(FileHelper.createMany(1)).then((dataset) =>
+          DatasetHelper.embargoFiles(
+            dataset.persistentId,
+            [dataset.files ? dataset.files[0].id : 0],
+            expectedDate
           )
         )
-          .its('persistentId')
-          .then((persistentId: string) => {
-            cy.wait(1500) // Wait for the files to be embargoed
+      )
+        .its('persistentId')
+        .then((persistentId: string) => {
+          cy.wait(1500) // Wait for the files to be embargoed
 
-            cy.visit(`/spa/datasets?persistentId=${persistentId}&version=${DRAFT_PARAM}`)
+          cy.visit(`/spa/datasets?persistentId=${persistentId}&version=${DRAFT_PARAM}`)
 
-            cy.wait(1500) // Wait for the files to be loaded
+          cy.wait(1500) // Wait for the files to be loaded
 
-            cy.findByText('Files').should('exist')
+          cy.findByText('Files').should('exist')
 
-            cy.findByText(/Deposited/).should('exist')
-            cy.findByText(`Draft: will be embargoed until ${expectedDate}`).should('exist')
+          cy.findByText(/Deposited/).should('exist')
+          cy.findByText(`Draft: will be embargoed until`).should('exist')
+          cy.findByTestId('embargo-date').should('have.text', expectedDate)
 
-            cy.get('#edit-files-menu').should('exist')
+          cy.get('#edit-files-menu').should('exist')
 
-            cy.findByRole('button', { name: 'Access File' }).as('accessButton')
-            cy.get('@accessButton').should('exist')
-            cy.get('@accessButton').click()
-            cy.findByText('Embargoed').should('exist')
-          })
-      })
+          cy.findByRole('button', { name: 'Access File' }).as('accessButton')
+          cy.get('@accessButton').should('exist')
+          cy.get('@accessButton').click()
+          cy.findByText('Embargoed').should('exist')
+        })
     })
 
     it('applies filters to the Files Table in the correct order', () => {