superset-frontend/plugins/plugin-chart-echarts/test/Tree/transformProps.test.ts

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { ChartProps, supersetTheme } from '@superset-ui/core';
import transformProps from '../../src/Tree/transformProps';
import { EchartsTreeChartProps } from '../../src/Tree/types';

describe('EchartsTree transformProps', () => {
  const formData = {
    colorScheme: 'bnbColors',
    datasource: '3__table',
    granularity_sqla: 'ds',
    metric: 'count',
    id: 'id_column',
    parent: 'relation_column',
    name: 'name_column',
    rootNodeId: '1',
  };
  const chartPropsConfig = {
    formData,
    width: 800,
    height: 600,
    theme: supersetTheme,
  };
  it('should transform when parent present before child', () => {
    const queriesData = [
      {
        colnames: ['id_column', 'relation_column', 'name_column', 'count'],
        data: [
          {
            id_column: '1',
            relation_column: null,
            name_column: 'root',
            count: 10,
          },
          {
            id_column: '2',
            relation_column: '1',
            name_column: 'first_child',
            count: 10,
          },
          {
            id_column: '3',
            relation_column: '2',
            name_column: 'second_child',
            count: 10,
          },
          {
            id_column: '4',
            relation_column: '3',
            name_column: 'third_child',
            count: 10,
          },
        ],
      },
    ];

    const chartProps = new ChartProps({ ...chartPropsConfig, queriesData });
    expect(transformProps(chartProps as EchartsTreeChartProps)).toEqual(
      expect.objectContaining({
        width: 800,
        height: 600,
        echartOptions: expect.objectContaining({
          series: expect.arrayContaining([
            expect.objectContaining({
              data: [
                {
                  name: 'root',
                  children: [
                    {
                      name: 'first_child',
                      value: 10,
                      children: [
                        {
                          name: 'second_child',
                          value: 10,
                          children: [
                            { name: 'third_child', value: 10, children: [] },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            }),
          ]),
        }),
      }),
    );
  });
  it('should transform when child is present before parent', () => {
    const queriesData = [
      {
        colnames: ['id_column', 'relation_column', 'name_column', 'count'],
        data: [
          {
            id_column: '1',
            relation_column: null,
            name_column: 'root',
            count: 10,
          },
          {
            id_column: '2',
            relation_column: '4',
            name_column: 'second_child',
            count: 20,
          },
          {
            id_column: '3',
            relation_column: '4',
            name_column: 'second_child',
            count: 30,
          },
          {
            id_column: '4',
            relation_column: '1',
            name_column: 'first_child',
            count: 40,
          },
        ],
      },
    ];

    const chartProps = new ChartProps({ ...chartPropsConfig, queriesData });
    expect(transformProps(chartProps as EchartsTreeChartProps)).toEqual(
      expect.objectContaining({
        width: 800,
        height: 600,
        echartOptions: expect.objectContaining({
          series: expect.arrayContaining([
            expect.objectContaining({
              data: [
                {
                  name: 'root',
                  children: [
                    {
                      name: 'first_child',
                      value: 40,
                      children: [
                        {
                          name: 'second_child',
                          value: 20,
                          children: [],
                        },
                        {
                          name: 'second_child',
                          value: 30,
                          children: [],
                        },
                      ],
                    },
                  ],
                },
              ],
            }),
          ]),
        }),
      }),
    );
  });
  it('ignore node if not attached to root', () => {
    const formData = {
      colorScheme: 'bnbColors',
      datasource: '3__table',
      granularity_sqla: 'ds',
      metric: 'count',
      id: 'id_column',
      parent: 'relation_column',
      name: 'name_column',
      rootNodeId: '2',
    };
    const chartPropsConfig = {
      formData,
      width: 800,
      height: 600,
      theme: supersetTheme,
    };
    const queriesData = [
      {
        colnames: ['id_column', 'relation_column', 'name_column', 'count'],
        data: [
          {
            id_column: '1',
            relation_column: null,
            name_column: 'root',
            count: 10,
          },
          {
            id_column: '2',
            relation_column: '1',
            name_column: 'first_child',
            count: 10,
          },
          {
            id_column: '3',
            relation_column: '2',
            name_column: 'second_child',
            count: 10,
          },
          {
            id_column: '4',
            relation_column: '3',
            name_column: 'third_child',
            count: 20,
          },
        ],
      },
    ];

    const chartProps = new ChartProps({ ...chartPropsConfig, queriesData });
    expect(transformProps(chartProps as EchartsTreeChartProps)).toEqual(
      expect.objectContaining({
        width: 800,
        height: 600,
        echartOptions: expect.objectContaining({
          series: expect.arrayContaining([
            expect.objectContaining({
              data: [
                {
                  name: 'first_child',
                  children: [
                    {
                      name: 'second_child',
                      value: 10,
                      children: [
                        {
                          name: 'third_child',
                          value: 20,
                          children: [],
                        },
                      ],
                    },
                  ],
                },
              ],
            }),
          ]),
        }),
      }),
    );
  });
  it('should transform props if name column is not specified', () => {
    const formData = {
      colorScheme: 'bnbColors',
      datasource: '3__table',
      granularity_sqla: 'ds',
      metric: 'count',
      id: 'id_column',
      parent: 'relation_column',
      rootNodeId: '1',
    };
    const chartPropsConfig = {
      formData,
      width: 800,
      height: 600,
      theme: supersetTheme,
    };
    const queriesData = [
      {
        colnames: ['id_column', 'relation_column', 'count'],
        data: [
          {
            id_column: '1',
            relation_column: null,
            count: 10,
          },
          {
            id_column: '2',
            relation_column: '1',
            count: 10,
          },
          {
            id_column: '3',
            relation_column: '2',
            count: 10,
          },
          {
            id_column: '4',
            relation_column: '3',
            count: 20,
          },
        ],
      },
    ];

    const chartProps = new ChartProps({ ...chartPropsConfig, queriesData });
    expect(transformProps(chartProps as EchartsTreeChartProps)).toEqual(
      expect.objectContaining({
        width: 800,
        height: 600,
        echartOptions: expect.objectContaining({
          series: expect.arrayContaining([
            expect.objectContaining({
              data: [
                {
                  name: '1',
                  children: [
                    {
                      name: '2',
                      value: 10,
                      children: [
                        {
                          name: '3',
                          value: 10,
                          children: [
                            {
                              name: '4',
                              value: 20,
                              children: [],
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            }),
          ]),
        }),
      }),
    );
  });
  it('should find root node with null parent when root node name is not provided', () => {
    const formData = {
      colorScheme: 'bnbColors',
      datasource: '3__table',
      granularity_sqla: 'ds',
      metric: 'count',
      id: 'id_column',
      parent: 'relation_column',
      name: 'name_column',
    };
    const chartPropsConfig = {
      formData,
      width: 800,
      height: 600,
      theme: supersetTheme,
    };
    const queriesData = [
      {
        colnames: ['id_column', 'relation_column', 'name_column', 'count'],
        data: [
          {
            id_column: '2',
            relation_column: '4',
            name_column: 'second_child',
            count: 20,
          },
          {
            id_column: '3',
            relation_column: '4',
            name_column: 'second_child',
            count: 30,
          },
          {
            id_column: '4',
            relation_column: '1',
            name_column: 'first_child',
            count: 40,
          },
          {
            id_column: '1',
            relation_column: null,
            name_column: 'root',
            count: 10,
          },
        ],
      },
    ];

    const chartProps = new ChartProps({ ...chartPropsConfig, queriesData });
    expect(transformProps(chartProps as EchartsTreeChartProps)).toEqual(
      expect.objectContaining({
        width: 800,
        height: 600,
        echartOptions: expect.objectContaining({
          series: expect.arrayContaining([
            expect.objectContaining({
              data: [
                {
                  name: 'root',
                  children: [
                    {
                      name: 'first_child',
                      value: 40,
                      children: [
                        {
                          name: 'second_child',
                          value: 20,
                          children: [],
                        },
                        {
                          name: 'second_child',
                          value: 30,
                          children: [],
                        },
                      ],
                    },
                  ],
                },
              ],
            }),
          ]),
        }),
      }),
    );
  });
});