iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Working toward killing enzyme and cleaning up test noise. (#32207)

This commit is contained in:
Evan Rusackas 2025-02-11 12:14:36 -07:00 committed by GitHub
parent d3b854a833
commit 319a860f23
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
238 changed files with 4167 additions and 6334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
superset-frontend/.eslintrc.js
View File

@ -354,6 +354,14 @@ module.exports = {
name: 'lodash/memoize',
message: 'Lodash Memoize is unsafe! Please use memoize-one instead',
},
{
name: '@testing-library/react',
message: 'Please use spec/helpers/testing-library instead',
},
{
name: '@testing-library/react-dom-utils',
message: 'Please use spec/helpers/testing-library instead',
},
],
patterns: ['antd/*'],
},

3203
superset-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
superset-frontend/package.json
View File

@ -68,8 +68,8 @@
"prod": "npm run build",
"prune": "rm -rf ./{packages,plugins}/*/{node_modules,lib,esm,tsconfig.tsbuildinfo,package-lock.json} ./.temp_cache",
"storybook": "cross-env NODE_ENV=development BABEL_ENV=development storybook dev -p 6006",
"tdd": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --watch",
"test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --max-workers=50%",
"tdd": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --watch",
"test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --max-workers=80% --silent",
"type": "tsc --noEmit",
"update-maps": "jupyter nbconvert --to notebook --execute --inplace 'plugins/legacy-plugin-chart-country-map/scripts/Country Map GeoJSON Generator.ipynb' -Xfrozen_modules=off",
"validate-release": "../RELEASING/validate_this_release.sh"
@ -254,7 +254,7 @@
"@storybook/react-webpack5": "8.1.11",
"@svgr/webpack": "^8.1.0",
"@testing-library/dom": "^8.20.1",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^12.8.3",
@ -302,6 +302,7 @@
"css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.0",
"enzyme": "^3.11.0",
"enzyme-matchers": "^7.1.2",
"esbuild": "^0.20.0",
"esbuild-loader": "^4.2.2",
"eslint": "^8.56.0",
@ -331,9 +332,7 @@
"ignore-styles": "^5.0.1",
"imports-loader": "^5.0.0",
"jest": "^29.7.0",
"jest-environment-enzyme": "^7.1.2",
"jest-environment-jsdom": "^29.7.0",
"jest-enzyme": "^7.1.2",
"jest-html-reporter": "^3.10.2",
"jest-websocket-mock": "^2.5.0",
"jsdom": "^26.0.0",

352
superset-frontend/packages/superset-ui-core/test/chart/components/ChartDataProvider.test.tsx
View File

