Fix SaveButton tests

marmelab · Sep 3, 2019 · e6c3890 · e6c3890
1 parent 2c2c588
commit e6c3890
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 37 deletions.
diff --git a/packages/ra-ui-materialui/src/button/SaveButton.js b/packages/ra-ui-materialui/src/button/SaveButton.js
@@ -38,7 +38,7 @@ const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-export function SaveButton({
+const SaveButton = ({
     className,
     classes: classesOverride = {},
     invalid,
@@ -52,7 +52,7 @@ export function SaveButton({
     onClick,
     handleSubmitWithRedirect,
     ...rest
-}) {
+}) => {
     const classes = useStyles({ classes: classesOverride });
     const notify = useNotify();
     const translate = useTranslate();
@@ -91,6 +91,7 @@ export function SaveButton({
     };
 
     const type = submitOnEnter ? 'submit' : 'button';
+    const displayedLabel = label && translate(label, { _: label });
     return (
         <Button
             className={classnames(classes.button, className)}
@@ -99,7 +100,7 @@ export function SaveButton({
             onMouseDown={handleMouseDown}
             onClick={handleClick}
             color={saving ? 'default' : 'primary'}
-            aria-label={label && translate(label, { _: label })}
+            aria-label={displayedLabel}
             {...sanitizeRestProps(rest)}
         >
             {saving && saving.redirect === redirect ? (
@@ -113,10 +114,10 @@ export function SaveButton({
                     className: classnames(classes.leftIcon, classes.icon),
                 })
             )}
-            {label && translate(label, { _: label })}
+            {displayedLabel}
         </Button>
     );
-}
+};
 
 SaveButton.propTypes = {
     className: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/button/SaveButton.spec.js b/packages/ra-ui-materialui/src/button/SaveButton.spec.js
@@ -1,75 +1,87 @@
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import React from 'react';
+import { TestContext } from 'ra-core';
 
-import { SaveButton } from './SaveButton';
-
-const translate = label => label;
+import SaveButton from './SaveButton';
 
 describe('<SaveButton />', () => {
     afterEach(cleanup);
 
     it('should render as submit type when submitOnEnter is true', () => {
         const { getByLabelText } = render(
-            <SaveButton submitOnEnter translate={translate} />
-        );
-        expect(getByLabelText('ra.action.save').getAttribute('type')).toEqual(
-            'submit'
+            <TestContext>
+                <SaveButton submitOnEnter />
+            </TestContext>
         );
+        expect(getByLabelText('Save').getAttribute('type')).toEqual('submit');
     });
 
     it('should render as button type when submitOnEnter is false', () => {
         const { getByLabelText } = render(
-            <SaveButton submitOnEnter={false} translate={translate} />
+            <TestContext>
+                <SaveButton submitOnEnter={false} />
+            </TestContext>
         );
 
-        expect(getByLabelText('ra.action.save').getAttribute('type')).toEqual(
-            'button'
-        );
+        expect(getByLabelText('Save').getAttribute('type')).toEqual('button');
     });
 
     it('should trigger submit action when clicked if no saving is in progress', () => {
         const onSubmit = jest.fn();
         const { getByLabelText } = render(
-            <SaveButton
-                translate={translate}
-                handleSubmitWithRedirect={onSubmit}
-                saving={false}
-            />
+            <TestContext>
+                <SaveButton
+                    handleSubmitWithRedirect={onSubmit}
+                    saving={false}
+                />
+            </TestContext>
         );
 
-        fireEvent.mouseDown(getByLabelText('ra.action.save'));
+        fireEvent.mouseDown(getByLabelText('Save'));
         expect(onSubmit).toHaveBeenCalled();
     });
 
     it('should not trigger submit action when clicked if saving is in progress', () => {
         const onSubmit = jest.fn();
 
         const { getByLabelText } = render(
-            <SaveButton
-                translate={translate}
-                handleSubmitWithRedirect={onSubmit}
-                saving
-            />
+            <TestContext>
+                <SaveButton handleSubmitWithRedirect={onSubmit} saving />
+            </TestContext>
         );
 
-        fireEvent.mouseDown(getByLabelText('ra.action.save'));
+        fireEvent.mouseDown(getByLabelText('Save'));
         expect(onSubmit).not.toHaveBeenCalled();
     });
+
     it('should show a notification if the form is not valid', () => {
         const onSubmit = jest.fn();
-        const showNotification = jest.fn();
+        let dispatchSpy;
 
         const { getByLabelText } = render(
-            <SaveButton
-                translate={translate}
-                handleSubmitWithRedirect={onSubmit}
-                invalid
-                showNotification={showNotification}
-            />
+            <TestContext>
+                {({ store }) => {
+                    dispatchSpy = jest.spyOn(store, 'dispatch');
+                    return (
+                        <SaveButton
+                            handleSubmitWithRedirect={onSubmit}
+                            invalid
+                        />
+                    );
+                }}
+            </TestContext>
         );
 
-        fireEvent.mouseDown(getByLabelText('ra.action.save'));
-        expect(showNotification).toHaveBeenCalled();
+        fireEvent.mouseDown(getByLabelText('Save'));
+        expect(dispatchSpy).toHaveBeenCalledWith({
+            payload: {
+                message: 'ra.message.invalid_form',
+                messageArgs: {},
+                type: 'warning',
+                undoable: false,
+            },
+            type: 'RA/SHOW_NOTIFICATION',
+        });
         expect(onSubmit).toHaveBeenCalled();
     });
 });