From 59ebe433b64ea34ac006bcd765dfb818d6abd51d Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Fri, 1 Feb 2019 18:06:29 -0500 Subject: [PATCH] Tests for Box rendering component --- src/rendering/Box/__snapshots__/test.js.snap | 329 +++++++++++++++++++ src/rendering/Box/test.js | 185 +++++++++++ 2 files changed, 514 insertions(+) create mode 100644 src/rendering/Box/__snapshots__/test.js.snap create mode 100644 src/rendering/Box/test.js diff --git a/src/rendering/Box/__snapshots__/test.js.snap b/src/rendering/Box/__snapshots__/test.js.snap new file mode 100644 index 0000000..b20eee2 --- /dev/null +++ b/src/rendering/Box/__snapshots__/test.js.snap @@ -0,0 +1,329 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Box layout 1`] = ` +Object { + "box": Object { + "axisX1": 0, + "axisX2": 110, + "axisY": 30, + "height": 60, + "width": 110, + }, + "children": Array [ + Object { + "box": Object { + "axisX1": 5, + "axisX2": 95, + "axisY": 10, + "height": 50, + "width": 100, + }, + }, + ], + "props": Object { + "contentTransform": "translate(5 5)", + "height": 60, + "labelTransform": "translate(0 NaN)", + "rectTransform": "translate(0 0)", + "width": 110, + }, +} +`; + +exports[`Box layout using axis anchors from child 1`] = ` +Object { + "box": Object { + "axisX1": 10, + "axisX2": 100, + "axisY": 15, + "height": 60, + "width": 110, + }, + "children": Array [ + Object { + "box": Object { + "axisX1": 5, + "axisX2": 95, + "axisY": 10, + "height": 50, + "width": 100, + }, + }, + ], + "props": Object { + "contentTransform": "translate(5 5)", + "height": 60, + "labelTransform": "translate(0 NaN)", + "rectTransform": "translate(0 0)", + "useAnchors": true, + "width": 110, + }, +} +`; + +exports[`Box layout with a label and using axis anchors from child 1`] = ` +Object { + "box": Object { + "axisX1": 55, + "axisX2": 145, + "axisY": 25, + "height": 70, + "width": 200, + }, + "children": Array [ + Object { + "box": Object { + "axisX1": 5, + "axisX2": 95, + "axisY": 10, + "height": 50, + "width": 100, + }, + }, + ], + "props": Object { + "contentTransform": "translate(50 15)", + "height": 60, + "label": "Test label", + "labelTransform": "translate(0 10)", + "rectTransform": "translate(0 10)", + "useAnchors": true, + "width": 200, + }, +} +`; + +exports[`Box layout with a label that is narrower than the box 1`] = ` +Object { + "box": Object { + "axisX1": 0, + "axisX2": 110, + "axisY": 40, + "height": 70, + "width": 110, + }, + "children": Array [ + Object { + "box": Object { + "axisX1": 5, + "axisX2": 95, + "axisY": 10, + "height": 50, + "width": 100, + }, + }, + ], + "props": Object { + "contentTransform": "translate(5 15)", + "height": 60, + "label": "Test label", + "labelTransform": "translate(0 10)", + "rectTransform": "translate(0 10)", + "width": 110, + }, +} +`; + +exports[`Box layout with a label that is wider than the box 1`] = ` +Object { + "box": Object { + "axisX1": 0, + "axisX2": 200, + "axisY": 40, + "height": 70, + "width": 200, + }, + "children": Array [ + Object { + "box": Object { + "axisX1": 5, + "axisX2": 95, + "axisY": 10, + "height": 50, + "width": 100, + }, + }, + ], + "props": Object { + "contentTransform": "translate(50 15)", + "height": 60, + "label": "Test label", + "labelTransform": "translate(0 10)", + "rectTransform": "translate(0 10)", + "width": 200, + }, +} +`; + +exports[`Box rendering 1`] = ` + + + + Example + + +`; + +exports[`Box rendering with a corner radius 1`] = ` + + + + Example + + +`; + +exports[`Box rendering with a label 1`] = ` + + + + Test box + + + Example + + +`; + +exports[`Box rendering with props from layout 1`] = ` + + + + Test box + + + Example + + +`; + +exports[`Box themes rendering a "anchor" Box 1`] = ` + + + + Example + + +`; + +exports[`Box themes rendering a "capture" Box 1`] = ` + + + + Example + + +`; + +exports[`Box themes rendering a "charClass" Box 1`] = ` + + + + Example + + +`; + +exports[`Box themes rendering a "escape" Box 1`] = ` + + + + Example + + +`; + +exports[`Box themes rendering a "literal" Box 1`] = ` + + + + Example + + +`; diff --git a/src/rendering/Box/test.js b/src/rendering/Box/test.js new file mode 100644 index 0000000..2fc884e --- /dev/null +++ b/src/rendering/Box/test.js @@ -0,0 +1,185 @@ +jest.mock('rendering/getbbox', () => jest.fn()); + +import React from 'react'; +import { shallow } from 'enzyme'; + +import getBBox from 'rendering/getbbox'; + +import Box, { layout } from 'rendering/Box'; + +describe('Box', () => { + test('rendering', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering with a corner radius', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering with a label', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering with props from layout', () => { + const props = { + theme: 'literal', + label: 'Test box', + width: 100, + height: 50, + rectTransform: 'RECT TRANSFORM', + labelTransform: 'LABEL TRANSFORM', + contentTransform: 'CONTENT TRANSFORM' + }; + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + describe('themes', () => { + test('rendering a "literal" Box', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering a "escape" Box', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering a "charClass" Box', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering a "capture" Box', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + + test('rendering a "anchor" Box', () => { + const component = shallow( + Example + ); + expect(component).toMatchSnapshot(); + }); + }); + + test('layout', () => { + const processed = layout({ + children: [ + { + box: { + width: 100, + height: 50, + axisY: 10, + axisX1: 5, + axisX2: 95 + } + } + ] + }); + expect(processed).toMatchSnapshot(); + }); + + test('layout using axis anchors from child', () => { + const processed = layout({ + props: { + useAnchors: true + }, + children: [ + { + box: { + width: 100, + height: 50, + axisY: 10, + axisX1: 5, + axisX2: 95 + } + } + ] + }); + expect(processed).toMatchSnapshot(); + }); + + test('layout with a label that is narrower than the box', () => { + getBBox.mockReturnValue({ y: -10, width: 50, height: 10 }); + const processed = layout({ + props: { + label: 'Test label' + }, + children: [ + { + box: { + width: 100, + height: 50, + axisY: 10, + axisX1: 5, + axisX2: 95 + } + } + ] + }); + expect(processed).toMatchSnapshot(); + }); + + test('layout with a label that is wider than the box', () => { + getBBox.mockReturnValue({ y: -10, width: 200, height: 10 }); + const processed = layout({ + props: { + label: 'Test label' + }, + children: [ + { + box: { + width: 100, + height: 50, + axisY: 10, + axisX1: 5, + axisX2: 95 + } + } + ] + }); + expect(processed).toMatchSnapshot(); + }); + + test('layout with a label and using axis anchors from child', () => { + getBBox.mockReturnValue({ y: -10, width: 200, height: 10 }); + const processed = layout({ + props: { + label: 'Test label', + useAnchors: true + }, + children: [ + { + box: { + width: 100, + height: 50, + axisY: 10, + axisX1: 5, + axisX2: 95 + } + } + ] + }); + expect(processed).toMatchSnapshot(); + }); +});