@eventcatalog/core 0.1.12 → 0.1.16

package/components/Mdx/NodeGraph/__tests__/GraphElements.spec.ts

@@ -0,0 +1,98 @@
+import { Event, Service } from '@eventcatalog/types';
+import { getEventElements, getServiceElements } from '../GraphElements';
+
+jest.mock('next/config', () => () => ({
+  publicRuntimeConfig: {
+    basePath: '/docs',
+  },
+}));
+
+describe('GraphElements', () => {
+  describe('getServiceElements', () => {
+    it('takes a given Service and returns the ReactFlow elements with relations the events it publishes and consumes', () => {
+      const event = { name: 'My Event', version: '0.0.1' };
+      const event2 = { name: 'My Event 2', version: '0.0.1' };
+      const rootNodeColor = '#2563eb';
+      const isAnimated = true;
+
+      const service = {
+        id: 'My Service',
+        name: 'My Service',
+        version: '0.0.1',
+        summary: 'Summary',
+        publishes: [event],
+        subscribes: [event2],
+      };
+
+      const result = getServiceElements(service as Service, rootNodeColor, isAnimated);
+
+      expect(result).toMatchSnapshot();
+    });
+
+    it('takes a given Service and returns the ReactFlow elements with multiple events & long names', () => {
+      const event = { name: 'My Event', version: '0.0.1' };
+      const event2 = { name: 'My Event 2', version: '0.0.1' };
+      const event3 = { name: 'My Event 3', version: '0.0.1' };
+      const event4 = { name: 'very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4', version: '0.0.1' };
+      const event5 = { name: 'very very very very very very very very very very very very long name event 5', version: '0.0.1' };
+      const event6 = { name: 'My Event 6', version: '0.0.1' };
+      const event7 = { name: 'My Event 7', version: '0.0.1' };
+      const event8 = { name: 'My Event 8', version: '0.0.1' };
+      const event9 = { name: 'My Event 9', version: '0.0.1' };
+      const rootNodeColor = '#2563eb';
+      const isAnimated = true;
+
+      const service = {
+        id: 'My Service',
+        name: 'My Service',
+        version: '0.0.1',
+        summary: 'Summary',
+        publishes: [event, event2, event3, event4],
+        subscribes: [event5, event6, event7, event8, event9],
+      };
+
+      const result = getServiceElements(service as Service, rootNodeColor, isAnimated);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('getEventElements', () => {
+    it('takes a given event and returns the ReactFlow elements with relations between the event and its consumers and producers', () => {
+      const event = {
+        name: 'My Event',
+        version: '0.0.1',
+        producers: ['Service 1'],
+        consumers: ['Service 2'],
+      };
+      const rootNodeColor = '#2563eb';
+      const isAnimated = true;
+
+      const result = getEventElements(event as Event, rootNodeColor, isAnimated);
+
+      expect(result).toMatchSnapshot();
+    });
+
+    it('takes a given event and returns the ReactFlow elements with multiple services & long names', () => {
+      const event = {
+        name: 'My Event',
+        version: '0.0.1',
+        producers: ['Service 1', 'Service 2', 'very very very very very very very very very very very very long name Service 3'],
+        consumers: [
+          'Service 4',
+          'Service 5',
+          'Service 6',
+          'Service 7',
+          'Service 8',
+          'very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8',
+        ],
+      };
+      const rootNodeColor = '#2563eb';
+      const isAnimated = true;
+
+      const result = getEventElements(event as Event, rootNodeColor, isAnimated);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+});

package/components/Mdx/NodeGraph/__tests__/GraphLayout.spec.ts

@@ -0,0 +1,104 @@
+import { Elements } from 'react-flow-renderer';
+import createGraphLayout, { calcCanvasHeight } from '../GraphLayout';
+
+describe('GraphLayout', () => {
+  describe('createGraphLayout', () => {
+    it('calculate a graph layout', () => {
+      const isHorizontal = true;
+      const elements = [
+        {
+          data: {
+            label: 'My Event 2',
+            link: '/docs/events/My Event 2',
+            maxWidth: 150,
+            width: 150,
+          },
+          id: 's-My_Event_2',
+          position: {
+            x: 0,
+            y: 0,
+          },
+          style: {
+            border: '2px solid #75d7b6',
+            width: 150,
+          },
+          type: 'input',
+        },
+        {
+          data: {
+            label: 'My Service',
+            link: '/docs/services/My Service',
+            maxWidth: 150,
+            width: 150,
+          },
+          id: 'c-My_Service',
+          position: {
+            x: 0,
+            y: 0,
+          },
+          style: {
+            border: '2px solid #2563eb',
+            width: 150,
+          },
+        },
+        {
+          data: {
+            label: 'My Event',
+            link: '/docs/events/My Event',
+            maxWidth: 150,
+            width: 150,
+          },
+          id: 'p-My_Event',
+          position: {
+            x: 0,
+            y: 0,
+          },
+          style: {
+            border: '2px solid #818cf8',
+            width: 150,
+          },
+          type: 'output',
+        },
+        {
+          animated: true,
+          arrowHeadType: 'arrowclosed',
+          id: 'ecp-My_Event',
+          source: 'c-My_Service',
+          target: 'p-My_Event',
+          type: 'smoothstep',
+        },
+        {
+          animated: true,
+          arrowHeadType: 'arrowclosed',
+          id: 'esc-My_Event_2',
+          source: 's-My_Event_2',
+          target: 'c-My_Service',
+          type: 'smoothstep',
+        },
+      ];
+
+      const result = createGraphLayout(elements as Elements, isHorizontal);
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('calcCanvasHeight', () => {
+    it('takes all events and calculate the canvas height', () => {
+      const data = {
+        producers: [1, 2, 3, 4, 5, 6, 7, 8],
+        consumers: [1, 2, 3, 4, 5],
+      };
+      const result = calcCanvasHeight(data, 'event');
+      expect(result).toEqual(544);
+    });
+
+    it('takes all services and calculate the canvas height', () => {
+      const data = {
+        publishes: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        subscribes: [1, 2, 3, 4, 5],
+      };
+      const result = calcCanvasHeight(data, 'service');
+      expect(result).toEqual(612);
+    });
+  });
+});