update both widgets and tests

eea · Sep 5, 2024 · 8d295f7 · 8d295f7
1 parent 8e27f48
commit 8d295f7
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 30 deletions.
diff --git a/src/components/theme/Widgets/DateWidget.jsx b/src/components/theme/Widgets/DateWidget.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import cx from 'classnames';
+import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
+
+export const DateWidget = ({ value, children, className }) => {
+  const lang = useSelector((state) => state.intl.locale);
+  const backendLang = toBackendLang(lang);
+  const locale =
+    backendLang === 'en' ? config.settings.dateLocale : backendLang;
+  const formatOptions = {
+    date: value,
+    format: {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+    },
+    locale,
+  };
+
+  return value ? (
+    <span className={cx(className, 'date', 'widget')}>
+      {children
+        ? children(formatDate(formatOptions))
+        : formatDate(formatOptions)}
+    </span>
+  ) : (
+    ''
+  );
+};
diff --git a/src/components/theme/Widgets/DateWidget.test.js b/src/components/theme/Widgets/DateWidget.test.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { DateWidget } from './DateWidget';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+const mockStore = configureStore([thunk]);
+
+const store = mockStore({
+  intl: {
+    locale: 'en-gb',
+    messages: {},
+  },
+});
+
+describe('DateWidget', () => {
+  it('renders an empty date view widget component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget className="metadata" value="2020-08-04T09:00:00" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component with custom format', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget
+          className="metadata"
+          value="2020-08-04T09:00:00"
+          format={{
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+          }}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component with children', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget className="metadata" value="2020-08-04T09:00:00">
+          {(child) => <strong>{child}</strong>}
+        </DateWidget>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});
diff --git a/src/components/theme/Widgets/DatetimeWidget.jsx b/src/components/theme/Widgets/DatetimeWidget.jsx
@@ -16,15 +16,28 @@ export const DatetimeWidget = ({ value, children, className }) => {
       year: 'numeric',
       month: 'short',
       day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
     },
     locale,
+    includeTime: true,
+    formatToParts: true,
   };
 
+  let formattedParts = formatDate(formatOptions);
+
+  const formattedDate = formattedParts
+    .map((part) => {
+      if (part.type === 'literal' && part.value === ', ') {
+        return ' ';
+      }
+      return part.value;
+    })
+    .join('');
+
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
-      {children
-        ? children(formatDate(formatOptions))
-        : formatDate(formatOptions)}
+      {children ? children(formattedDate) : formattedDate}
     </span>
   ) : (
     ''

diff --git a/src/components/theme/Widgets/DatetimeWidget.test.js b/src/components/theme/Widgets/DatetimeWidget.test.js
@@ -15,7 +15,7 @@ const store = mockStore({
 });
 
 describe('DatetimeWidget', () => {
-  it('renders an empty date view widget component', () => {
+  it('renders an empty datetime view widget component', () => {
     const component = renderer.create(
       <Provider store={store}>
         <DatetimeWidget />
@@ -25,43 +25,39 @@ describe('DatetimeWidget', () => {
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a date view widget component', () => {
+  it('renders a datetime view widget component with a date and time', () => {
     const component = renderer.create(
       <Provider store={store}>
-        <DatetimeWidget className="metadata" value="2020-08-04T09:00:00" />
+        <DatetimeWidget className="metadata" value="2024-09-05T15:34:00" />
       </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a date view widget component with custom format', () => {
+  it('renders a datetime view widget component with children formatting', () => {
     const component = renderer.create(
       <Provider store={store}>
-        <DatetimeWidget
-          className="metadata"
-          value="2020-08-04T09:00:00"
-          format={{
-            year: 'numeric',
-            month: 'short',
-            day: '2-digit',
-          }}
-        />
+        <DatetimeWidget className="metadata" value="2024-09-05T15:34:00">
+          {(formattedDate) => <strong>{formattedDate}</strong>}
+        </DatetimeWidget>
       </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a date view widget component with children', () => {
+  it('removes the comma in the formatted date and shows correct time', () => {
     const component = renderer.create(
       <Provider store={store}>
-        <DatetimeWidget className="metadata" value="2020-08-04T09:00:00">
-          {(child) => <strong>{child}</strong>}
-        </DatetimeWidget>
+        <DatetimeWidget className="metadata" value="2024-09-05T15:34:00" />
       </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
+
+    const instance = component.root;
+    const span = instance.findByType('span');
+    expect(span.props.children).toContain('05 Sept 2024 15:34');
   });
 });
diff --git a/src/components/theme/Widgets/__snapshots__/DateWidget.test.js.snap b/src/components/theme/Widgets/__snapshots__/DateWidget.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateWidget renders a date view widget component 1`] = `
+<span
+  className="metadata date widget"
+>
+  04 Aug 2020
+</span>
+`;
+
+exports[`DateWidget renders a date view widget component with children 1`] = `
+<span
+  className="metadata date widget"
+>
+  <strong>
+    04 Aug 2020
+  </strong>
+</span>
+`;
+
+exports[`DateWidget renders a date view widget component with custom format 1`] = `
+<span
+  className="metadata date widget"
+>
+  04 Aug 2020
+</span>
+`;
+
+exports[`DateWidget renders an empty date view widget component 1`] = `""`;
diff --git a/src/components/theme/Widgets/__snapshots__/DatetimeWidget.test.js.snap b/src/components/theme/Widgets/__snapshots__/DatetimeWidget.test.js.snap
@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DatetimeWidget renders a date view widget component 1`] = `
+exports[`DatetimeWidget removes the comma in the formatted date and shows correct time 1`] = `
 <span
   className="metadata datetime widget"
 >
-  04 Aug 2020
+  05 Sept 2024 15:34
 </span>
 `;
 
-exports[`DatetimeWidget renders a date view widget component with children 1`] = `
+exports[`DatetimeWidget renders a datetime view widget component with a date and time 1`] = `
 <span
   className="metadata datetime widget"
 >
-  <strong>
-    04 Aug 2020
-  </strong>
+  05 Sept 2024 15:34
 </span>
 `;
 
-exports[`DatetimeWidget renders a date view widget component with custom format 1`] = `
+exports[`DatetimeWidget renders a datetime view widget component with children formatting 1`] = `
 <span
   className="metadata datetime widget"
 >
-  04 Aug 2020
+  <strong>
+    05 Sept 2024 15:34
+  </strong>
 </span>
 `;
 
-exports[`DatetimeWidget renders an empty date view widget component 1`] = `""`;
+exports[`DatetimeWidget renders an empty datetime view widget component 1`] = `""`;
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homep
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
 import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
+import { DateWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DateWidget';
 import { DatetimeWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DatetimeWidget';
 import CreatableSelectWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/CreatableSelectWidget';
 
@@ -331,8 +332,8 @@ const applyConfig = (config) => {
   }
   // Custom Widgets
   config.widgets.id.other_organisations = TokenWidgetEdit;
+  config.widgets.views.widget.date = DateWidget;
   config.widgets.views.widget.datetime = DatetimeWidget;
-  config.widgets.views.widget.date = DatetimeWidget;
   config.widgets.views.id.topics = TopicsWidget;
   config.widgets.views.id.subjects = TokenWidget;
   config.widgets.views.widget.tags = TokenWidget;