support controlled and uncontrolled behavior

Author: solomontang

src/markdown/src/components/MarkdownEditor.js

@@ -15,31 +15,42 @@ const StyledTabPanel = styled(TabPanel)`
 `;
 
 type Props = {
+  defaultValue :?string;
   forwardedRef :any;
   value :string;
   view :'edit' | 'preview';
   ...TextFieldProps;
 };
 
 const MarkdownEditor = ({
+  defaultValue,
   forwardedRef,
+  onChange,
+  value,
   view = 'edit',
-  value = '',
   ...rest
 } :Props) => {
   const [tab, setTab] = useState(view);
+  const [content, setContent] = useState(value || defaultValue);
 
-  const handleChange = (event, newValue) => {
+  const handleChangeTab = (event, newValue) => {
     setTab(newValue);
   };
 
+  const handleChangeContent = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+    setContent(e.target.value);
+  };
+
   return (
     <div>
       <TabContext value={tab}>
         <TabList
             aria-label="markdown editor tabs"
             indicatorColor="primary"
-            onChange={handleChange}
+            onChange={handleChangeTab}
             textColor="primary"
             value={tab}>
           <Tab label="Edit" value="edit" />
@@ -49,12 +60,13 @@ const MarkdownEditor = ({
           <TextArea
               rows={4}
               ref={forwardedRef}
-              value={value}
+              onChange={handleChangeContent}
+              value={content}
               /* eslint-disable-next-line react/jsx-props-no-spreading */
               {...rest} />
         </StyledTabPanel>
         <StyledTabPanel value="preview">
-          <MarkdownPreview>{value}</MarkdownPreview>
+          <MarkdownPreview>{content}</MarkdownPreview>
         </StyledTabPanel>
       </TabContext>
     </div>

src/markdown/src/components/MarkdownEditor.test.js

@@ -1,13 +1,54 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
 import MarkdownEditor from './MarkdownEditor';
+import MarkdownPreview from './MarkdownPreview';
+
+import { TextArea } from '../../../text';
 
 describe('MarkdownEditor', () => {
 
-  test('render matches snapshot', () => {
-    const wrapper = shallow(<MarkdownEditor />);
-    expect(toJson(wrapper)).toMatchSnapshot();
+  test('default view is edit', () => {
+    const wrapper = mount(<MarkdownEditor />);
+
+    expect(wrapper.find(TextArea)).toHaveLength(1);
+  });
+
+  test('preview view renders MarkdownPreview', () => {
+    const wrapper = mount(<MarkdownEditor view="preview" />);
+
+    expect(wrapper.find(MarkdownPreview)).toHaveLength(1);
+  });
+
+  test('clicking preview tab shows MarkdownPreview', () => {
+    const wrapper = mount(<MarkdownEditor />);
+
+    const previewTab = wrapper.find('button').last();
+    previewTab.simulate('click');
+
+    wrapper.update();
+
+    expect(wrapper.find(TextArea)).toHaveLength(0);
+    expect(wrapper.find(MarkdownPreview)).toHaveLength(1);
+  });
+
+  test('clicking edit tab shows MarkdownPreview', () => {
+    const wrapper = mount(<MarkdownEditor view="edit" />);
+
+    const previewTab = wrapper.find('button').first();
+    previewTab.simulate('click');
+
+    wrapper.update();
+
+    expect(wrapper.find(TextArea)).toHaveLength(1);
+    expect(wrapper.find(MarkdownPreview)).toHaveLength(0);
+  });
+
+  test('should call onChange if provided', () => {
+    const mockOnChange = jest.fn();
+    const wrapper = mount(<MarkdownEditor onChange={mockOnChange} />);
+
+    wrapper.find('textarea').simulate('change', { target: { value: 'test' } });
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
   });
 
 });

src/markdown/src/components/MarkdownPreview.test.js

@@ -0,0 +1,27 @@
+import ReactMarkdown from 'react-markdown';
+import toJson from 'enzyme-to-json';
+import { shallow } from 'enzyme';
+
+import MarkdownPreview from './MarkdownPreview';
+import { MarkdownWrapper } from './styled/MarkdownWrapper';
+
+describe('MarkdownPreview', () => {
+
+  test('render matches snapshot', () => {
+    const wrapper = shallow(<MarkdownPreview />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('should render MarkdownWrapper', () => {
+    const wrapper = shallow(<MarkdownPreview />);
+
+    expect(wrapper.find(MarkdownWrapper)).toHaveLength(1);
+  });
+
+  test('should render ReactMarkdown', () => {
+    const wrapper = shallow(<MarkdownPreview />);
+
+    expect(wrapper.find(ReactMarkdown)).toHaveLength(1);
+  });
+
+});

src/markdown/src/components/__snapshots__/MarkdownPreview.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MarkdownPreview render matches snapshot 1`] = `
+<styled.div>
+  <ReactMarkdown
+    rehypePlugins={
+      Array [
+        [Function],
+      ]
+    }
+    remarkPlugins={
+      Array [
+        [Function],
+      ]
+    }
+    transformLinkUri={[Function]}
+  />
+</styled.div>
+`;

src/markdown/stories/markdownEditor.stories.js

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 
+import { action } from '@storybook/addon-actions';
+
 import { MARKDOWN_DEMO } from './constants';
 
 import MarkdownEditor from '../src/components/MarkdownEditor';
@@ -9,11 +11,23 @@ export default {
   title: 'MarkdownEditor',
 };
 
-export const Default = () => {
-  const [text, setText] = useState(MARKDOWN_DEMO);
+export const Uncontrolled = () => (
+  <Card>
+    <CardSegment>
+      <MarkdownEditor defaultValue={MARKDOWN_DEMO} />
+    </CardSegment>
+  </Card>
+);
 
+Uncontrolled.story = {
+  name: 'Uncontrolled',
+};
+
+export const Controlled = () => {
+  const [text, setText] = useState(MARKDOWN_DEMO);
   const handleChange = (e) => {
-    setText(e.currentTarget.value);
+    setText(e.target.value);
+    action('onChange')(e);
   };
 
   return (
@@ -25,6 +39,6 @@ export const Default = () => {
   );
 };
 
-Default.story = {
-  name: 'default',
+Controlled.story = {
+  name: 'Controlled',
 };