Add unit tests for Edit and Show

packages/ra-core/src/util/TestContext.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { reducer as formReducer } from 'redux-form';
+import { TranslationProvider } from 'ra-core';
+import merge from 'lodash/merge';
+
+const defaultStore = {
+    admin: {
+        resources: {},
+        references: { possibleValues: {} },
+        ui: { viewVersion: 1 },
+    },
+    form: formReducer(),
+    i18n: { locale: 'en', messages: {} },
+};
+
+/**
+ * Simulate a react-admin context in unit tests
+ *
+ * Pass custom store values as store prop
+ *
+ * @example
+ * // in an enzyme test
+ * const wrapper = render(
+ *     <AdminContext store={{ admin: { resources: { post: { data: { 1: {id: 1, title: 'foo' } } } } } }}>
+ *         <Show {...defaultShowProps} />
+ *     </AdminContext>
+ * );
+ */
+const TestContext = ({ store, children }) => {
+    const storeWithDefault = createStore(() => merge(store, defaultStore));
+    return (
+        <Provider store={storeWithDefault}>
+            <TranslationProvider>{children}</TranslationProvider>
+        </Provider>
+    );
+};
+
+TestContext.propTypes = {
+    store: PropTypes.object,
+    children: PropTypes.node,
+};
+
+TestContext.defaultProps = {
+    store: {},
+};
+
+export default TestContext;

packages/ra-core/src/util/index.js

@@ -7,3 +7,4 @@ export linkToRecord from './linkToRecord';
 export removeEmpty from './removeEmpty';
 export removeKey from './removeKey';
 export resolveRedirectTo from './resolveRedirectTo';
+export TestContext from './TestContext';

packages/ra-ui-materialui/src/detail/Edit.js

@@ -182,7 +182,7 @@ EditView.defaultProps = {
  *     );
  *     export default App;
  */
-const Edit = props => (
+export const Edit = props => (
     <EditController {...props}>
         {controllerProps => <EditView {...props} {...controllerProps} />}
     </EditController>

packages/ra-ui-materialui/src/detail/Edit.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { TestContext } from 'ra-core';
+
+import { Edit } from './Edit';
+
+describe('<Edit />', () => {
+    const defaultEditProps = {
+        basePath: '/',
+        id: '123',
+        resource: 'foo',
+        location: {},
+        match: {},
+    };
+
+    it('should display aside component', () => {
+        const Aside = () => <div id="aside">Hello</div>;
+        const wrapper = render(
+            <TestContext>
+                <Edit {...defaultEditProps} aside={<Aside />}>
+                    <div />
+                </Edit>
+            </TestContext>
+        );
+        const aside = wrapper.find('#aside');
+        expect(aside.text()).toEqual('Hello');
+    });
+});

packages/ra-ui-materialui/src/detail/Show.js

@@ -168,7 +168,7 @@ ShowView.defaultProps = {
  *     );
  *     export default App;
  */
-const Show = props => (
+export const Show = props => (
     <ShowController {...props}>
         {controllerProps => <ShowView {...props} {...controllerProps} />}
     </ShowController>

packages/ra-ui-materialui/src/detail/Show.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { TestContext } from 'ra-core';
+
+import { Show } from './Show';
+
+describe('<Show />', () => {
+    const defaultShowProps = {
+        basePath: '/',
+        id: '123',
+        resource: 'foo',
+        location: {},
+        match: {},
+    };
+
+    it('should display aside component', () => {
+        const Aside = () => <div id="aside">Hello</div>;
+        const wrapper = render(
+            <TestContext>
+                <Show {...defaultShowProps} aside={<Aside />}>
+                    <div />
+                </Show>
+            </TestContext>
+        );
+        const aside = wrapper.find('#aside');
+        expect(aside.text()).toEqual('Hello');
+    });
+});

test-setup.js

@@ -6,39 +6,37 @@ enzyme.configure({ adapter: new Adapter() });
 
 /**
  * Mock PopperJS
- * 
+ *
  * When using mount(), material-ui calls Popper.js, which is not compatible with JSDom
  * And causes UnhandledPromiseRejectionWarning: TypeError: document.createRange is not a function
- * 
+ *
  * @see https://github.com/FezVrasta/popper.js/issues/478
  * */
-jest.mock(
-    'popper.js',
-    () =>
-        class Popper {
-            static placements = [
-                'auto',
-                'auto-end',
-                'auto-start',
-                'bottom',
-                'bottom-end',
-                'bottom-start',
-                'left',
-                'left-end',
-                'left-start',
-                'right',
-                'right-end',
-                'right-start',
-                'top',
-                'top-end',
-                'top-start',
-            ];
-
-            constructor() {
-                return {
-                    destroy: () => {},
-                    scheduleUpdate: () => {},
-                };
-            }
+jest.mock('popper.js', () => {
+    class Popper {
+        constructor() {
+            return {
+                destroy: () => {},
+                scheduleUpdate: () => {},
+            };
         }
-);
+    }
+    Popper.placements = [
+        'auto',
+        'auto-end',
+        'auto-start',
+        'bottom',
+        'bottom-end',
+        'bottom-start',
+        'left',
+        'left-end',
+        'left-start',
+        'right',
+        'right-end',
+        'right-start',
+        'top',
+        'top-end',
+        'top-start',
+    ];
+    return Popper;
+});