From eab20afe1c3a4450e227bf2052b2cbbb230ec3ac Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Tue, 15 Jan 2019 17:46:43 -0500 Subject: [PATCH] Adding tests for App component --- jest/preprocess.js | 3 +- package.json | 1 + src/components/App/__snapshots__/test.js.snap | 289 ++++++++++++++++++ src/components/App/index.js | 10 +- src/components/App/test.js | 124 ++++++++ yarn.lock | 7 + 6 files changed, 427 insertions(+), 7 deletions(-) create mode 100644 src/components/App/__snapshots__/test.js.snap create mode 100644 src/components/App/test.js diff --git a/jest/preprocess.js b/jest/preprocess.js index b44d90e..c88a46c 100644 --- a/jest/preprocess.js +++ b/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); diff --git a/package.json b/package.json index 66ceb33..b99de5c 100644 --- a/package.json +++ b/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", diff --git a/src/components/App/__snapshots__/test.js.snap b/src/components/App/__snapshots__/test.js.snap new file mode 100644 index 0000000..9a95d6c --- /dev/null +++ b/src/components/App/__snapshots__/test.js.snap @@ -0,0 +1,289 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`App removing rendered expression 1`] = ` + +
+ + + +
 +`; + +exports[`App removing rendered expression 2`] = ` + +
+ +`; + +exports[`App rendering 1`] = ` + + + +`; + +exports[`App rendering an expression 1`] = ` + + + +`; + +exports[`App rendering an expression 2`] = ` + + + + +`; + +exports[`App rendering an expression 3`] = ` + + + + + +
+`; + +exports[`App rendering image details 1`] = ` + +
+ + + +
 +`; + +exports[`App rendering image details 2`] = ` + +
+ + + +
 +`; + +exports[`App rendering with an invalid syntax 1`] = ` + +
+ +`; + +exports[`App rendering with an invalid syntax 2`] = ` + + + + +`; + +exports[`App rendering with an invalid syntax 3`] = ` + + + +

+ An error occurred while rendering the regular expression. +

+ + Retry + + + +`; diff --git a/src/components/App/index.js b/src/components/App/index.js index af5bec3..3b0405d 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -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); } } diff --git a/src/components/App/test.js b/src/components/App/test.js new file mode 100644 index 0000000..fa863df --- /dev/null +++ b/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( + + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering an expression', async () => { + const component = shallow( + + ); + 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( + + ); + 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( + + ); + + // 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( + + ); + + // 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( + + ); + + 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( + + ); + + 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'); + }); +}); diff --git a/yarn.lock b/yarn.lock index a590a3b..95bc7cb 100644 --- a/yarn.lock +++ b/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"