2022-02-07 09:48:23 -05:00
|
|
|
/**
|
|
|
|
* 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.
|
|
|
|
*/
|
2022-03-25 02:55:11 -04:00
|
|
|
import React, { ReactElement } from 'react';
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
|
|
import '@testing-library/jest-dom';
|
|
|
|
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
|
2022-02-07 09:48:23 -05:00
|
|
|
import {
|
|
|
|
getColumnLabelText,
|
|
|
|
getColumnTooltipNode,
|
|
|
|
getMetricTooltipNode,
|
|
|
|
} from '../../src/components/labelUtils';
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
const renderWithTheme = (ui: ReactElement) =>
|
|
|
|
render(<ThemeProvider theme={supersetTheme}>{ui}</ThemeProvider>);
|
|
|
|
|
2022-02-07 09:48:23 -05:00
|
|
|
test("should get column name when column doesn't have verbose_name", () => {
|
|
|
|
expect(
|
|
|
|
getColumnLabelText({
|
|
|
|
id: 123,
|
|
|
|
column_name: 'column name',
|
|
|
|
verbose_name: '',
|
|
|
|
}),
|
|
|
|
).toBe('column name');
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should get verbose name when column have verbose_name', () => {
|
|
|
|
expect(
|
|
|
|
getColumnLabelText({
|
|
|
|
id: 123,
|
|
|
|
column_name: 'column name',
|
|
|
|
verbose_name: 'verbose name',
|
|
|
|
}),
|
|
|
|
).toBe('verbose name');
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should get null as tooltip', () => {
|
|
|
|
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
|
|
|
|
expect(
|
|
|
|
getColumnTooltipNode(
|
|
|
|
{
|
|
|
|
id: 123,
|
|
|
|
column_name: 'column name',
|
|
|
|
verbose_name: '',
|
2022-03-25 02:55:11 -04:00
|
|
|
description: '',
|
2022-02-07 09:48:23 -05:00
|
|
|
},
|
|
|
|
ref,
|
|
|
|
),
|
|
|
|
).toBe(null);
|
|
|
|
});
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
test('should get column name, verbose name and description when it has a verbose name', () => {
|
|
|
|
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
|
|
|
|
renderWithTheme(
|
2022-02-07 09:48:23 -05:00
|
|
|
<>
|
2022-03-25 02:55:11 -04:00
|
|
|
{getColumnTooltipNode(
|
|
|
|
{
|
|
|
|
id: 123,
|
|
|
|
column_name: 'column name',
|
|
|
|
verbose_name: 'verbose name',
|
|
|
|
description: 'A very important column',
|
|
|
|
},
|
|
|
|
ref,
|
|
|
|
)}
|
|
|
|
</>,
|
2022-02-07 09:48:23 -05:00
|
|
|
);
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
expect(screen.getByText('Column name')).toBeVisible();
|
|
|
|
expect(screen.getByText('column name')).toBeVisible();
|
|
|
|
expect(screen.getByText('Label')).toBeVisible();
|
|
|
|
expect(screen.getByText('verbose name')).toBeVisible();
|
|
|
|
expect(screen.getByText('Description')).toBeVisible();
|
|
|
|
expect(screen.getByText('A very important column')).toBeVisible();
|
2022-02-07 09:48:23 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
test('should get column name as tooltip if it overflowed', () => {
|
|
|
|
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
|
2022-03-25 02:55:11 -04:00
|
|
|
renderWithTheme(
|
|
|
|
<>
|
|
|
|
{getColumnTooltipNode(
|
|
|
|
{
|
|
|
|
id: 123,
|
|
|
|
column_name: 'long long long long column name',
|
|
|
|
verbose_name: '',
|
|
|
|
description: '',
|
|
|
|
},
|
|
|
|
ref,
|
|
|
|
)}
|
|
|
|
</>,
|
|
|
|
);
|
|
|
|
expect(screen.getByText('Column name')).toBeVisible();
|
|
|
|
expect(screen.getByText('long long long long column name')).toBeVisible();
|
|
|
|
expect(screen.queryByText('Label')).not.toBeInTheDocument();
|
|
|
|
expect(screen.queryByText('Description')).not.toBeInTheDocument();
|
2022-02-07 09:48:23 -05:00
|
|
|
});
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
test('should get column name, verbose name and description as tooltip if it overflowed', () => {
|
|
|
|
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
|
|
|
|
renderWithTheme(
|
2022-02-07 09:48:23 -05:00
|
|
|
<>
|
2022-03-25 02:55:11 -04:00
|
|
|
{getColumnTooltipNode(
|
|
|
|
{
|
|
|
|
id: 123,
|
|
|
|
column_name: 'long long long long column name',
|
|
|
|
verbose_name: 'long long long long verbose name',
|
|
|
|
description: 'A very important column',
|
|
|
|
},
|
|
|
|
ref,
|
|
|
|
)}
|
|
|
|
</>,
|
2022-02-07 09:48:23 -05:00
|
|
|
);
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
expect(screen.getByText('Column name')).toBeVisible();
|
|
|
|
expect(screen.getByText('long long long long column name')).toBeVisible();
|
|
|
|
expect(screen.getByText('Label')).toBeVisible();
|
|
|
|
expect(screen.getByText('long long long long verbose name')).toBeVisible();
|
|
|
|
expect(screen.getByText('Description')).toBeVisible();
|
|
|
|
expect(screen.getByText('A very important column')).toBeVisible();
|
2022-02-07 09:48:23 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
test('should get null as tooltip in metric', () => {
|
|
|
|
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
|
|
|
|
expect(
|
|
|
|
getMetricTooltipNode(
|
|
|
|
{
|
|
|
|
metric_name: 'count',
|
|
|
|
label: '',
|
|
|
|
verbose_name: '',
|
2022-03-25 02:55:11 -04:00
|
|
|
description: '',
|
2022-02-07 09:48:23 -05:00
|
|
|
},
|
|
|
|
ref,
|
|
|
|
),
|
|
|
|
).toBe(null);
|
|
|
|
});
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
test('should get metric name, verbose name and description as tooltip in metric', () => {
|
|
|
|
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
|
|
|
|
renderWithTheme(
|
2022-02-07 09:48:23 -05:00
|
|
|
<>
|
2022-03-25 02:55:11 -04:00
|
|
|
{getMetricTooltipNode(
|
|
|
|
{
|
|
|
|
metric_name: 'count',
|
|
|
|
label: 'count(*)',
|
|
|
|
verbose_name: 'count(*)',
|
|
|
|
description: 'Count metric',
|
|
|
|
},
|
|
|
|
ref,
|
|
|
|
)}
|
|
|
|
</>,
|
2022-02-07 09:48:23 -05:00
|
|
|
);
|
2022-03-25 02:55:11 -04:00
|
|
|
expect(screen.getByText('Metric name')).toBeVisible();
|
|
|
|
expect(screen.getByText('count')).toBeVisible();
|
|
|
|
expect(screen.getByText('Label')).toBeVisible();
|
|
|
|
expect(screen.getByText('count(*)')).toBeVisible();
|
|
|
|
expect(screen.getByText('Description')).toBeVisible();
|
|
|
|
expect(screen.getByText('Count metric')).toBeVisible();
|
2022-02-07 09:48:23 -05:00
|
|
|
});
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
test('should get metric name as tooltip if it overflowed', () => {
|
|
|
|
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
|
|
|
|
renderWithTheme(
|
2022-02-07 09:48:23 -05:00
|
|
|
<>
|
2022-03-25 02:55:11 -04:00
|
|
|
{getMetricTooltipNode(
|
|
|
|
{
|
|
|
|
metric_name: 'long long long long metric name',
|
|
|
|
label: '',
|
|
|
|
verbose_name: '',
|
|
|
|
description: '',
|
|
|
|
},
|
|
|
|
ref,
|
|
|
|
)}
|
|
|
|
</>,
|
2022-02-07 09:48:23 -05:00
|
|
|
);
|
2022-03-25 02:55:11 -04:00
|
|
|
expect(screen.getByText('Metric name')).toBeVisible();
|
|
|
|
expect(screen.getByText('long long long long metric name')).toBeVisible();
|
|
|
|
expect(screen.queryByText('Label')).not.toBeInTheDocument();
|
|
|
|
expect(screen.queryByText('Description')).not.toBeInTheDocument();
|
2022-02-07 09:48:23 -05:00
|
|
|
});
|
|
|
|
|
2022-03-25 02:55:11 -04:00
|
|
|
test('should get metric name, verbose name and description in tooltip if it overflowed', () => {
|
2022-02-07 09:48:23 -05:00
|
|
|
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
|
2022-03-25 02:55:11 -04:00
|
|
|
renderWithTheme(
|
|
|
|
<>
|
|
|
|
{getMetricTooltipNode(
|
|
|
|
{
|
|
|
|
metric_name: 'count',
|
|
|
|
label: '',
|
|
|
|
verbose_name: 'longlonglonglonglong verbose metric',
|
|
|
|
description: 'Count metric',
|
|
|
|
},
|
|
|
|
ref,
|
|
|
|
)}
|
|
|
|
</>,
|
|
|
|
);
|
|
|
|
expect(screen.getByText('Metric name')).toBeVisible();
|
|
|
|
expect(screen.getByText('count')).toBeVisible();
|
|
|
|
expect(screen.getByText('Label')).toBeVisible();
|
|
|
|
expect(screen.getByText('longlonglonglonglong verbose metric')).toBeVisible();
|
|
|
|
expect(screen.getByText('Description')).toBeVisible();
|
|
|
|
expect(screen.getByText('Count metric')).toBeVisible();
|
2022-02-07 09:48:23 -05:00
|
|
|
});
|