Emailfield to Muilink

packages/ra-ui-materialui/src/field/EmailField.spec.js

@@ -1,53 +1,57 @@
 import React from 'react';
-import assert from 'assert';
+import expect from 'expect';
 import { render, cleanup } from '@testing-library/react';
 import EmailField from './EmailField';
 
+const url = '[email protected]';
+
 describe('<EmailField />', () => {
     afterEach(cleanup);
 
-    it('should render as an email link', () => {
-        const record = { foo: '[email protected]' };
-        const { container } = render(
+    it('should render as Mui Link', () => {
+        const record = { foo: url };
+        const { getByText } = render(
             <EmailField record={record} source="foo" />
         );
-        assert.equal(
-            container.innerHTML,
-            '<a href="mailto:[email protected]">[email protected]</a>'
-        );
+        const link = getByText(url);
+        expect(link.tagName).toEqual('A');
+        expect(link.href).toEqual(`mailto:${url}`);
+        expect(link.innerHTML).toEqual(url);
     });
 
     it('should handle deep fields', () => {
-        const record = { foo: { bar: '[email protected]' } };
-        const { container } = render(
+        const record = { foo: { bar: url } };
+        const { getByText } = render(
             <EmailField record={record} source="foo.bar" />
         );
-        assert.equal(
-            container.innerHTML,
-            '<a href="mailto:[email protected]">[email protected]</a>'
-        );
+        const link = getByText(url);
+        expect(link.tagName).toEqual('A');
+        expect(link.href).toEqual(`mailto:${url}`);
+        expect(link.innerHTML).toEqual(url);
     });
 
     it('should display an email (mailto) link', () => {
-        const record = { email: '[email protected]' };
-        const { container } = render(
+        const halUrl = '[email protected]';
+        const record = { email: halUrl };
+        const { getByText } = render(
             <EmailField record={record} source="email" />
         );
-        assert.equal(
-            container.innerHTML,
-            '<a href="mailto:[email protected]">[email protected]</a>'
-        );
+        const link = getByText(halUrl);
+        expect(link.tagName).toEqual('A');
+        expect(link.href).toEqual(`mailto:${halUrl}`);
+        expect(link.innerHTML).toEqual(halUrl);
     });
 
     it('should use custom className', () => {
-        const { container } = render(
+        const { getByText } = render(
             <EmailField
-                record={{ email: true }}
+                record={{ email: url }}
                 source="email"
-                className="foo"
+                className="foo"                
             />
         );
-        assert.ok(container.firstChild.classList.contains('foo'));
+        const link = getByText(url);        
+        expect(link.className).toContain('foo');
     });
 
     it.each([null, undefined])(
@@ -56,12 +60,12 @@ describe('<EmailField />', () => {
             const { queryByText } = render(
                 <EmailField record={{ foo }} source="foo" emptyText="NA" />
             );
-            assert.notEqual(queryByText('NA'), null);
+            expect(queryByText('NA')).not.toBeNull();
         }
     );
 
     it('should return null when the record has no value for the source and no emptyText', () => {
         const { container } = render(<EmailField record={{}} source="foo" />);
-        assert.equal(container.firstChild, null);
+        expect(container.firstChild).toBeNull();
     });
 });

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

@@ -5,6 +5,7 @@ import Typography from '@material-ui/core/Typography';
 
 import sanitizeRestProps from './sanitizeRestProps';
 import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
+import { Link } from '@material-ui/core';
 
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
@@ -28,14 +29,14 @@ const EmailField: FunctionComponent<
     }
 
     return (
-        <a
+        <Link
             className={className}
             href={`mailto:${value}`}
             onClick={stopPropagation}
             {...sanitizeRestProps(rest)}
         >
             {value}
-        </a>
+        </Link>
     );
 };