From 6ff91456036e824effbe9f0453c970af41744b82 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sat, 17 Feb 2018 13:04:19 -0500 Subject: [PATCH] Adding tests for SVG components Jest/enzyme/jsdom is kicking out some nastly looking messages because it doesn't recognize various SVG elements, but they appear to be harmless. --- src/__mocks__/SVGElement.js | 15 ++ src/components/SVG/Box.test.js | 53 +++++ src/components/SVG/HorizontalLayout.js | 4 - src/components/SVG/HorizontalLayout.test.js | 34 +++ src/components/SVG/Image.test.js | 19 ++ src/components/SVG/Loop.test.js | 86 +++++++ src/components/SVG/Pin.test.js | 15 ++ src/components/SVG/Text.test.js | 36 +++ src/components/SVG/VerticalLayout.js | 4 - src/components/SVG/VerticalLayout.test.js | 34 +++ .../SVG/__snapshots__/Box.test.js.snap | 108 +++++++++ .../HorizontalLayout.test.js.snap | 139 ++++++++++++ .../SVG/__snapshots__/Image.test.js.snap | 53 +++++ .../SVG/__snapshots__/Loop.test.js.snap | 213 ++++++++++++++++++ .../SVG/__snapshots__/Pin.test.js.snap | 19 ++ .../SVG/__snapshots__/Text.test.js.snap | 55 +++++ .../__snapshots__/VerticalLayout.test.js.snap | 139 ++++++++++++ 17 files changed, 1018 insertions(+), 8 deletions(-) create mode 100644 src/__mocks__/SVGElement.js create mode 100644 src/components/SVG/Box.test.js create mode 100644 src/components/SVG/HorizontalLayout.test.js create mode 100644 src/components/SVG/Image.test.js create mode 100644 src/components/SVG/Loop.test.js create mode 100644 src/components/SVG/Pin.test.js create mode 100644 src/components/SVG/Text.test.js create mode 100644 src/components/SVG/VerticalLayout.test.js create mode 100644 src/components/SVG/__snapshots__/Box.test.js.snap create mode 100644 src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap create mode 100644 src/components/SVG/__snapshots__/Image.test.js.snap create mode 100644 src/components/SVG/__snapshots__/Loop.test.js.snap create mode 100644 src/components/SVG/__snapshots__/Pin.test.js.snap create mode 100644 src/components/SVG/__snapshots__/Text.test.js.snap create mode 100644 src/components/SVG/__snapshots__/VerticalLayout.test.js.snap diff --git a/src/__mocks__/SVGElement.js b/src/__mocks__/SVGElement.js new file mode 100644 index 0000000..9dc3596 --- /dev/null +++ b/src/__mocks__/SVGElement.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import Base from 'components/SVG/Base'; + +class SVGElement extends Base { + reflow() { + return this.setBBox(this.props.bbox); + } + + render() { + return Mock content; + } +} + +export default SVGElement; diff --git a/src/components/SVG/Box.test.js b/src/components/SVG/Box.test.js new file mode 100644 index 0000000..324a44f --- /dev/null +++ b/src/components/SVG/Box.test.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import Box from './Box'; + +import SVGElement from '__mocks__/SVGElement'; + +const originalGetBBox = window.Element.prototype.getBBox; + +describe('Box', () => { + beforeEach(() => { + window.Element.prototype.getBBox = function() { + return { width: 100, height: 10 }; + }; + }); + + afterEach(() => { + window.Element.prototype.getBBox = originalGetBBox; + }); + + test('rendering', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with content anchors', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with label', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/SVG/HorizontalLayout.js b/src/components/SVG/HorizontalLayout.js index a001bba..f0753a5 100644 --- a/src/components/SVG/HorizontalLayout.js +++ b/src/components/SVG/HorizontalLayout.js @@ -46,10 +46,6 @@ class HorizontalLayout extends Base { } reflow() { - if (this.children.length === 0) { - return; - } - const { spacing, withConnectors } = this.props; const childBoxes = this.children.map(child => child.getBBox()); diff --git a/src/components/SVG/HorizontalLayout.test.js b/src/components/SVG/HorizontalLayout.test.js new file mode 100644 index 0000000..c9b25f6 --- /dev/null +++ b/src/components/SVG/HorizontalLayout.test.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import HorizontalLayout from './HorizontalLayout'; + +import SVGElement from '__mocks__/SVGElement'; + +describe('HorizontalLayout', () => { + test('rendering', async () => { + const component = mount( + + + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with connectors', async () => { + const component = mount( + + + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/SVG/Image.test.js b/src/components/SVG/Image.test.js new file mode 100644 index 0000000..2bc95c9 --- /dev/null +++ b/src/components/SVG/Image.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import Image from './Image'; + +import SVGElement from '__mocks__/SVGElement'; + +describe('Image', () => { + test('rendering', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/SVG/Loop.test.js b/src/components/SVG/Loop.test.js new file mode 100644 index 0000000..fb39b5b --- /dev/null +++ b/src/components/SVG/Loop.test.js @@ -0,0 +1,86 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import Loop from './Loop'; + +import SVGElement from '__mocks__/SVGElement'; + +const originalGetBBox = window.Element.prototype.getBBox; + +describe('Loop', () => { + beforeEach(() => { + window.Element.prototype.getBBox = function() { + return { width: 100, height: 10 }; + }; + }); + + afterEach(() => { + window.Element.prototype.getBBox = originalGetBBox; + }); + + test('rendering', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with skip path', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with repeat path', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with repeat path and label', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with skip and repeat paths', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with greedy skip and repeat paths', async () => { + const component = mount( + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/SVG/Pin.test.js b/src/components/SVG/Pin.test.js new file mode 100644 index 0000000..ed6840f --- /dev/null +++ b/src/components/SVG/Pin.test.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import Pin from './Pin'; + +describe('Pin', () => { + test('rendering', async () => { + const component = mount( + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/SVG/Text.test.js b/src/components/SVG/Text.test.js new file mode 100644 index 0000000..c1706b4 --- /dev/null +++ b/src/components/SVG/Text.test.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import Text from './Text'; + +const originalGetBBox = window.Element.prototype.getBBox; + +describe('Text', () => { + beforeEach(() => { + window.Element.prototype.getBBox = function() { + return { x: 10, y: 10 }; + }; + }); + + afterEach(() => { + window.Element.prototype.getBBox = originalGetBBox; + }); + + test('rendering', async () => { + const component = mount( + Test content + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with quotes', async () => { + const component = mount( + Test content + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/SVG/VerticalLayout.js b/src/components/SVG/VerticalLayout.js index 3150afa..6a9eb62 100644 --- a/src/components/SVG/VerticalLayout.js +++ b/src/components/SVG/VerticalLayout.js @@ -84,10 +84,6 @@ class VerticalLayout extends Base { } reflow() { - if (this.children.length === 0) { - return Promise.resolve(); - } - const { spacing, withConnectors } = this.props; const childBoxes = this.children.map(child => child.getBBox()); diff --git a/src/components/SVG/VerticalLayout.test.js b/src/components/SVG/VerticalLayout.test.js new file mode 100644 index 0000000..24d69bb --- /dev/null +++ b/src/components/SVG/VerticalLayout.test.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import VerticalLayout from './VerticalLayout'; + +import SVGElement from '__mocks__/SVGElement'; + +describe('VerticalLayout', () => { + test('rendering', async () => { + const component = mount( + + + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); + + test('rendering with connectors', async () => { + const component = mount( + + + + + + ); + await component.instance().doReflow(); + component.update(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/SVG/__snapshots__/Box.test.js.snap b/src/components/SVG/__snapshots__/Box.test.js.snap new file mode 100644 index 0000000..b2b7cc8 --- /dev/null +++ b/src/components/SVG/__snapshots__/Box.test.js.snap @@ -0,0 +1,108 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Box rendering 1`] = ` + + + + + + Mock content + + + + +`; + +exports[`Box rendering with content anchors 1`] = ` + + + + + + Mock content + + + + +`; + +exports[`Box rendering with label 1`] = ` + + + + Test label + + + + + Mock content + + + + +`; diff --git a/src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap b/src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap new file mode 100644 index 0000000..6575360 --- /dev/null +++ b/src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap @@ -0,0 +1,139 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HorizontalLayout rendering 1`] = ` + + + + + + Mock content + + + + + + + Mock content + + + + + + + Mock content + + + + +`; + +exports[`HorizontalLayout rendering with connectors 1`] = ` + + + + + + Mock content + + + + + + + Mock content + + + + + + + Mock content + + + + +`; diff --git a/src/components/SVG/__snapshots__/Image.test.js.snap b/src/components/SVG/__snapshots__/Image.test.js.snap new file mode 100644 index 0000000..2967ea1 --- /dev/null +++ b/src/components/SVG/__snapshots__/Image.test.js.snap @@ -0,0 +1,53 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Image rendering 1`] = ` + + + + + + + + + + +", + } + } + /> + + + + Mock content + + + + + +`; diff --git a/src/components/SVG/__snapshots__/Loop.test.js.snap b/src/components/SVG/__snapshots__/Loop.test.js.snap new file mode 100644 index 0000000..2550527 --- /dev/null +++ b/src/components/SVG/__snapshots__/Loop.test.js.snap @@ -0,0 +1,213 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Loop rendering 1`] = ` + + + + + + Mock content + + + + +`; + +exports[`Loop rendering with greedy skip and repeat paths 1`] = ` + + + + + + Mock content + + + + +`; + +exports[`Loop rendering with repeat path 1`] = ` + + + + + + Mock content + + + + +`; + +exports[`Loop rendering with repeat path and label 1`] = ` + + + + Test label + + + + + Mock content + + + + +`; + +exports[`Loop rendering with skip and repeat paths 1`] = ` + + + + + + Mock content + + + + +`; + +exports[`Loop rendering with skip path 1`] = ` + + + + + + Mock content + + + + +`; diff --git a/src/components/SVG/__snapshots__/Pin.test.js.snap b/src/components/SVG/__snapshots__/Pin.test.js.snap new file mode 100644 index 0000000..df6119e --- /dev/null +++ b/src/components/SVG/__snapshots__/Pin.test.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Pin rendering 1`] = ` + + + +`; diff --git a/src/components/SVG/__snapshots__/Text.test.js.snap b/src/components/SVG/__snapshots__/Text.test.js.snap new file mode 100644 index 0000000..32b25ef --- /dev/null +++ b/src/components/SVG/__snapshots__/Text.test.js.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Text rendering 1`] = ` + + + Test content + + +`; + +exports[`Text rendering with quotes 1`] = ` + + + + “ + + + Test content + + + ” + + + +`; diff --git a/src/components/SVG/__snapshots__/VerticalLayout.test.js.snap b/src/components/SVG/__snapshots__/VerticalLayout.test.js.snap new file mode 100644 index 0000000..b4efb8b --- /dev/null +++ b/src/components/SVG/__snapshots__/VerticalLayout.test.js.snap @@ -0,0 +1,139 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VerticalLayout rendering 1`] = ` + + + + + + Mock content + + + + + + + Mock content + + + + + + + Mock content + + + + +`; + +exports[`VerticalLayout rendering with connectors 1`] = ` + + + + + + Mock content + + + + + + + Mock content + + + + + + + Mock content + + + + +`;