From 4a1519e691dad560a0c1dce0c59d57d7d2435d83 Mon Sep 17 00:00:00 2001
From: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com>
Date: Thu, 11 Jul 2024 12:53:53 +0300
Subject: [PATCH] [React][Next.js] DateField empty value is not treated as
 empty (#1836)

* [React][Next.js] DateField empty value is not treated as empty

* Updated CHANGELOG

* Fixed lint step
---
 CHANGELOG.md                                  |   1 +
 .../src/components/Date.test.tsx              | 135 ++++++++++++------
 .../withEmptyFieldEditingComponent.test.tsx   |  60 ++++++++
 packages/sitecore-jss/src/layout/index.ts     |   7 +-
 .../sitecore-jss/src/layout/utils.test.ts     |  30 +++-
 packages/sitecore-jss/src/layout/utils.ts     |   9 +-
 6 files changed, 197 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4307b6442..2fc4744b15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ Our versioning strategy is as follows:
 
 * `[templates/nextjs]` `[templates/react]` `[templates/vue]` `[templates/angular]` Changed formatting in temp/config to prevent parse issues in Unix systems ([#1787](https://github.com/Sitecore/jss/pull/1787))([#1791](https://github.com/Sitecore/jss/pull/1791))
 * `[templates/nextjs-sxa]` The banner variant of image component is fixed with supporting metadata mode. ([#1826](https://github.com/Sitecore/jss/pull/1826))
+* `[sitecore-jss]` `[sitecore-jss-react]` DateField empty value is not treated as empty ([#1836](https://github.com/Sitecore/jss/pull/1836))
 
 ### 🎉 New Features & Improvements
 
diff --git a/packages/sitecore-jss-react/src/components/Date.test.tsx b/packages/sitecore-jss-react/src/components/Date.test.tsx
index d62d7f5e17..d2872c9360 100644
--- a/packages/sitecore-jss-react/src/components/Date.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Date.test.tsx
@@ -4,6 +4,7 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { DateField } from './Date';
 import { describe } from 'node:test';
+import { EMPTY_DATE_FIELD_VALUE } from '@sitecore-jss/sitecore-jss/layout';
 
 describe('<DateField />', () => {
   it('should return null if no editable or value', () => {
@@ -116,48 +117,98 @@ describe('<DateField />', () => {
       );
     });
 
-    it('should render default empty field component when field value is empty', () => {
-      const field = {
-        value: '',
-        metadata: testMetadata,
-      };
-
-      const rendered = mount(<DateField field={field} />);
-
-      expect(rendered.html()).to.equal(
-        [
-          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
-            testMetadata
-          )}</code>`,
-          '<span>[No text in field]</span>',
-          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
-        ].join('')
-      );
-    });
-
-    it('should render custom empty field component when provided, when field value is empty', () => {
-      const field = {
-        value: '',
-        metadata: testMetadata,
-      };
-
-      const EmptyFieldEditingComponent: React.FC = () => (
-        <span className="empty-field-value-placeholder">Custom Empty field value</span>
-      );
-
-      const rendered = mount(
-        <DateField field={field} emptyFieldEditingComponent={EmptyFieldEditingComponent} />
-      );
-
-      expect(rendered.html()).to.equal(
-        [
-          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
-            testMetadata
-          )}</code>`,
-          '<span class="empty-field-value-placeholder">Custom Empty field value</span>',
-          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
-        ].join('')
-      );
+    describe('empty value', () => {
+      describe('Should render default component', () => {
+        it('field value is empty string', () => {
+          const field = {
+            value: '',
+            metadata: testMetadata,
+          };
+
+          const rendered = mount(<DateField field={field} />);
+
+          expect(rendered.html()).to.equal(
+            [
+              `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+                testMetadata
+              )}</code>`,
+              '<span>[No text in field]</span>',
+              '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+            ].join('')
+          );
+        });
+
+        it('field value is default empty date value', () => {
+          const field = {
+            value: EMPTY_DATE_FIELD_VALUE,
+            metadata: testMetadata,
+          };
+
+          const rendered = mount(<DateField field={field} />);
+
+          expect(rendered.html()).to.equal(
+            [
+              `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+                testMetadata
+              )}</code>`,
+              '<span>[No text in field]</span>',
+              '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+            ].join('')
+          );
+        });
+      });
+
+      describe('Should render custom component', () => {
+        it('field value is empty string', () => {
+          const field = {
+            value: '',
+            metadata: testMetadata,
+          };
+
+          const EmptyFieldEditingComponent: React.FC = () => (
+            <span className="empty-field-value-placeholder">Custom Empty field value</span>
+          );
+
+          const rendered = mount(
+            <DateField field={field} emptyFieldEditingComponent={EmptyFieldEditingComponent} />
+          );
+
+          expect(rendered.html()).to.equal(
+            [
+              `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+                testMetadata
+              )}</code>`,
+              '<span class="empty-field-value-placeholder">Custom Empty field value</span>',
+              '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+            ].join('')
+          );
+        });
+
+        it('field value is defaule empty date value', () => {
+          const field = {
+            value: EMPTY_DATE_FIELD_VALUE,
+            metadata: testMetadata,
+          };
+
+          const EmptyFieldEditingComponent: React.FC = () => (
+            <span className="empty-field-value-placeholder">Custom Empty field value</span>
+          );
+
+          const rendered = mount(
+            <DateField field={field} emptyFieldEditingComponent={EmptyFieldEditingComponent} />
+          );
+
+          expect(rendered.html()).to.equal(
+            [
+              `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+                testMetadata
+              )}</code>`,
+              '<span class="empty-field-value-placeholder">Custom Empty field value</span>',
+              '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+            ].join('')
+          );
+        });
+      });
     });
 
     it('should render nothing when field value is empty, when editing is explicitly disabled ', () => {
diff --git a/packages/sitecore-jss-react/src/enhancers/withEmptyFieldEditingComponent.test.tsx b/packages/sitecore-jss-react/src/enhancers/withEmptyFieldEditingComponent.test.tsx
index 2cd08c9c60..0c03c34c17 100644
--- a/packages/sitecore-jss-react/src/enhancers/withEmptyFieldEditingComponent.test.tsx
+++ b/packages/sitecore-jss-react/src/enhancers/withEmptyFieldEditingComponent.test.tsx
@@ -5,6 +5,7 @@ import { mount } from 'enzyme';
 import { withEmptyFieldEditingComponent } from './withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from '../components/DefaultEmptyFieldEditingComponents';
 import { describe } from 'node:test';
+import { EMPTY_DATE_FIELD_VALUE } from '@sitecore-jss/sitecore-jss/layout';
 
 describe('withEmptyFieldEditingComponent', () => {
   describe('Metadata', () => {
@@ -165,6 +166,65 @@ describe('withEmptyFieldEditingComponent', () => {
       expect(rendered.html()).to.equal('<div><h1>hi</h1><h2>foo</h2><p>bar</p></div>');
     });
 
+    describe('Date', () => {
+      it('Should render component if field value is provided', () => {
+        const props = {
+          field: {
+            metadata: testMetadata,
+            value: '2024-01-01T00:00:00Z',
+          },
+        };
+
+        const WrappedComponent = withEmptyFieldEditingComponent<TestComponentProps>(TestComponent, {
+          defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText,
+        });
+
+        const rendered = mount(<WrappedComponent {...props} />);
+        expect(rendered.html()).to.equal('<div><h1>hi</h1><h2>foo</h2><p>bar</p></div>');
+      });
+
+      it('Should render default empty component if field value is empty', () => {
+        const props = {
+          field: {
+            value: EMPTY_DATE_FIELD_VALUE,
+            metadata: testMetadata,
+          },
+        };
+
+        const WrappedComponent = withEmptyFieldEditingComponent<TestComponentProps>(TestComponent, {
+          defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText,
+        });
+
+        const rendered = mount(<WrappedComponent {...props} />);
+        const expected = mount(<DefaultEmptyFieldEditingComponentText />);
+
+        expect(rendered.html()).to.equal(expected.html());
+      });
+
+      it('Should render custom empty component if field value is empty', () => {
+        const EmptyFieldEditingComponent: React.FC = () => (
+          <span className="empty-field-value-placeholder">Custom Empty field value</span>
+        );
+
+        const props = {
+          field: {
+            value: EMPTY_DATE_FIELD_VALUE,
+            metadata: testMetadata,
+          },
+          emptyFieldEditingComponent: EmptyFieldEditingComponent,
+        };
+
+        const WrappedComponent = withEmptyFieldEditingComponent<TestComponentProps>(TestComponent, {
+          defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText,
+        });
+
+        const rendered = mount(<WrappedComponent {...props} />);
+        const expected = mount(<EmptyFieldEditingComponent />);
+
+        expect(rendered.html()).to.equal(expected.html());
+      });
+    });
+
     describe('Image', () => {
       it('Should render component if field src is provided', () => {
         const props = {
diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts
index 17c2d61c3b..b601e6ed18 100644
--- a/packages/sitecore-jss/src/layout/index.ts
+++ b/packages/sitecore-jss/src/layout/index.ts
@@ -18,7 +18,12 @@ export {
   FieldMetadata,
 } from './models';
 
-export { getFieldValue, getChildPlaceholder, isFieldValueEmpty } from './utils';
+export {
+  getFieldValue,
+  getChildPlaceholder,
+  isFieldValueEmpty,
+  EMPTY_DATE_FIELD_VALUE,
+} from './utils';
 
 export { getContentStylesheetLink } from './content-styles';
 
diff --git a/packages/sitecore-jss/src/layout/utils.test.ts b/packages/sitecore-jss/src/layout/utils.test.ts
index 7da3c77c1f..c72228eb21 100644
--- a/packages/sitecore-jss/src/layout/utils.test.ts
+++ b/packages/sitecore-jss/src/layout/utils.test.ts
@@ -1,7 +1,12 @@
 /* eslint-disable no-unused-expressions */
 import { expect } from 'chai';
 import { ComponentRendering } from '../../layout';
-import { getFieldValue, getChildPlaceholder, isFieldValueEmpty } from './utils';
+import {
+  getFieldValue,
+  getChildPlaceholder,
+  isFieldValueEmpty,
+  EMPTY_DATE_FIELD_VALUE,
+} from './utils';
 
 describe('sitecore-jss layout utils', () => {
   describe('getFieldValue', () => {
@@ -153,6 +158,29 @@ describe('sitecore-jss layout utils', () => {
       });
     });
 
+    describe('Date', () => {
+      it('should return true if Date field is empty', () => {
+        expect(
+          isFieldValueEmpty({
+            value: EMPTY_DATE_FIELD_VALUE,
+          })
+        ).to.be.true;
+        expect(
+          isFieldValueEmpty({
+            value: '',
+          })
+        ).to.be.true;
+      });
+
+      it('should return false if Date field is not empty', () => {
+        const field = {
+          value: '2024-01-01T00:00:00Z',
+        };
+        const result = isFieldValueEmpty(field);
+        expect(result).to.be.false;
+      });
+    });
+
     describe('boolean', () => {
       it('should return false if field value is boolean false', () => {
         const field = {
diff --git a/packages/sitecore-jss/src/layout/utils.ts b/packages/sitecore-jss/src/layout/utils.ts
index 56811b092f..9d7521868c 100644
--- a/packages/sitecore-jss/src/layout/utils.ts
+++ b/packages/sitecore-jss/src/layout/utils.ts
@@ -79,6 +79,12 @@ export function getChildPlaceholder(
   return rendering.placeholders[placeholderName];
 }
 
+/**
+ * The default value for an empty Date field.
+ * This value is defined as a default one by .NET
+ */
+export const EMPTY_DATE_FIELD_VALUE = '0001-01-01T00:00:00Z';
+
 /**
  * Determines if the passed in field object's value is empty.
  * @param {GenericFieldValue | Partial<Field>} field the field object.
@@ -91,6 +97,7 @@ export function isFieldValueEmpty(field: GenericFieldValue | Partial<Field>): bo
     !(fieldValue as { [key: string]: unknown }).src;
   const isLinkFieldEmpty = (fieldValue: GenericFieldValue) =>
     !(fieldValue as { [key: string]: unknown }).href;
+  const isDateFieldEmpty = (fieldValue: GenericFieldValue) => fieldValue === EMPTY_DATE_FIELD_VALUE;
 
   const isEmpty = (fieldValue: GenericFieldValue) => {
     if (typeof fieldValue === 'object') {
@@ -103,7 +110,7 @@ export function isFieldValueEmpty(field: GenericFieldValue | Partial<Field>): bo
       // Avoid returning true for 0 and false values
       return false;
     } else {
-      return !fieldValue;
+      return !fieldValue || isDateFieldEmpty(fieldValue);
     }
   };