superset-frontend/src/explore/components/DataTableControl/useTableColumns.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 { GenericDataType } from '@superset-ui/core';
import { renderHook } from '@testing-library/react-hooks';
import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
import { useTableColumns } from '.';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type JsonObject = { [member: string]: any };

const asciiChars = [];
for (let i = 32; i < 127; i += 1) {
  asciiChars.push(String.fromCharCode(i));
}
const ASCII_KEY = asciiChars.join('');
const UNICODE_KEY = '你好. 吃了吗?';
const NUMTIME_KEY = 'numtime';
const STRTIME_KEY = 'strtime';
const NUMTIME_VALUE = 1640995200000;
const NUMTIME_FORMATTED_VALUE = '2022-01-01 00:00:00';
const STRTIME_VALUE = '2022-01-01';

const colnames = [
  'col01',
  'col02',
  ASCII_KEY,
  UNICODE_KEY,
  NUMTIME_KEY,
  STRTIME_KEY,
];
const coltypes = [
  GenericDataType.Boolean,
  GenericDataType.Boolean,
  GenericDataType.String,
  GenericDataType.String,
  GenericDataType.Temporal,
  GenericDataType.Temporal,
];

const cellValues = {
  col01: true,
  col02: false,
  [ASCII_KEY]: ASCII_KEY,
  [UNICODE_KEY]: UNICODE_KEY,
  [NUMTIME_KEY]: NUMTIME_VALUE,
  [STRTIME_KEY]: STRTIME_VALUE,
};

const data = [cellValues, cellValues, cellValues, cellValues];

const expectedDisplayValues = {
  col01: BOOL_TRUE_DISPLAY,
  col02: BOOL_FALSE_DISPLAY,
  [ASCII_KEY]: ASCII_KEY,
  [UNICODE_KEY]: UNICODE_KEY,
  [NUMTIME_KEY]: NUMTIME_FORMATTED_VALUE,
  [STRTIME_KEY]: STRTIME_VALUE,
};

test('useTableColumns with no options', () => {
  const hook = renderHook(() => useTableColumns(colnames, coltypes, data));
  expect(hook.result.current).toEqual([
    {
      Cell: expect.any(Function),
      Header: 'col01',
      accessor: expect.any(Function),
      id: 'col01',
    },
    {
      Cell: expect.any(Function),
      Header: 'col02',
      accessor: expect.any(Function),
      id: 'col02',
    },
    {
      Cell: expect.any(Function),
      Header: ASCII_KEY,
      accessor: expect.any(Function),
      id: ASCII_KEY,
    },
    {
      Cell: expect.any(Function),
      Header: UNICODE_KEY,
      accessor: expect.any(Function),
      id: UNICODE_KEY,
    },
    {
      Cell: expect.any(Function),
      Header: expect.objectContaining({
        type: expect.objectContaining({
          name: 'DataTableTemporalHeaderCell',
        }),
        props: expect.objectContaining({
          onTimeColumnChange: expect.any(Function),
        }),
      }),
      accessor: expect.any(Function),
      id: NUMTIME_KEY,
    },
    {
      Cell: expect.any(Function),
      Header: STRTIME_KEY,
      accessor: expect.any(Function),
      id: STRTIME_KEY,
    },
  ]);
  hook.result.current.forEach((col: JsonObject) => {
    expect(col.accessor(data[0])).toBe(data[0][col.id]);
  });

  hook.result.current.forEach((col: JsonObject) => {
    data.forEach(row => {
      expect(col.Cell({ value: row[col.id] })).toBe(
        expectedDisplayValues[col.id],
      );
    });
  });
});

test('useTableColumns with options', () => {
  const hook = renderHook(() =>
    useTableColumns(colnames, coltypes, data, undefined, true, {
      col01: { Header: 'Header' },
    }),
  );
  expect(hook.result.current).toEqual([
    {
      Cell: expect.any(Function),
      Header: 'Header',
      accessor: expect.any(Function),
      id: 'col01',
    },
    {
      Cell: expect.any(Function),
      Header: 'col02',
      accessor: expect.any(Function),
      id: 'col02',
    },
    {
      Cell: expect.any(Function),
      Header: ASCII_KEY,
      accessor: expect.any(Function),
      id: ASCII_KEY,
    },
    {
      Cell: expect.any(Function),
      Header: UNICODE_KEY,
      accessor: expect.any(Function),
      id: UNICODE_KEY,
    },
    {
      Cell: expect.any(Function),
      Header: expect.objectContaining({
        type: expect.objectContaining({
          name: 'DataTableTemporalHeaderCell',
        }),
        props: expect.objectContaining({
          onTimeColumnChange: expect.any(Function),
        }),
      }),
      accessor: expect.any(Function),
      id: NUMTIME_KEY,
    },
    {
      Cell: expect.any(Function),
      Header: STRTIME_KEY,
      accessor: expect.any(Function),
      id: STRTIME_KEY,
    },
  ]);
  hook.result.current.forEach((col: JsonObject) => {
    expect(col.accessor(data[0])).toBe(data[0][col.id]);
  });

  hook.result.current.forEach((col: JsonObject) => {
    data.forEach(row => {
      expect(col.Cell({ value: row[col.id] })).toBe(
        expectedDisplayValues[col.id],
      );
    });
  });
});