Add tests for EditorFallback

client/src/components/Draftail/EditorFallback/EditorFallback.js

@@ -138,6 +138,7 @@ class EditorFallback extends PureComponent {
 
 EditorFallback.propTypes = {
   children: PropTypes.node.isRequired,
+  field: PropTypes.object.isRequired,
 };
 
 export default EditorFallback;

client/src/components/Draftail/EditorFallback/EditorFallback.test.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import EditorFallback from './EditorFallback';
+
+describe('EditorFallback', () => {
+  it('works', () => {
+    expect(
+      shallow(
+        <EditorFallback field={document.createElement('input')}>
+          test
+        </EditorFallback>
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('#componentDidCatch', () => {
+    const field = document.createElement('input');
+    field.value = 'test value';
+
+    const wrapper = shallow(
+      <EditorFallback field={field}>test</EditorFallback>
+    );
+
+    field.value = 'new test value';
+
+    const error = new Error('test');
+    const info = { componentStack: 'test' };
+
+    wrapper.instance().componentDidCatch(error, info);
+
+    expect(wrapper.state('error')).toBe(error);
+    expect(wrapper.state('info')).toBe(info);
+    expect(field.value).toBe('test value');
+  });
+
+  describe('#error', () => {
+    it('works', () => {
+      const wrapper = shallow(
+        <EditorFallback field={document.createElement('input')}>
+          test
+        </EditorFallback>
+      );
+
+      wrapper.setState({
+        error: new Error('test'),
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('reload', () => {
+      const wrapper = shallow(
+        <EditorFallback field={document.createElement('input')}>
+          test
+        </EditorFallback>
+      );
+
+      wrapper
+        .setState({
+          error: new Error('test'),
+        })
+        .find('button')
+        .first()
+        .simulate('click');
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('reload page', () => {
+      window.location.reload = jest.fn();
+
+      const wrapper = shallow(
+        <EditorFallback field={document.createElement('input')}>
+          test
+        </EditorFallback>
+      );
+
+      wrapper
+        .setState({
+          error: new Error('test'),
+          reloads: 3,
+        })
+        .find('button')
+        .first()
+        .simulate('click');
+
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+
+    it('#showError', () => {
+      const wrapper = shallow(
+        <EditorFallback field={document.createElement('input')}>
+          test
+        </EditorFallback>
+      );
+
+      const error = new Error('test');
+
+      error.stack = 'test stack';
+
+      wrapper
+        .setState({
+          error: error,
+          info: { componentStack: 'test' },
+        })
+        .find('button')
+        .last()
+        .simulate('click');
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('#showContent', () => {
+      const field = document.createElement('input');
+      field.rawContentState = {
+        entityMap: {},
+        blocks: [
+          {
+            key: 'a',
+            text: 'test',
+          },
+        ],
+      };
+
+      const wrapper = shallow(
+        <EditorFallback field={field}>test</EditorFallback>
+      );
+
+      const error = new Error('test');
+      error.stack = 'test stack';
+
+      wrapper
+        .setState({
+          error: error,
+          info: { componentStack: 'test' },
+        })
+        .find('button')
+        .slice(2, 3)
+        .simulate('click');
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

client/src/components/Draftail/EditorFallback/__snapshots__/EditorFallback.test.js.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditorFallback #error #showContent 1`] = `
+<div
+  className="Draftail-Editor"
+>
+  <div
+    className="Draftail-Toolbar"
+  >
+    <button
+      className="Draftail-ToolbarButton"
+      onClick={[Function]}
+      type="button"
+    >
+      Reload the editor
+    </button>
+    <button
+      className="Draftail-ToolbarButton"
+      onClick={[Function]}
+      type="button"
+    >
+      Show error
+    </button>
+    <button
+      className="Draftail-ToolbarButton"
+      onClick={[Function]}
+      type="button"
+    >
+      Show latest content
+    </button>
+  </div>
+  <div
+    className="DraftEditor-root"
+  >
+    <div
+      className="public-DraftEditorPlaceholder-inner"
+    >
+      The editor just crashed. Content has been reset to the last saved version.
+    </div>
+  </div>
+  <textarea
+    className="EditorFallback__textarea"
+    readOnly={true}
+    value="test"
+  />
+</div>
+`;
+
+exports[`EditorFallback #error #showError 1`] = `
+<div
+  className="Draftail-Editor"
+>
+  <div
+    className="Draftail-Toolbar"
+  >
+    <button
+      className="Draftail-ToolbarButton"
+      onClick={[Function]}
+      type="button"
+    >
+      Reload the editor
+    </button>
+    <button
+      className="Draftail-ToolbarButton"
+      onClick={[Function]}
+      type="button"
+    >
+      Show error
+    </button>
+  </div>
+  <div
+    className="DraftEditor-root"
+  >
+    <div
+      className="public-DraftEditorPlaceholder-inner"
+    >
+      The editor just crashed. Content has been reset to the last saved version.
+    </div>
+  </div>
+  <pre
+    className="help-block help-critical"
+  >
+    <code
+      className="EditorFallback__error"
+    >
+      test stack
+test
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`EditorFallback #error reload 1`] = `"test"`;
+
+exports[`EditorFallback #error works 1`] = `
+<div
+  className="Draftail-Editor"
+>
+  <div
+    className="Draftail-Toolbar"
+  >
+    <button
+      className="Draftail-ToolbarButton"
+      onClick={[Function]}
+      type="button"
+    >
+      Reload the editor
+    </button>
+    <button
+      className="Draftail-ToolbarButton"
+      onClick={[Function]}
+      type="button"
+    >
+      Show error
+    </button>
+  </div>
+  <div
+    className="DraftEditor-root"
+  >
+    <div
+      className="public-DraftEditorPlaceholder-inner"
+    >
+      The editor just crashed. Content has been reset to the last saved version.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditorFallback works 1`] = `"test"`;