Sankey chart - component tests (#29108)

packages/react-charting/docs/TestPlans/SankeyChart/ComponentTests.md

@@ -0,0 +1,29 @@
+**Sankey Chart – Component test plan**
+
+**Sub-components: Node, Callout, Labels,**
+
+1. **Node: Node data, Node color, Node label**
+1. **Callout: Default callout**
+1. **Labels: Default labels**
+
+|                             **Test steps**                              |                          **Validation**                          | **Tool used** |
+| :---------------------------------------------------------------------: | :--------------------------------------------------------------: | :-----------: |
+|                       Test 1: [Snapshot testing]                        |                                                                  |               |
+|             - With only data prop, string data as node ID.              |          Should render sankey chart with axis correctly          |      RTL      |
+|             - With only data prop, numeric data as node ID.             |          Should render sankey chart with axis correctly          |    Enzyme     |
+|                   - With node color and border colors                   | Should render Sankey chart with specified node and border colors |    Enzyme     |
+|             Test 2: Render calling with respective to props             |                                                                  |               |
+| - No prop changes: Mount Sankey chart and then set the same props again |          Render function should have been called twice           |    Enzyme     |
+|     - Prop changes: Mount Sankey chart and then set some other prop     |          Render function should have been called twice           |    Enzyme     |
+|                          Test 3: Mouse events                           |                                                                  |               |
+|                         - Mouse over on a node                          |        Should update Sankey chart correctly on mouseover         |    Enzyme     |
+|                          - Mouse over on link                           |        Should update Sankey chart correctly on mouseover         |    Enzyme     |
+|                         - Mouse click on a node                         |       Should update node and path color based on the link        |      RTL      |
+|                      Test 4: [Sub-Component]: Node                      |                                                                  |               |
+|                          - Specify node color                           |           Should render node with the specified color            |    Enzyme     |
+|                    - With node description is large                     |  Should render tooltip correctly when node description is large  |    Enzyme     |
+|                    Test 5: [Sub-Component]: Callout                     |                                                                  |               |
+|              - Hover mouse over a link to display callout               |          Should show the default callout over that link          |    Enzyme     |
+|                     Test 6: [Sub-Component]: Labels                     |                                                                  |               |
+|                         - Set node name to “x”                          |                 Should render node name properly                 |      RTL      |
+|                   Test 7: Theme changed to Dark Theme                   |                   Should reflect theme change                    |      RTL      |

packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx

@@ -1,10 +1,55 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
-import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
-import { data } from './SankeyChart.test';
+import { queryAllByAttribute, render, waitFor, screen, fireEvent } from '@testing-library/react';
 import { IChartProps, SankeyChart } from './index';
 import { resetIds } from '../../Utilities';
-import { SankeyChartBase } from './SankeyChart.base';
+import { getByClass, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
+import { DarkTheme } from '@fluentui/theme-samples';
+import { ThemeProvider } from '@fluentui/react';
+
+const chartPointsWithStringNodeId: IChartProps = {
+  chartTitle: 'Sankey Chart',
+  SankeyChartData: {
+    nodes: [
+      {
+        nodeId: 'zero',
+        name: '192.168.42.72',
+        color: '#757575',
+        borderColor: '#4B3867',
+      },
+      {
+        nodeId: 'one',
+        name: '172.152.48.13',
+        color: '#8764B8',
+        borderColor: '#4B3867',
+      },
+      {
+        nodeId: 'two',
+        name: '124.360.55.1',
+        color: '#757575',
+        borderColor: '#4B3867',
+      },
+      {
+        nodeId: 'three',
+        name: '192.564.10.2',
+        color: '#8764B8',
+        borderColor: '#4B3867',
+      },
+    ],
+    links: [
+      {
+        source: 0,
+        target: 2,
+        value: 80,
+      },
+      {
+        source: 1,
+        target: 3,
+        value: 50,
+      },
+    ],
+  },
+};
 
 const emptyChartPoints: IChartProps = {
   chartData: [],
@@ -14,19 +59,82 @@ function sharedBeforeEach() {
   resetIds();
 }
 
+describe('Sankey bar chart rendering', () => {
+  testWithoutWait(
+    'Should render the Sankey chart with string node data',
+    SankeyChart,
+    { data: chartPointsWithStringNodeId },
+    container => {
+      // Assert
+      expect(container).toMatchSnapshot();
+    },
+  );
+});
+
+describe('Sankey chart - Theme', () => {
+  test('Should reflect theme change', () => {
+    // Arrange
+    const { container } = render(
+      <ThemeProvider theme={DarkTheme}>
+        <SankeyChart data={chartPointsWithStringNodeId} />
+      </ThemeProvider>,
+    );
+    // Assert
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe('Sankey chart - Subcomponent Node', () => {
+  // Replace the original method with the mock implementation
+  const mockGetComputedTextLength = jest.fn().mockReturnValue(100);
+  Object.defineProperty(
+    Object.getPrototypeOf(document.createElementNS('http://www.w3.org/2000/svg', 'tspan')),
+    'getComputedTextLength',
+    {
+      value: mockGetComputedTextLength,
+    },
+  );
+  testWithWait(
+    'Should update path color same as node color when we clck on node',
+    SankeyChart,
+    { data: chartPointsWithStringNodeId },
+    async container => {
+      const nodes = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect');
+      fireEvent.click(nodes[0]);
+      const pathsAfterMouseOver = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'path');
+      // Assert
+      expect(pathsAfterMouseOver).toBeDefined();
+      expect(pathsAfterMouseOver[0].getAttribute('stroke')).toEqual('#757575');
+      expect(nodes[0].getAttribute('fill')).toEqual('#757575');
+      expect(nodes[2].getAttribute('fill')).toEqual('#757575');
+    },
+  );
+});
+
+describe('Sankey chart - Subcomponent Label', () => {
+  testWithoutWait(
+    'Should render sankey chart with node labels',
+    SankeyChart,
+    { data: chartPointsWithStringNodeId },
+    async container => {
+      const nodes = getByClass(container, /nodeName/i);
+      expect(nodes).toHaveLength(4);
+      expect(screen.queryByText('192.168.42.72')).not.toBeNull();
+    },
+  );
+});
+
 describe('Sankey chart rendering', () => {
   beforeEach(sharedBeforeEach);
   test('Should re-render the Sankey chart with data', async () => {
-    jest.spyOn(SankeyChartBase.prototype as any, '_truncateText').mockImplementation(() => 'test');
-    jest.spyOn(SankeyChartBase.prototype as any, '_createNodes').mockImplementation(() => []);
     // Arrange
     const { container, rerender } = render(<SankeyChart data={emptyChartPoints} />);
     const getById = queryAllByAttribute.bind(null, 'id');
     // Assert
     expect(container).toMatchSnapshot();
     expect(getById(container, /_SankeyChart_empty/i)).toHaveLength(1);
     // Act
-    rerender(<SankeyChart data={data} />);
+    rerender(<SankeyChart data={chartPointsWithStringNodeId} />);
     await waitFor(() => {
       // Assert
       expect(container).toMatchSnapshot();