perf(DatasourceEditor): dismiss warning modal and trim test data
Add dismissDatasourceWarning helper to avoid interference from warning modal.
Trim columns array from 7→1 in modify/delete tests to match currency test
optimization. Scope delete test queries to columns panel with 'within' for
faster, more targeted assertions.
Additional optimizations:
- Create isolated props with fresh onChange mock per test
- Use within(columnsPanel) for all column-specific queries
- Smaller test data (1 column) speeds up DOM operations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditor.test.tsx b/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditor.test.tsx
index 1a8d410..11fc52f 100644
--- a/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditor.test.tsx
+++ b/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditor.test.tsx
@@ -22,6 +22,7 @@
screen,
waitFor,
userEvent,
+ within,
} from 'spec/helpers/testing-library';
import { DatasourceType, isFeatureEnabled } from '@superset-ui/core';
import {
@@ -49,6 +50,13 @@
fetchMock.restore();
});
+const dismissDatasourceWarning = async () => {
+ const warningCloseButton = screen.queryByRole('button', { name: /close/i });
+ if (warningCloseButton) {
+ await userEvent.click(warningCloseButton);
+ }
+};
+
test('renders Tabs', async () => {
await asyncRender({
...props,
@@ -90,10 +98,21 @@
// to add, remove and modify columns accordingly
test('can modify columns', async () => {
- fastRender({
+ const limitedProps = {
...props,
- datasource: { ...props.datasource, table_name: 'Vehicle Sales +' },
- });
+ onChange: jest.fn(),
+ datasource: {
+ ...props.datasource,
+ table_name: 'Vehicle Sales +',
+ columns: props.datasource.columns
+ .slice(0, 1)
+ .map(column => ({ ...column })),
+ },
+ };
+
+ fastRender(limitedProps);
+
+ await dismissDatasourceWarning();
const columnsTab = await screen.findByTestId('collection-tab-Columns');
await userEvent.click(columnsTab);
@@ -110,7 +129,7 @@
const inputCertDetails = screen.getByPlaceholderText('Certification details');
// Clear onChange mock to track user action callbacks
- props.onChange.mockClear();
+ limitedProps.onChange.mockClear();
// Use fireEvent.change for speed - testing wiring, not per-keystroke behavior
fireEvent.change(inputLabel, { target: { value: 'test_label' } });
@@ -120,42 +139,57 @@
await waitFor(() => {
expect(inputLabel).toHaveValue('test_label');
expect(inputCertDetails).toHaveValue('test_details');
- expect(props.onChange).toHaveBeenCalled();
+ expect(limitedProps.onChange).toHaveBeenCalled();
});
});
test('can delete columns', async () => {
- fastRender({
+ const limitedProps = {
...props,
- datasource: { ...props.datasource, table_name: 'Vehicle Sales +' },
- });
+ onChange: jest.fn(),
+ datasource: {
+ ...props.datasource,
+ table_name: 'Vehicle Sales +',
+ columns: props.datasource.columns
+ .slice(0, 1)
+ .map(column => ({ ...column })),
+ },
+ };
+
+ fastRender(limitedProps);
+
+ await dismissDatasourceWarning();
const columnsTab = await screen.findByTestId('collection-tab-Columns');
await userEvent.click(columnsTab);
- const getToggles = await screen.findAllByRole('button', {
+ const columnsPanel = within(
+ await screen.findByTestId('collection-panel-Columns'),
+ );
+
+ const getToggles = await columnsPanel.findAllByRole('button', {
name: /expand row/i,
});
await userEvent.click(getToggles[0]);
- const deleteButtons = await screen.findAllByRole('button', {
+ const deleteButtons = await columnsPanel.findAllByRole('button', {
name: /delete item/i,
});
const initialCount = deleteButtons.length;
expect(initialCount).toBeGreaterThan(0);
// Clear onChange mock to track delete action
- props.onChange.mockClear();
+ limitedProps.onChange.mockClear();
await userEvent.click(deleteButtons[0]);
await waitFor(() =>
expect(
- screen.queryAllByRole('button', { name: /delete item/i }),
+ columnsPanel.queryAllByRole('button', { name: /delete item/i }),
).toHaveLength(initialCount - 1),
);
- await waitFor(() => expect(props.onChange).toHaveBeenCalled());
+ await waitFor(() => expect(limitedProps.onChange).toHaveBeenCalled());
});
test('can add new columns', async () => {
diff --git a/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditorCurrency.test.tsx b/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditorCurrency.test.tsx
index 401571e..0dfeb59 100644
--- a/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditorCurrency.test.tsx
+++ b/superset-frontend/src/components/Datasource/components/DatasourceEditor/tests/DatasourceEditorCurrency.test.tsx
@@ -60,10 +60,19 @@
fetchMock.restore();
});
+const dismissDatasourceWarning = async () => {
+ const closeButton = screen.queryByRole('button', { name: /close/i });
+ if (closeButton) {
+ await userEvent.click(closeButton);
+ }
+};
+
test('renders currency section in metrics tab', async () => {
const testProps = createPropsWithCurrency();
fastRender(testProps);
+ await dismissDatasourceWarning();
+
// Navigate to metrics tab
const metricButton = await screen.findByTestId('collection-tab-Metrics');
await userEvent.click(metricButton);
@@ -94,6 +103,8 @@
fastRender(testProps);
+ await dismissDatasourceWarning();
+
// Navigate to metrics tab
const metricButton = await screen.findByTestId('collection-tab-Metrics');
await userEvent.click(metricButton);
@@ -125,6 +136,8 @@
fastRender(testProps);
+ await dismissDatasourceWarning();
+
// Navigate to metrics tab
const metricButton = await screen.findByTestId('collection-tab-Metrics');
await userEvent.click(metricButton);
