Adding tests for App component

2019-01-15 17:46:43 -05:00
parent 7261b0b526
commit eab20afe1c
6 changed files with 427 additions and 7 deletions
@@ -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>
+`;
@@ -10,8 +10,8 @@ import Message from 'components/Message';

 class App extends React.PureComponent {
  static propTypes = {
-    syntax: PropTypes.string,
-    expr: PropTypes.string,
+    syntax: PropTypes.string.isRequired,
+    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);
    }
  }

@@ -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');
+  });
+});