QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-06-01 21:59:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(frontend): comprehensive TypeScript quality improvements (#37625)

Browse Source 
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Evan Rusackas
2026-02-06 16:16:57 -05:00
committed by GitHub
parent e9ae212c1c
commit fc5506e466
441 changed files with 14136 additions and 9956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
View File

@@ -17,7 +17,6 @@
* under the License.
*/
import sinon from 'sinon';
import {
render,
screen,
@@ -32,7 +31,7 @@ import * as downloadAsImage from 'src/utils/downloadAsImage';
import * as exploreUtils from 'src/explore/exploreUtils';
import { FeatureFlag, VizType } from '@superset-ui/core';
import { useUnsavedChangesPrompt } from 'src/hooks/useUnsavedChangesPrompt';
import ExploreHeader from '.';
import ExploreHeader, { ExploreChartHeaderProps } from '.';
import { getChartMetadataRegistry } from '@superset-ui/core';
import fs from 'fs';
import path from 'path';
@@ -56,90 +55,99 @@ const mockExportCurrentViewBehavior = () => {
} as any);
};
const createProps = (additionalProps = {}) => ({
chart: {
id: 1,
latestQueryFormData: {
viz_type: VizType.Histogram,
datasource: '49__table',
slice_id: 318,
url_params: {},
granularity_sqla: 'time_start',
time_range: 'No filter',
all_columns_x: ['age'],
adhoc_filters: [],
row_limit: 10000,
groupby: null,
color_scheme: 'supersetColors',
label_colors: {},
link_length: '25',
x_axis_label: 'age',
y_axis_label: 'count',
server_pagination: false as any,
},
chartStatus: 'rendered',
},
slice: {
cache_timeout: null,
changed_on: '2021-03-19T16:30:56.750230',
changed_on_humanized: '7 days ago',
datasource: 'FCC 2018 Survey',
description: 'Simple description',
description_markeddown: '',
edit_url: '/chart/edit/318',
form_data: {
adhoc_filters: [],
all_columns_x: ['age'],
color_scheme: 'supersetColors',
datasource: '49__table',
granularity_sqla: 'time_start',
groupby: null,
label_colors: {},
link_length: '25',
queryFields: { groupby: 'groupby' },
row_limit: 10000,
slice_id: 318,
time_range: 'No filter',
url_params: {},
viz_type: VizType.Histogram,
x_axis_label: 'age',
y_axis_label: 'count',
},
modified: '<span class="no-wrap">7 days ago</span>',
owners: [
{
text: 'Superset Admin',
value: 1,
const createProps = (additionalProps = {}) =>
({
chart: {
id: 1,
latestQueryFormData: {
viz_type: VizType.Histogram,
datasource: '49__table',
slice_id: 318,
url_params: {},
granularity_sqla: 'time_start',
time_range: 'No filter',
all_columns_x: ['age'],
adhoc_filters: [],
row_limit: 10000,
groupby: null,
color_scheme: 'supersetColors',
label_colors: {},
link_length: '25',
x_axis_label: 'age',
y_axis_label: 'count',
server_pagination: false,
},
],
slice_id: 318,
slice_name: 'Age distribution of respondents',
slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20318%7D',
},
slice_name: 'Age distribution of respondents',
actions: {
postChartFormData: jest.fn(),
updateChartTitle: jest.fn(),
fetchFaveStar: jest.fn(),
saveFaveStar: jest.fn(),
redirectSQLLab: jest.fn(),
},
user: {
userId: 1,
},
metadata: {
created_on_humanized: 'a week ago',
changed_on_humanized: '2 days ago',
owners: ['John Doe'],
created_by: 'John Doe',
changed_by: 'John Doe',
dashboards: [{ id: 1, dashboard_title: 'Test' }],
},
canOverwrite: false,
canDownload: false,
isStarred: false,
...additionalProps,
});
chartStatus: 'rendered' as const,
chartAlert: null,
chartUpdateEndTime: null,
chartUpdateStartTime: 0,
lastRendered: 0,
sliceFormData: null,
queryController: null,
queriesResponse: null,
triggerQuery: false,
},
slice: {
cache_timeout: null,
changed_on: '2021-03-19T16:30:56.750230',
changed_on_humanized: '7 days ago',
datasource: 'FCC 2018 Survey',
description: 'Simple description',
description_markeddown: '',
edit_url: '/chart/edit/318',
form_data: {
adhoc_filters: [],
all_columns_x: ['age'],
color_scheme: 'supersetColors',
datasource: '49__table',
granularity_sqla: 'time_start',
groupby: null,
label_colors: {},
link_length: '25',
queryFields: { groupby: 'groupby' },
row_limit: 10000,
slice_id: 318,
time_range: 'No filter',
url_params: {},
viz_type: VizType.Histogram,
x_axis_label: 'age',
y_axis_label: 'count',
},
modified: '<span class="no-wrap">7 days ago</span>',
owners: [
{
text: 'Superset Admin',
value: 1,
},
],
slice_id: 318,
slice_name: 'Age distribution of respondents',
slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20318%7D',
},
sliceName: 'Age distribution of respondents',
actions: {
postChartFormData: jest.fn(),
updateChartTitle: jest.fn(),
fetchFaveStar: jest.fn(),
saveFaveStar: jest.fn(),
redirectSQLLab: jest.fn(),
},
user: {
userId: 1,
},
metadata: {
created_on_humanized: 'a week ago',
changed_on_humanized: '2 days ago',
owners: ['John Doe'],
created_by: 'John Doe',
changed_by: 'John Doe',
dashboards: [{ id: 1, dashboard_title: 'Test' }],
},
canOverwrite: false,
canDownload: false,
isStarred: false,
...additionalProps,
}) as unknown as ExploreChartHeaderProps;
fetchMock.post(
'http://api/v1/chart/data?form_data=%7B%22slice_id%22%3A318%7D',
@@ -165,27 +173,40 @@ describe('ExploreChartHeader', () => {
const props = createProps();
render(<ExploreHeader {...props} />, { useRedux: true });
const newChartName = 'New chart name';
const prevChartName = props.slice_name;
const prevChartName = props.sliceName;
// Wait for the component to render with the chart title
expect(
await screen.findByText(/add the name of the chart/i),
await screen.findByDisplayValue(prevChartName ?? ''),
).toBeInTheDocument();
userEvent.click(screen.getByLabelText('Menu actions trigger'));
userEvent.click(screen.getByText('Edit chart properties'));
await userEvent.click(screen.getByLabelText('Menu actions trigger'));
await userEvent.click(screen.getByText('Edit chart properties'));
const nameInput = await screen.findByRole('textbox', { name: 'Name' });
userEvent.clear(nameInput);
userEvent.type(nameInput, newChartName);
await userEvent.clear(nameInput);
await userEvent.type(nameInput, newChartName);
expect(screen.getByDisplayValue(newChartName)).toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
userEvent.click(screen.getByLabelText('Menu actions trigger'));
userEvent.click(screen.getByText('Edit chart properties'));
// Wait for the modal to close
await waitFor(() => {
expect(
screen.queryByRole('textbox', { name: 'Name' }),
).not.toBeInTheDocument();
});
expect(await screen.findByDisplayValue(prevChartName)).toBeInTheDocument();
await userEvent.click(screen.getByLabelText('Menu actions trigger'));
await userEvent.click(screen.getByText('Edit chart properties'));
// Wait for the modal to reopen and verify the name was reset
const reopenedNameInput = await screen.findByRole('textbox', {
name: 'Name',
});
expect(reopenedNameInput).toHaveValue(prevChartName ?? '');
});
test('renders the metadata bar when saved', async () => {
@@ -203,7 +224,7 @@ describe('ExploreChartHeader', () => {
<ExploreHeader
{...props}
metadata={{
...props.metadata,
...props.metadata!,
dashboards: [
{ id: 1, dashboard_title: 'Test' },
{ id: 2, dashboard_title: 'Test2' },
@@ -575,12 +596,12 @@ describe('Additional actions tests', () => {
// eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
describe('Export All Data', () => {
let spyDownloadAsImage = sinon.spy();
let spyExportChart = sinon.spy();
let spyDownloadAsImage: jest.SpyInstance;
let spyExportChart: jest.SpyInstance;
beforeEach(() => {
spyDownloadAsImage = sinon.spy(downloadAsImage, 'default');
spyExportChart = sinon.spy(exploreUtils, 'exportChart');
spyDownloadAsImage = jest.spyOn(downloadAsImage, 'default');
spyExportChart = jest.spyOn(exploreUtils, 'exportChart');
(useUnsavedChangesPrompt as jest.Mock).mockReturnValue({
showModal: false,
@@ -592,8 +613,8 @@ describe('Additional actions tests', () => {
});
afterEach(async () => {
spyDownloadAsImage.restore();
spyExportChart.restore();
spyDownloadAsImage.mockRestore();
spyExportChart.mockRestore();
// Wait for any pending effects to complete
await new Promise(resolve => setTimeout(resolve, 0));
});
@@ -614,7 +635,7 @@ describe('Additional actions tests', () => {
userEvent.click(downloadAsImageElement);
await waitFor(() => {
expect(spyDownloadAsImage.callCount).toBe(1);
expect(spyDownloadAsImage.mock.calls.length).toBe(1);
});
});
@@ -628,8 +649,8 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Export All Data'));
const exportCSVElement = await screen.findByText('Export to .CSV');
userEvent.click(exportCSVElement);
expect(spyExportChart.callCount).toBe(0);
spyExportChart.restore();
expect(spyExportChart.mock.calls.length).toBe(0);
spyExportChart.mockRestore();
});
test('Should export to CSV if canDownload=true', async () => {
@@ -644,8 +665,8 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Export All Data'));
const exportCSVElement = await screen.findByText('Export to .CSV');
userEvent.click(exportCSVElement);
expect(spyExportChart.callCount).toBe(1);
spyExportChart.restore();
expect(spyExportChart.mock.calls.length).toBe(1);
spyExportChart.mockRestore();
});
test('Should not export to JSON if canDownload=false', async () => {
@@ -658,8 +679,8 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Export All Data'));
const exportJsonElement = await screen.findByText('Export to .JSON');
userEvent.click(exportJsonElement);
expect(spyExportChart.callCount).toBe(0);
spyExportChart.restore();
expect(spyExportChart.mock.calls.length).toBe(0);
spyExportChart.mockRestore();
});
test('Should export to JSON if canDownload=true', async () => {
@@ -674,7 +695,7 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Export All Data'));
const exportJsonElement = await screen.findByText('Export to .JSON');
userEvent.click(exportJsonElement);
expect(spyExportChart.callCount).toBe(1);
expect(spyExportChart.mock.calls.length).toBe(1);
});
test('Should not export to pivoted CSV if canDownloadCSV=false and viz_type=pivot_table_v2', async () => {
@@ -691,7 +712,7 @@ describe('Additional actions tests', () => {
'Export to pivoted .CSV',
);
userEvent.click(exportCSVElement);
expect(spyExportChart.callCount).toBe(0);
expect(spyExportChart.mock.calls.length).toBe(0);
});
test('Should export to pivoted CSV if canDownloadCSV=true and viz_type=pivot_table_v2', async () => {
@@ -709,7 +730,7 @@ describe('Additional actions tests', () => {
'Export to pivoted .CSV',
);
userEvent.click(exportCSVElement);
expect(spyExportChart.callCount).toBe(1);
expect(spyExportChart.mock.calls.length).toBe(1);
});
test('Should not export to Excel if canDownload=false', async () => {
@@ -722,8 +743,8 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Export All Data'));
const exportExcelElement = await screen.findByText('Export to Excel');
userEvent.click(exportExcelElement);
expect(spyExportChart.callCount).toBe(0);
spyExportChart.restore();
expect(spyExportChart.mock.calls.length).toBe(0);
spyExportChart.mockRestore();
});
test('Should export to Excel if canDownload=true', async () => {
@@ -737,13 +758,13 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Export All Data'));
const exportExcelElement = await screen.findByText('Export to Excel');
userEvent.click(exportExcelElement);
expect(spyExportChart.callCount).toBe(1);
expect(spyExportChart.mock.calls.length).toBe(1);
});
});
describe('Current View', () => {
let spyDownloadAsImage = sinon.spy();
let spyExportChart = sinon.spy();
let spyDownloadAsImage: jest.SpyInstance;
let spyExportChart: jest.SpyInstance;
let originalURL: typeof URL;
let anchorClickSpy: jest.SpyInstance;
@@ -779,8 +800,8 @@ describe('Additional actions tests', () => {
});
beforeEach(() => {
spyDownloadAsImage = sinon.spy(downloadAsImage, 'default');
spyExportChart = sinon.spy(exploreUtils, 'exportChart');
spyDownloadAsImage = jest.spyOn(downloadAsImage, 'default');
spyExportChart = jest.spyOn(exploreUtils, 'exportChart');
(useUnsavedChangesPrompt as jest.Mock).mockReturnValue({
showModal: false,
@@ -792,8 +813,8 @@ describe('Additional actions tests', () => {
});
afterEach(async () => {
spyDownloadAsImage.restore();
spyExportChart.restore();
spyDownloadAsImage.mockRestore();
spyExportChart.mockRestore();
await new Promise(r => setTimeout(r, 0));
});
@@ -809,14 +830,14 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Data Export Options'));
userEvent.hover(await screen.findByText('Export Current View'));
// clear previous calls on the sinon spy you created in beforeEach
spyDownloadAsImage.resetHistory();
// clear previous calls on the jest spy created in beforeEach
spyDownloadAsImage.mockClear();
const item = await screen.findByText('Export screenshot (jpeg)');
userEvent.click(item);
await waitFor(() => {
expect(spyDownloadAsImage.called).toBe(true);
expect(spyDownloadAsImage).toHaveBeenCalled();
});
getSpy.mockRestore();
@@ -849,11 +870,11 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Data Export Options'));
userEvent.hover(await screen.findByText('Export Current View'));
spyExportChart.resetHistory();
spyExportChart.mockClear();
userEvent.click(await screen.findByText('Export to .CSV'));
expect(spyExportChart.called).toBe(false); // or: expect(spyExportChart.callCount).toBe(0)
expect(spyExportChart).not.toHaveBeenCalled();
getSpy.mockRestore();
});
@@ -879,10 +900,10 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Data Export Options'));
userEvent.hover(await screen.findByText('Export Current View'));
spyExportChart.resetHistory();
spyExportChart.mockClear();
userEvent.click(await screen.findByText('Export to .JSON'));
expect(spyExportChart.called).toBe(false);
expect(spyExportChart).not.toHaveBeenCalled();
getSpy.mockRestore();
});
@@ -901,11 +922,11 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Data Export Options'));
userEvent.hover(await screen.findByText('Export Current View'));
spyExportChart.resetHistory();
spyExportChart.mockClear();
userEvent.click(await screen.findByText('Export to .CSV'));
expect(spyExportChart.callCount).toBe(1);
const args = spyExportChart.getCall(0).args[0];
expect(spyExportChart.mock.calls.length).toBe(1);
const args = spyExportChart.mock.calls[0][0];
expect(args.resultType).toBe('results');
expect(args.resultFormat).toBe('csv');
@@ -932,10 +953,10 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Data Export Options'));
userEvent.hover(await screen.findByText('Export Current View'));
spyExportChart.resetHistory();
spyExportChart.mockClear();
userEvent.click(await screen.findByText(/Export to (Excel|\.XLSX)/i));
expect(spyExportChart.called).toBe(false);
expect(spyExportChart).not.toHaveBeenCalled();
getSpy.mockRestore();
});
@@ -952,11 +973,11 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Data Export Options'));
userEvent.hover(await screen.findByText('Export Current View'));
spyExportChart.resetHistory();
spyExportChart.mockClear();
userEvent.click(await screen.findByText(/Export to (Excel|\.XLSX)/i));
expect(spyExportChart.callCount).toBe(1);
const args = spyExportChart.getCall(0).args[0];
expect(spyExportChart.mock.calls.length).toBe(1);
const args = spyExportChart.mock.calls[0][0];
expect(args.resultType).toBe('results');
expect(args.resultFormat).toBe('xlsx');
getSpy.mockRestore();
@@ -984,17 +1005,17 @@ describe('Additional actions tests', () => {
userEvent.hover(await screen.findByText('Data Export Options'));
userEvent.hover(await screen.findByText('Export Current View'));
// server path expected → use the sinon spy and inspect call args
spyExportChart.resetHistory();
// server path expected - use the jest spy and inspect call args
spyExportChart.mockClear();
const jsonItem = await screen.findByText('Export to .JSON');
userEvent.click(jsonItem);
await waitFor(() => {
expect(spyExportChart.callCount).toBe(1);
expect(spyExportChart.mock.calls.length).toBe(1);
});
const args = spyExportChart.getCall(0).args[0];
const args = spyExportChart.mock.calls[0][0];
expect(args.resultType).toBe('results');
expect(args.resultFormat).toBe('json');