@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/SankeyChart/__tests__/Node.spec.tsx

@@ -0,0 +1,248 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {Node} from '../Node';
+import * as reltioComponents from '@reltio/components';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    useCrosswalkColor: jest.fn(),
+    useCrosswalkHighlight: jest.fn()
+}));
+
+describe('Sankey node', () => {
+    const highlightCrosswalk = jest.fn();
+    const removeHighlight = jest.fn();
+    let user;
+    beforeAll(() => {
+        jest.spyOn(reltioComponents, 'useCrosswalkColor').mockReturnValue('#FF0000');
+        jest.spyOn(reltioComponents, 'useCrosswalkHighlight').mockReturnValue({
+            isHighlighted: false,
+            isDimmed: false,
+            highlightCrosswalk,
+            removeHighlight
+        });
+    });
+    beforeEach(() => {
+        user = userEvent.setup({delay: null});
+    });
+
+    const rootNodeProps = {
+        nodeWidth: 14,
+        node: {
+            x: 10,
+            y: 11,
+            label: 'testLabel',
+            entity: {uri: 'test1Uri', crosswalks: [], merges: []},
+            name: 'ROOT',
+            time: 1234
+        },
+        highlightEnabled: false,
+        isColored: false,
+        disableUnmerge: false,
+        isDragging: false,
+        onUnmerge: jest.fn()
+    };
+
+    const nodeProps = {
+        nodeWidth: 14,
+        node: {
+            x: 10,
+            y: 11,
+            label: 'testLabel',
+            entity: {uri: 'test1Uri', crosswalks: [], merges: []},
+            name: 'testNode',
+            time: 1234
+        },
+        highlightEnabled: false,
+        isColored: false,
+        disableUnmerge: false,
+        isDragging: false,
+        onUnmerge: jest.fn()
+    };
+
+    const nodeWithTargetProps = {
+        nodeWidth: 14,
+        node: {
+            x: 10,
+            y: 11,
+            label: 'testLabel',
+            entity: {uri: 'test1Uri', crosswalks: [], merges: [{user: 'testUser', time: 1234}]},
+            name: 'testNode',
+            time: 1234,
+            targetLinks: [
+                {
+                    source: {
+                        entity: {uri: 'test1Uri', crosswalks: [], merges: []},
+                        name: 'testNode1',
+                        time: 1234,
+                        sourceLinks: [
+                            {
+                                ty: 0,
+                                dy: 10,
+                                value: 10,
+                                source: {
+                                    entity: {uri: 'testUri', crosswalks: [], merges: []},
+                                    name: 'testNode',
+                                    time: 1234
+                                },
+                                target: {
+                                    entity: {uri: 'test1Uri', crosswalks: [], merges: []},
+                                    name: 'testNode1',
+                                    time: 1234
+                                },
+                                color: '#FF0000',
+                                crosswalk: {
+                                    type: 'test',
+                                    uri: 'uri',
+                                    value: 'value'
+                                }
+                            }
+                        ]
+                    },
+                    value: 10,
+                    target: {
+                        entity: {uri: 'testUri', crosswalks: [], merges: []},
+                        name: 'testNode',
+                        time: 1234
+                    },
+                    color: '#FF0000',
+                    crosswalk: {
+                        type: 'test',
+                        uri: 'uri',
+                        value: 'value'
+                    }
+                }
+            ]
+        },
+        highlightEnabled: false,
+        isColored: false,
+        disableUnmerge: false,
+        isDragging: false,
+        onUnmerge: jest.fn()
+    };
+
+    it('should render node for ROOT node', () => {
+        const {asFragment} = render(<Node {...rootNodeProps} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <g
+                transform="translate(10,11)"
+              >
+                <text
+                  class="rootNode"
+                  dx="0"
+                  dy="-5"
+                >
+                  testLabel
+                </text>
+              </g>
+            </DocumentFragment>
+        `);
+    });
+
+    it('should render node without targetLinks', async () => {
+        const {asFragment} = render(<Node {...nodeProps} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <g
+                transform="translate(10,11)"
+              >
+                <rect
+                  class="node"
+                  cursor="pointer"
+                  data-reltio-id="reltio-sankey-chart-node"
+                  fill="#F0F0F0"
+                  height="0"
+                  opacity="1"
+                  width="14"
+                />
+              </g>
+            </DocumentFragment>
+        `);
+
+        const rect = screen.getByTestId('reltio-sankey-chart-node');
+        await user.hover(rect);
+        expect(highlightCrosswalk).toBeCalledTimes(0);
+        await user.unhover(rect);
+        expect(removeHighlight).toBeCalledTimes(0);
+    });
+
+    it('should render node with targetLinks', async () => {
+        const {container, asFragment} = render(<Node {...nodeWithTargetProps} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <g
+                transform="translate(10,11)"
+              >
+                <rect
+                  class="node"
+                  cursor="pointer"
+                  data-reltio-id="reltio-sankey-chart-node"
+                  fill="#F0F0F0"
+                  height="0"
+                  opacity="1"
+                  width="14"
+                />
+                <rect
+                  class="node"
+                  data-mui-internal-clone-element="true"
+                  fill="#F0F0F0"
+                  fill-opacity="0.54"
+                  height="10"
+                  opacity="1"
+                  transform="translate(0,0)"
+                  width="14"
+                />
+              </g>
+            </DocumentFragment>
+        `);
+        const rect = container.getElementsByTagName('rect')[1];
+        await user.hover(rect);
+        await screen.findByRole('tooltip');
+        expect(screen.getByText('testUser')).toBeInTheDocument();
+        expect(screen.getByText('Merge details')).toBeInTheDocument();
+    });
+
+    it('should render nodes when highlightEnabled=true and isDimmed', async () => {
+        jest.spyOn(reltioComponents, 'useCrosswalkHighlight').mockReturnValue({
+            isHighlighted: false,
+            isDimmed: true,
+            highlightCrosswalk,
+            removeHighlight
+        });
+        const {asFragment} = render(<Node {...nodeWithTargetProps} highlightEnabled={true} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <g
+                transform="translate(10,11)"
+              >
+                <rect
+                  class="node"
+                  cursor="pointer"
+                  data-reltio-id="reltio-sankey-chart-node"
+                  fill="#F0F0F0"
+                  height="0"
+                  opacity="0.19"
+                  width="14"
+                />
+                <rect
+                  class="node"
+                  data-mui-internal-clone-element="true"
+                  fill="#F0F0F0"
+                  fill-opacity="0.54"
+                  height="10"
+                  opacity="0.38"
+                  transform="translate(0,0)"
+                  width="14"
+                />
+              </g>
+            </DocumentFragment>
+        `);
+        const rect = screen.getByTestId('reltio-sankey-chart-node');
+        await user.hover(rect);
+        expect(highlightCrosswalk).toBeCalledTimes(1);
+        await user.unhover(rect);
+        expect(removeHighlight).toBeCalledTimes(1);
+    });
+});

