mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
fix: dataTablesPane cell render undefine when the dot in metric label (#15817)
* fix: dataTablesPane cell render undefine when the dot in metric label * fix UT
This commit is contained in:
parent
fdb40350bb
commit
b9d3338153
@ -122,7 +122,7 @@ export const useTableColumns = (
|
|||||||
? Object.keys(data[0]).map(
|
? Object.keys(data[0]).map(
|
||||||
key =>
|
key =>
|
||||||
({
|
({
|
||||||
accessor: key,
|
accessor: row => row[key],
|
||||||
Header: key,
|
Header: key,
|
||||||
Cell: ({ value }) => {
|
Cell: ({ value }) => {
|
||||||
if (value === true) {
|
if (value === true) {
|
||||||
|
@ -16,38 +16,121 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { renderHook } from '@testing-library/react-hooks';
|
import { renderHook } from '@testing-library/react-hooks';
|
||||||
|
import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
|
||||||
import { useTableColumns } from '.';
|
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 asciiKey = asciiChars.join('');
|
||||||
|
const unicodeKey = '你好. 吃了吗?';
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ col01: 'some', col02: 'data' },
|
{ col01: true, col02: false, [asciiKey]: asciiKey, [unicodeKey]: unicodeKey },
|
||||||
{ col01: 'any', col02: 'data' },
|
{ col01: true, col02: false, [asciiKey]: asciiKey, [unicodeKey]: unicodeKey },
|
||||||
{ col01: 'some', col02: 'thing' },
|
{ col01: true, col02: false, [asciiKey]: asciiKey, [unicodeKey]: unicodeKey },
|
||||||
{ col01: 'any', col02: 'things', col03: 'secret' },
|
{
|
||||||
|
col01: true,
|
||||||
|
col02: false,
|
||||||
|
col03: 'secret',
|
||||||
|
[asciiKey]: asciiKey,
|
||||||
|
[unicodeKey]: unicodeKey,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
test('useTableColumns with no options', () => {
|
test('useTableColumns with no options', () => {
|
||||||
const hook = renderHook(() => useTableColumns(data));
|
const hook = renderHook(() => useTableColumns(data));
|
||||||
expect(hook.result.current).toEqual([
|
expect(hook.result.current).toEqual([
|
||||||
{ Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
|
{
|
||||||
{ Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
|
Cell: expect.any(Function),
|
||||||
|
Header: 'col01',
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: 'col02',
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: asciiKey,
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: unicodeKey,
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
hook.result.current.forEach((col: JsonObject) => {
|
||||||
|
expect(col.accessor(data[0])).toBe(data[0][col.Header]);
|
||||||
|
});
|
||||||
|
|
||||||
|
hook.result.current.forEach((col: JsonObject) => {
|
||||||
|
data.forEach(row => {
|
||||||
|
expect(col.Cell({ value: row.col01 })).toBe(BOOL_TRUE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: row.col02 })).toBe(BOOL_FALSE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: row[asciiKey] })).toBe(asciiKey);
|
||||||
|
expect(col.Cell({ value: row[unicodeKey] })).toBe(unicodeKey);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
test('use only the first record columns', () => {
|
test('use only the first record columns', () => {
|
||||||
const hook = renderHook(() => useTableColumns(data));
|
const newData = [data[3], data[0]];
|
||||||
|
const hook = renderHook(() => useTableColumns(newData));
|
||||||
expect(hook.result.current).toEqual([
|
expect(hook.result.current).toEqual([
|
||||||
{ Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
|
{
|
||||||
{ Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
|
Cell: expect.any(Function),
|
||||||
|
Header: 'col01',
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: 'col02',
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: 'col03',
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: asciiKey,
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: unicodeKey,
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const hook2 = renderHook(() => useTableColumns([data[3], data[0]]));
|
hook.result.current.forEach((col: JsonObject) => {
|
||||||
expect(hook2.result.current).toEqual([
|
expect(col.accessor(newData[0])).toBe(newData[0][col.Header]);
|
||||||
{ Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
|
});
|
||||||
{ Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
|
|
||||||
{ Cell: expect.any(Function), Header: 'col03', accessor: 'col03' },
|
hook.result.current.forEach((col: JsonObject) => {
|
||||||
]);
|
expect(col.Cell({ value: newData[0].col01 })).toBe(BOOL_TRUE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: newData[0].col02 })).toBe(BOOL_FALSE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: newData[0].col03 })).toBe('secret');
|
||||||
|
expect(col.Cell({ value: newData[0][asciiKey] })).toBe(asciiKey);
|
||||||
|
expect(col.Cell({ value: newData[0][unicodeKey] })).toBe(unicodeKey);
|
||||||
|
});
|
||||||
|
|
||||||
|
hook.result.current.forEach((col: JsonObject) => {
|
||||||
|
expect(col.Cell({ value: newData[1].col01 })).toBe(BOOL_TRUE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: newData[1].col02 })).toBe(BOOL_FALSE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: newData[1].col03 })).toBe('undefined');
|
||||||
|
expect(col.Cell({ value: newData[1][asciiKey] })).toBe(asciiKey);
|
||||||
|
expect(col.Cell({ value: newData[1][unicodeKey] })).toBe(unicodeKey);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
test('useTableColumns with options', () => {
|
test('useTableColumns with options', () => {
|
||||||
@ -56,9 +139,35 @@ test('useTableColumns with options', () => {
|
|||||||
{
|
{
|
||||||
Cell: expect.any(Function),
|
Cell: expect.any(Function),
|
||||||
Header: 'col01',
|
Header: 'col01',
|
||||||
accessor: 'col01',
|
accessor: expect.any(Function),
|
||||||
id: 'ID',
|
id: 'ID',
|
||||||
},
|
},
|
||||||
{ Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: 'col02',
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: asciiKey,
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Cell: expect.any(Function),
|
||||||
|
Header: unicodeKey,
|
||||||
|
accessor: expect.any(Function),
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
hook.result.current.forEach((col: JsonObject) => {
|
||||||
|
expect(col.accessor(data[0])).toBe(data[0][col.Header]);
|
||||||
|
});
|
||||||
|
|
||||||
|
hook.result.current.forEach((col: JsonObject) => {
|
||||||
|
data.forEach(row => {
|
||||||
|
expect(col.Cell({ value: row.col01 })).toBe(BOOL_TRUE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: row.col02 })).toBe(BOOL_FALSE_DISPLAY);
|
||||||
|
expect(col.Cell({ value: row[asciiKey] })).toBe(asciiKey);
|
||||||
|
expect(col.Cell({ value: row[unicodeKey] })).toBe(unicodeKey);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user