chore: Added e2e snapshot tests

dist/index.html

@@ -326,9 +326,6 @@ par this happens in parallel
 Alice -->> Bob: Parallel message 1
 and
 Alice -->> John: Parallel message 2
-end
-loop awesome
-A -> B: foo
 end
   </div>
 

e2e/spec/sequencediagram.spec.js

@@ -32,4 +32,90 @@ describe('Sequencediagram', () => {
       `,
     {})
   })
+  describe('background rects', async () => {
+    it('should render a single and nested rects', async () => {
+      await imgSnapshotTest(page, `
+        sequenceDiagram
+          participant A
+          participant B
+          participant C
+          participant D
+          participant E
+          participant G
+
+          A ->>+ B: Task 1
+          rect rgb(178, 102, 255)
+            B ->>+ C: Task 2
+            C -->>- B: Return
+          end
+          
+          A ->> D: Task 3
+          rect rgb(0, 128, 255)
+            D ->>+ E: Task 4
+            rect rgb(0, 204, 0)
+            E ->>+ G: Task 5
+            G -->>- E: Return
+            end
+            E ->> E: Task 6
+          end
+          D -->> A: Complete
+      `, {})
+    })
+    it('should render rect around and inside loops', async () => {
+      await imgSnapshotTest(page, `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            loop check C
+              C ->> C: Every 10 seconds
+            end
+          end
+          A ->> B: 2
+          loop check D
+            C ->> D: 3
+            rect rgb(153, 153, 255)
+            D -->> D: 5
+            D --> C: 4
+            end
+          end
+      `, {})
+    })
+    it('should render rect around and inside alts', async () => {
+      await imgSnapshotTest(page, `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            alt yes
+              C ->> C: 1
+            else no
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+          B ->> A: Return
+      `, {})
+    })
+    it('should render rect around and inside opts', async () => {
+      await imgSnapshotTest(page, `
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            opt maybe
+              C -->> D: Do something
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+
+          opt possibly
+            rect rgb(0, 204, 204)
+              C ->> C: 0
+            end
+          end
+          B ->> A: Return
+      `, {})
+    })
+  })
 })

src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -31,7 +31,7 @@
 <ALIAS>"as"       { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)       { this.popState(); this.popState(); return 'NL'; }
 "loop"            { this.begin('LINE'); return 'loop'; }
-"rect"			  { this.begin('LINE'); return 'rect'; }
+"rect"            { this.begin('LINE'); return 'rect'; }
 "opt"             { this.begin('LINE'); return 'opt'; }
 "alt"             { this.begin('LINE'); return 'alt'; }
 "else"            { this.begin('LINE'); return 'else'; }

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -369,13 +369,13 @@ describe('when parsing a sequenceDiagram', function () {
     expect(messages[0].from).toBe('Alice')
     expect(messages[1].from).toBe('Bob')
   })
-  it('it should handle rect statements', function () {
+  it.only('it should add a rect around sequence', function () {
     const str = `
       sequenceDiagram
         Alice->Bob: Hello Bob, how are you?
         %% Comment
-        Note right of Bob: Bob thinks
         rect rgb(200, 255, 200)
+        Note right of Bob: Bob thinks
         Bob-->Alice: I am good thanks
         end
     `
@@ -386,10 +386,39 @@ describe('when parsing a sequenceDiagram', function () {
     actors.Bob.description = 'Bob'
 
     const messages = parser.yy.getMessages()
+    expect(messages[1].type).toEqual(parser.yy.LINETYPE.RECT_START)
+    expect(messages[1].message).toBe('rgb(200, 255, 200)')
+    expect(messages[2].type).toEqual(parser.yy.LINETYPE.NOTE)
+    expect(messages[3].type).toEqual(parser.yy.LINETYPE.DOTTED_OPEN)
+    expect(messages[4].type).toEqual(parser.yy.LINETYPE.RECT_END)
+  })
 
-    expect(messages.length).toBe(5)
-    expect(messages[0].from).toBe('Alice')
-    expect(messages[1].from).toBe('Bob')
+  it.only('it should allow for nested rects', function () {
+    const str = `
+      sequenceDiagram
+        Alice->Bob: Hello Bob, how are you?
+        %% Comment
+        rect rgb(200, 255, 200)
+        rect rgb(0, 0, 0)
+        Note right of Bob: Bob thinks
+        end
+        Bob-->Alice: I am good thanks
+        end
+    `
+    parser.parse(str)
+    const actors = parser.yy.getActors()
+    expect(actors.Alice.description).toBe('Alice')
+    actors.Bob.description = 'Bob'
+
+    const messages = parser.yy.getMessages()
+    expect(messages[1].type).toEqual(parser.yy.LINETYPE.RECT_START)
+    expect(messages[1].message).toBe('rgb(200, 255, 200)')
+    expect(messages[2].type).toEqual(parser.yy.LINETYPE.RECT_START)
+    expect(messages[2].message).toBe('rgb(0, 0, 0)')
+    expect(messages[3].type).toEqual(parser.yy.LINETYPE.NOTE)
+    expect(messages[4].type).toEqual(parser.yy.LINETYPE.RECT_END)
+    expect(messages[5].type).toEqual(parser.yy.LINETYPE.DOTTED_OPEN)
+    expect(messages[6].type).toEqual(parser.yy.LINETYPE.RECT_END)
   })
   it('it should handle opt statements', function () {
     const str = 'sequenceDiagram\n' +

src/diagrams/sequence/sequenceRenderer.js

@@ -413,7 +413,7 @@ export const draw = function (text, id) {
       case parser.yy.LINETYPE.RECT_START:
         bounds.bumpVerticalPos(conf.boxMargin)
         bounds.newLoop(undefined, msg.message)
-        bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin)
+        bounds.bumpVerticalPos(conf.boxMargin)
         break
       case parser.yy.LINETYPE.RECT_END:
         const rectData = bounds.endLoop()

src/diagrams/sequence/svgDraw.js

@@ -1,6 +1,5 @@
 export const drawRect = function (elem, rectData) {
   const rectElem = elem.append('rect')
-
   rectElem.attr('x', rectData.x)
   rectElem.attr('y', rectData.y)
   rectElem.attr('fill', rectData.fill)