From ead8927b0252102e8091f46f08d44221d2309ba9 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sun, 24 Mar 2019 21:48:57 -0400 Subject: [PATCH] Updating App to use react-testing-library --- src/components/App/__snapshots__/test.js.snap | 432 ++++++++---------- src/components/App/test.js | 124 ++--- 2 files changed, 238 insertions(+), 318 deletions(-) diff --git a/src/components/App/__snapshots__/test.js.snap b/src/components/App/__snapshots__/test.js.snap index cd1a630..57e33f4 100644 --- a/src/components/App/__snapshots__/test.js.snap +++ b/src/components/App/__snapshots__/test.js.snap @@ -1,293 +1,255 @@ // 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/test.js b/src/components/App/test.js index 73255c9..6d66368 100644 --- a/src/components/App/test.js +++ b/src/components/App/test.js @@ -1,3 +1,12 @@ +jest.mock('components/Form', () => + require('__mocks__/component-mock')('components/Form')); +jest.mock('components/FormActions', () => + require('__mocks__/component-mock')('components/FormActions')); +jest.mock('components/Loader', () => + require('__mocks__/component-mock')('components/Loader')); +jest.mock('components/Message', () => + require('__mocks__/component-mock')('components/Message')); + import React from 'react'; import { render } from 'react-testing-library'; @@ -7,7 +16,7 @@ import { App } from 'components/App'; jest.mock('syntax/js', () => ({ parse: expr => `PARSED(${ expr })`, layout: parsed => `LAYOUT(${ parsed })`, - Render: () => '' + Render: require('__mocks__/component-mock').buildMock(function Render() {}) })); const syntaxList = [ @@ -17,116 +26,65 @@ const syntaxList = [ const commonProps = { syntaxList, t: mockT }; describe('App', () => { - test.skip('rendering', () => { - const component = shallow( + test('rendering', () => { + const { asFragment } = render( ); - expect(component).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); - test.skip('rendering an expression', async () => { - const component = shallow( + test('rendering an expression', async () => { + const { asFragment, rerender } = render( ); - expect(component).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); - component.setProps({ - expr: 'test expression' - }); + rerender( + + ); - expect(component).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); // Give a beat for module to load await new Promise(resolve => setTimeout(resolve)); - expect(component).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); - test.skip('rendering with an invalid syntax', async () => { + test('rendering with an invalid syntax', async () => { jest.spyOn(console, 'error').mockImplementation(() => {}); - const component = shallow( + const { asFragment, rerender } = render( ); - expect(component).toMatchSnapshot(); + expect(asFragment()).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.skip('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.skip('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.skip('retrying expression rendering', () => { - jest.spyOn(console, 'error').mockImplementation(() => {}); - - const component = shallow( + rerender( ); - const instance = component.instance(); - const event = { preventDefault: jest.fn() }; + expect(asFragment()).toMatchSnapshot(); - jest.spyOn(instance, 'handleRender'); + // Give a beat for module to load + await new Promise(resolve => setTimeout(resolve)); - instance.handleRetry(event); - - expect(event.preventDefault).toHaveBeenCalled(); - expect(instance.handleRender).toHaveBeenCalled(); + expect(asFragment()).toMatchSnapshot(); }); - test.skip('submitting an expression to render', () => { - const component = shallow( + test('removing rendered expression', async () => { + const { asFragment, rerender } = render( + + ); + + // Give a beat for module to load + await new Promise(resolve => setTimeout(resolve)); + + expect(asFragment()).toMatchSnapshot(); + + rerender( ); - 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'); + expect(asFragment()).toMatchSnapshot(); }); });