Adding tests for App component

jest/preprocess.js

@@ -1,5 +1,6 @@
 const babelOptions = {
-  presets: ['babel-preset-gatsby']
+  presets: ['babel-preset-gatsby'],
+  plugins: ['dynamic-import-node']
 };
 
 module.exports = require('babel-jest').createTransformer(babelOptions);

package.json

@@ -74,6 +74,7 @@
     "@ungap/url-search-params": "^0.1.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-preset-gatsby": "^0.1.6",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",

src/components/App/__snapshots__/test.js.snap

@@ -0,0 +1,289 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App removing rendered expression 1`] = `
+<Fragment>
+  <Form
+    expr="test expression"
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  >
+    <FormActions />
+  </Form>
+  <RenderJS
+    expr="test expression"
+    onRender={[Function]}
+  />
+</Fragment>
+`;
+
+exports[`App removing rendered expression 2`] = `
+<Fragment>
+  <Form
+    expr=""
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  />
+</Fragment>
+`;
+
+exports[`App rendering 1`] = `
+<Fragment>
+  <Form
+    expr=""
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  />
+</Fragment>
+`;
+
+exports[`App rendering an expression 1`] = `
+<Fragment>
+  <Form
+    expr=""
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  />
+</Fragment>
+`;
+
+exports[`App rendering an expression 2`] = `
+<Fragment>
+  <Form
+    expr="test expression"
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  />
+  <Loader />
+</Fragment>
+`;
+
+exports[`App rendering an expression 3`] = `
+<Fragment>
+  <Form
+    expr="test expression"
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  >
+    <FormActions />
+  </Form>
+  <RenderJS
+    expr="test expression"
+    onRender={[Function]}
+  />
+</Fragment>
+`;
+
+exports[`App rendering image details 1`] = `
+<Fragment>
+  <Form
+    expr="test expression"
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  >
+    <FormActions />
+  </Form>
+  <RenderJS
+    expr="test expression"
+    onRender={[Function]}
+  />
+</Fragment>
+`;
+
+exports[`App rendering image details 2`] = `
+<Fragment>
+  <Form
+    expr="test expression"
+    onSubmit={[Function]}
+    syntax="js"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  >
+    <FormActions
+      imageDetails={
+        Object {
+          "svg": "test svg content",
+        }
+      }
+    />
+  </Form>
+  <RenderJS
+    expr="test expression"
+    onRender={[Function]}
+  />
+</Fragment>
+`;
+
+exports[`App rendering with an invalid syntax 1`] = `
+<Fragment>
+  <Form
+    expr=""
+    onSubmit={[Function]}
+    syntax="invalid"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  />
+</Fragment>
+`;
+
+exports[`App rendering with an invalid syntax 2`] = `
+<Fragment>
+  <Form
+    expr="test expression"
+    onSubmit={[Function]}
+    syntax="invalid"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  />
+  <Loader />
+</Fragment>
+`;
+
+exports[`App rendering with an invalid syntax 3`] = `
+<Fragment>
+  <Form
+    expr="test expression"
+    onSubmit={[Function]}
+    syntax="invalid"
+    syntaxList={
+      Array [
+        Object {
+          "id": "testJS",
+          "name": "Testing JS",
+        },
+        Object {
+          "id": "other",
+          "name": "Other",
+        },
+      ]
+    }
+  />
+  <Message
+    heading="Render Failure"
+    type="error"
+  >
+    <p>
+      An error occurred while rendering the regular expression.
+    </p>
+    <a
+      href="#retry"
+      onClick={[Function]}
+    >
+      Retry
+    </a>
+  </Message>
+</Fragment>
+`;

src/components/App/index.js

@@ -10,8 +10,8 @@ import Message from 'components/Message';
 
 class App extends React.PureComponent {
   static propTypes = {
-    syntax: PropTypes.string,
+    syntax: PropTypes.string.isRequired,
-    expr: PropTypes.string,
+    expr: PropTypes.string.isRequired,
     permalinkUrl: PropTypes.string,
     syntaxList: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.string,
@@ -71,9 +71,6 @@ class App extends React.PureComponent {
         `syntax/${ syntax }`
       );
 
-      // HACK: Fake loading time
-      await new Promise(resolve => setTimeout(resolve, 2000));
-
       this.setState({
         loading: false,
         render: {
@@ -91,7 +88,8 @@ class App extends React.PureComponent {
         loading: false,
         loadingError: e
       });
-      throw e;
+      // eslint-disable-next-line no-console
+      console.error(e);
     }
   }
 

src/components/App/test.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import App from 'components/App';
+
+const syntaxList = [
+  { id: 'testJS', name: 'Testing JS' },
+  { id: 'other', name: 'Other' }
+];
+
+describe('App', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <App expr="" syntax="js" syntaxList={ syntaxList } />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering an expression', async () => {
+    const component = shallow(
+      <App expr="" syntax="js" syntaxList={ syntaxList } />
+    );
+    expect(component).toMatchSnapshot();
+
+    component.setProps({
+      expr: 'test expression'
+    });
+
+    expect(component).toMatchSnapshot();
+
+    // Give a beat for module to load
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with an invalid syntax', async () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const component = shallow(
+      <App expr="" syntax="invalid" syntaxList={ syntaxList } />
+    );
+    expect(component).toMatchSnapshot();
+
+    component.setProps({
+      expr: 'test expression'
+    });
+
+    expect(component).toMatchSnapshot();
+
+    // Give a beat for module to load
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('removing rendered expression', async () => {
+    const component = shallow(
+      <App expr="test expression" syntax="js" syntaxList={ syntaxList } />
+    );
+
+    // Give a beat for module to load
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(component).toMatchSnapshot();
+
+    component.setProps({
+      expr: ''
+    });
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering image details', async () => {
+    const component = shallow(
+      <App expr="test expression" syntax="js" syntaxList={ syntaxList } />
+    );
+
+    // Give a beat for module to load
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(component).toMatchSnapshot();
+
+    component.instance().handleSvg({
+      svg: 'test svg content'
+    });
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('retrying expression rendering', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const component = shallow(
+      <App expr="test expression" syntax="invalid" syntaxList={ syntaxList } />
+    );
+
+    const instance = component.instance();
+    const event = { preventDefault: jest.fn() };
+
+    jest.spyOn(instance, 'handleRender');
+
+    instance.handleRetry(event);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(instance.handleRender).toHaveBeenCalled();
+  });
+
+  test('submitting an expression to render', () => {
+    const component = shallow(
+      <App expr="" syntax="js" syntaxList={ syntaxList } />
+    );
+
+    const instance = component.instance();
+
+    instance.handleSubmit({ syntax: 'test', expr: '' });
+
+    expect(document.location.hash).toEqual('');
+
+    instance.handleSubmit({ syntax: 'test', expr: 'test expression' });
+
+    expect(document.location.hash).toEqual('#syntax=test&expr=test+expression');
+  });
+});

yarn.lock

@@ -1809,6 +1809,13 @@ babel-plugin-dynamic-import-node@^1.2.0:
   dependencies:
     babel-plugin-syntax-dynamic-import "^6.18.0"
 
+babel-plugin-dynamic-import-node@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.2.0.tgz#c0adfb07d95f4a4495e9aaac6ec386c4d7c2524e"
+  integrity sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA==
+  dependencies:
+    object.assign "^4.1.0"
+
 babel-plugin-istanbul@^4.1.6:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"