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} - + ); };