getting there

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -1,4 +1,3 @@
-/* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
@@ -329,6 +328,49 @@ describe('State diagram', () => {
       }
     );
   });
+  it('v2 it should be possibel to use a choice', () => {
+    imgSnapshotTest(
+      `
+  stateDiagram-v2
+    [*] --> Off
+    Off --> On
+    state MyChoice [[choice]]
+    On --> MyChoice
+    MyChoice --> Washing
+    MyChoice --> Drying
+    Washing --> Finished
+    Finished --> [*]
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
+  it('v2 width of compond state should grow with title if title is wider', () => {
+    imgSnapshotTest(
+      `
+stateDiagram-v2
+  state "Long state name 2" as NotShooting {
+    a-->b
+  }
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
+  it('v2 state label with names in it', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram-v2
+        Yswsii: Your state with spaces in it
+        [*] --> Yswsii
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
   it('v2 Simplest composite state', () => {
     imgSnapshotTest(
       `
@@ -338,7 +380,8 @@ describe('State diagram', () => {
         }
     `,
       {
-        logLevel: 0, fontFamily: 'courier'
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -350,7 +393,63 @@ describe('State diagram', () => {
         a --> b: Stop
     `,
       {
-        logLevel: 0, fontFamily: 'courier',
+        logLevel: 0,
+        fontFamily: 'courier',
+      }
+    );
+  });
+  it('v2 should handle multiple notes added to one state', () => {
+    imgSnapshotTest(
+      `
+stateDiagram-v2
+    MyState
+    note left of MyState : I am a leftie
+    note right of MyState : I am a rightie
+    `,
+      {
+        logLevel: 0,
+        fontFamily: 'courier',
+      }
+    );
+  });
+  it('v2 should handle different rendering directions in composite states', () => {
+    imgSnapshotTest(
+      `
+stateDiagram-v2
+  direction LR
+  state A {
+    direction BT
+    a --> b
+  }
+  state C {
+    direction RL
+    c --> d
+  }
+  A --> C
+    `,
+      {
+        logLevel: 0,
+        fontFamily: 'courier',
+      }
+    );
+  });
+  it('v2 handle transition from one state in a composite state to a composite state', () => {
+    imgSnapshotTest(
+      `
+stateDiagram-v2
+  state S1 {
+    sub1 -->sub2
+  }
+
+  state S2 {
+    sub4
+  }
+  S1 --> S2
+  sub1 --> sub4
+    `,
+      {
+        logLevel: 0,
+        fontFamily: 'courier',
       }
     );
   });
@@ -364,18 +463,17 @@ describe('State diagram', () => {
       `,
       { state: { useMaxWidth: true } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.eq(177);
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(maxWidthValue).to.be.within(135 * .95, 135 * 1.05);
-      });
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      expect(svg).to.have.attr('height');
+      const height = parseFloat(svg.attr('height'));
+      expect(height).to.be.within(177, 178);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(maxWidthValue).to.be.within(135 * 0.95, 135 * 1.05);
+    });
   });
   it('v2 should render a state diagram when useMaxWidth is false', () => {
     renderGraph(
@@ -387,14 +485,13 @@ describe('State diagram', () => {
       `,
       { state: { useMaxWidth: false } }
     );
-    cy.get('svg')
-      .should((svg) => {
-        const height = parseFloat(svg.attr('height'));
-        const width = parseFloat(svg.attr('width'));
-        expect(height).to.eq(177);
-        // use within because the absolute value can be slightly different depending on the environment ±5%
-        expect(width).to.be.within(135 * .95, 135 * 1.05);
-        expect(svg).to.not.have.attr('style');
-      });
+    cy.get('svg').should((svg) => {
+      const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      expect(height).to.be.within(177, 178);
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(width).to.be.within(135 * 0.95, 135 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
   });
 });