mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-11-04 04:44:08 +01:00 
			
		
		
		
	Refactored rendering sequence diagrams
This commit is contained in:
		@@ -122,10 +122,23 @@ context('Sequence diagram', () => {
 | 
			
		||||
    it('should render long actor descriptions', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        %%{init: {'theme': 'dark'}}%%
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
 | 
			
		||||
        A->>Bob: Hola
 | 
			
		||||
        Bob-->A: Pasten !
 | 
			
		||||
      `,
 | 
			
		||||
        {logLevel: 0}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long actor descriptions', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        %%{wrap}%%
 | 
			
		||||
        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
 | 
			
		||||
        A->>Bob: Hola
 | 
			
		||||
        Bob-->A: Pasten !
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
@@ -141,6 +154,17 @@ context('Sequence diagram', () => {
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long notes wrapped (inline) left of actor', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        Alice->>Bob: Hola
 | 
			
		||||
        Note left of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
 | 
			
		||||
        Bob->>Alice: I'm short though
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long notes right of actor', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
@@ -152,6 +176,17 @@ context('Sequence diagram', () => {
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long notes wrapped (inline) right of actor', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        Alice->>Bob: Hola
 | 
			
		||||
        Note right of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
 | 
			
		||||
        Bob->>Alice: I'm short though
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long notes over actor', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
@@ -163,6 +198,17 @@ context('Sequence diagram', () => {
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long notes wrapped (inline) over actor', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        Alice->>Bob: Hola
 | 
			
		||||
        Note over Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
 | 
			
		||||
        Bob->>Alice: I'm short though
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long messages from an actor to the left to one to the right', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
@@ -173,6 +219,16 @@ context('Sequence diagram', () => {
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long messages wrapped (inline) from an actor to the left to one to the right', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        Alice->>Bob:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
 | 
			
		||||
        Bob->>Alice: I'm short though
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long messages from an actor to the right to one to the left', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
@@ -183,6 +239,16 @@ context('Sequence diagram', () => {
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render long messages wrapped (inline) from an actor to the right to one to the left', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        Alice->>Bob: I'm short
 | 
			
		||||
        Bob->>Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
  context('background rects', () => {
 | 
			
		||||
    it('should render a single and nested rects', () => {
 | 
			
		||||
@@ -327,5 +393,33 @@ context('Sequence diagram', () => {
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render dark theme from init directive and size 24 font set from config directive', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        %%{init: {'theme': 'dark'}}%%
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        %%{config: {'fontSize': 24}}%%
 | 
			
		||||
        Alice->>John: Hello John, how are you?
 | 
			
		||||
        Alice->>John: John, can you hear me?
 | 
			
		||||
        John-->>Alice: Hi Alice, I can hear you!
 | 
			
		||||
        John-->>Alice: I feel great!
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
    it('should render with wrapping enabled', () => {
 | 
			
		||||
      imgSnapshotTest(
 | 
			
		||||
        `
 | 
			
		||||
        sequenceDiagram
 | 
			
		||||
        %%{wrap}%%
 | 
			
		||||
        participant A as Alice, the talkative one
 | 
			
		||||
        A->>John: Hello John, how are you today? I'm feeling quite verbose today.
 | 
			
		||||
        A->>John: John, can you hear me? If you are not available, we can talk later.
 | 
			
		||||
        John-->>A: Hi Alice, I can hear you! I was finishing up an important meeting.
 | 
			
		||||
        John-->>A: I feel great! I was not ignoring you. I am sorry you had to wait for a response.
 | 
			
		||||
      `,
 | 
			
		||||
        {}
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user