@ -16,16 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
import { ReactNode } from 'react';
import { shallow } from 'enzyme';
import '@testing-library/jest-dom';
import { render, screen, act } from '@testing-library/react';
import ChartClient from '../../../src/chart/clients/ChartClient';
import ChartDataProvider, {
ChartDataProviderProps,
} from '../../../src/chart/components/ChartDataProvider';
import { bigNumberFormData } from '../fixtures/formData';
// Note: the mock implementation of these function directly affects the expected results below
// Keep existing mock setup
const defaultMockLoadFormData = jest.fn(({ formData }: { formData: unknown }) =>
Promise.resolve(formData),
);
@ -50,7 +49,6 @@ const mockLoadQueryData = jest.fn<Promise<unknown>, unknown[]>(
);
const actual = jest.requireActual('../../../src/chart/clients/ChartClient');
// ChartClient is now a mock
jest.spyOn(actual, 'default').mockImplementation(() => ({
loadDatasource: mockLoadDatasource,
loadFormData: mockLoadFormData,
@ -62,7 +60,6 @@ const ChartClientMock = ChartClient as jest.Mock<ChartClient>;
describe('ChartDataProvider', () => {
beforeEach(() => {
ChartClientMock.mockClear();
mockLoadFormData = defaultMockLoadFormData;
mockLoadFormData.mockClear();
mockLoadDatasource.mockClear();
@ -71,11 +68,17 @@ describe('ChartDataProvider', () => {
const props: ChartDataProviderProps = {
formData: { ...bigNumberFormData },
children: () => <div />,
children: ({ loading, payload, error }) => (
<div>
{loading && <span role="status">Loading...</span>}
{payload && <pre role="contentinfo">{JSON.stringify(payload)}</pre>}
{error && <div role="alert">{error.message}</div>}
</div>
),
};
function setup(overrideProps?: Partial<ChartDataProviderProps>) {
return shallow(<ChartDataProvider {...props} {...overrideProps} />);
return render(<ChartDataProvider {...props} {...overrideProps} />);
}
it('instantiates a new ChartClient()', () => {
@ -86,7 +89,7 @@ describe('ChartDataProvider', () => {
describe('ChartClient.loadFormData', () => {
it('calls method on mount', () => {
setup();
expect(mockLoadFormData.mock.calls).toHaveLength(1);
expect(mockLoadFormData).toHaveBeenCalledTimes(1);
expect(mockLoadFormData.mock.calls[0][0]).toEqual({
sliceId: props.sliceId,
formData: props.formData,
@ -96,234 +99,231 @@ describe('ChartDataProvider', () => {
it('should pass formDataRequestOptions to ChartClient.loadFormData', () => {
const options = { host: 'override' };
setup({ formDataRequestOptions: options });
expect(mockLoadFormData.mock.calls).toHaveLength(1);
expect(mockLoadFormData).toHaveBeenCalledTimes(1);
expect(mockLoadFormData.mock.calls[0][1]).toEqual(options);
});
it('calls ChartClient.loadFormData when formData or sliceId change', () => {
const wrapper = setup();
it('calls ChartClient.loadFormData when formData or sliceId change', async () => {
const { rerender } = setup();
const newProps = { sliceId: 123, formData: undefined };
expect(mockLoadFormData.mock.calls).toHaveLength(1);
expect(mockLoadFormData).toHaveBeenCalledTimes(1);
wrapper.setProps(newProps);
expect(mockLoadFormData.mock.calls).toHaveLength(2);
rerender(<ChartDataProvider {...props} {...newProps} />);
expect(mockLoadFormData).toHaveBeenCalledTimes(2);
expect(mockLoadFormData.mock.calls[1][0]).toEqual(newProps);
});
});
describe('ChartClient.loadDatasource', () => {
it('does not method if loadDatasource is false', () =>
new Promise(done => {
expect.assertions(1);
it('does not call method if loadDatasource is false', async () => {
setup({ loadDatasource: false });
setTimeout(() => {
expect(mockLoadDatasource.mock.calls).toHaveLength(0);
done(undefined);
}, 0);
}));
it('calls method on mount if loadDatasource is true', () =>
new Promise(done => {
expect.assertions(2);
setup({ loadDatasource: true });
setTimeout(() => {
expect(mockLoadDatasource.mock.calls).toHaveLength(1);
expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
props.formData.datasource,
);
done(undefined);
}, 0);
}));
it('should pass datasourceRequestOptions to ChartClient.loadDatasource', () =>
new Promise(done => {
expect.assertions(2);
const options = { host: 'override' };
setup({ loadDatasource: true, datasourceRequestOptions: options });
setTimeout(() => {
expect(mockLoadDatasource.mock.calls).toHaveLength(1);
expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
done(undefined);
}, 0);
}));
it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', () =>
new Promise(done => {
expect.assertions(3);
const newDatasource = 'test';
const wrapper = setup({ loadDatasource: true });
wrapper.setProps({
formData: { datasource: newDatasource },
sliceId: undefined,
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(mockLoadDatasource).not.toHaveBeenCalled();
});
setTimeout(() => {
expect(mockLoadDatasource.mock.calls).toHaveLength(2);
expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
it('calls method on mount if loadDatasource is true', async () => {
setup({ loadDatasource: true });
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
expect(mockLoadDatasource.mock.calls[0]).toEqual([
props.formData.datasource,
undefined,
]);
});
it('should pass datasourceRequestOptions to ChartClient.loadDatasource', async () => {
const options = { host: 'override' };
setup({ loadDatasource: true, datasourceRequestOptions: options });
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
});
it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', async () => {
const { rerender } = setup({ loadDatasource: true });
const newDatasource = 'test';
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
await act(async () => {
rerender(
<ChartDataProvider
{...props}
formData={{ ...props.formData, datasource: newDatasource }}
loadDatasource
/>,
);
expect(mockLoadDatasource.mock.calls[1][0]).toEqual(newDatasource);
done(undefined);
}, 0);
}));
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(mockLoadDatasource).toHaveBeenCalledTimes(2);
expect(mockLoadDatasource.mock.calls[0]).toEqual([
props.formData.datasource,
undefined,
]);
expect(mockLoadDatasource.mock.calls[1]).toEqual([
newDatasource,
undefined,
]);
});
});
describe('ChartClient.loadQueryData', () => {
it('calls method on mount', () =>
new Promise(done => {
expect.assertions(2);
it('calls method on mount', async () => {
setup();
setTimeout(() => {
expect(mockLoadQueryData.mock.calls).toHaveLength(1);
expect(mockLoadQueryData.mock.calls[0][0]).toEqual(props.formData);
done(undefined);
}, 0);
}));
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
expect(mockLoadQueryData.mock.calls[0]).toEqual([
props.formData,
undefined,
]);
});
it('should pass queryDataRequestOptions to ChartClient.loadQueryData', () =>
new Promise(done => {
expect.assertions(2);
it('should pass queryDataRequestOptions to ChartClient.loadQueryData', async () => {
const options = { host: 'override' };
setup({ queryRequestOptions: options });
setTimeout(() => {
expect(mockLoadQueryData.mock.calls).toHaveLength(1);
expect(mockLoadQueryData.mock.calls[0][1]).toEqual(options);
done(undefined);
}, 0);
}));
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
expect(mockLoadQueryData).toHaveBeenCalledWith(
expect.anything(),
options,
);
});
it('calls ChartClient.loadQueryData when formData or sliceId change', () =>
new Promise(done => {
expect.assertions(3);
it('calls ChartClient.loadQueryData when formData or sliceId change', async () => {
const { rerender } = setup();
const newFormData = { key: 'test' };
const wrapper = setup();
wrapper.setProps({ formData: newFormData, sliceId: undefined });
setTimeout(() => {
expect(mockLoadQueryData.mock.calls).toHaveLength(2);
expect(mockLoadQueryData.mock.calls[0][0]).toEqual(props.formData);
expect(mockLoadQueryData.mock.calls[1][0]).toEqual(newFormData);
done(undefined);
}, 0);
}));
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
await act(async () => {
rerender(<ChartDataProvider {...props} formData={newFormData} />);
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(mockLoadQueryData).toHaveBeenCalledTimes(2);
expect(mockLoadQueryData.mock.calls[0]).toEqual([
props.formData,
undefined,
]);
expect(mockLoadQueryData.mock.calls[1]).toEqual([newFormData, undefined]);
});
});
describe('children', () => {
it('calls children({ loading: true }) when loading', () => {
const children = jest.fn<ReactNode, unknown[]>();
setup({ children });
it('shows loading state initially', async () => {
mockLoadFormData.mockImplementation(() => new Promise(() => {}));
mockLoadQueryData.mockImplementation(() => new Promise(() => {}));
mockLoadDatasource.mockImplementation(() => new Promise(() => {}));
// during the first tick (before more promises resolve) loading is true
expect(children.mock.calls).toHaveLength(1);
expect(children.mock.calls[0][0]).toEqual({ loading: true });
setup();
await screen.findByRole('status');
});
it('calls children({ payload }) when loaded', () =>
new Promise(done => {
expect.assertions(2);
const children = jest.fn<ReactNode, unknown[]>();
setup({ children, loadDatasource: true });
it('shows payload when loaded', async () => {
mockLoadFormData.mockResolvedValue(props.formData);
mockLoadQueryData.mockResolvedValue([props.formData]);
mockLoadDatasource.mockResolvedValue(props.formData.datasource);
setTimeout(() => {
expect(children.mock.calls).toHaveLength(2);
expect(children.mock.calls[1][0]).toEqual({
payload: {
setup({ loadDatasource: true });
const payloadElement = await screen.findByRole('contentinfo');
const actualPayload = JSON.parse(payloadElement.textContent || '');
expect(actualPayload).toEqual({
formData: props.formData,
datasource: props.formData.datasource,
queriesData: [props.formData],
},
});
done(undefined);
}, 0);
}));
it('calls children({ error }) upon request error', () =>
new Promise(done => {
expect.assertions(2);
const children = jest.fn<ReactNode, unknown[]>();
mockLoadFormData = jest.fn(() => Promise.reject(new Error('error')));
setup({ children });
setTimeout(() => {
expect(children.mock.calls).toHaveLength(2); // loading + error
expect(children.mock.calls[1][0]).toEqual({
error: new Error('error'),
});
done(undefined);
}, 0);
}));
it('calls children({ error }) upon JS error', () =>
new Promise(done => {
expect.assertions(2);
const children = jest.fn<ReactNode, unknown[]>();
it('shows error message upon request error', async () => {
const errorMessage = 'error';
mockLoadFormData.mockRejectedValue(new Error(errorMessage));
mockLoadFormData = jest.fn(() => {
setup();
const errorElement = await screen.findByRole('alert');
expect(errorElement).toHaveAttribute('role', 'alert');
expect(errorElement).toHaveTextContent(errorMessage);
});
it('shows error message upon JS error', async () => {
mockLoadFormData.mockImplementation(() => {
throw new Error('non-async error');
});
setup({ children });
setup();
setTimeout(() => {
expect(children.mock.calls).toHaveLength(2); // loading + error
expect(children.mock.calls[1][0]).toEqual({
error: new Error('non-async error'),
const errorElement = await screen.findByRole('alert');
expect(errorElement).toHaveAttribute('role', 'alert');
expect(errorElement).toHaveTextContent('non-async error');
});
done(undefined);
}, 0);
}));
});
describe('callbacks', () => {
it('calls onLoad(payload) when loaded', () =>
new Promise(done => {
expect.assertions(2);
const onLoaded = jest.fn<void, unknown[]>();
it('calls onLoaded when loaded', async () => {
const onLoaded = jest.fn();
mockLoadFormData.mockResolvedValue(props.formData);
mockLoadQueryData.mockResolvedValue([props.formData]);
mockLoadDatasource.mockResolvedValue(props.formData.datasource);
setup({ onLoaded, loadDatasource: true });
setTimeout(() => {
expect(onLoaded.mock.calls).toHaveLength(1);
expect(onLoaded.mock.calls[0][0]).toEqual({
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(onLoaded).toHaveBeenCalledTimes(1);
expect(onLoaded).toHaveBeenCalledWith({
formData: props.formData,
datasource: props.formData.datasource,
queriesData: [props.formData],
});
done(undefined);
}, 0);
}));
});
it('calls onError(error) upon request error', () =>
new Promise(done => {
expect.assertions(2);
const onError = jest.fn<void, unknown[]>();
mockLoadFormData = jest.fn(() => Promise.reject(new Error('error')));
it('calls onError upon request error', async () => {
const onError = jest.fn();
mockLoadFormData.mockRejectedValue(new Error('error'));
setup({ onError });
setTimeout(() => {
expect(onError.mock.calls).toHaveLength(1);
expect(onError.mock.calls[0][0]).toEqual(new Error('error'));
done(undefined);
}, 0);
}));
it('calls onError(error) upon JS error', () =>
new Promise(done => {
expect.assertions(2);
const onError = jest.fn<void, unknown[]>();
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
mockLoadFormData = jest.fn(() => {
expect(onError).toHaveBeenCalledTimes(1);
expect(onError).toHaveBeenCalledWith(new Error('error'));
});
it('calls onError upon JS error', async () => {
const onError = jest.fn();
mockLoadFormData.mockImplementation(() => {
throw new Error('non-async error');
});
setup({ onError });
setTimeout(() => {
expect(onError.mock.calls).toHaveLength(1);
expect(onError.mock.calls[0][0]).toEqual(
new Error('non-async error'),
);
done(undefined);
}, 0);
}));
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 0));
});
expect(onError).toHaveBeenCalledTimes(1);
expect(onError).toHaveBeenCalledWith(new Error('non-async error'));
});
});
});

447
superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx
View File

@ -17,10 +17,12 @@
* under the License.
*/
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import { ReactElement } from 'react';
import mockConsole, { RestoreConsole } from 'jest-mock-console';
import { triggerResizeObserver } from 'resize-observer-polyfill';
import ErrorBoundary from 'react-error-boundary';
import { ErrorBoundary } from 'react-error-boundary';
import {
promiseTimeout,
@ -28,9 +30,7 @@ import {
supersetTheme,
ThemeProvider,
} from '@superset-ui/core';
import { mount as enzymeMount } from 'enzyme';
import { WrapperProps } from '../../../src/chart/components/SuperChart';
import NoResultsComponent from '../../../src/chart/components/NoResultsComponent';
import {
ChartKeys,
@ -44,45 +44,39 @@ const DEFAULT_QUERIES_DATA = [
{ data: ['foo2', 'bar2'] },
];
function expectDimension(
renderedWrapper: cheerio.Cheerio,
width: number,
height: number,
) {
expect(renderedWrapper.find('.dimension').text()).toEqual(
[width, height].join('x'),
);
// Fix for expect outside test block - move expectDimension into a test utility
// Replace expectDimension function with a non-expect version
function getDimensionText(container: HTMLElement) {
const dimensionEl = container.querySelector('.dimension');
return dimensionEl?.textContent || '';
}
const mount = (component: ReactElement) =>
enzymeMount(component, {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
const renderWithTheme = (component: ReactElement) =>
render(component, {
wrapper: ({ children }) => (
<ThemeProvider theme={supersetTheme}>{children}</ThemeProvider>
),
});
// TODO: rewrite to rtl
describe.skip('SuperChart', () => {
describe('SuperChart', () => {
jest.setTimeout(5000);
let restoreConsole: RestoreConsole;
const plugins = [
new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
new BuggyChartPlugin().configure({ key: ChartKeys.BUGGY }),
];
let restoreConsole: RestoreConsole;
beforeAll(() => {
plugins.forEach(p => {
p.unregister().register();
});
});
afterAll(() => {
plugins.forEach(p => {
p.unregister();
});
});
beforeEach(() => {
restoreConsole = mockConsole();
triggerResizeObserver([]); // Reset any pending resize observers
});
afterEach(() => {
@ -105,14 +99,16 @@ describe.skip('SuperChart', () => {
afterEach(() => {
window.removeEventListener('error', onError);
// eslint-disable-next-line jest/no-standalone-expect
});
it('should have correct number of errors', () => {
expect(actualErrors).toBe(expectedErrors);
expectedErrors = 0;
});
it('renders default FallbackComponent', async () => {
expectedErrors = 1;
const wrapper = mount(
renderWithTheme(
<SuperChart
chartType={ChartKeys.BUGGY}
queriesData={[DEFAULT_QUERY_DATA]}
@ -120,16 +116,19 @@ describe.skip('SuperChart', () => {
height="200"
/>,
);
await new Promise(resolve => setImmediate(resolve));
wrapper.update();
expect(wrapper.text()).toContain('Oops! An error occurred!');
expect(
await screen.findByText('Oops! An error occurred!'),
).toBeInTheDocument();
});
it('renders custom FallbackComponent', () => {
it('renders custom FallbackComponent', async () => {
expectedErrors = 1;
const CustomFallbackComponent = jest.fn(() => (
<div>Custom Fallback!</div>
));
const wrapper = mount(
renderWithTheme(
<SuperChart
chartType={ChartKeys.BUGGY}
queriesData={[DEFAULT_QUERY_DATA]}
@ -139,15 +138,13 @@ describe.skip('SuperChart', () => {
/>,
);
return promiseTimeout(() => {
expect(wrapper.render().find('div.test-component')).toHaveLength(0);
expect(await screen.findByText('Custom Fallback!')).toBeInTheDocument();
expect(CustomFallbackComponent).toHaveBeenCalledTimes(1);
});
});
it('call onErrorBoundary', () => {
it('call onErrorBoundary', async () => {
expectedErrors = 1;
const handleError = jest.fn();
mount(
renderWithTheme(
<SuperChart
chartType={ChartKeys.BUGGY}
queriesData={[DEFAULT_QUERY_DATA]}
@ -157,17 +154,20 @@ describe.skip('SuperChart', () => {
/>,
);
return promiseTimeout(() => {
await screen.findByText('Oops! An error occurred!');
expect(handleError).toHaveBeenCalledTimes(1);
});
});
it('does not include ErrorBoundary if told so', () => {
// Update the test cases
it('does not include ErrorBoundary if told so', async () => {
expectedErrors = 1;
const inactiveErrorHandler = jest.fn();
const activeErrorHandler = jest.fn();
mount(
// @ts-ignore
<ErrorBoundary onError={activeErrorHandler}>
renderWithTheme(
<ErrorBoundary
fallbackRender={() => <div>Error!</div>}
onError={activeErrorHandler}
>
<SuperChart
disableErrorBoundary
chartType={ChartKeys.BUGGY}
@ -179,15 +179,24 @@ describe.skip('SuperChart', () => {
</ErrorBoundary>,
);
return promiseTimeout(() => {
await screen.findByText('Error!');
expect(activeErrorHandler).toHaveBeenCalledTimes(1);
expect(inactiveErrorHandler).toHaveBeenCalledTimes(0);
});
expect(inactiveErrorHandler).not.toHaveBeenCalled();
});
});
it('passes the props to renderer correctly', () => {
const wrapper = mount(
// Update the props tests to use className instead of data-testid
// Helper function to find elements by class name
const findByClassName = (container: HTMLElement, className: string) =>
container.querySelector(`.${className}`);
// Update test cases
// Update timeout for all async tests
jest.setTimeout(10000);
// Update the props test to wait for component to render
it('passes the props to renderer correctly', async () => {
const { container } = renderWithTheme(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
@ -197,91 +206,75 @@ describe.skip('SuperChart', () => {
/>,
);
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 101, 118);
await promiseTimeout(() => {
const testComponent = findByClassName(container, 'test-component');
expect(testComponent).not.toBeNull();
expect(testComponent).toBeInTheDocument();
expect(getDimensionText(container)).toBe('101x118');
});
});
it('passes the props with multiple queries to renderer correctly', () => {
const wrapper = mount(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={DEFAULT_QUERIES_DATA}
width={101}
height={118}
formData={{ abc: 1 }}
/>,
);
// Helper function to create a sized wrapper
const createSizedWrapper = () => {
const wrapper = document.createElement('div');
wrapper.style.width = '300px';
wrapper.style.height = '300px';
wrapper.style.position = 'relative';
wrapper.style.display = 'block';
return wrapper;
};
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 101, 118);
});
});
// Update dimension tests to wait for resize observer
// First, increase the timeout for all tests
jest.setTimeout(20000);
it('passes the props with multiple queries and single query to renderer correctly (backward compatibility)', () => {
const wrapper = mount(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={DEFAULT_QUERIES_DATA}
width={101}
height={118}
formData={{ abc: 1 }}
/>,
);
// Update the waitForDimensions helper to include a retry mechanism
// Update waitForDimensions to avoid await in loop
const waitForDimensions = async (
container: HTMLElement,
expectedWidth: number,
expectedHeight: number,
) => {
const maxAttempts = 5;
const interval = 100;
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 101, 118);
});
});
return new Promise<void>((resolve, reject) => {
let attempts = 0;
describe('supports NoResultsComponent', () => {
it('renders NoResultsComponent when queriesData is missing', () => {
const wrapper = mount(
<SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />,
);
const checkDimension = () => {
const testComponent = container.querySelector('.test-component');
const dimensionEl = container.querySelector('.dimension');
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
});
if (!testComponent || !dimensionEl) {
if (attempts >= maxAttempts) {
reject(new Error('Elements not found'));
return;
}
attempts += 1;
setTimeout(checkDimension, interval);
return;
}
it('renders NoResultsComponent when queriesData data is null', () => {
const wrapper = mount(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[{ data: null }]}
width="200"
height="200"
/>,
);
if (dimensionEl.textContent !== `${expectedWidth}x${expectedHeight}`) {
if (attempts >= maxAttempts) {
reject(new Error('Dimension mismatch'));
return;
}
attempts += 1;
setTimeout(checkDimension, interval);
return;
}
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
});
});
resolve();
};
describe('supports dynamic width and/or height', () => {
it('works with width and height that are numbers', () => {
const wrapper = mount(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
width={100}
height={100}
/>,
);
checkDimension();
});
};
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 100, 100);
});
});
it('works when width and height are percent', () => {
const wrapper = mount(
// Update the resize observer trigger to ensure it's called after component mount
it.skip('works when width and height are percent', async () => {
const { container } = renderWithTheme(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
@ -290,85 +283,88 @@ describe.skip('SuperChart', () => {
height="100%"
/>,
);
triggerResizeObserver();
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 300, 300);
}, 100);
// Wait for initial render
await new Promise(resolve => setTimeout(resolve, 50));
triggerResizeObserver([
{
contentRect: {
width: 300,
height: 300,
top: 0,
left: 0,
right: 300,
bottom: 300,
x: 0,
y: 0,
toJSON() {
return {
width: this.width,
height: this.height,
top: this.top,
left: this.left,
right: this.right,
bottom: this.bottom,
x: this.x,
y: this.y,
};
},
},
borderBoxSize: [{ blockSize: 300, inlineSize: 300 }],
contentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
devicePixelContentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
target: document.createElement('div'),
},
]);
await waitForDimensions(container, 300, 300);
});
it('works when only width is percent', () => {
const wrapper = mount(
it('passes the props with multiple queries to renderer correctly', async () => {
const { container } = renderWithTheme(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
debounceTime={1}
width="50%"
height="125"
queriesData={DEFAULT_QUERIES_DATA}
width={101}
height={118}
formData={{ abc: 1 }}
/>,
);
// @ts-ignore
triggerResizeObserver([{ contentRect: { height: 125, width: 150 } }]);
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
const boundingBox = renderedWrapper
.find('div.test-component')
.parent()
.parent()
.parent();
expect(boundingBox.css('width')).toEqual('50%');
expect(boundingBox.css('height')).toEqual('125px');
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 150, 125);
}, 100);
await promiseTimeout(() => {
const testComponent = container.querySelector('.test-component');
expect(testComponent).not.toBeNull();
expect(testComponent).toBeInTheDocument();
expect(getDimensionText(container)).toBe('101x118');
});
it('works when only height is percent', () => {
const wrapper = mount(
});
describe('supports NoResultsComponent', () => {
it('renders NoResultsComponent when queriesData is missing', () => {
renderWithTheme(
<SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />,
);
expect(screen.getByText('No Results')).toBeInTheDocument();
});
it('renders NoResultsComponent when queriesData data is null', () => {
renderWithTheme(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
debounceTime={1}
width="50"
height="25%"
queriesData={[{ data: null }]}
width="200"
height="200"
/>,
);
// @ts-ignore
triggerResizeObserver([{ contentRect: { height: 75, width: 50 } }]);
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
const boundingBox = renderedWrapper
.find('div.test-component')
.parent()
.parent()
.parent();
expect(boundingBox.css('width')).toEqual('50px');
expect(boundingBox.css('height')).toEqual('25%');
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 50, 75);
}, 100);
});
it('works when width and height are not specified', () => {
const wrapper = mount(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
debounceTime={1}
/>,
);
triggerResizeObserver();
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 300, 400);
}, 100);
expect(screen.getByText('No Results')).toBeInTheDocument();
});
});
describe('supports Wrapper', () => {
describe('supports dynamic width and/or height', () => {
// Add MyWrapper component definition
function MyWrapper({ width, height, children }: WrapperProps) {
return (
<div>
@ -380,30 +376,30 @@ describe.skip('SuperChart', () => {
);
}
it('works with width and height that are numbers', () => {
const wrapper = mount(
it('works with width and height that are numbers', async () => {
const { container } = renderWithTheme(
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
width={100}
height={100}
Wrapper={MyWrapper}
/>,
);
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.wrapper-insert')).toHaveLength(1);
expect(renderedWrapper.find('div.wrapper-insert').text()).toEqual(
'100x100',
);
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 100, 100);
}, 100);
await promiseTimeout(() => {
const testComponent = container.querySelector('.test-component');
expect(testComponent).not.toBeNull();
expect(testComponent).toBeInTheDocument();
expect(getDimensionText(container)).toBe('100x100');
});
});
it('works when width and height are percent', () => {
const wrapper = mount(
it.skip('works when width and height are percent', async () => {
const wrapper = createSizedWrapper();
document.body.appendChild(wrapper);
const { container } = renderWithTheme(
<div style={{ width: '100%', height: '100%', position: 'absolute' }}>
<SuperChart
chartType={ChartKeys.DILIGENT}
queriesData={[DEFAULT_QUERY_DATA]}
@ -411,19 +407,50 @@ describe.skip('SuperChart', () => {
width="100%"
height="100%"
Wrapper={MyWrapper}
/>,
/>
</div>,
);
triggerResizeObserver();
return promiseTimeout(() => {
const renderedWrapper = wrapper.render();
expect(renderedWrapper.find('div.wrapper-insert')).toHaveLength(1);
expect(renderedWrapper.find('div.wrapper-insert').text()).toEqual(
'300x300',
);
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
expectDimension(renderedWrapper, 300, 300);
}, 100);
});
wrapper.appendChild(container);
// Wait for initial render
await new Promise(resolve => setTimeout(resolve, 100));
// Trigger resize
triggerResizeObserver([
{
contentRect: {
width: 300,
height: 300,
top: 0,
left: 0,
right: 300,
bottom: 300,
x: 0,
y: 0,
toJSON() {
return this;
},
},
borderBoxSize: [{ blockSize: 300, inlineSize: 300 }],
contentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
devicePixelContentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
target: wrapper,
},
]);
// Wait for resize to be processed
await new Promise(resolve => setTimeout(resolve, 200));
// Check dimensions
const wrapperInsert = container.querySelector('.wrapper-insert');
expect(wrapperInsert).not.toBeNull();
expect(wrapperInsert).toBeInTheDocument();
expect(wrapperInsert).toHaveTextContent('300x300');
await waitForDimensions(container, 300, 300);
document.body.removeChild(wrapper);
}, 30000);
});
});

167
superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx
View File

@ -17,16 +17,11 @@
* under the License.
*/
import { ReactElement, ReactNode } from 'react';
import { mount } from 'enzyme';
import '@testing-library/jest-dom';
import { ReactElement } from 'react';
import mockConsole, { RestoreConsole } from 'jest-mock-console';
import {
ChartProps,
promiseTimeout,
supersetTheme,
SupersetTheme,
ThemeProvider,
} from '@superset-ui/core';
import { ChartProps, supersetTheme, ThemeProvider } from '@superset-ui/core';
import { render, screen, waitFor } from '@testing-library/react';
import SuperChartCore from '../../../src/chart/components/SuperChartCore';
import {
ChartKeys,
@ -35,25 +30,11 @@ import {
SlowChartPlugin,
} from './MockChartPlugins';
const Wrapper = ({
theme,
children,
}: {
theme: SupersetTheme;
children: ReactNode;
}) => <ThemeProvider theme={theme}>{children}</ThemeProvider>;
const styledMount = (component: ReactElement) =>
mount(component, {
wrappingComponent: Wrapper,
wrappingComponentProps: {
theme: supersetTheme,
},
});
const renderWithTheme = (component: ReactElement) =>
render(<ThemeProvider theme={supersetTheme}>{component}</ThemeProvider>);
describe('SuperChartCore', () => {
const chartProps = new ChartProps();
const plugins = [
new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
new LazyChartPlugin().configure({ key: ChartKeys.LAZY }),
@ -63,6 +44,7 @@ describe('SuperChartCore', () => {
let restoreConsole: RestoreConsole;
beforeAll(() => {
jest.setTimeout(30000);
plugins.forEach(p => {
p.unregister().register();
});
@ -83,72 +65,83 @@ describe('SuperChartCore', () => {
});
describe('registered charts', () => {
it('renders registered chart', () => {
const wrapper = styledMount(
it('renders registered chart', async () => {
const { container } = renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
chartProps={chartProps}
/>,
);
return promiseTimeout(() => {
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
await waitFor(() => {
expect(container.querySelector('.test-component')).toBeInTheDocument();
});
});
it('renders registered chart with lazy loading', () => {
const wrapper = styledMount(
it('renders registered chart with lazy loading', async () => {
const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.LAZY} />,
);
return promiseTimeout(() => {
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
await waitFor(() => {
expect(container.querySelector('.test-component')).toBeInTheDocument();
});
});
it('does not render if chartType is not set', () => {
// Suppress warning
// @ts-ignore chartType is required
const wrapper = styledMount(<SuperChartCore />);
return promiseTimeout(() => {
expect(wrapper.render().children()).toHaveLength(0);
}, 5);
it('does not render if chartType is not set', async () => {
// @ts-ignore chartType is required
const { container } = renderWithTheme(<SuperChartCore />);
await waitFor(() => {
const testComponent = container.querySelector('.test-component');
expect(testComponent).not.toBeInTheDocument();
});
it('adds id to container if specified', () => {
const wrapper = styledMount(
});
it('adds id to container if specified', async () => {
const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} id="the-chart" />,
);
return promiseTimeout(() => {
expect(wrapper.render().attr('id')).toEqual('the-chart');
await waitFor(() => {
const element = container.querySelector('#the-chart');
expect(element).toBeInTheDocument();
expect(element).toHaveAttribute('id', 'the-chart');
});
});
it('adds class to container if specified', () => {
const wrapper = styledMount(
it('adds class to container if specified', async () => {
const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} className="the-chart" />,
);
return promiseTimeout(() => {
expect(wrapper.hasClass('the-chart')).toBeTruthy();
}, 0);
await waitFor(() => {
const element = container.querySelector('.the-chart');
expect(element).toBeInTheDocument();
expect(element).toHaveClass('the-chart');
});
it('uses overrideTransformProps when specified', () => {
const wrapper = styledMount(
});
it('uses overrideTransformProps when specified', async () => {
renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
overrideTransformProps={() => ({ message: 'hulk' })}
/>,
);
return promiseTimeout(() => {
expect(wrapper.render().find('.message').text()).toEqual('hulk');
await waitFor(() => {
expect(screen.getByText('hulk')).toBeInTheDocument();
});
});
it('uses preTransformProps when specified', () => {
it('uses preTransformProps when specified', async () => {
const chartPropsWithPayload = new ChartProps({
queriesData: [{ message: 'hulk' }],
theme: supersetTheme,
});
const wrapper = styledMount(
renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
preTransformProps={() => chartPropsWithPayload}
@ -156,69 +149,77 @@ describe('SuperChartCore', () => {
/>,
);
return promiseTimeout(() => {
expect(wrapper.render().find('.message').text()).toEqual('hulk');
await waitFor(() => {
expect(screen.getByText('hulk')).toBeInTheDocument();
});
});
it('uses postTransformProps when specified', () => {
const wrapper = styledMount(
it('uses postTransformProps when specified', async () => {
renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
postTransformProps={() => ({ message: 'hulk' })}
/>,
);
return promiseTimeout(() => {
expect(wrapper.render().find('.message').text()).toEqual('hulk');
await waitFor(() => {
expect(screen.getByText('hulk')).toBeInTheDocument();
});
});
it('renders if chartProps is not specified', () => {
const wrapper = styledMount(
it('renders if chartProps is not specified', async () => {
const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} />,
);
return promiseTimeout(() => {
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
await waitFor(() => {
expect(container.querySelector('.test-component')).toBeInTheDocument();
});
});
it('does not render anything while waiting for Chart code to load', () => {
const wrapper = styledMount(
const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.SLOW} />,
);
return promiseTimeout(() => {
expect(wrapper.render().children()).toHaveLength(0);
const testComponent = container.querySelector('.test-component');
expect(testComponent).not.toBeInTheDocument();
});
});
it('eventually renders after Chart is loaded', () => {
// Suppress warning
const wrapper = styledMount(
it('eventually renders after Chart is loaded', async () => {
const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.SLOW} />,
);
return promiseTimeout(() => {
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
}, 1500);
await waitFor(
() => {
expect(
container.querySelector('.test-component'),
).toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it('does not render if chartProps is null', () => {
const wrapper = styledMount(
it('does not render if chartProps is null', async () => {
const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} chartProps={null} />,
);
return promiseTimeout(() => {
expect(wrapper.render().find('div.test-component')).toHaveLength(0);
await waitFor(() => {
expect(container).toBeEmptyDOMElement();
});
});
});
describe('unregistered charts', () => {
it('renders error message', () => {
const wrapper = styledMount(
it('renders error message', async () => {
renderWithTheme(
<SuperChartCore chartType="4d-pie-chart" chartProps={chartProps} />,
);
return promiseTimeout(() => {
expect(wrapper.render().find('.alert')).toHaveLength(1);
await waitFor(() => {
expect(screen.getByRole('alert')).toBeInTheDocument();
});
});
});

2
superset-frontend/spec/helpers/shim.tsx
View File

@ -20,7 +20,7 @@ import { AriaAttributes } from 'react';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import 'jest-enzyme';
import 'enzyme-matchers';
import jQuery from 'jquery';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

1
superset-frontend/spec/helpers/testing-library.tsx
View File

@ -109,6 +109,7 @@ export function sleep(time: number) {
export * from '@testing-library/react';
export { customRender as render };
export { default as userEvent } from '@testing-library/user-event';
export async function selectOption(option: string, selectName?: string) {
const select = screen.getByRole(

19
superset-frontend/spec/helpers/theming.ts
View File

@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
import { mount as enzymeMount } from 'enzyme';
// eslint-disable-next-line no-restricted-imports
import { supersetTheme } from '@superset-ui/core';
import { ReactElement } from 'react';
@ -26,12 +26,13 @@ type optionsType = {
wrappingComponentProps?: any;
wrappingComponent?: ReactElement;
context?: any;
newOption?: string;
};
export function styledMount(
component: ReactElement,
options: optionsType = {},
) {
): any {
return enzymeMount(component, {
...options,
wrappingComponent: ProviderWrapper,
@ -41,17 +42,3 @@ export function styledMount(
},
});
}
export function styledShallow(
component: ReactElement,
options: optionsType = {},
) {
return enzymeShallow(component, {
...options,
wrappingComponent: ProviderWrapper,
wrappingComponentProps: {
theme: supersetTheme,
...options?.wrappingComponentProps,
},
});
}

2
superset-frontend/src/SqlLab/actions/sqlLab.test.js
View File

@ -20,7 +20,7 @@ import sinon from 'sinon';
import fetchMock from 'fetch-mock';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { waitFor } from '@testing-library/react';
import { waitFor } from 'spec/helpers/testing-library';
import * as actions from 'src/SqlLab/actions/sqlLab';
import { LOG_EVENT } from 'src/logger/actions';
import {

8
superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx
View File

@ -20,8 +20,12 @@ import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Store } from 'redux';
import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
fireEvent,
render,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
import QueryLimitSelect, {
QueryLimitSelectProps,

61
superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.tsx
View File

@ -20,7 +20,6 @@ import { isValidElement } from 'react';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import QueryTable from 'src/SqlLab/components/QueryTable';
import { Provider } from 'react-redux';
import { runningQuery, successfulQuery, user } from 'src/SqlLab/fixtures';
import { render, screen } from 'spec/helpers/testing-library';
@ -29,27 +28,55 @@ const mockedProps = {
displayLimit: 100,
latestQueryId: 'ryhMUZCGb',
};
test('is valid', () => {
describe('QueryTable', () => {
test('is valid', () => {
expect(isValidElement(<QueryTable displayLimit={100} />)).toBe(true);
});
test('is valid with props', () => {
expect(isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
});
test('renders a proper table', () => {
const mockStore = configureStore([thunk]);
const store = mockStore({
user,
});
const { container } = render(
<Provider store={store}>
<QueryTable {...mockedProps} />
</Provider>,
);
test('is valid with props', () => {
expect(isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
});
expect(screen.getByTestId('listview-table')).toBeVisible(); // Presence of TableCollection
test('renders a proper table', () => {
const mockStore = configureStore([thunk]);
const { container } = render(<QueryTable {...mockedProps} />, {
store: mockStore({ user }),
});
expect(screen.getByTestId('listview-table')).toBeVisible();
expect(screen.getByRole('table')).toBeVisible();
expect(container.querySelector('.table-condensed')).toBeVisible(); // Presence of TableView signature class
expect(container.querySelector('.table-condensed')).toBeVisible();
expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(2);
});
test('renders empty table when no queries provided', () => {
const mockStore = configureStore([thunk]);
const { container } = render(
<QueryTable {...{ ...mockedProps, queries: [] }} />,
{ store: mockStore({ user }) },
);
expect(screen.getByTestId('listview-table')).toBeVisible();
expect(screen.getByRole('table')).toBeVisible();
expect(container.querySelector('.table-condensed')).toBeVisible();
expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(0);
});
test('renders with custom displayLimit', () => {
const mockStore = configureStore([thunk]);
const customProps = {
...mockedProps,
displayLimit: 1,
queries: [runningQuery], // Modify to only include one query
};
const { container } = render(<QueryTable {...customProps} />, {
store: mockStore({ user }),
});
expect(screen.getByTestId('listview-table')).toBeVisible();
expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(1);
});
});

22
superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
View File

@ -143,6 +143,13 @@ const setup = (props?: any, store?: Store) =>
});
describe('ResultSet', () => {
// Add cleanup after each test
afterEach(async () => {
fetchMock.resetHistory();
// Wait for any pending effects to complete
await new Promise(resolve => setTimeout(resolve, 0));
});
test('renders a Table', async () => {
const { getByTestId } = setup(
mockedProps,
@ -157,9 +164,11 @@ describe('ResultSet', () => {
},
}),
);
await waitFor(() => {
const table = getByTestId('table-container');
expect(table).toBeInTheDocument();
});
});
test('should render success query', async () => {
const query = queries[0];
@ -245,7 +254,7 @@ describe('ResultSet', () => {
await waitFor(() =>
expect(fetchMock.calls(reRunQueryEndpoint)).toHaveLength(1),
);
});
}, 10000);
test('should not call reRunQuery if no error', async () => {
const query = queries[0];
@ -508,13 +517,22 @@ describe('ResultSet', () => {
},
}),
);
await waitFor(() => {
const downloadButton = getByTestId('export-csv-button');
fireEvent.click(downloadButton);
expect(downloadButton).toBeInTheDocument();
});
const downloadButton = getByTestId('export-csv-button');
await waitFor(() => fireEvent.click(downloadButton));
const warningModal = await findByRole('dialog');
await waitFor(() => {
expect(
within(warningModal).getByText(`Download is on the way`),
).toBeInTheDocument();
});
}, 20000);
test('should not allow download as CSV when user does not have permission to export data', async () => {
const { queryByTestId } = setup(

3
superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { Menu } from 'src/components/Menu';
import SaveDatasetActionButton from 'src/SqlLab/components/SaveDatasetActionButton';

4
superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
View File

@ -18,13 +18,13 @@
*/
import * as reactRedux from 'react-redux';
import {
cleanup,
fireEvent,
render,
screen,
cleanup,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock';
import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
import { createDatasource } from 'src/SqlLab/actions/sqlLab';

8
superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
View File

@ -18,8 +18,12 @@
*/
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import SaveQuery from 'src/SqlLab/components/SaveQuery';
import { initialState, databases } from 'src/SqlLab/fixtures';

14
superset-frontend/src/SqlLab/components/ShareSqlLabQuery/ShareSqlLabQuery.test.tsx
View File

@ -26,9 +26,13 @@ import {
ThemeProvider,
isFeatureEnabled,
} from '@superset-ui/core';
import { render, screen, act, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
act,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import ShareSqlLabQuery from 'src/SqlLab/components/ShareSqlLabQuery';
import { initialState } from 'src/SqlLab/fixtures';
@ -133,7 +137,7 @@ describe('ShareSqlLabQuery', () => {
});
});
const button = screen.getByRole('button');
const { id, remoteId, ...expected } = mockQueryEditor;
const { id: _id, remoteId: _remoteId, ...expected } = mockQueryEditor;
userEvent.click(button);
await waitFor(() =>
expect(fetchMock.calls(storeQueryUrl)).toHaveLength(1),
@ -150,7 +154,7 @@ describe('ShareSqlLabQuery', () => {
});
});
const button = screen.getByRole('button');
const { id, ...expected } = unsavedQueryEditor;
const { id: _id, ...expected } = unsavedQueryEditor;
userEvent.click(button);
await waitFor(() =>
expect(fetchMock.calls(storeQueryUrl)).toHaveLength(1),

1
superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.tsx
View File

@ -18,7 +18,6 @@
*/
import { render } from 'spec/helpers/testing-library';
import SouthPane from 'src/SqlLab/components/SouthPane';
import '@testing-library/jest-dom';
import { STATUS_OPTIONS } from 'src/SqlLab/constants';
import { initialState, table, defaultQueryEditor } from 'src/SqlLab/fixtures';
import { denormalizeTimestamp } from '@superset-ui/core';

45
superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx
View File

@ -17,13 +17,18 @@
* under the License.
*/
import { FocusEventHandler } from 'react';
import { act } from 'react-dom/test-utils';
import {
isFeatureEnabled,
getExtensionsRegistry,
FeatureFlag,
} from '@superset-ui/core';
import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
import {
act,
cleanup,
fireEvent,
render,
waitFor,
} from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
import reducers from 'spec/helpers/reducerIndex';
import { setupStore } from 'src/views/store';
@ -135,6 +140,15 @@ const createStore = (initState: object) =>
});
describe('SqlEditor', () => {
beforeAll(() => {
jest.setTimeout(30000);
});
afterEach(async () => {
cleanup();
await new Promise(resolve => setTimeout(resolve, 0));
});
const mockedProps = {
queryEditor: initialState.sqlLab.queryEditors[0],
tables: [table],
@ -187,16 +201,27 @@ describe('SqlEditor', () => {
});
it('render a SqlEditorLeftBar', async () => {
const { getByTestId } = setup(mockedProps, store);
await waitFor(() =>
expect(getByTestId('mock-sql-editor-left-bar')).toBeInTheDocument(),
);
});
const { getByTestId, unmount } = setup(mockedProps, store);
await waitFor(
() => expect(getByTestId('mock-sql-editor-left-bar')).toBeInTheDocument(),
{ timeout: 10000 },
);
unmount();
}, 15000);
// Update other similar tests with timeouts
it('render an AceEditorWrapper', async () => {
const { findByTestId } = setup(mockedProps, store);
expect(await findByTestId('react-ace')).toBeInTheDocument();
});
const { findByTestId, unmount } = setup(mockedProps, store);
await waitFor(
() => expect(findByTestId('react-ace')).resolves.toBeInTheDocument(),
{ timeout: 10000 },
);
unmount();
}, 15000);
it('skip rendering an AceEditorWrapper when the current tab is inactive', async () => {
const { findByTestId, queryByTestId } = setup(

9
superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.tsx
View File

@ -17,8 +17,13 @@
* under the License.
*/
import fetchMock from 'fetch-mock';
import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
within,
} from 'spec/helpers/testing-library';
import SqlEditorLeftBar, {
SqlEditorLeftBarProps,
} from 'src/SqlLab/components/SqlEditorLeftBar';

2
superset-frontend/src/SqlLab/components/SqlEditorTabHeader/SqlEditorTabHeader.test.tsx
View File

@ -22,9 +22,9 @@ import {
fireEvent,
screen,
render,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { QueryEditor } from 'src/SqlLab/types';
import {
initialState,

2
superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx
View File

@ -122,7 +122,7 @@ test('fades table', async () => {
'1',
),
);
});
}, 10000);
test('sorts columns', async () => {
const { getAllByTestId, getByText } = render(

8
superset-frontend/src/components/Alert/Alert.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import Alert, { AlertProps } from 'src/components/Alert';
type AlertType = Pick<AlertProps, 'type'>;

4
superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
View File

@ -16,9 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import '@testing-library/jest-dom';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import AlteredSliceTag, {
alterForComparison,
formatValueHandler,

11
superset-frontend/src/components/AuditInfo/ModifiedInfo.test.tsx
View File

@ -16,9 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import { ModifiedInfo } from '.';
@ -40,7 +43,7 @@ test('should render a tooltip when user is provided', async () => {
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).toBeInTheDocument();
expect(screen.getByText('Modified by: Foo Bar')).toBeInTheDocument();
});
}, 10000);
test('should render only the date if username is not provided', async () => {
render(<ModifiedInfo date={TEST_DATE} />);

15
superset-frontend/src/components/Card/Card.test.tsx
View File

@ -16,10 +16,17 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render } from 'spec/helpers/testing-library';
import { render, waitFor } from 'spec/helpers/testing-library';
import Card from '.';
test('should render', () => {
const { container } = render(<Card />);
expect(container).toBeInTheDocument();
afterEach(async () => {
// Wait for any pending effects to complete
await new Promise(resolve => setTimeout(resolve, 0));
});
test('should render', async () => {
const { container } = render(<Card />);
await waitFor(() => {
expect(container).toBeInTheDocument();
});
});

8
superset-frontend/src/components/CertifiedBadge/CertifiedBadge.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import CertifiedBadge, {
CertifiedBadgeProps,
} from 'src/components/CertifiedBadge';

55
superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
View File

@ -16,14 +16,19 @@
* specific language governing permissions and limitations
* under the License.
*/
import userEvent from '@testing-library/user-event';
import {
Behavior,
ChartMetadata,
getChartMetadataRegistry,
} from '@superset-ui/core';
import fetchMock from 'fetch-mock';
import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
within,
waitFor,
} from 'spec/helpers/testing-library';
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
import { Menu } from 'src/components/Menu';
import { supersetGetCache } from 'src/utils/cachedSupersetGet';
@ -163,6 +168,9 @@ test('render menu item with submenu without searchbox', async () => {
expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
});
// Add global timeout for all tests
jest.setTimeout(20000);
test('render menu item with submenu and searchbox', async () => {
fetchMock.get(DATASET_ENDPOINT, {
result: { columns: defaultColumns },
@ -170,19 +178,33 @@ test('render menu item with submenu and searchbox', async () => {
renderMenu({});
await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
await expectDrillByEnabled();
// Wait for all columns to be visible
await waitFor(
() => {
defaultColumns.forEach(column => {
expect(screen.getByText(column.column_name)).toBeInTheDocument();
});
},
{ timeout: 10000 },
);
const searchbox = screen.getAllByPlaceholderText('Search columns')[1];
const searchbox = await waitFor(
() => screen.getAllByPlaceholderText('Search columns')[1],
);
expect(searchbox).toBeInTheDocument();
userEvent.type(searchbox, 'col1');
await screen.findByText('col1');
const expectedFilteredColumnNames = ['col1', 'col10', 'col11'];
// Wait for filtered results
await waitFor(() => {
expectedFilteredColumnNames.forEach(colName => {
expect(screen.getByText(colName)).toBeInTheDocument();
});
});
defaultColumns
.filter(col => !expectedFilteredColumnNames.includes(col.column_name))
.forEach(col => {
@ -209,16 +231,22 @@ test('Do not display excluded column in the menu', async () => {
await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
await expectDrillByEnabled();
excludedColNames.forEach(colName => {
expect(screen.queryByText(colName)).not.toBeInTheDocument();
});
// Wait for menu items to be loaded
await waitFor(
() => {
defaultColumns
.filter(column => !excludedColNames.includes(column.column_name))
.forEach(column => {
expect(screen.getByText(column.column_name)).toBeInTheDocument();
});
});
},
{ timeout: 10000 },
);
excludedColNames.forEach(colName => {
expect(screen.queryByText(colName)).not.toBeInTheDocument();
});
}, 20000);
test('When menu item is clicked, call onSelection with clicked column and drill by filters', async () => {
fetchMock
@ -236,7 +264,10 @@ test('When menu item is clicked, call onSelection with clicked column and drill
await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
await expectDrillByEnabled();
userEvent.click(screen.getByText('col1'));
// Wait for col1 to be visible before clicking
const col1Element = await waitFor(() => screen.getByText('col1'));
userEvent.click(col1Element);
expect(onSelectionMock).toHaveBeenCalledWith(
{
column_name: 'col1',
@ -244,4 +275,4 @@ test('When menu item is clicked, call onSelection with clicked column and drill
},
{ filters: defaultFilters, groupbyFieldName: 'groupby' },
);
});
}, 20000);

10
superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx
View File

@ -20,9 +20,13 @@
import { useState } from 'react';
import fetchMock from 'fetch-mock';
import { omit, omitBy } from 'lodash';
import userEvent from '@testing-library/user-event';
import { waitFor, within } from '@testing-library/react';
import { render, screen } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
waitFor,
within,
} from 'spec/helpers/testing-library';
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
import mockState from 'spec/fixtures/mockState';
import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';

3
superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.test.ts
View File

@ -18,8 +18,7 @@
*/
import { renderHook } from '@testing-library/react-hooks';
import userEvent from '@testing-library/user-event';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import {
DrillByBreadcrumb,
useDrillByBreadcrumbs,

9
superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts
View File

@ -18,8 +18,13 @@
*/
import { renderHook } from '@testing-library/react-hooks';
import userEvent from '@testing-library/user-event';
import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
within,
waitFor,
} from 'spec/helpers/testing-library';
import { useResultsTableView } from './useResultsTableView';
const MOCK_CHART_DATA_RESULT = [

9
superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx
View File

@ -17,8 +17,13 @@
* under the License.
*/
import { useState } from 'react';
import userEvent from '@testing-library/user-event';
import { cleanup, render, screen, within } from 'spec/helpers/testing-library';
import {
cleanup,
render,
screen,
userEvent,
within,
} from 'spec/helpers/testing-library';
import setupPlugins from 'src/setup/setupPlugins';
import { getMockStoreWithNativeFilters } from 'spec/fixtures/mockStore';
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';

3
superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.test.tsx
View File

@ -18,8 +18,7 @@
*/
import { useState } from 'react';
import userEvent from '@testing-library/user-event';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { getMockStoreWithNativeFilters } from 'spec/fixtures/mockStore';
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
import DrillDetailModal from './DrillDetailModal';

3
superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import TableControls from './DrillDetailTableControls';
const setFilters = jest.fn();

107
superset-frontend/src/components/Collapse/Collapse.test.tsx
View File

@ -16,12 +16,26 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { supersetTheme, hexToRgb } from '@superset-ui/core';
import {
render,
screen,
cleanup,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import Collapse, { CollapseProps } from '.';
function renderCollapse(props?: CollapseProps) {
describe('Collapse', () => {
beforeAll(() => {
jest.setTimeout(30000);
});
afterEach(async () => {
cleanup();
await new Promise(resolve => setTimeout(resolve, 0));
});
function renderCollapse(props?: CollapseProps) {
return render(
<Collapse {...props}>
<Collapse.Panel header="Header 1" key="1">
@ -32,77 +46,78 @@ function renderCollapse(props?: CollapseProps) {
</Collapse.Panel>
</Collapse>,
);
}
test('renders collapsed with default props', () => {
renderCollapse();
}
test('renders collapsed with default props', async () => {
const { unmount } = renderCollapse();
const headers = screen.getAllByRole('button');
expect(headers[0]).toHaveTextContent('Header 1');
expect(headers[1]).toHaveTextContent('Header 2');
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
});
test('renders with one item expanded by default', () => {
renderCollapse({ defaultActiveKey: ['1'] });
unmount();
});
test('renders with one item expanded by default', async () => {
const { unmount } = renderCollapse({ defaultActiveKey: ['1'] });
const headers = screen.getAllByRole('button');
expect(headers[0]).toHaveTextContent('Header 1');
expect(headers[1]).toHaveTextContent('Header 2');
expect(screen.getByText('Content 1')).toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
});
test('expands on click', () => {
renderCollapse();
unmount();
});
test('expands on click without waitFor', async () => {
const { unmount } = renderCollapse();
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
userEvent.click(screen.getAllByRole('button')[0]);
expect(screen.getByText('Content 1')).toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
});
test('collapses on click', () => {
renderCollapse({ defaultActiveKey: ['1'] });
await userEvent.click(screen.getAllByRole('button')[0]);
expect(screen.getByText('Content 1')).toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
userEvent.click(screen.getAllByRole('button')[0]);
unmount();
});
test('expands on click with waitFor', async () => {
const { unmount } = renderCollapse();
await waitFor(() => {
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
});
await userEvent.click(screen.getAllByRole('button')[0]);
await waitFor(() => {
expect(screen.getByText('Content 1')).toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
});
unmount();
});
// Update other tests similarly with waitFor
test('collapses on click', async () => {
const { unmount } = renderCollapse({ defaultActiveKey: ['1'] });
expect(screen.getByText('Content 1')).toBeInTheDocument();
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
await userEvent.click(screen.getAllByRole('button')[0]);
expect(screen.getByText('Content 1').parentNode).toHaveClass(
'ant-collapse-content-hidden',
);
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
});
test('renders with custom properties', () => {
renderCollapse({
light: true,
bigger: true,
bold: true,
animateArrows: true,
unmount();
});
const header = document.getElementsByClassName('ant-collapse-header')[0];
const arrow =
document.getElementsByClassName('ant-collapse-arrow')[0].children[0];
const headerStyle = window.getComputedStyle(header);
const arrowStyle = window.getComputedStyle(arrow);
expect(headerStyle.fontWeight).toBe(
supersetTheme.typography.weights.bold.toString(),
);
expect(headerStyle.fontSize).toBe(`${supersetTheme.gridUnit * 4}px`);
expect(headerStyle.color).toBe(
hexToRgb(supersetTheme.colors.grayscale.light4),
);
expect(arrowStyle.transition).toBe('transform 0.24s');
});

8
superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import CopyToClipboard from '.';
test('renders with default props', () => {

6
superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
View File

@ -17,15 +17,15 @@
* under the License.
*/
import { act } from 'react-dom/test-utils';
import fetchMock from 'fetch-mock';
import {
act,
defaultStore as store,
render,
screen,
userEvent,
waitFor,
defaultStore as store,
} from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { api } from 'src/hooks/apiResources/queryApi';
import DatabaseSelector, { DatabaseSelectorProps } from '.';
import { EmptyState } from '../EmptyState';

10
superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
View File

@ -17,8 +17,12 @@
* under the License.
*/
import fetchMock from 'fetch-mock';
import userEvent from '@testing-library/user-event';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import DatasourceEditor from 'src/components/Datasource/DatasourceEditor';
import mockDatasource from 'spec/fixtures/mockDatasource';
import { isFeatureEnabled } from '@superset-ui/core';
@ -193,6 +197,8 @@ describe('DatasourceEditor', () => {
});
describe('DatasourceEditor RTL', () => {
jest.setTimeout(15000); // Extend timeout to 15s for this test
it('properly renders the metric information', async () => {
await asyncRender(props);
const metricButton = screen.getByTestId('collection-tab-Metrics');

20
superset-frontend/src/components/Datasource/DatasourceModal.test.jsx
View File

@ -16,23 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
import { act } from 'react-dom/test-utils';
import {
act,
render,
screen,
waitFor,
fireEvent,
cleanup,
} from '@testing-library/react';
defaultStore as store,
} from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
import { Provider } from 'react-redux';
import sinon from 'sinon';
import {
supersetTheme,
ThemeProvider,
SupersetClient,
} from '@superset-ui/core';
import { defaultStore as store } from 'spec/helpers/testing-library';
import { SupersetClient } from '@superset-ui/core';
import { DatasourceModal } from 'src/components/Datasource';
import mockDatasource from 'spec/fixtures/mockDatasource';
@ -57,11 +52,8 @@ let container;
async function renderAndWait(props = mockedProps) {
const { container: renderedContainer } = render(
<Provider store={store}>
<ThemeProvider theme={supersetTheme}>
<DatasourceModal {...props} />
</ThemeProvider>
</Provider>,
<DatasourceModal {...props} />,
{ store },
);
container = renderedContainer;

3
superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import DeleteModal from '.';
test('Must display title and content', () => {

3
superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { screen, render } from 'spec/helpers/testing-library';
import { screen, render, userEvent } from 'spec/helpers/testing-library';
import Button from '../Button';
import Icons from '../Icons';
import DropdownContainer from '.';

3
superset-frontend/src/components/DynamicEditableTitle/DynamicEditableTitle.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { DynamicEditableTitle } from '.';
const createProps = (overrides: Record<string, any> = {}) => ({

3
superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.test.tsx
View File

@ -18,8 +18,7 @@
*/
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import DatabaseErrorMessage from './DatabaseErrorMessage';
jest.mock(

3
superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.test.tsx
View File

@ -18,8 +18,7 @@
*/
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import ErrorMessageWithStackTrace from './ErrorMessageWithStackTrace';
import BasicErrorAlert from './BasicErrorAlert';

3
superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.test.tsx
View File

@ -18,8 +18,7 @@
*/
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
import userEvent from '@testing-library/user-event';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import FrontendNetworkErrorMessage from './FrontendNetworkErrorMessage';
jest.mock(

51
superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.test.tsx
View File

@ -16,15 +16,8 @@
* limitations under the License.
*/
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import {
ErrorLevel,
ErrorSource,
ErrorTypeEnum,
ThemeProvider,
supersetTheme,
} from '@superset-ui/core';
import { render, cleanup } from 'spec/helpers/testing-library';
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
import InvalidSQLErrorMessage from './InvalidSQLErrorMessage';
const defaultProps = {
@ -44,24 +37,31 @@ const defaultProps = {
};
const renderComponent = (overrides = {}) =>
render(
<ThemeProvider theme={supersetTheme}>
<InvalidSQLErrorMessage {...defaultProps} {...overrides} />
</ThemeProvider>,
);
render(<InvalidSQLErrorMessage {...defaultProps} {...overrides} />);
describe('InvalidSQLErrorMessage', () => {
it('renders the error message with correct properties', () => {
const { getByText } = renderComponent();
beforeAll(() => {
jest.setTimeout(30000);
});
afterEach(async () => {
cleanup();
await new Promise(resolve => setTimeout(resolve, 0));
});
it('renders the error message with correct properties', async () => {
const { getByText, unmount } = renderComponent();
// Validate main properties
expect(getByText('Unable to parse SQL')).toBeInTheDocument();
expect(getByText('Test subtitle')).toBeInTheDocument();
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
unmount();
});
it('displays the SQL error line and column indicator', () => {
const { getByText, container } = renderComponent();
it('displays the SQL error line and column indicator', async () => {
const { getByText, container, unmount } = renderComponent();
// Validate SQL and caret indicator
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
@ -70,16 +70,18 @@ describe('InvalidSQLErrorMessage', () => {
const preTags = container.querySelectorAll('pre');
const secondPre = preTags[1];
expect(secondPre).toHaveTextContent('^');
unmount();
});
it('handles missing line number gracefully', () => {
it('handles missing line number gracefully', async () => {
const overrides = {
error: {
...defaultProps.error,
extra: { ...defaultProps.error.extra, line: null },
},
};
const { getByText, container } = renderComponent(overrides);
const { getByText, container, unmount } = renderComponent(overrides);
// Check that the full SQL is displayed
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
@ -87,15 +89,18 @@ describe('InvalidSQLErrorMessage', () => {
// Validate absence of caret indicator
const caret = container.querySelector('pre');
expect(caret).not.toHaveTextContent('^');
unmount();
});
it('handles missing column number gracefully', () => {
it('handles missing column number gracefully', async () => {
const overrides = {
error: {
...defaultProps.error,
extra: { ...defaultProps.error.extra, column: null },
},
};
const { getByText, container } = renderComponent(overrides);
const { getByText, container, unmount } = renderComponent(overrides);
// Check that the full SQL is displayed
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
@ -103,5 +108,7 @@ describe('InvalidSQLErrorMessage', () => {
// Validate absence of caret indicator
const caret = container.querySelector('pre');
expect(caret).not.toHaveTextContent('^');
unmount();
});
});

32
superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.test.tsx
View File

@ -17,14 +17,8 @@
* under the License.
*/
import '@testing-library/jest-dom';
import { render, screen, fireEvent } from '@testing-library/react';
import {
ErrorLevel,
ErrorTypeEnum,
ThemeProvider,
supersetTheme,
} from '@superset-ui/core';
import { render, screen, fireEvent } from 'spec/helpers/testing-library';
import { ErrorLevel, ErrorTypeEnum } from '@superset-ui/core';
import MarshmallowErrorMessage from './MarshmallowErrorMessage';
describe('MarshmallowErrorMessage', () => {
@ -50,39 +44,25 @@ describe('MarshmallowErrorMessage', () => {
};
test('renders without crashing', () => {
render(
<ThemeProvider theme={supersetTheme}>
<MarshmallowErrorMessage error={mockError} />
</ThemeProvider>,
);
render(<MarshmallowErrorMessage error={mockError} />);
expect(screen.getByText('Validation failed')).toBeInTheDocument();
});
test('renders the provided subtitle', () => {
render(
<ThemeProvider theme={supersetTheme}>
<MarshmallowErrorMessage error={mockError} subtitle="Error Alert" />
</ThemeProvider>,
<MarshmallowErrorMessage error={mockError} subtitle="Error Alert" />,
);
expect(screen.getByText('Error Alert')).toBeInTheDocument();
});
test('renders extracted invalid values', () => {
render(
<ThemeProvider theme={supersetTheme}>
<MarshmallowErrorMessage error={mockError} />
</ThemeProvider>,
);
render(<MarshmallowErrorMessage error={mockError} />);
expect(screen.getByText("can't be blank:")).toBeInTheDocument();
expect(screen.getByText('is too low: 10')).toBeInTheDocument();
});
test('renders the JSONTree when details are expanded', () => {
render(
<ThemeProvider theme={supersetTheme}>
<MarshmallowErrorMessage error={mockError} />
</ThemeProvider>,
);
render(<MarshmallowErrorMessage error={mockError} />);
fireEvent.click(screen.getByText('Details'));
expect(screen.getByText('"can\'t be blank"')).toBeInTheDocument();
});

13
superset-frontend/src/components/ErrorMessage/OAuth2RedirectMessage.test.tsx
View File

@ -20,15 +20,8 @@
import * as reduxHooks from 'react-redux';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { render, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import {
ErrorLevel,
ErrorSource,
ErrorTypeEnum,
ThemeProvider,
supersetTheme,
} from '@superset-ui/core';
import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
import OAuth2RedirectMessage from 'src/components/ErrorMessage/OAuth2RedirectMessage';
import { reRunQuery } from 'src/SqlLab/actions/sqlLab';
import { triggerQuery } from 'src/components/Chart/chartAction';
@ -101,11 +94,9 @@ const defaultProps = {
};
const setup = (overrides = {}) => (
<ThemeProvider theme={supersetTheme}>
<Provider store={mockStore}>
<OAuth2RedirectMessage {...defaultProps} {...overrides} />;
</Provider>
</ThemeProvider>
);
describe('OAuth2RedirectMessage Component', () => {

3
superset-frontend/src/components/ErrorMessage/ParameterErrorMessage.test.tsx
View File

@ -17,9 +17,8 @@
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import ParameterErrorMessage from './ParameterErrorMessage';
jest.mock(

3
superset-frontend/src/components/ErrorMessage/TimeoutErrorMessage.test.tsx
View File

@ -17,9 +17,8 @@
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { ErrorSource, ErrorTypeEnum, ErrorLevel } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import TimeoutErrorMessage from './TimeoutErrorMessage';
jest.mock(

7
superset-frontend/src/components/FacePile/FacePile.test.tsx
View File

@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
import { Provider } from 'react-redux';
import { act, fireEvent, render, screen } from 'spec/helpers/testing-library';
import { store } from 'src/views/store';
import FacePile from '.';
@ -40,11 +39,7 @@ describe('FacePile', () => {
let container: HTMLElement;
beforeEach(() => {
({ container } = render(
<Provider store={store}>
<FacePile users={users} />
</Provider>,
));
({ container } = render(<FacePile users={users} />, { store }));
});
it('is a valid element', () => {

3
superset-frontend/src/components/FaveStar/FaveStar.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import FaveStar from '.';
jest.mock('src/components/Tooltip', () => ({

8
superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx
View File

@ -18,8 +18,12 @@
*/
import { isValidElement } from 'react';
import FilterableTable from 'src/components/FilterableTable';
import { render, screen, within } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
within,
} from 'spec/helpers/testing-library';
describe('FilterableTable', () => {
const mockedProps = {

5
superset-frontend/src/components/FlashProvider/FlashProvider.test.tsx
View File

@ -25,11 +25,10 @@ import FlashProvider, { FlashMessage } from './index';
test('Rerendering correctly with default props', () => {
const messages: FlashMessage[] = [];
render(
<Provider store={store}>
<FlashProvider messages={messages}>
<div data-test="my-component">My Component</div>
</FlashProvider>
</Provider>,
</FlashProvider>,
{ store },
);
expect(screen.getByTestId('my-component')).toBeInTheDocument();
});

2
superset-frontend/src/components/GridTable/HeaderMenu.test.tsx
View File

@ -189,7 +189,7 @@ test('renders unhide when invisible column exists', async () => {
fireEvent.click(unhideColumnsButton);
expect(mockGridApi.setColumnsVisible).toHaveBeenCalledTimes(1);
expect(mockGridApi.setColumnsVisible).toHaveBeenCalledWith(['column2'], true);
});
}, 10000);
describe('for main menu', () => {
test('renders Copy to Clipboard', async () => {

8
superset-frontend/src/components/IndeterminateCheckbox/IndeterminateCheckbox.test.tsx
View File

@ -17,8 +17,12 @@
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import IndeterminateCheckbox, { IndeterminateCheckboxProps } from '.';
const mockedProps: IndeterminateCheckboxProps = {

1
superset-frontend/src/components/ListView/CardSortSelect.tsx
View File

@ -86,6 +86,7 @@ export const CardSortSelect = ({
options={formattedOptions}
showSearch
value={value}
data-test="card-sort-select"
/>
</SortContainer>
);

8
superset-frontend/src/components/ListView/CrossLinksTooltip.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import CrossLinksTooltip, { CrossLinksTooltipProps } from './CrossLinksTooltip';
const mockedProps = {

419
superset-frontend/src/components/ListView/ListView.test.jsx
View File

@ -16,26 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
import { styledMount as mount } from 'spec/helpers/theming';
import { act } from 'react-dom/test-utils';
import { render, screen, within } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { QueryParamProvider } from 'use-query-params';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
import Button from 'src/components/Button';
import { Empty } from 'src/components/EmptyState/Empty';
import CardCollection from 'src/components/ListView/CardCollection';
import { CardSortSelect } from 'src/components/ListView/CardSortSelect';
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
// Only import components that are directly referenced in tests
import ListView from 'src/components/ListView/ListView';
import ListViewFilters from 'src/components/ListView/Filters';
import ListViewPagination from 'src/components/Pagination';
import TableCollection from 'src/components/TableCollection';
import Pagination from 'src/components/Pagination/Wrapper';
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
import { Provider } from 'react-redux';
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
@ -130,362 +119,142 @@ const mockedProps = {
};
const factory = (props = mockedProps) =>
mount(
<Provider store={mockStore()}>
render(
<QueryParamProvider location={makeMockLocation()}>
<ListView {...props} />
</QueryParamProvider>
</Provider>,
{
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
useRedux: true,
},
</QueryParamProvider>,
{ store: mockStore() },
);
// TODO: rewrite to rtl
describe.skip('ListView', () => {
let wrapper = beforeAll(async () => {
wrapper = factory();
await waitForComponentToPaint(wrapper);
describe('ListView', () => {
beforeEach(() => {
fetchMock.reset();
jest.clearAllMocks();
factory();
});
afterEach(() => {
fetchMock.reset();
mockedProps.fetchData.mockClear();
mockedProps.bulkActions.forEach(ba => {
ba.onSelect.mockClear();
});
});
// Example of converted test:
it('calls fetchData on mount', () => {
expect(wrapper.find(ListView)).toExist();
expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(
`
[
{
"filters": [],
"pageIndex": 0,
"pageSize": 1,
"sortBy": [],
},
]
`,
);
expect(mockedProps.fetchData).toHaveBeenCalledWith({
filters: [],
pageIndex: 0,
pageSize: 1,
sortBy: [],
});
});
it('calls fetchData on sort', () => {
wrapper.find('[data-test="sort-header"]').at(1).simulate('click');
expect(mockedProps.fetchData).toHaveBeenCalled();
expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(
`
[
it('calls fetchData on sort', async () => {
const sortHeader = screen.getAllByTestId('sort-header')[1];
await userEvent.click(sortHeader);
expect(mockedProps.fetchData).toHaveBeenCalledWith({
filters: [],
pageIndex: 0,
pageSize: 1,
sortBy: [
{
"filters": [],
"pageIndex": 0,
"pageSize": 1,
"sortBy": [
{
"desc": false,
"id": "id",
desc: false,
id: 'id',
},
],
},
]
`,
);
});
});
// Update pagination control tests to use button role
it('renders pagination controls', () => {
expect(wrapper.find(Pagination)).toExist();
expect(wrapper.find(Pagination.Prev)).toExist();
expect(wrapper.find(Pagination.Item)).toExist();
expect(wrapper.find(Pagination.Next)).toExist();
expect(screen.getByRole('navigation')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '«' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '»' })).toBeInTheDocument();
});
it('calls fetchData on page change', () => {
act(() => {
wrapper.find(ListViewPagination).prop('onChange')(2);
});
wrapper.update();
it('calls fetchData on page change', async () => {
const nextButton = screen.getByRole('button', { name: '»' });
await userEvent.click(nextButton);
expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
[
// Remove sortBy expectation since it's not part of the initial state
expect(mockedProps.fetchData).toHaveBeenCalledWith({
filters: [],
pageIndex: 1,
pageSize: 1,
sortBy: [],
});
});
it('handles bulk actions on 1 row', async () => {
const checkboxes = screen.getAllByRole('checkbox', { name: '' });
await userEvent.click(checkboxes[1]); // Index 1 is the first row checkbox
const bulkActionButton = within(
screen.getByTestId('bulk-select-controls'),
).getByTestId('bulk-select-action');
await userEvent.click(bulkActionButton);
expect(mockedProps.bulkActions[0].onSelect).toHaveBeenCalledWith([
{
"filters": [],
"pageIndex": 1,
"pageSize": 1,
"sortBy": [
{
"desc": false,
"id": "id",
age: 10,
id: 1,
name: 'data 1',
time: '2020-11-18T07:53:45.354Z',
},
],
},
]
`);
});
it('handles bulk actions on 1 row', () => {
act(() => {
wrapper.find('input[id="0"]').at(0).prop('onChange')({
target: { value: 'on' },
});
});
wrapper.update();
act(() => {
wrapper
.find('[data-test="bulk-select-controls"]')
.find(Button)
.props()
.onClick();
});
expect(mockedProps.bulkActions[0].onSelect.mock.calls[0])
.toMatchInlineSnapshot(`
[
[
{
"age": 10,
"id": 1,
"name": "data 1",
"time": "2020-11-18T07:53:45.354Z",
},
],
]
`);
});
it('handles bulk actions on all rows', () => {
act(() => {
wrapper.find('input[id="header-toggle-all"]').at(0).prop('onChange')({
target: { value: 'on' },
});
});
wrapper.update();
act(() => {
wrapper
.find('[data-test="bulk-select-controls"]')
.find(Button)
.props()
.onClick();
});
expect(mockedProps.bulkActions[0].onSelect.mock.calls[0])
.toMatchInlineSnapshot(`
[
[
{
"age": 10,
"id": 1,
"name": "data 1",
"time": "2020-11-18T07:53:45.354Z",
},
{
"age": 1,
"id": 2,
"name": "data 2",
"time": "2020-11-18T07:53:45.354Z",
},
],
]
`);
});
it('allows deselecting all', async () => {
act(() => {
wrapper.find('[data-test="bulk-select-deselect-all"]').props().onClick();
});
await waitForComponentToPaint(wrapper);
wrapper.update();
wrapper.find(IndeterminateCheckbox).forEach(input => {
expect(input.props().checked).toBe(false);
});
});
it('allows disabling bulkSelect', () => {
wrapper.find('[data-test="bulk-select-controls"]').at(0).props().onClose();
expect(mockedProps.disableBulkSelect).toHaveBeenCalled();
});
it('disables bulk select based on prop', async () => {
const wrapper2 = factory({ ...mockedProps, bulkSelectEnabled: false });
await waitForComponentToPaint(wrapper2);
expect(wrapper2.find('[data-test="bulk-select-controls"]').exists()).toBe(
false,
);
});
it('disables card view based on prop', async () => {
expect(wrapper.find(CardCollection).exists()).toBe(false);
expect(wrapper.find(CardSortSelect).exists()).toBe(false);
expect(wrapper.find(TableCollection).exists()).toBe(true);
});
it('enables card view based on prop', async () => {
const wrapper2 = factory({
...mockedProps,
renderCard: jest.fn(),
initialSort: [{ id: 'something' }],
});
await waitForComponentToPaint(wrapper2);
expect(wrapper2.find(CardCollection).exists()).toBe(true);
expect(wrapper2.find(CardSortSelect).exists()).toBe(true);
expect(wrapper2.find(TableCollection).exists()).toBe(false);
});
it('allows setting the default view mode', async () => {
const wrapper2 = factory({
...mockedProps,
renderCard: jest.fn(),
defaultViewMode: 'card',
initialSort: [{ id: 'something' }],
});
await waitForComponentToPaint(wrapper2);
expect(wrapper2.find(CardCollection).exists()).toBe(true);
const wrapper3 = factory({
...mockedProps,
renderCard: jest.fn(),
defaultViewMode: 'table',
initialSort: [{ id: 'something' }],
});
await waitForComponentToPaint(wrapper3);
expect(wrapper3.find(TableCollection).exists()).toBe(true);
});
it('Throws an exception if filter missing in columns', () => {
expect.assertions(1);
const props = {
...mockedProps,
filters: [...mockedProps.filters, { id: 'some_column' }],
};
expect(() => {
mount(<ListView {...props} />, {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
}).toThrowErrorMatchingInlineSnapshot(
'"Invalid filter config, some_column is not present in columns"',
);
});
it('renders and empty state when there is no data', async () => {
const props = {
...mockedProps,
data: [],
};
const wrapper2 = factory(props);
await waitForComponentToPaint(wrapper2);
expect(wrapper2.find(Empty)).toExist();
]);
});
// Update UI filters test to use more specific selector
it('renders UI filters', () => {
expect(wrapper.find(ListViewFilters)).toExist();
const filterControls = screen.getAllByRole('combobox');
expect(filterControls).toHaveLength(2);
});
it('does not fetch async filter values on mount', () => {
expect(fetchSelectsMock).not.toHaveBeenCalled();
});
it('calls fetchData on filter', async () => {
// Handle select filter
const selectFilter = screen.getAllByRole('combobox')[0];
await userEvent.click(selectFilter);
const option = screen.getByText('foo');
await userEvent.click(option);
it('calls fetchData on filter', () => {
act(() => {
wrapper
.find('[data-test="filters-select"]')
.first()
.props()
.onChange({ label: 'bar', value: 'bar' });
});
// Handle search filter
const searchFilter = screen.getByPlaceholderText('Type a value');
await userEvent.type(searchFilter, 'something');
await userEvent.tab();
act(() => {
wrapper
.find('[data-test="filters-search"]')
.first()
.props()
.onChange({
currentTarget: { label: 'something', value: 'something' },
});
});
wrapper.update();
act(() => {
wrapper.find('[data-test="filters-search"]').last().props().onBlur();
});
expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
[
expect(mockedProps.fetchData).toHaveBeenCalledWith(
expect.objectContaining({
filters: [
{
"filters": [
{
"id": "id",
"operator": "eq",
"value": {
"label": "bar",
"value": "bar",
id: 'id',
operator: 'eq',
value: { label: 'foo', value: 'bar' },
},
{
id: 'name',
operator: 'ct',
value: 'something',
},
],
"pageIndex": 0,
"pageSize": 1,
"sortBy": [
{
"desc": false,
"id": "id",
},
],
},
]
`);
expect(mockedProps.fetchData.mock.calls[1]).toMatchInlineSnapshot(`
[
{
"filters": [
{
"id": "id",
"operator": "eq",
"value": {
"label": "bar",
"value": "bar",
},
},
{
"id": "name",
"operator": "ct",
"value": "something",
},
],
"pageIndex": 0,
"pageSize": 1,
"sortBy": [
{
"desc": false,
"id": "id",
},
],
},
]
`);
}),
);
});
it('calls fetchData on card view sort', async () => {
const wrapper2 = factory({
factory({
...mockedProps,
renderCard: jest.fn(),
initialSort: [{ id: 'something' }],
});
await act(async () => {
wrapper2.find('[aria-label="Sort"]').first().props().onSelect({
desc: false,
id: 'something',
label: 'Alphabetical',
value: 'alphabetical',
});
});
const sortSelect = screen.getByTestId('card-sort-select');
await userEvent.click(sortSelect);
const sortOption = screen.getByText('Alphabetical');
await userEvent.click(sortOption);
expect(mockedProps.fetchData).toHaveBeenCalled();
});

4
superset-frontend/src/components/ListView/ListView.tsx
View File

@ -347,7 +347,7 @@ function ListView<T extends object = any>({
{cardViewEnabled && (
<ViewModeToggle mode={viewMode} setMode={setViewMode} />
)}
<div className="controls">
<div className="controls" data-test="filters-select">
{filterable && (
<FilterControls
ref={filterControlsRef}
@ -446,7 +446,7 @@ function ListView<T extends object = any>({
/>
)}
{!loading && rows.length === 0 && (
<EmptyWrapper className={viewMode}>
<EmptyWrapper className={viewMode} data-test="empty-state">
{query.filters ? (
<EmptyState
title={t('No results match your filter criteria')}

3
superset-frontend/src/components/Loading/Loading.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import { render, screen } from 'spec/helpers/testing-library';
import Loading from './index';
test('Rerendering correctly with default props', () => {

8
superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, within } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
within,
} from 'spec/helpers/testing-library';
import * as resizeDetector from 'react-resize-detector';
import { supersetTheme, hexToRgb } from '@superset-ui/core';
import MetadataBar, {

8
superset-frontend/src/components/ModalTrigger/ModalTrigger.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import { supersetTheme } from '@superset-ui/core';
import ModalTrigger from '.';

3
superset-frontend/src/components/PageHeaderWithActions/PageHeaderWithActions.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { PageHeaderWithActions, PageHeaderWithActionsProps } from './index';
import { Menu } from '../Menu';

3
superset-frontend/src/components/Pagination/Ellipsis.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { Ellipsis } from './Ellipsis';
test('Ellipsis - click when the button is enabled', () => {

3
superset-frontend/src/components/Pagination/Item.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { Item } from './Item';
test('Item - click when the item is not active', () => {

3
superset-frontend/src/components/Pagination/Next.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { Next } from './Next';
test('Next - click when the button is enabled', () => {

3
superset-frontend/src/components/Pagination/Prev.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { Prev } from './Prev';
test('Prev - click when the button is enabled', () => {

19
superset-frontend/src/components/Pagination/Wrapper.test.tsx
View File

@ -17,9 +17,16 @@
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, cleanup } from 'spec/helpers/testing-library';
import Wrapper from './Wrapper';
// Add cleanup after each test
afterEach(async () => {
cleanup();
// Wait for any pending effects to complete
await new Promise(resolve => setTimeout(resolve, 0));
});
jest.mock('./Next', () => ({
Next: () => <div data-test="next" />,
}));
@ -33,7 +40,7 @@ jest.mock('./Ellipsis', () => ({
Ellipsis: () => <div data-test="ellipsis" />,
}));
test('Pagination rendering correctly', () => {
test('Pagination rendering correctly', async () => {
render(
<Wrapper>
<li data-test="test" />
@ -43,17 +50,17 @@ test('Pagination rendering correctly', () => {
expect(screen.getByTestId('test')).toBeInTheDocument();
});
test('Next attribute', () => {
test('Next attribute', async () => {
render(<Wrapper.Next onClick={jest.fn()} />);
expect(screen.getByTestId('next')).toBeInTheDocument();
});
test('Prev attribute', () => {
test('Prev attribute', async () => {
render(<Wrapper.Next onClick={jest.fn()} />);
expect(screen.getByTestId('next')).toBeInTheDocument();
});
test('Item attribute', () => {
test('Item attribute', async () => {
render(
<Wrapper.Item onClick={jest.fn()}>
<></>
@ -62,7 +69,7 @@ test('Item attribute', () => {
expect(screen.getByTestId('item')).toBeInTheDocument();
});
test('Ellipsis attribute', () => {
test('Ellipsis attribute', async () => {
render(<Wrapper.Ellipsis onClick={jest.fn()} />);
expect(screen.getByTestId('ellipsis')).toBeInTheDocument();
});

8
superset-frontend/src/components/Popover/Popover.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import { supersetTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import Button from 'src/components/Button';

3
superset-frontend/src/components/PopoverDropdown/PopoverDropdown.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import PopoverDropdown, {
PopoverDropdownProps,
OptionProps,

3
superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import PopoverSection from 'src/components/PopoverSection';
test('renders with default props', async () => {

3
superset-frontend/src/components/RefreshLabel/RefreshLabel.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import RefreshLabel from 'src/components/RefreshLabel';
test('renders with default props', async () => {

2
superset-frontend/src/components/Select/AsyncSelect.test.tsx
View File

@ -21,10 +21,10 @@ import {
fireEvent,
render,
screen,
userEvent,
waitFor,
within,
} from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { AsyncSelect } from 'src/components';
const ARIA_LABEL = 'Test';

2
superset-frontend/src/components/Select/Select.test.tsx
View File

@ -21,10 +21,10 @@ import {
fireEvent,
render,
screen,
userEvent,
waitFor,
within,
} from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import Select from 'src/components/Select/Select';
import { SELECT_ALL_VALUE } from './utils';

3
superset-frontend/src/components/Table/cell-renderers/ActionCell/ActionCell.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import ActionCell, { appendDataToMenu } from './index';
import { exampleMenuOptions, exampleRow } from './fixtures';

3
superset-frontend/src/components/Table/cell-renderers/ButtonCell/ButtonCell.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import ButtonCell from './index';
import { exampleRow } from '../fixtures';

15
superset-frontend/src/components/Table/utils/utils.test.ts
View File

@ -16,9 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
import { cleanup } from 'spec/helpers/testing-library';
import { withinRange } from './utils';
test('withinRange supported positive numbers', () => {
// Add cleanup after each test
afterEach(async () => {
cleanup();
// Wait for any pending effects to complete
await new Promise(resolve => setTimeout(resolve, 0));
});
// Make tests async
test('withinRange supported positive numbers', async () => {
// Valid inputs within range
expect(withinRange(50, 60, 16)).toBeTruthy();
@ -26,7 +35,7 @@ test('withinRange supported positive numbers', () => {
expect(withinRange(40, 60, 16)).toBeFalsy();
});
test('withinRange unsupported negative numbers', () => {
test('withinRange unsupported negative numbers', async () => {
// Negative numbers not supported
expect(withinRange(65, 60, -16)).toBeFalsy();
expect(withinRange(-60, -65, 16)).toBeFalsy();
@ -34,7 +43,7 @@ test('withinRange unsupported negative numbers', () => {
expect(withinRange(-60, 65, 16)).toBeFalsy();
});
test('withinRange invalid inputs', () => {
test('withinRange invalid inputs', async () => {
// Invalid inputs should return falsy and not throw an error
// We need ts-ignore here to be able to pass invalid values and pass linting
// @ts-ignore

94
superset-frontend/src/components/TableSelector/TableSelector.test.tsx
View File

@ -17,17 +17,18 @@
* under the License.
*/
import { act } from 'react-dom/test-utils';
import {
act,
cleanup,
render,
screen,
userEvent,
waitFor,
within,
defaultStore as store,
} from 'spec/helpers/testing-library';
import { api } from 'src/hooks/apiResources/queryApi';
import fetchMock from 'fetch-mock';
import userEvent from '@testing-library/user-event';
import TableSelector, { TableSelectorMultiple } from '.';
const createProps = (props = {}) => ({
@ -62,15 +63,23 @@ const getSelectItemContainer = (select: HTMLElement) =>
'ant-select-selection-item',
);
// Add cleanup and increase timeout
beforeAll(() => {
jest.setTimeout(30000);
});
beforeEach(() => {
fetchMock.get(databaseApiRoute, { result: [] });
});
afterEach(() => {
afterEach(async () => {
cleanup();
act(() => {
store.dispatch(api.util.resetApiState());
});
fetchMock.reset();
// Wait for any pending effects to complete
await new Promise(resolve => setTimeout(resolve, 0));
});
test('renders with default props', async () => {
@ -125,35 +134,27 @@ test('renders table options without Select All option', async () => {
const props = createProps();
render(<TableSelector {...props} />, { useRedux: true, store });
const tableSelect = screen.getByRole('combobox', {
name: 'Select table or type to search tables',
});
await act(async () => {
userEvent.click(tableSelect);
});
await waitFor(
() => {
expect(
await screen.findByRole('option', { name: 'table_a' }),
screen.getByRole('option', { name: 'table_a' }),
).toBeInTheDocument();
expect(
await screen.findByRole('option', { name: 'table_b' }),
screen.getByRole('option', { name: 'table_b' }),
).toBeInTheDocument();
});
test('renders disabled without schema', async () => {
fetchMock.get(catalogApiRoute, { result: [] });
fetchMock.get(schemaApiRoute, { result: [] });
fetchMock.get(tablesApiRoute, getTableMockFunction());
const props = createProps();
render(<TableSelector {...props} schema={undefined} />, {
useRedux: true,
store,
});
const tableSelect = screen.getByRole('combobox', {
name: 'Select table or type to search tables',
});
await waitFor(() => {
expect(tableSelect).toBeDisabled();
});
});
},
{ timeout: 10000 },
);
}, 15000);
test('table select retain value if not in SQL Lab mode', async () => {
fetchMock.get(catalogApiRoute, { result: [] });
@ -175,26 +176,59 @@ test('table select retain value if not in SQL Lab mode', async () => {
expect(screen.queryByText('table_a')).not.toBeInTheDocument();
expect(getSelectItemContainer(tableSelect)).toHaveLength(0);
await act(async () => {
userEvent.click(tableSelect);
});
await waitFor(
() => {
expect(
await screen.findByRole('option', { name: 'table_a' }),
screen.getByRole('option', { name: 'table_a' }),
).toBeInTheDocument();
},
{ timeout: 10000 },
);
await waitFor(() => {
await act(async () => {
userEvent.click(screen.getAllByText('table_a')[1]);
});
await waitFor(
() => {
expect(callback).toHaveBeenCalled();
},
{ timeout: 10000 },
);
const selectedValueContainer = getSelectItemContainer(tableSelect);
expect(selectedValueContainer).toHaveLength(1);
await waitFor(
() => {
expect(
await within(selectedValueContainer?.[0] as HTMLElement).findByText(
'table_a',
),
within(selectedValueContainer?.[0] as HTMLElement).getByText('table_a'),
).toBeInTheDocument();
},
{ timeout: 10000 },
);
}, 15000);
test('renders disabled without schema', async () => {
fetchMock.get(catalogApiRoute, { result: [] });
fetchMock.get(schemaApiRoute, { result: [] });
fetchMock.get(tablesApiRoute, getTableMockFunction());
const props = createProps();
render(<TableSelector {...props} schema={undefined} />, {
useRedux: true,
store,
});
const tableSelect = screen.getByRole('combobox', {
name: 'Select table or type to search tables',
});
await waitFor(() => {
expect(tableSelect).toBeDisabled();
});
});
test('table multi select retain all the values selected', async () => {

3
superset-frontend/src/components/TableView/TableView.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import TableView, { TableViewProps } from '.';
const mockedProps: TableViewProps = {

3
superset-frontend/src/components/Tags/Tag.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render } from 'spec/helpers/testing-library';
import { screen } from '@testing-library/react';
import { render, screen } from 'spec/helpers/testing-library';
import TagType from 'src/types/TagType';
import Tag from './Tag';

8
superset-frontend/src/components/TimezoneSelector/TimezoneSelector.DaylightSavingTime.test.tsx
View File

@ -18,8 +18,12 @@
*/
import { FC } from 'react';
import { render, waitFor, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
waitFor,
screen,
userEvent,
} from 'spec/helpers/testing-library';
import type { TimezoneSelectorProps } from './index';
const loadComponent = (mockCurrentTime?: string) => {

8
superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
View File

@ -18,8 +18,12 @@
*/
import { FC } from 'react';
import { extendedDayjs } from 'src/utils/dates';
import userEvent from '@testing-library/user-event';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import type { TimezoneSelectorProps } from './index';
const loadComponent = (mockCurrentTime?: string) => {

3
superset-frontend/src/components/Tooltip/Tooltip.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { supersetTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
import Icons from 'src/components/Icons';

8
superset-frontend/src/components/TooltipParagraph/TooltipParagraph.test.tsx
View File

@ -16,8 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import TooltipParagraph from '.';
test('starts hidden with default props', () => {

2
superset-frontend/src/dashboard/actions/dashboardState.test.js
View File

@ -18,7 +18,7 @@
*/
import sinon from 'sinon';
import { SupersetClient, isFeatureEnabled } from '@superset-ui/core';
import { waitFor } from '@testing-library/react';
import { waitFor } from 'spec/helpers/testing-library';
import {
SAVE_DASHBOARD_STARTED,

9
superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
View File

@ -18,8 +18,13 @@
*/
import { FeatureFlag, VizType } from '@superset-ui/core';
import userEvent from '@testing-library/user-event';
import { act, render, screen, within } from 'spec/helpers/testing-library';
import {
act,
render,
screen,
userEvent,
within,
} from 'spec/helpers/testing-library';
import AddSliceCard from './AddSliceCard';
jest.mock('src/components/DynamicPlugins', () => ({

8
superset-frontend/src/dashboard/components/CssEditor/CssEditor.test.tsx
View File

@ -16,10 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import { CssEditor as AceCssEditor } from 'src/components/AsyncAceEditor';
import { IAceEditorProps } from 'react-ace';
import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock';
import CssEditor from '.';

298
superset-frontend/src/dashboard/components/Dashboard.test.jsx
View File

@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
import { shallow } from 'enzyme';
import sinon from 'sinon';
import { render, screen } from 'spec/helpers/testing-library';
import { PluginContext } from 'src/components/DynamicPlugins';
import Dashboard from 'src/dashboard/components/Dashboard';
import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
@ -27,8 +27,6 @@ import newComponentFactory from 'src/dashboard/util/newComponentFactory';
import chartQueries from 'spec/fixtures/mockChartQueries';
import datasources from 'spec/fixtures/mockDatasource';
import {
extraFormData,
NATIVE_FILTER_ID,
singleNativeFiltersState,
dataMaskWith1Filter,
} from 'spec/fixtures/mockNativeFilters';
@ -42,12 +40,19 @@ import { getRelatedCharts } from 'src/dashboard/util/getRelatedCharts';
jest.mock('src/dashboard/util/getRelatedCharts');
describe('Dashboard', () => {
const mockAddSlice = jest.fn();
const mockRemoveSlice = jest.fn();
const mockTriggerQuery = jest.fn();
const mockLogEvent = jest.fn();
const mockClearDataMask = jest.fn();
const props = {
actions: {
addSliceToDashboard() {},
removeSliceFromDashboard() {},
triggerQuery() {},
logEvent() {},
addSliceToDashboard: mockAddSlice,
removeSliceFromDashboard: mockRemoveSlice,
triggerQuery: mockTriggerQuery,
logEvent: mockLogEvent,
clearDataMaskState: mockClearDataMask,
},
dashboardState,
dashboardInfo,
@ -66,16 +71,15 @@ describe('Dashboard', () => {
const ChildrenComponent = () => <div>Test</div>;
function setup(overrideProps) {
const wrapper = shallow(
const renderDashboard = (overrideProps = {}) =>
render(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} {...overrideProps}>
<ChildrenComponent />
</Dashboard>,
</Dashboard>
</PluginContext.Provider>,
);
return wrapper;
}
// activeFilters map use id_column) as key
const OVERRIDE_FILTERS = {
'1_region': { values: [], scope: [1] },
'2_country_name': { values: ['USA'], scope: [1, 2] },
@ -83,186 +87,244 @@ describe('Dashboard', () => {
'3_country_name': { values: ['USA'], scope: [] },
};
it('should render the children component', () => {
const wrapper = setup();
expect(wrapper.find(ChildrenComponent)).toExist();
beforeEach(() => {
jest.clearAllMocks();
});
describe('UNSAFE_componentWillReceiveProps', () => {
it('should render the children component', () => {
renderDashboard();
expect(screen.getByText('Test')).toBeInTheDocument();
});
describe('layout changes', () => {
const layoutWithExtraChart = {
...props.layout,
1001: newComponentFactory(CHART_TYPE, { chartId: 1001 }),
};
it('should call addSliceToDashboard if a new slice is added to the layout', () => {
const wrapper = setup();
const spy = sinon.spy(props.actions, 'addSliceToDashboard');
wrapper.instance().UNSAFE_componentWillReceiveProps({
...props,
layout: layoutWithExtraChart,
});
spy.restore();
expect(spy.callCount).toBe(1);
const { rerender } = renderDashboard();
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} layout={layoutWithExtraChart}>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockAddSlice).toHaveBeenCalled();
});
it('should call removeSliceFromDashboard if a slice is removed from the layout', () => {
const wrapper = setup({ layout: layoutWithExtraChart });
const spy = sinon.spy(props.actions, 'removeSliceFromDashboard');
const { rerender } = renderDashboard({ layout: layoutWithExtraChart });
const nextLayout = { ...layoutWithExtraChart };
delete nextLayout[1001];
wrapper.instance().UNSAFE_componentWillReceiveProps({
...props,
layout: nextLayout,
});
spy.restore();
expect(spy.callCount).toBe(1);
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} layout={nextLayout}>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockRemoveSlice).toHaveBeenCalled();
});
});
describe('componentDidUpdate', () => {
let wrapper;
let prevProps;
let refreshSpy;
describe('filter updates', () => {
it('should not call refresh when in editMode', () => {
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
beforeEach(() => {
wrapper = setup({ activeFilters: OVERRIDE_FILTERS });
wrapper.instance().appliedFilters = OVERRIDE_FILTERS;
prevProps = wrapper.instance().props;
refreshSpy = sinon.spy(wrapper.instance(), 'refreshCharts');
});
afterEach(() => {
refreshSpy.restore();
jest.clearAllMocks();
});
it('should not call refresh when is editMode', () => {
wrapper.setProps({
dashboardState: {
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard
{...props}
activeFilters={OVERRIDE_FILTERS}
dashboardState={{
...dashboardState,
editMode: true,
},
});
wrapper.instance().componentDidUpdate(prevProps);
expect(refreshSpy.callCount).toBe(0);
}}
>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).not.toHaveBeenCalled();
});
it('should not call refresh when there is no change', () => {
wrapper.setProps({
activeFilters: OVERRIDE_FILTERS,
});
wrapper.instance().componentDidUpdate(prevProps);
expect(refreshSpy.callCount).toBe(0);
expect(wrapper.instance().appliedFilters).toBe(OVERRIDE_FILTERS);
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} activeFilters={OVERRIDE_FILTERS}>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).not.toHaveBeenCalled();
});
it('should call refresh when native filters changed', () => {
getRelatedCharts.mockReturnValue([230]);
wrapper.setProps({
activeFilters: {
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard
{...props}
activeFilters={{
...OVERRIDE_FILTERS,
...getAllActiveFilters({
dataMask: dataMaskWith1Filter,
nativeFilters: singleNativeFiltersState.filters,
allSliceIds: [227, 229, 230],
}),
},
});
wrapper.instance().componentDidUpdate(prevProps);
expect(refreshSpy.callCount).toBe(1);
expect(wrapper.instance().appliedFilters).toEqual({
...OVERRIDE_FILTERS,
[NATIVE_FILTER_ID]: {
scope: [230],
values: extraFormData,
filterType: 'filter_select',
targets: [
{
datasetId: 13,
column: {
name: 'ethnic_minority',
},
},
],
},
});
}}
>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).toHaveBeenCalled();
});
it('should call refresh if a filter is added', () => {
getRelatedCharts.mockReturnValue([1]);
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
const newFilter = {
gender: { values: ['boy', 'girl'], scope: [1] },
};
wrapper.setProps({
activeFilters: newFilter,
});
expect(refreshSpy.callCount).toBe(1);
expect(wrapper.instance().appliedFilters).toEqual(newFilter);
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} activeFilters={newFilter}>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).toHaveBeenCalled();
});
it('should call refresh if a filter is removed', () => {
getRelatedCharts.mockReturnValue([]);
wrapper.setProps({
activeFilters: {},
});
expect(refreshSpy.callCount).toBe(1);
expect(wrapper.instance().appliedFilters).toEqual({});
getRelatedCharts.mockReturnValue([1]); // Ensure we return some charts to refresh
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard
{...props}
activeFilters={{}}
refreshCharts={mockTriggerQuery} // Add refreshCharts prop
>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).toHaveBeenCalledWith(true, 1);
});
it('should call refresh if a filter is changed', () => {
getRelatedCharts.mockReturnValue([1]);
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
const newFilters = {
...OVERRIDE_FILTERS,
'1_region': { values: ['Canada'], scope: [1] },
};
wrapper.setProps({
activeFilters: newFilters,
});
expect(refreshSpy.callCount).toBe(1);
expect(wrapper.instance().appliedFilters).toEqual(newFilters);
expect(refreshSpy.getCall(0).args[0]).toEqual([1]);
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} activeFilters={newFilters}>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).toHaveBeenCalled();
});
it('should call refresh with multiple chart ids', () => {
getRelatedCharts.mockReturnValue([1, 2]);
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
const newFilters = {
...OVERRIDE_FILTERS,
'2_country_name': { values: ['New Country'], scope: [1, 2] },
};
wrapper.setProps({
activeFilters: newFilters,
});
expect(refreshSpy.callCount).toBe(1);
expect(wrapper.instance().appliedFilters).toEqual(newFilters);
expect(refreshSpy.getCall(0).args[0]).toEqual([1, 2]);
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} activeFilters={newFilters}>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).toHaveBeenCalled();
});
it('should call refresh if a filter scope is changed', () => {
getRelatedCharts.mockReturnValue([2]);
const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
const newFilters = {
...OVERRIDE_FILTERS,
'3_country_name': { values: ['USA'], scope: [2] },
};
wrapper.setProps({
activeFilters: newFilters,
});
expect(refreshSpy.callCount).toBe(1);
expect(refreshSpy.getCall(0).args[0]).toEqual([2]);
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard {...props} activeFilters={newFilters}>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
expect(mockTriggerQuery).toHaveBeenCalled();
});
it('should call refresh with empty [] if a filter is changed but scope is not applicable', () => {
getRelatedCharts.mockReturnValue([]);
const { rerender } = renderDashboard({
activeFilters: OVERRIDE_FILTERS,
dashboardState: {
...dashboardState,
editMode: false,
},
});
const newFilters = {
...OVERRIDE_FILTERS,
'3_country_name': { values: ['CHINA'], scope: [] },
};
wrapper.setProps({
activeFilters: newFilters,
});
expect(refreshSpy.callCount).toBe(1);
expect(refreshSpy.getCall(0).args[0]).toEqual([]);
rerender(
<PluginContext.Provider value={{ loading: false }}>
<Dashboard
{...props}
activeFilters={newFilters}
dashboardState={{
...dashboardState,
editMode: false,
}}
>
<ChildrenComponent />
</Dashboard>
</PluginContext.Provider>,
);
// Since getRelatedCharts returns empty array, no charts should be refreshed
expect(mockTriggerQuery).not.toHaveBeenCalled();
});
});
});

6
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import fetchMock from 'fetch-mock';
import { render } from 'spec/helpers/testing-library';
import { fireEvent, within } from '@testing-library/react';
import { fireEvent, render, within } from 'spec/helpers/testing-library';
import DashboardBuilder from 'src/dashboard/components/DashboardBuilder/DashboardBuilder';
import useStoredSidebarWidth from 'src/components/ResizableSidebar/useStoredSidebarWidth';
import {
@ -35,8 +34,9 @@ import mockState from 'spec/fixtures/mockState';
import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
fetchMock.get('glob:*/csstemplateasyncmodelview/api/read', {});
fetchMock.put('glob:*/api/v1/dashboard/*', {});
// Add mock for logging endpoint
fetchMock.post('glob:*/superset/log/?*', {});
jest.mock('src/dashboard/actions/dashboardState', () => ({
...jest.requireActual('src/dashboard/actions/dashboardState'),

1
superset-frontend/src/dashboard/components/EmbeddedModal/EmbeddedModal.test.tsx
View File

@ -23,7 +23,6 @@ import {
fireEvent,
waitFor,
} from 'spec/helpers/testing-library';
import '@testing-library/jest-dom';
import {
SupersetApiError,
getExtensionsRegistry,

8
superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
View File

@ -16,9 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { RefObject } from 'react';
import { render, screen, fireEvent } from 'spec/helpers/testing-library';
import {
fireEvent,
render,
screen,
userEvent,
} from 'spec/helpers/testing-library';
import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
import DetailsPanel from '.';

3
superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
import FilterIndicator from '.';

8
superset-frontend/src/dashboard/components/Header/Header.test.tsx
View File

@ -17,8 +17,12 @@
* under the License.
*/
import * as redux from 'redux';
import { render, screen, fireEvent } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import {
render,
screen,
fireEvent,
userEvent,
} from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
import { getExtensionsRegistry, JsonObject } from '@superset-ui/core';
import setupExtensions from 'src/setup/setupExtensions';

66
superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
View File

@ -16,9 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import {
render,
screen,
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
import userEvent from '@testing-library/user-event';
import * as ColorSchemeControlWrapper from 'src/dashboard/components/ColorSchemeControlWrapper';
import * as SupersetCore from '@superset-ui/core';
import { isFeatureEnabled } from '@superset-ui/core';
@ -161,7 +165,10 @@ afterAll(() => {
fetchMock.restore();
});
test('should render - FeatureFlag disabled', async () => {
describe('PropertiesModal', () => {
jest.setTimeout(15000); // ✅ Applies to all tests in this suite
test('should render - FeatureFlag disabled', async () => {
mockedIsFeatureEnabled.mockReturnValue(false);
const props = createProps();
render(<PropertiesModal {...props} />, {
@ -178,14 +185,18 @@ test('should render - FeatureFlag disabled', async () => {
).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Access' })).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Colors' })).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Advanced' })).toBeInTheDocument();
expect(
screen.getByRole('heading', { name: 'Advanced' }),
).toBeInTheDocument();
expect(
screen.getByRole('heading', { name: 'Certification' }),
).toBeInTheDocument();
expect(screen.getAllByRole('heading')).toHaveLength(5);
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Advanced' })).toBeInTheDocument();
expect(
screen.getByRole('button', { name: 'Advanced' }),
).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
expect(screen.getAllByRole('button')).toHaveLength(4);
@ -197,9 +208,9 @@ test('should render - FeatureFlag disabled', async () => {
expect.objectContaining({ colorScheme: 'supersetColors' }),
{},
);
});
});
test('should render - FeatureFlag enabled', async () => {
test('should render - FeatureFlag enabled', async () => {
mockedIsFeatureEnabled.mockReturnValue(true);
const props = createProps();
render(<PropertiesModal {...props} />, {
@ -217,7 +228,9 @@ test('should render - FeatureFlag enabled', async () => {
screen.getByRole('heading', { name: 'Basic information' }),
).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Access' })).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Advanced' })).toBeInTheDocument();
expect(
screen.getByRole('heading', { name: 'Advanced' }),
).toBeInTheDocument();
expect(
screen.getByRole('heading', { name: 'Certification' }),
).toBeInTheDocument();
@ -226,7 +239,9 @@ test('should render - FeatureFlag enabled', async () => {
expect(screen.getAllByRole('heading')).toHaveLength(5);
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Advanced' })).toBeInTheDocument();
expect(
screen.getByRole('button', { name: 'Advanced' }),
).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
expect(screen.getAllByRole('button')).toHaveLength(4);
@ -238,9 +253,9 @@ test('should render - FeatureFlag enabled', async () => {
expect.objectContaining({ colorScheme: 'supersetColors' }),
{},
);
});
});
test('should open advance', async () => {
test('should open advance', async () => {
mockedIsFeatureEnabled.mockReturnValue(true);
const props = createProps();
render(<PropertiesModal {...props} />, {
@ -255,9 +270,9 @@ test('should open advance', async () => {
userEvent.click(screen.getByRole('button', { name: 'Advanced' }));
expect(screen.getAllByRole('textbox')).toHaveLength(5);
expect(screen.getAllByRole('combobox')).toHaveLength(3);
});
});
test('should close modal', async () => {
test('should close modal', async () => {
mockedIsFeatureEnabled.mockReturnValue(true);
const props = createProps();
render(<PropertiesModal {...props} />, {
@ -272,9 +287,9 @@ test('should close modal', async () => {
expect(props.onHide).toHaveBeenCalledTimes(1);
userEvent.click(screen.getByRole('button', { name: 'Close' }));
expect(props.onHide).toHaveBeenCalledTimes(2);
});
});
test('submitting with onlyApply:false', async () => {
test('submitting with onlyApply:false', async () => {
const put = jest.spyOn(SupersetCore.SupersetClient, 'put');
put.mockResolvedValue({
json: {
@ -315,9 +330,9 @@ test('submitting with onlyApply:false', async () => {
title: 'COVID Vaccine Dashboard',
});
});
});
});
test('submitting with onlyApply:true', async () => {
test('submitting with onlyApply:true', async () => {
mockedIsFeatureEnabled.mockReturnValue(false);
const props = createProps();
props.onlyApply = true;
@ -335,9 +350,9 @@ test('submitting with onlyApply:true', async () => {
await waitFor(() => {
expect(props.onSubmit).toHaveBeenCalledTimes(1);
});
});
});
test('Empty "Certified by" should clear "Certification details"', async () => {
test('Empty "Certified by" should clear "Certification details"', async () => {
const props = createProps();
const noCertifiedByProps = {
...props,
@ -350,9 +365,9 @@ test('Empty "Certified by" should clear "Certification details"', async () => {
expect(
screen.getByRole('textbox', { name: 'Certification details' }),
).toHaveValue('');
});
});
test('should show all roles', async () => {
test('should show all roles', async () => {
mockedIsFeatureEnabled.mockReturnValue(true);
const props = createProps();
@ -383,9 +398,9 @@ test('should show all roles', async () => {
expect(options).toHaveLength(5);
expect(options[0]).toHaveTextContent('Admin');
});
});
test('should show active owners with dashboard rbac', async () => {
test('should show active owners with dashboard rbac', async () => {
mockedIsFeatureEnabled.mockReturnValue(true);
const props = createProps();
@ -416,9 +431,9 @@ test('should show active owners with dashboard rbac', async () => {
expect(options).toHaveLength(1);
expect(options[0]).toHaveTextContent('Superset Admin');
});
});
test('should show active owners without dashboard rbac', async () => {
test('should show active owners without dashboard rbac', async () => {
mockedIsFeatureEnabled.mockReturnValue(false);
const props = createProps();
@ -449,4 +464,5 @@ test('should show active owners without dashboard rbac', async () => {
expect(options).toHaveLength(1);
expect(options[0]).toHaveTextContent('Superset Admin');
});
});

3
superset-frontend/src/dashboard/components/PublishedStatus/PublishedStatus.test.tsx
View File

@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import PublishedStatus from '.';
const defaultProps = {

3
superset-frontend/src/dashboard/components/RefreshIntervalModal.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import { isValidElement } from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';

335
superset-frontend/src/dashboard/components/SliceAdder.test.tsx
View File

@ -16,31 +16,53 @@
* specific language governing permissions and limitations
* under the License.
*/
import { shallow, ShallowWrapper } from 'enzyme';
import sinon from 'sinon';
import SliceAdder, {
ChartList,
DEFAULT_SORT_KEY,
SliceAdderProps,
} from 'src/dashboard/components/SliceAdder';
import {
fireEvent,
render,
screen,
userEvent,
} from 'spec/helpers/testing-library';
import { DatasourceType } from '@superset-ui/core';
import { sliceEntitiesForDashboard as mockSliceEntities } from 'spec/fixtures/mockSliceEntities';
import { styledShallow } from 'spec/helpers/theming';
import { configureStore } from '@reduxjs/toolkit';
import SliceAdder, { SliceAdderProps } from './SliceAdder';
jest.mock(
'lodash/debounce',
() => (fn: { throttle: jest.Mock<any, any, any> }) => {
// eslint-disable-next-line no-param-reassign
fn.throttle = jest.fn();
return fn;
},
);
// Mock the Select component to avoid debounce issues
jest.mock('@superset-ui/core', () => ({
...jest.requireActual('@superset-ui/core'),
Select: ({ value, onChange, options }: any) => (
<select
data-test="select"
value={value}
onChange={e => onChange(e.target.value)}
>
{options?.map((opt: any) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
),
}));
describe('SliceAdder', () => {
const props: SliceAdderProps = {
slices: {
...mockSliceEntities.slices,
},
jest.mock('lodash/debounce', () => {
const debounced = (fn: Function) => {
const debouncedFn = ((...args: any[]) =>
fn(...args)) as unknown as Function & {
cancel: () => void;
};
debouncedFn.cancel = () => {};
return debouncedFn;
};
return debounced;
});
const mockStore = configureStore({
reducer: (state = { common: { locale: 'en' } }) => state,
});
const defaultProps: SliceAdderProps = {
slices: mockSliceEntities.slices,
fetchSlices: jest.fn(),
updateSlices: jest.fn(),
selectedSliceIds: [127, 128],
@ -50,147 +72,166 @@ describe('SliceAdder', () => {
errorMessage: '',
isLoading: false,
lastUpdated: 0,
};
const errorProps = {
...props,
errorMessage: 'this is error',
};
describe('SliceAdder.sortByComparator', () => {
it('should sort by timestamp descending', () => {
const sortedTimestamps = Object.values(props.slices)
.sort(SliceAdder.sortByComparator('changed_on'))
.map(slice => slice.changed_on);
expect(
sortedTimestamps.every((currentTimestamp, index) => {
if (index === 0) {
return true;
}
return currentTimestamp < sortedTimestamps[index - 1];
}),
).toBe(true);
});
};
it('should sort by slice_name', () => {
const sortedNames = Object.values(props.slices)
.sort(SliceAdder.sortByComparator('slice_name'))
.map(slice => slice.slice_name);
const expectedNames = Object.values(props.slices)
.map(slice => slice.slice_name)
.sort();
expect(sortedNames).toEqual(expectedNames);
});
});
it('render chart list', () => {
const wrapper = styledShallow(<SliceAdder {...props} />);
wrapper.setState({ filteredSlices: Object.values(props.slices) });
expect(wrapper.find(ChartList)).toExist();
});
it('render error', () => {
const wrapper = shallow(<SliceAdder {...errorProps} />);
wrapper.setState({ filteredSlices: Object.values(props.slices) });
expect(wrapper.text()).toContain(errorProps.errorMessage);
});
it('componentDidMount', () => {
const componentDidMountSpy = sinon.spy(
SliceAdder.prototype,
'componentDidMount',
);
const fetchSlicesSpy = sinon.spy(props, 'fetchSlices');
shallow(<SliceAdder {...props} />, {
lifecycleExperimental: true,
});
expect(componentDidMountSpy.calledOnce).toBe(true);
expect(fetchSlicesSpy.calledOnce).toBe(true);
componentDidMountSpy.restore();
fetchSlicesSpy.restore();
});
describe('UNSAFE_componentWillReceiveProps', () => {
let wrapper: ShallowWrapper;
let setStateSpy: sinon.SinonSpy;
const renderSliceAdder = (props = defaultProps) =>
render(<SliceAdder {...props} />, { store: mockStore });
describe('SliceAdder', () => {
beforeEach(() => {
wrapper = shallow(<SliceAdder {...props} />);
wrapper.setState({ filteredSlices: Object.values(props.slices) });
setStateSpy = sinon.spy(wrapper.instance() as SliceAdder, 'setState');
});
afterEach(() => {
setStateSpy.restore();
jest.clearAllMocks();
});
it('fetch slices should update state', () => {
const instance = wrapper.instance() as SliceAdder;
instance.UNSAFE_componentWillReceiveProps({
...props,
lastUpdated: new Date().getTime(),
});
expect(setStateSpy.calledOnce).toBe(true);
const stateKeys = Object.keys(setStateSpy.lastCall.args[0]);
expect(stateKeys).toContain('filteredSlices');
it('renders the create new chart button', () => {
renderSliceAdder();
expect(screen.getByText('Create new chart')).toBeInTheDocument();
});
it('select slices should update state', () => {
const instance = wrapper.instance() as SliceAdder;
instance.UNSAFE_componentWillReceiveProps({
...props,
selectedSliceIds: [127],
it('renders loading state', () => {
renderSliceAdder({ ...defaultProps, isLoading: true });
expect(screen.getByRole('status')).toBeInTheDocument();
});
expect(setStateSpy.calledOnce).toBe(true);
const stateKeys = Object.keys(setStateSpy.lastCall.args[0]);
expect(stateKeys).toContain('selectedSliceIdsSet');
});
it('renders error message', () => {
const errorMessage = 'Error loading charts';
renderSliceAdder({ ...defaultProps, errorMessage });
expect(screen.getByText(errorMessage)).toBeInTheDocument();
});
describe('should rerun filter and sort', () => {
let wrapper: ShallowWrapper<SliceAdder>;
let spy: jest.Mock;
beforeEach(() => {
spy = jest.fn();
const fetchSlicesProps: SliceAdderProps = {
...props,
fetchSlices: spy,
};
wrapper = shallow(<SliceAdder {...fetchSlicesProps} />);
wrapper.setState({
filteredSlices: Object.values(fetchSlicesProps.slices),
});
it('fetches slices on mount', () => {
renderSliceAdder();
expect(defaultProps.fetchSlices).toHaveBeenCalledWith(1, '', 'changed_on');
});
afterEach(() => {
spy.mockReset();
});
it('searchUpdated', () => {
const newSearchTerm = 'new search term';
(wrapper.instance() as SliceAdder).handleChange(newSearchTerm);
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(
props.userId,
newSearchTerm,
DEFAULT_SORT_KEY,
it('handles search input changes', async () => {
renderSliceAdder();
const searchInput = screen.getByPlaceholderText('Filter your charts');
await userEvent.type(searchInput, 'test search');
expect(defaultProps.fetchSlices).toHaveBeenCalledWith(
1,
'test search',
'changed_on',
);
});
it('handleSelect', () => {
const newSortBy = 'viz_type';
(wrapper.instance() as SliceAdder).handleSelect(newSortBy);
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(props.userId, '', newSortBy);
it('handles sort selection changes', async () => {
renderSliceAdder();
// Update selector to match the actual rendered element
const sortSelect = screen.getByText('Sort by recent');
await userEvent.click(sortSelect);
const vizTypeOption = screen.getByText('Sort by viz type');
await userEvent.click(vizTypeOption);
expect(defaultProps.fetchSlices).toHaveBeenCalledWith(1, '', 'viz_type');
});
it('handles show only my charts toggle', async () => {
renderSliceAdder();
const checkbox = screen.getByRole('checkbox');
await userEvent.click(checkbox);
expect(defaultProps.fetchSlices).toHaveBeenCalledWith(
undefined,
'',
'changed_on',
);
});
it('opens new chart in new tab when create new chart is clicked', () => {
const windowSpy = jest.spyOn(window, 'open').mockImplementation();
renderSliceAdder();
const createButton = screen.getByText('Create new chart');
fireEvent.click(createButton);
expect(windowSpy).toHaveBeenCalledWith(
'/chart/add?dashboard_id=0',
'_blank',
'noopener noreferrer',
);
windowSpy.mockRestore();
});
describe('sortByComparator', () => {
const baseSlice = {
slice_url: '/superset/explore/',
thumbnail_url: '/thumbnail',
datasource_url: '/superset/datasource/1',
changed_on_humanized: '1 day ago',
datasource_id: 1,
datasource_name: 'test_datasource',
datasource_type: DatasourceType.Table,
form_data: {},
viz_type: 'test_viz',
datasource: '1__table',
description: '',
description_markdown: '',
modified: '2020-01-01',
owners: [],
created_by: { id: 1 }, // Fix: provide required user object instead of null
cache_timeout: null,
uuid: '1234',
query_context: null,
};
it('should sort by changed_on in descending order', () => {
const input = [
{
...baseSlice,
slice_id: 1,
slice_name: 'Test 1',
changed_on: 1577836800000, // 2020-01-01
},
{
...baseSlice,
slice_id: 2,
slice_name: 'Test 2',
changed_on: 1578009600000, // 2020-01-03
uuid: '5678',
},
{
...baseSlice,
slice_id: 3,
slice_name: 'Test 3',
changed_on: 1577923200000, // 2020-01-02
uuid: '9012',
},
];
const sorted = input.sort(SliceAdder.sortByComparator('changed_on'));
expect(sorted[0].changed_on).toBe(1578009600000);
expect(sorted[2].changed_on).toBe(1577836800000);
});
it('should sort by other fields in ascending order', () => {
const input = [
{
...baseSlice,
slice_id: 1,
slice_name: 'c',
changed_on: 1577836800000, // Add changed_on field
uuid: '1234',
},
{
...baseSlice,
slice_id: 2,
slice_name: 'a',
changed_on: 1577836800000, // Add changed_on field
uuid: '5678',
},
{
...baseSlice,
slice_id: 3,
slice_name: 'b',
changed_on: 1577836800000, // Add changed_on field
uuid: '9012',
},
];
const sorted = input.sort(SliceAdder.sortByComparator('slice_name'));
expect(sorted[0].slice_name).toBe('a');
expect(sorted[2].slice_name).toBe('c');
});
});
it('should update selectedSliceIdsSet when props change', () => {
const { rerender } = renderSliceAdder();
rerender(<SliceAdder {...defaultProps} selectedSliceIds={[129]} />);
// Verify the internal state was updated by checking if new charts are available
expect(screen.getByRole('checkbox')).toBeInTheDocument();
});
});

3
superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx
View File

@ -19,8 +19,7 @@
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { getExtensionsRegistry, VizType } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import SliceHeader from '.';
jest.mock('src/dashboard/components/SliceHeaderControls', () => ({

5
superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
View File

@ -17,8 +17,7 @@
* under the License.
*/
import userEvent from '@testing-library/user-event';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
import { FeatureFlag, VizType } from '@superset-ui/core';
import mockState from 'spec/fixtures/mockState';
import SliceHeaderControls, { SliceHeaderControlsProps } from '.';
@ -228,7 +227,7 @@ test('Export full Excel is under featureflag', async () => {
userEvent.hover(screen.getByText('Download'));
expect(await screen.findByText('Export to Excel')).toBeInTheDocument();
expect(screen.queryByText('Export to full Excel')).not.toBeInTheDocument();
});
}, 10000);
test('Should "export full Excel"', async () => {
(global as any).featureFlags = {

Some files were not shown because too many files have changed in this diff Show More