Fix ChipField consider zero to be empty

Author: djhi

packages/ra-ui-materialui/src/field/ChipField.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { ChipField } from './ChipField';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { RecordContextProvider, I18nContextProvider } from 'ra-core';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 
@@ -25,49 +25,59 @@ const i18nProvider = polyglotI18nProvider(
 );
 
 describe('<ChipField />', () => {
-    it('should display the record value added as source', () => {
-        const { getByText } = render(
-            <ChipField source="name" record={{ id: 123, name: 'foo' }} />
-        );
-        expect(getByText('foo')).not.toBeNull();
+    it('should display the record value added as source', async () => {
+        render(<ChipField source="name" record={{ id: 123, name: 'foo' }} />);
+        await screen.findByText('foo');
     });
 
-    it('should use record from RecordContext', () => {
-        const { getByText } = render(
+    it('should use record from RecordContext', async () => {
+        render(
             <RecordContextProvider value={{ id: 123, name: 'foo' }}>
                 <ChipField source="name" />
             </RecordContextProvider>
         );
-        expect(getByText('foo')).not.toBeNull();
+        await screen.findByText('foo');
     });
 
-    it('should not display any label added as props', () => {
-        const { getByText } = render(
+    it('should not display any label added as props', async () => {
+        render(
             <ChipField
                 source="name"
                 record={{ id: 123, name: 'foo' }}
                 label="bar"
             />
         );
-        expect(getByText('foo')).not.toBeNull();
+        await screen.findByText('foo');
     });
 
     it.each([null, undefined])(
         'should render the emptyText when value is %s',
-        name => {
-            const { getByText } = render(
+        async name => {
+            render(
                 <ChipField
                     source="name"
                     record={{ id: 123, name }}
                     emptyText="NA"
                 />
             );
-            expect(getByText('NA')).not.toBeNull();
+            await screen.findByText('NA');
         }
     );
 
-    it('should translate emptyText', () => {
-        const { getByText } = render(
+    it('should not render the emptyText when value is zero', async () => {
+        render(
+            <ChipField
+                source="name"
+                record={{ id: 123, name: 0 }}
+                emptyText="NA"
+            />
+        );
+
+        expect(screen.queryByText('NA')).toBeNull();
+    });
+
+    it('should translate emptyText', async () => {
+        render(
             <I18nContextProvider value={i18nProvider}>
                 <ChipField
                     record={{ id: 123 }}
@@ -78,7 +88,7 @@ describe('<ChipField />', () => {
             </I18nContextProvider>
         );
 
-        expect(getByText('Not found')).not.toBeNull();
+        await screen.findByText('Not found');
     });
 
     it('should return null when value and emptyText are an empty string', () => {
@@ -92,15 +102,15 @@ describe('<ChipField />', () => {
         expect(container.firstChild).toBeNull();
     });
 
-    it('should display the emptyText when value is an empty string', () => {
-        const { getByText } = render(
+    it('should display the emptyText when value is an empty string', async () => {
+        render(
             <ChipField
                 source="name"
                 record={{ id: 123, name: '' }}
                 emptyText="NA"
             />
         );
-        expect(getByText('NA')).not.toBeNull();
+        await screen.findByText('NA');
     });
 
     it('should return null when value is an empty string and emptyText is null', () => {

packages/ra-ui-materialui/src/field/ChipField.stories.tsx

@@ -27,10 +27,11 @@ export const Basic = ({
 
 Basic.argTypes = {
     value: {
-        options: ['filled', 'empty', 'undefined'],
+        options: ['filled', 'empty', 'zero', 'undefined'],
         mapping: {
             filled: 'Bazinga',
             empty: '',
+            zero: 0,
             undefined: undefined,
         },
         control: { type: 'select' },

packages/ra-ui-materialui/src/field/ChipField.tsx

@@ -25,7 +25,7 @@ const ChipFieldImpl = <
     const value = useFieldValue(props);
     const translate = useTranslate();
 
-    if (!value) {
+    if (value == null || value === '') {
         if (!emptyText || emptyText.length === 0) {
             return null;
         }