From 1b001cf1e822175d16d7cf9ebfdb3c3056131cab Mon Sep 17 00:00:00 2001 From: Alexander Sage Date: Tue, 23 Jul 2019 19:11:31 -0700 Subject: [PATCH] chore: Added unit tests around drawBackgroundRect and drawRect --- __mocks__/d3.js | 20 ++++++ src/diagrams/sequence/sequenceRenderer.js | 26 ++------ src/diagrams/sequence/svgDraw.js | 23 +++++-- src/diagrams/sequence/svgDraw.spec.js | 75 +++++++++++++++++++++++ 4 files changed, 119 insertions(+), 25 deletions(-) create mode 100644 src/diagrams/sequence/svgDraw.spec.js diff --git a/__mocks__/d3.js b/__mocks__/d3.js index 218ed9754..be43b1bd7 100644 --- a/__mocks__/d3.js +++ b/__mocks__/d3.js @@ -1,3 +1,4 @@ + let NewD3 = function () { return { append: function () { @@ -36,3 +37,22 @@ export const selectAll = function () { export const curveBasis = 'basis' export const curveLinear = 'linear' export const curveCardinal = 'cardinal' + +export const MockD3 = (name, parent) => { + const children = [] + const elem = { + get __children () { return children }, + get __name () { return name }, + get __parent () { return parent } + } + elem.append = (name) => { + const mockElem = MockD3(name, elem) + children.push(mockElem) + return mockElem + } + elem.lower = jest.fn(() => elem) + elem.attr = jest.fn(() => elem) + elem.text = jest.fn(() => elem) + elem.style = jest.fn(() => elem) + return elem +} diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 2421df9fa..776fc103e 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -131,20 +131,13 @@ export const bounds = { const activation = this.activations.splice(lastActorActivationIdx, 1)[0] return activation }, - newLoop: function (title) { - this.sequenceItems.push({ startx: undefined, starty: this.verticalPos, stopx: undefined, stopy: undefined, title: title }) + newLoop: function (title, fill) { + this.sequenceItems.push({ startx: undefined, starty: this.verticalPos, stopx: undefined, stopy: undefined, title: title, fill: fill }) }, endLoop: function () { const loop = this.sequenceItems.pop() return loop }, - newRect: function (color) { - this.sequenceItems.push({ startx: undefined, starty: this.verticalPos, stopx: undefined, stopy: undefined, color: color }) - }, - endRect: function () { - const rect = this.sequenceItems.pop() - return rect - }, addSectionToLoop: function (message) { const loop = this.sequenceItems.pop() loop.sections = loop.sections || [] @@ -419,21 +412,12 @@ export const draw = function (text, id) { break case parser.yy.LINETYPE.RECT_START: bounds.bumpVerticalPos(conf.boxMargin) - bounds.newRect(msg.message) + bounds.newLoop(undefined, msg.message) bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin) break case parser.yy.LINETYPE.RECT_END: - const rectData = bounds.endRect() - svgDraw.drawRect(diagram, { - x: rectData.startx, - y: rectData.starty, - width: rectData.stopx - rectData.startx, - height: rectData.stopy - rectData.starty, - fill: rectData.color, - class: 'rect', - rx: 0, - ry: 0 - }, true) + const rectData = bounds.endLoop() + svgDraw.drawBackgroundRect(diagram, rectData); bounds.bumpVerticalPos(conf.boxMargin) break case parser.yy.LINETYPE.OPT_START: diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 6d5836683..1c5c8fd28 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -1,8 +1,6 @@ -export const drawRect = function (elem, rectData, insertBeforeLastChild) { +export const drawRect = function (elem, rectData) { const rectElem = elem.append('rect') - if (insertBeforeLastChild) { - rectElem.lower() - } + rectElem.attr('x', rectData.x) rectElem.attr('y', rectData.y) rectElem.attr('fill', rectData.fill) @@ -170,6 +168,22 @@ export const drawLoop = function (elem, bounds, labelText, conf) { } } + +/** + * Draws a background rectangle + * @param color - The fill color for the background + */ +export const drawBackgroundRect = function (elem, bounds) { + const rectElem = drawRect(elem, { + x: bounds.startx, + y: bounds.starty, + width: bounds.stopx - bounds.startx, + height: bounds.stopy - bounds.starty, + fill: bounds.fill, + class: 'rect' + }); + rectElem.lower(); +} /** * Setup arrow head and define the marker. The result is appended to the svg. */ @@ -334,6 +348,7 @@ export default { anchorElement, drawActivation, drawLoop, + drawBackgroundRect, insertArrowHead, insertSequenceNumber, insertArrowCrossHead, diff --git a/src/diagrams/sequence/svgDraw.spec.js b/src/diagrams/sequence/svgDraw.spec.js new file mode 100644 index 000000000..8845321a0 --- /dev/null +++ b/src/diagrams/sequence/svgDraw.spec.js @@ -0,0 +1,75 @@ +const svgDraw = require('./svgDraw') +const { MockD3 } = require('d3') +console.log(MockD3) +describe('svgDraw', function () { + describe('drawRect', function () { + it('it should append a rectangle', function () { + const svg = MockD3('svg') + svgDraw.drawRect(svg, { + x: 10, + y: 10, + fill: '#ccc', + stroke: 'red', + width: '20', + height: '20', + rx: '10', + ry: '10', + class: 'unitTestRectangleClass', + }) + expect(svg.__children.length).toBe(1) + const rect = svg.__children[0] + expect(rect.__name).toBe('rect') + expect(rect.attr).toHaveBeenCalledWith('x', 10) + expect(rect.attr).toHaveBeenCalledWith('y', 10) + expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc') + expect(rect.attr).toHaveBeenCalledWith('stroke', 'red') + expect(rect.attr).toHaveBeenCalledWith('width', '20') + expect(rect.attr).toHaveBeenCalledWith('height', '20') + expect(rect.attr).toHaveBeenCalledWith('rx', '10') + expect(rect.attr).toHaveBeenCalledWith('ry', '10') + expect(rect.attr).toHaveBeenCalledWith('class', 'unitTestRectangleClass') + }) + it('it should not add the class attribute if a class isn`t provided', () => { + const svg = MockD3('svg') + svgDraw.drawRect(svg, { + x: 10, + y: 10, + fill: '#ccc', + stroke: 'red', + width: '20', + height: '20', + rx: '10', + ry: '10', + }) + expect(svg.__children.length).toBe(1) + const rect = svg.__children[0] + expect(rect.__name).toBe('rect') + expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc') + expect(rect.attr).not.toHaveBeenCalledWith('class', expect.anything()) + }) + }) + describe('drawBackgroundRect', function () { + it('it should append a rect before the previous element within a given bound', function () { + const svg = MockD3('svg') + const boundingRect = { + startx: 50, + starty: 200, + stopx: 150, + stopy: 260, + title: undefined, + fill: '#ccc', + } + svgDraw.drawBackgroundRect(svg, boundingRect) + expect(svg.__children.length).toBe(1) + const rect = svg.__children[0] + expect(rect.__name).toBe('rect') + expect(rect.attr).toHaveBeenCalledWith('x', 50) + expect(rect.attr).toHaveBeenCalledWith('y', 200) + expect(rect.attr).toHaveBeenCalledWith('width', 100) + expect(rect.attr).toHaveBeenCalledWith('height', 60) + expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc') + expect(rect.attr).toHaveBeenCalledWith('class', 'rect') + expect(rect.lower).toHaveBeenCalled() + }) + }) +})