@plone/volto 14.6.0 → 14.7.0

package/src/helpers/Utils/Date.test.js

@@ -0,0 +1,197 @@
+import { formatDate, formatRelativeDate } from './Date';
+
+const d = '2022-01-03T19:26:08.999Z';
+const date = new Date(d);
+
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const MONTH = DAY * 30;
+const YEAR = DAY * 365; // ? is this safe or should it be more accurate
+
+describe('formatDate helper', () => {
+  it('accepts an iso date string', () => {
+    expect(formatDate({ date: d })).toBe('1/3/2022');
+  });
+
+  it('accepts a date object', () => {
+    expect(formatDate({ date })).toBe('1/3/2022');
+  });
+
+  it('formats a date object in other language', () => {
+    expect(formatDate({ date, locale: 'de' })).toBe('3.1.2022');
+  });
+
+  it('formats a date object with time in default en locale', () => {
+    expect(formatDate({ date, includeTime: true })).toBe('1/3/22, 7:26 PM');
+  });
+
+  it('formats a date object with time in other language', () => {
+    expect(formatDate({ date, locale: 'de', includeTime: true })).toBe(
+      '03.01.22, 19:26',
+    );
+  });
+
+  it('formats a date as long', () => {
+    expect(formatDate({ date, long: true })).toBe(
+      'Monday, January 3, 2022 at 7:26 PM',
+    );
+  });
+
+  it('formats a date as long in other language', () => {
+    expect(formatDate({ date, long: true, locale: 'de' })).toBe(
+      'Montag, 3. Januar 2022 um 19:26',
+    );
+  });
+
+  it('includeTime takes precedence over long', () => {
+    expect(formatDate({ date, long: true, includeTime: true })).toBe(
+      '1/3/22, 7:26 PM',
+    );
+  });
+
+  it('accepts custom format', () => {
+    expect(
+      formatDate({
+        date,
+        format: {
+          year: 'numeric',
+          month: 'narrow',
+          day: '2-digit',
+        },
+      }),
+    ).toBe('J 03, 2022');
+  });
+
+  it('custom format takes precedence over long and includeTime', () => {
+    expect(
+      formatDate({
+        date,
+        long: true,
+        includeTime: true,
+        format: {
+          year: 'numeric',
+          month: 'narrow',
+          day: '2-digit',
+          // dayPeriod: 'long',
+        },
+      }),
+    ).toBe('J 03, 2022');
+  });
+});
+
+describe('formatRelativeDate helper', () => {
+  it('accepts an iso date string', () => {
+    expect(formatRelativeDate({ date: d })).toBeTruthy();
+  });
+
+  it('accepts date object', () => {
+    expect(formatRelativeDate({ date })).toBeTruthy();
+  });
+
+  it('uses auto numeric to format close past days', () => {
+    const now = Date.now();
+    const d = new Date(now - 1 * DAY);
+    expect(formatRelativeDate({ date: d })).toBe('yesterday');
+  });
+
+  it('uses auto numeric to format close future days', () => {
+    const now = Date.now();
+    const d = new Date(now + 1 * DAY);
+    expect(formatRelativeDate({ date: d })).toBe('tomorrow');
+  });
+
+  it('uses auto numeric to format close future years', () => {
+    const now = Date.now();
+    const d = new Date(now + 1 * YEAR);
+    expect(formatRelativeDate({ date: d })).toBe('next year');
+  });
+
+  it('uses auto numeric to format close last years', () => {
+    const now = Date.now();
+    const d = new Date(now - 1 * YEAR);
+    expect(formatRelativeDate({ date: d })).toBe('last year');
+  });
+
+  it('accepts a relativeTo date', () => {
+    const relativeTo = new Date(date.getTime() + 4 * DAY);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 days ago');
+  });
+
+  it('can format past seconds', () => {
+    const relativeTo = new Date(date.getTime() + 4 * SECOND);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 seconds ago');
+  });
+
+  it('can format future seconds', () => {
+    const relativeTo = new Date(date.getTime() - 4 * SECOND);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 seconds');
+  });
+
+  it('can format past minutes', () => {
+    const relativeTo = new Date(date.getTime() + 4 * MINUTE);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 minutes ago');
+  });
+
+  it('can format future minutes', () => {
+    const relativeTo = new Date(date.getTime() - 4 * MINUTE);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 minutes');
+  });
+
+  it('can format past hours', () => {
+    const relativeTo = new Date(date.getTime() + 4 * HOUR);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 hours ago');
+  });
+
+  it('can format future hours', () => {
+    const relativeTo = new Date(date.getTime() - 4 * HOUR);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 hours');
+  });
+
+  it('can format past days', () => {
+    const relativeTo = new Date(date.getTime() + 4 * DAY);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 days ago');
+  });
+
+  it('can format future days', () => {
+    const relativeTo = new Date(date.getTime() - 4 * DAY);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 days');
+  });
+
+  it('can format past months', () => {
+    const relativeTo = new Date(date.getTime() + 4 * MONTH);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 months ago');
+  });
+
+  it('can format future months', () => {
+    const relativeTo = new Date(date.getTime() - 4 * MONTH);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 months');
+  });
+
+  it('can format past years', () => {
+    const relativeTo = new Date(
+      date.getTime() + 4 * YEAR + 4 * MONTH + 4 * DAY,
+    );
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 years ago');
+  });
+
+  it('can format future years', () => {
+    const relativeTo = new Date(
+      date.getTime() - 4 * YEAR - +4 * MONTH - 4 * DAY,
+    );
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 years');
+  });
+
+  it('can use alternate style short', () => {
+    const now = Date.now();
+    const d = new Date(now + 3 * MONTH);
+    expect(formatRelativeDate({ date: d, style: 'short' })).toBe('in 3 mo.');
+  });
+
+  it('can use alternate style narrow', () => {
+    const now = Date.now();
+    const d = new Date(now + 3 * MONTH);
+    expect(formatRelativeDate({ date: d, style: 'narrow' })).toBe('in 3 mo.');
+  });
+});