package/src/components/SankeyChart/__tests__/SankeyChart.spec.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import {deepFreeze} from '../../../../../../__mocks__/test-utils';
+import SankeyChart from '../SankeyChart';
+
+describe('SankeyChart', () => {
+    const crosswalks = [
+        {
+            uri: 'entities/1O8x1gO0/crosswalks/2rinpYq8x',
+            type: 'configuration/sources/Reltio',
+            ownerType: 'entity',
+            value: '1u04ksx9',
+            uuid: 2
+        },
+        {
+            uri: 'entities/1O8x1gO0/crosswalks/2gghyKRrU',
+            type: 'configuration/sources/Reltio',
+            ownerType: 'entity',
+            value: '1O8x1gO0',
+            uuid: 1
+        }
+    ];
+    const nodes = [
+        {
+            entity: {
+                uri: 'ROOT',
+                label: 'FirdtName IO error 2',
+                crosswalks: [],
+                merges: [
+                    {
+                        time: 0,
+                        losers: [
+                            {
+                                merges: [
+                                    {
+                                        time: 1619116318362,
+                                        mergeReason: 'Merge by hand',
+                                        mergeRules: '',
+                                        user: 'carina.alabanza@reltio.com',
+                                        losers: [
+                                            {
+                                                uri: 'entities/1u04ksx9',
+                                                crosswalks: [crosswalks[0]]
+                                            }
+                                        ]
+                                    }
+                                ],
+                                uri: 'entities/1O8x1gO0',
+                                crosswalks: [crosswalks[1]]
+                            }
+                        ]
+                    }
+                ]
+            },
+            name: 'ROOT',
+            time: 1629801843217,
+            label: 'FirdtName IO error 2'
+        },
+        {
+            entity: {
+                merges: [
+                    {
+                        time: 1619116318362,
+                        mergeReason: 'Merge by hand',
+                        mergeRules: '',
+                        user: 'carina.alabanza@reltio.com',
+                        losers: [
+                            {
+                                uri: 'entities/1u04ksx9',
+                                crosswalks: [crosswalks[0]]
+                            }
+                        ]
+                    }
+                ],
+                uri: 'entities/1O8x1gO0',
+                crosswalks: [crosswalks[1]]
+            },
+            name: 'entities/1O8x1gO0',
+            time: 0
+        },
+        {
+            entity: {
+                uri: 'entities/1u04ksx9',
+                crosswalks: [crosswalks[2]]
+            },
+            name: 'entities/1u04ksx9',
+            time: 1619116318362
+        }
+    ];
+
+    const links = [
+        {
+            source: nodes[2],
+            target: nodes[1],
+            value: 10,
+            crosswalk: crosswalks[0],
+            color: '#e996e3'
+        },
+        {
+            source: nodes[1],
+            target: nodes[0],
+            value: 10,
+            crosswalk: crosswalks[1],
+            color: '#e9d896'
+        },
+        {
+            source: nodes[1],
+            target: nodes[0],
+            value: 10,
+            crosswalk: crosswalks[0],
+            color: '#e996e3'
+        }
+    ];
+
+    const data = {
+        nodes,
+        links
+    };
+
+    const props = {
+        data,
+        width: 600,
+        height: 300,
+        accentContributors: false,
+        disableUnmerge: false,
+        onUnmerge: jest.fn()
+    };
+
+    deepFreeze(data);
+
+    it('should render SankeyChart', () => {
+        const {asFragment} = render(<SankeyChart {...props} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should color nodes when accentContributors = true', () => {
+        const {asFragment} = render(<SankeyChart {...props} accentContributors={true} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should not render SankeyChart if data is empty', () => {
+        const {asFragment} = render(<SankeyChart {...props} data={{nodes: [], links: []}} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <svg
+                cursor="auto"
+                height="300"
+                width="600"
+              >
+                <g
+                  pointer-events="auto"
+                  transform="translate(0,299) rotate(-90)"
+                >
+                  <g />
+                  <g />
+                </g>
+              </svg>
+            </DocumentFragment>
+        `);
+    });
+});

package/src/components/SankeyChart/__tests__/__snapshots__/SankeyChart.spec.tsx.snap

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SankeyChart should color nodes when accentContributors = true 1`] = `
+<DocumentFragment>
+  <svg
+    cursor="auto"
+    height="300"
+    width="600"
+  >
+    <g
+      pointer-events="auto"
+      transform="translate(0,299) rotate(-90)"
+    >
+      <g>
+        <path
+          d="M14,298.87 
+                   L248,298.87L262,298.87 L262,314.13 
+                   L248,314.13 
+                   L14,314.13 Z"
+          fill="#F0F0F0"
+          opacity="1"
+        />
+        <path
+          d="M262,283.87 
+                   L284,283.87 
+                   L284,299.13 
+                   L262,299.13 Z"
+          fill="#F0F0F0"
+          opacity="1"
+        />
+        <path
+          d="M262,298.87 
+                   L284,298.87 
+                   L284,314.13 
+                   L262,314.13 Z"
+          fill="#F0F0F0"
+          opacity="1"
+        />
+      </g>
+      <g>
+        <g
+          transform="translate(284,284)"
+        >
+          <text
+            class="rootNode"
+            dx="0"
+            dy="-5"
+          >
+            FirdtName IO error 2
+          </text>
+        </g>
+        <g
+          transform="translate(248,284)"
+        >
+          <rect
+            class="node"
+            cursor="pointer"
+            data-reltio-id="reltio-sankey-chart-node"
+            fill="hsl(34, 66%, 81%)"
+            height="15"
+            opacity="1"
+            width="14"
+          />
+          <rect
+            class="node"
+            data-mui-internal-clone-element="true"
+            fill="#F0F0F0"
+            fill-opacity="0.54"
+            height="15"
+            opacity="1"
+            transform="translate(0,15)"
+            width="14"
+          />
+        </g>
+        <g
+          transform="translate(0,299)"
+        >
+          <rect
+            class="node"
+            cursor="pointer"
+            data-reltio-id="reltio-sankey-chart-node"
+            fill=""
+            height="15"
+            opacity="1"
+            width="14"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SankeyChart should render SankeyChart 1`] = `
+<DocumentFragment>
+  <svg
+    cursor="auto"
+    height="300"
+    width="600"
+  >
+    <g
+      pointer-events="auto"
+      transform="translate(0,299) rotate(-90)"
+    >
+      <g>
+        <path
+          d="M14,298.87 
+                   L248,298.87L262,298.87 L262,314.13 
+                   L248,314.13 
+                   L14,314.13 Z"
+          fill="hsl(142, 50%, 63%)"
+          opacity="1"
+        />
+        <path
+          d="M262,283.87 
+                   L284,283.87 
+                   L284,299.13 
+                   L262,299.13 Z"
+          fill="hsl(34, 66%, 81%)"
+          opacity="1"
+        />
+        <path
+          d="M262,298.87 
+                   L284,298.87 
+                   L284,314.13 
+                   L262,314.13 Z"
+          fill="hsl(142, 50%, 63%)"
+          opacity="1"
+        />
+      </g>
+      <g>
+        <g
+          transform="translate(284,284)"
+        >
+          <text
+            class="rootNode"
+            dx="0"
+            dy="-5"
+          >
+            FirdtName IO error 2
+          </text>
+        </g>
+        <g
+          transform="translate(248,284)"
+        >
+          <rect
+            class="node"
+            cursor="pointer"
+            data-reltio-id="reltio-sankey-chart-node"
+            fill="#F0F0F0"
+            height="15"
+            opacity="1"
+            width="14"
+          />
+          <rect
+            class="node"
+            data-mui-internal-clone-element="true"
+            fill="#F0F0F0"
+            fill-opacity="0.54"
+            height="15"
+            opacity="1"
+            transform="translate(0,15)"
+            width="14"
+          />
+        </g>
+        <g
+          transform="translate(0,299)"
+        >
+          <rect
+            class="node"
+            cursor="pointer"
+            data-reltio-id="reltio-sankey-chart-node"
+            fill="#F0F0F0"
+            height="15"
+            opacity="1"
+            width="14"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</DocumentFragment>
+`;