chore: Added unit tests around drawBackgroundRect and drawRect

__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
+}

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:

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,

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