feat(popups): Add ReplyField component (#444)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · Apr 21, 2020 · f3b490c · f3b490c
1 parent f6f4580
commit f3b490c
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 26 deletions.
diff --git a/src/components/Popups/PopupReply.tsx b/src/components/Popups/PopupReply.tsx
@@ -5,6 +5,7 @@ import { KEYS } from 'box-ui-elements/es/constants';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import PopupBase from './PopupBase';
+import ReplyField from './ReplyField';
 import './PopupReply.scss';
 
 export type Props = {
@@ -33,7 +34,7 @@ export default function PopupReply({ defaultValue, onCancel, onChange, onSubmit,
         setText(event.target.value);
         onChange(event.target.value);
     };
-    const handleCreate = (event: React.MouseEvent): void => {
+    const handleSubmit = (event: React.FormEvent): void => {
         handleEvent(event);
         onSubmit(text);
     };
@@ -59,24 +60,26 @@ export default function PopupReply({ defaultValue, onCancel, onChange, onSubmit,
 
     return (
         <PopupBase onKeyDown={handleKeyDown} options={{ onFirstUpdate: handleFirstUpdate }} {...rest}>
-            <div className="ba-Popup-main">
-                <textarea
-                    ref={textareaRef}
-                    className="ba-Popup-text"
-                    data-testid="ba-Popup-text"
-                    defaultValue={defaultValue}
-                    onChange={handleChange}
-                    onClick={handleEvent}
-                />
-            </div>
-            <div className="ba-Popup-footer">
-                <Button data-testid="ba-Popup-cancel" onClick={handleCancel} type="button">
-                    <FormattedMessage {...messages.buttonCancel} />
-                </Button>
-                <PrimaryButton data-testid="ba-Popup-submit" onClick={handleCreate} type="submit">
-                    <FormattedMessage {...messages.buttonPost} />
-                </PrimaryButton>
-            </div>
+            <form className="ba-Popup-form" data-testid="ba-Popup-form" onSubmit={handleSubmit}>
+                <div className="ba-Popup-main">
+                    <ReplyField
+                        ref={textareaRef}
+                        className="ba-Popup-text"
+                        data-testid="ba-Popup-text"
+                        defaultValue={defaultValue}
+                        onChange={handleChange}
+                        onClick={handleEvent}
+                    />
+                </div>
+                <div className="ba-Popup-footer">
+                    <Button data-testid="ba-Popup-cancel" onClick={handleCancel} type="button">
+                        <FormattedMessage {...messages.buttonCancel} />
+                    </Button>
+                    <PrimaryButton data-testid="ba-Popup-submit" type="submit">
+                        <FormattedMessage {...messages.buttonPost} />
+                    </PrimaryButton>
+                </div>
+            </form>
         </PopupBase>
     );
 }
diff --git a/src/components/Popups/ReplyField/ReplyField.tsx b/src/components/Popups/ReplyField/ReplyField.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+export type Props = {
+    className?: string;
+    defaultValue?: string;
+    onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onClick: (event: React.SyntheticEvent) => void;
+};
+
+const ReplyField = (props: Props, ref: React.Ref<HTMLTextAreaElement>): JSX.Element => {
+    const { className, ...rest } = props;
+
+    return <textarea ref={ref} className={classnames('ba-TextArea', className)} {...rest} />;
+};
+
+export default React.forwardRef(ReplyField);
diff --git a/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx b/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import ReplyField, { Props } from '../ReplyField';
+
+describe('components/Popups/ReplyField', () => {
+    const defaults: Props = {
+        className: 'ba-Popup-text',
+        defaultValue: '',
+        onChange: jest.fn(),
+        onClick: jest.fn(),
+    };
+
+    const getWrapper = (props = {}): ShallowWrapper => shallow(<ReplyField {...defaults} {...props} />);
+
+    describe('event handlers', () => {
+        test('should call onChange event', () => {
+            const wrapper = getWrapper();
+            const textarea = wrapper.find('textarea');
+
+            textarea.simulate('change', 'test');
+            textarea.simulate('click', 'test');
+
+            expect(defaults.onChange).toHaveBeenCalledWith('test');
+            expect(defaults.onClick).toHaveBeenCalledWith('test');
+        });
+    });
+
+    describe('render()', () => {
+        test('should render the textarea with right props', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.prop('className')).toBe('ba-TextArea ba-Popup-text');
+        });
+    });
+});
diff --git a/src/components/Popups/ReplyField/index.ts b/src/components/Popups/ReplyField/index.ts
@@ -0,0 +1 @@
+export { default } from './ReplyField';
diff --git a/src/components/Popups/__tests__/PopupReply-test.tsx b/src/components/Popups/__tests__/PopupReply-test.tsx
@@ -13,7 +13,7 @@ type PropsIndex = {
     [key: string]: Function | HTMLElement;
 };
 
-describe('PopupReply', () => {
+describe('components/Popups/PopupReply', () => {
     const defaults: Props & PropsIndex = {
         onCancel: jest.fn(),
         onChange: jest.fn(),
@@ -37,14 +37,14 @@ describe('PopupReply', () => {
 
     describe('event handlers', () => {
         test.each`
-            testId               | callback
-            ${'ba-Popup-cancel'} | ${'onCancel'}
-            ${'ba-Popup-submit'} | ${'onSubmit'}
-        `('should cancel the $testId button click events', ({ callback, testId }) => {
+            testId               | event       | callback
+            ${'ba-Popup-cancel'} | ${'click'}  | ${'onCancel'}
+            ${'ba-Popup-form'}   | ${'submit'} | ${'onSubmit'}
+        `('should cancel the $testId button $event event', ({ callback, event, testId }) => {
             const wrapper = getWrapper();
             const button = wrapper.find(`[data-testid="${testId}"]`);
 
-            button.simulate('click', mockEvent);
+            button.simulate(event, mockEvent);
 
             expect(mockEvent.nativeEvent.stopImmediatePropagation).toHaveBeenCalled();
             expect(mockEvent.stopPropagation).toHaveBeenCalled();
@@ -68,7 +68,7 @@ describe('PopupReply', () => {
 
         test('should handle the textarea onChange event', () => {
             const wrapper = getWrapper();
-            const textarea = wrapper.find(`textarea[data-testid="ba-Popup-text"]`);
+            const textarea = wrapper.find(`[data-testid="ba-Popup-text"]`);
 
             textarea.simulate('change', { target: { value: 'test' } });