Cleanup up ArrayField tests

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

@@ -1,95 +1,60 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { createStore } from 'redux';
-import { Provider } from 'react-redux';
+import { render, cleanup } from '@testing-library/react';
 
 import { ArrayField } from './ArrayField';
 import NumberField from './NumberField';
 import TextField from './TextField';
 import Datagrid from '../list/Datagrid';
-import { MemoryRouter } from 'react-router';
+import { TestContext } from 'ra-core';
 
 describe('<ArrayField />', () => {
+    afterEach(cleanup);
+
+    const DummyIterator = props => (
+        <Datagrid {...props}>
+            <NumberField source="id" />
+            <TextField source="foo" />
+        </Datagrid>
+    );
+
     it('should not fail for empty records', () => {
-        const IteratorMock = jest.fn();
-        shallow(
-            <ArrayField source="arr" record={{}}>
-                <IteratorMock />
-            </ArrayField>
-        ).dive();
-        expect(IteratorMock.mock.calls.length).toBe(1);
-        expect(IteratorMock.mock.calls[0][0]).toMatchObject({
-            data: {},
-            ids: [],
-        });
-    });
+        const { queryByText } = render(
+            <TestContext>
+                <ArrayField source="arr" resource="posts" record={{}}>
+                    <DummyIterator />
+                </ArrayField>
+            </TestContext>
+        );
 
-    it('should pass the embedded array as data and ids props to child', () => {
-        const IteratorMock = jest.fn();
-        shallow(
-            <ArrayField
-                source="arr"
-                record={{
-                    arr: [{ id: 123, foo: 'bar' }, { id: 456, foo: 'baz' }],
-                }}
-            >
-                <IteratorMock />
-            </ArrayField>
-        ).dive();
-        expect(IteratorMock.mock.calls.length).toBe(1);
-        expect(IteratorMock.mock.calls[0][0]).toMatchObject({
-            data: {
-                '{"id":123,"foo":"bar"}': { foo: 'bar', id: 123 },
-                '{"id":456,"foo":"baz"}': { foo: 'baz', id: 456 },
-            },
-            ids: ['{"id":123,"foo":"bar"}', '{"id":456,"foo":"baz"}'],
-        });
+        // Test the datagrid know about the fields
+        expect(queryByText('resources.posts.fields.id')).not.toBeNull();
+        expect(queryByText('resources.posts.fields.foo')).not.toBeNull();
     });
 
     it('should render the underlying iterator component', () => {
-        const Dummy = () => (
-            <ArrayField
-                source="arr"
-                record={{
-                    arr: [{ id: 123, foo: 'bar' }, { id: 456, foo: 'baz' }],
-                }}
-            >
-                <Datagrid>
-                    <NumberField source="id" />
-                    <TextField source="foo" />
-                </Datagrid>
-            </ArrayField>
+        const { queryByText } = render(
+            <TestContext>
+                <ArrayField
+                    source="arr"
+                    resource="posts"
+                    record={{
+                        arr: [{ id: 123, foo: 'bar' }, { id: 456, foo: 'baz' }],
+                    }}
+                >
+                    <DummyIterator />
+                </ArrayField>
+            </TestContext>
         );
-        const wrapper = mount(
-            <MemoryRouter>
-                <Provider store={createStore(() => ({}))}>
-                    <Dummy />
-                </Provider>
-            </MemoryRouter>
-        );
-        expect(
-            wrapper
-                .find('DatagridRow TextField span')
-                .at(0)
-                .text()
-        ).toBe('bar');
-        expect(
-            wrapper
-                .find('DatagridRow NumberField span')
-                .at(0)
-                .text()
-        ).toBe('123');
-        expect(
-            wrapper
-                .find('DatagridRow TextField span')
-                .at(1)
-                .text()
-        ).toBe('baz');
-        expect(
-            wrapper
-                .find('DatagridRow NumberField span')
-                .at(1)
-                .text()
-        ).toBe('456');
+
+        // Test the datagrid know about the fields
+        expect(queryByText('resources.posts.fields.id')).not.toBeNull();
+        expect(queryByText('resources.posts.fields.foo')).not.toBeNull();
+
+        // Test the fields values
+        expect(queryByText('bar')).not.toBeNull();
+        expect(queryByText('123')).not.toBeNull();
+
+        expect(queryByText('baz')).not.toBeNull();
+        expect(queryByText('456')).not.toBeNull();
     });
 });