package/src/helpers/Utils/Utils.js

@@ -1,7 +1,6 @@
 import { flatten, isEqual, isObject, transform } from 'lodash';
 import React from 'react';
 import { matchPath } from 'react-router';
-import moment from 'moment';
 import config from '@plone/volto/registry';
 
 /**
@@ -152,7 +151,7 @@ export const getColor = (name) => {
  * @param {string} format Date format of choice
  * @returns {Object|string} Moment object or string if format is set
  */
-export const parseDateTime = (locale, value, format) => {
+export const parseDateTime = (locale, value, format, moment) => {
   //  Used to set a server timezone or UTC as default
   moment.defineLocale(locale, moment.localeData(locale)._config); // copy locale to moment-timezone
   let datetime = null;

package/src/helpers/Utils/Utils.test.js

@@ -7,7 +7,9 @@ import {
   safeWrapper,
   normalizeLanguageName,
   hasApiExpander,
+  parseDateTime,
 } from './Utils';
+import moment from 'moment';
 
 describe('Utils tests', () => {
   describe('difference', () => {
@@ -320,4 +322,27 @@ describe('Utils tests', () => {
       );
     });
   });
+
+  describe('parseDateTime', () => {
+    it('Parses iso date strings in en locale', () => {
+      const isoDate = '2022-01-16T07:40:04.331Z';
+      expect(
+        parseDateTime('en', isoDate, undefined, moment).toISOString(),
+      ).toBe(isoDate);
+    });
+
+    it('Parses iso date strings in de locale', () => {
+      const isoDate = '2022-01-16T07:40:04.331Z';
+      expect(
+        parseDateTime('de', isoDate, undefined, moment).toISOString(),
+      ).toBe(isoDate);
+    });
+
+    it('Parses iso date strings in de locale with Z marker', () => {
+      const isoDate = '2022-01-16T07:40:04.331';
+      expect(
+        parseDateTime('de', isoDate, undefined, moment).toISOString(),
+      ).toBe(`${isoDate}Z`);
+    });
+  });
 });