diff --git a/packages/ra-ui-materialui/src/field/EmailField.spec.js b/packages/ra-ui-materialui/src/field/EmailField.spec.js
index b20aeb3507b..c35d9b09995 100644
--- a/packages/ra-ui-materialui/src/field/EmailField.spec.js
+++ b/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 = 'foo@bar.com';
+
describe('', () => {
afterEach(cleanup);
- it('should render as an email link', () => {
- const record = { foo: 'foo@bar.com' };
- const { container } = render(
+ it('should render as Mui Link', () => {
+ const record = { foo: url };
+ const { getByText } = render(
);
- assert.equal(
- container.innerHTML,
- 'foo@bar.com'
- );
+ 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: 'foo@bar.com' } };
- const { container } = render(
+ const record = { foo: { bar: url } };
+ const { getByText } = render(
);
- assert.equal(
- container.innerHTML,
- 'foo@bar.com'
- );
+ 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: 'hal@kubrickcorp.com' };
- const { container } = render(
+ const halUrl = 'hal@kubrickcorp.com';
+ const record = { email: halUrl };
+ const { getByText } = render(
);
- assert.equal(
- container.innerHTML,
- 'hal@kubrickcorp.com'
- );
+ 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(
);
- 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('', () => {
const { queryByText } = render(
);
- 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();
- assert.equal(container.firstChild, null);
+ expect(container.firstChild).toBeNull();
});
});
diff --git a/packages/ra-ui-materialui/src/field/EmailField.tsx b/packages/ra-ui-materialui/src/field/EmailField.tsx
index e469eadebd8..b153187557f 100644
--- a/packages/ra-ui-materialui/src/field/EmailField.tsx
+++ b/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 (
-
{value}
-
+
);
};