chore: Added unit tests around drawBackgroundRect and drawRect

This commit is contained in:
Alexander Sage
2019-07-23 19:11:31 -07:00
parent c8091c61c0
commit 1b001cf1e8
4 changed files with 119 additions and 25 deletions

20
__mocks__/d3.js vendored
View File

@@ -1,3 +1,4 @@
let NewD3 = function () { let NewD3 = function () {
return { return {
append: function () { append: function () {
@@ -36,3 +37,22 @@ export const selectAll = function () {
export const curveBasis = 'basis' export const curveBasis = 'basis'
export const curveLinear = 'linear' export const curveLinear = 'linear'
export const curveCardinal = 'cardinal' 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
}

View File

@@ -131,20 +131,13 @@ export const bounds = {
const activation = this.activations.splice(lastActorActivationIdx, 1)[0] const activation = this.activations.splice(lastActorActivationIdx, 1)[0]
return activation return activation
}, },
newLoop: function (title) { newLoop: function (title, fill) {
this.sequenceItems.push({ startx: undefined, starty: this.verticalPos, stopx: undefined, stopy: undefined, title: title }) this.sequenceItems.push({ startx: undefined, starty: this.verticalPos, stopx: undefined, stopy: undefined, title: title, fill: fill })
}, },
endLoop: function () { endLoop: function () {
const loop = this.sequenceItems.pop() const loop = this.sequenceItems.pop()
return loop 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) { addSectionToLoop: function (message) {
const loop = this.sequenceItems.pop() const loop = this.sequenceItems.pop()
loop.sections = loop.sections || [] loop.sections = loop.sections || []
@@ -419,21 +412,12 @@ export const draw = function (text, id) {
break break
case parser.yy.LINETYPE.RECT_START: case parser.yy.LINETYPE.RECT_START:
bounds.bumpVerticalPos(conf.boxMargin) bounds.bumpVerticalPos(conf.boxMargin)
bounds.newRect(msg.message) bounds.newLoop(undefined, msg.message)
bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin) bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin)
break break
case parser.yy.LINETYPE.RECT_END: case parser.yy.LINETYPE.RECT_END:
const rectData = bounds.endRect() const rectData = bounds.endLoop()
svgDraw.drawRect(diagram, { svgDraw.drawBackgroundRect(diagram, rectData);
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)
bounds.bumpVerticalPos(conf.boxMargin) bounds.bumpVerticalPos(conf.boxMargin)
break break
case parser.yy.LINETYPE.OPT_START: case parser.yy.LINETYPE.OPT_START:

View File

@@ -1,8 +1,6 @@
export const drawRect = function (elem, rectData, insertBeforeLastChild) { export const drawRect = function (elem, rectData) {
const rectElem = elem.append('rect') const rectElem = elem.append('rect')
if (insertBeforeLastChild) {
rectElem.lower()
}
rectElem.attr('x', rectData.x) rectElem.attr('x', rectData.x)
rectElem.attr('y', rectData.y) rectElem.attr('y', rectData.y)
rectElem.attr('fill', rectData.fill) 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. * Setup arrow head and define the marker. The result is appended to the svg.
*/ */
@@ -334,6 +348,7 @@ export default {
anchorElement, anchorElement,
drawActivation, drawActivation,
drawLoop, drawLoop,
drawBackgroundRect,
insertArrowHead, insertArrowHead,
insertSequenceNumber, insertSequenceNumber,
insertArrowCrossHead, insertArrowCrossHead,

View File

@@ -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()
})
})
})