Merge pull request #4568 from WiXSL/change-urlfield-from-a-to-muilink

UrlField renders a material-ui Link component instead of an anchor element

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

@@ -1,42 +1,43 @@
 import React from 'react';
-import assert from 'assert';
-import { render } from '@testing-library/react';
+import expect from 'expect';
+import { render, cleanup } from '@testing-library/react';
 import UrlField from './UrlField';
 
+const url = 'https://en.wikipedia.org/wiki/HAL_9000';
+
 describe('<UrlField />', () => {
-    it('should display a link', () => {
-        const record = { website: 'https://en.wikipedia.org/wiki/HAL_9000' };
-        const { container } = render(
+    afterEach(cleanup);
+
+    it('should render a link', () => {
+        const record = { website: url };
+        const { getByText } = render(
             <UrlField record={record} source="website" />
         );
-        assert.equal(
-            container.innerHTML,
-            '<a href="https://en.wikipedia.org/wiki/HAL_9000">https://en.wikipedia.org/wiki/HAL_9000</a>'
-        );
+        const link = getByText(url);
+        expect(link.tagName).toEqual('A');
+        expect(link.href).toEqual(url);
     });
 
     it('should handle deep fields', () => {
         const record = {
-            foo: { website: 'https://en.wikipedia.org/wiki/HAL_9000' },
+            foo: { website: url },
         };
-        const { container } = render(
+        const { getByText } = render(
             <UrlField record={record} source="foo.website" />
         );
-        assert.equal(
-            container.innerHTML,
-            '<a href="https://en.wikipedia.org/wiki/HAL_9000">https://en.wikipedia.org/wiki/HAL_9000</a>'
-        );
+        const link = getByText(url);
+        expect(link.href).toEqual(url);
     });
 
     it('should render the emptyText when value is null', () => {
-        const { queryByText } = render(
+        const { getByText } = render(
             <UrlField
                 record={{ url: null }}
                 className="foo"
                 source="url"
                 emptyText="NA"
             />
         );
-        assert.notEqual(queryByText('NA'), null);
+        expect(getByText('NA')).not.toEqual(null);
     });
 });

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

@@ -2,7 +2,7 @@ import React, { FunctionComponent, HtmlHTMLAttributes } from 'react';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
 import sanitizeRestProps from './sanitizeRestProps';
-import Typography from '@material-ui/core/Typography';
+import { Typography, Link } from '@material-ui/core';
 import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 
 const UrlField: FunctionComponent<
@@ -24,9 +24,9 @@ const UrlField: FunctionComponent<
     }
 
     return (
-        <a className={className} href={value} {...sanitizeRestProps(rest)}>
+        <Link className={className} href={value} {...sanitizeRestProps(rest)}>
             {value}
-        </a>
+        </Link>
     );
 };