mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 14:29:25 +02:00
chore: Added unit tests around drawBackgroundRect and drawRect
This commit is contained in:
20
__mocks__/d3.js
vendored
20
__mocks__/d3.js
vendored
@@ -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
|
||||||
|
}
|
||||||
|
@@ -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:
|
||||||
|
@@ -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,
|
||||||
|
75
src/diagrams/sequence/svgDraw.spec.js
Normal file
75
src/diagrams/sequence/svgDraw.spec.js
Normal 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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
Reference in New Issue
Block a user