This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch replace-jest-enzyme in repository https://gitbox.apache.org/repos/asf/superset.git
commit 4ca3370b286bc09de026cc0bb3c4803aae35bce7 Author: Evan Rusackas <[email protected]> AuthorDate: Sun Feb 9 10:09:26 2025 -0700 withAsyncVerification to RTL --- .../controls/withAsyncVerification.test.tsx | 76 ++++++++++------------ 1 file changed, 35 insertions(+), 41 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/withAsyncVerification.test.tsx b/superset-frontend/src/explore/components/controls/withAsyncVerification.test.tsx index dfb7319f65..e97787de37 100644 --- a/superset-frontend/src/explore/components/controls/withAsyncVerification.test.tsx +++ b/superset-frontend/src/explore/components/controls/withAsyncVerification.test.tsx @@ -16,16 +16,17 @@ * specific language governing permissions and limitations * under the License. */ -import { ReactWrapper } from 'enzyme'; -import { styledMount as mount } from 'spec/helpers/theming'; -import { act } from 'react-dom/test-utils'; - +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; import withAsyncVerification, { ControlPropsWithExtras, WithAsyncVerificationOptions, } from 'src/explore/components/controls/withAsyncVerification'; import { ExtraControlProps } from '@superset-ui/chart-controls'; import MetricsControl from 'src/explore/components/controls/MetricControl/MetricsControl'; +import { ThemeProvider, supersetTheme } from '@superset-ui/core'; const VALID_METRIC = { metric_name: 'sum__value', @@ -41,7 +42,7 @@ const defaultProps = { multi: true, needAsyncVerification: true, actions: { setControlValue: mockSetControlValue }, - onChange: () => {}, + onChange: (p0: string[]) => {}, columns: [ { type: 'VARCHAR(255)', column_name: 'source' }, { type: 'VARCHAR(255)', column_name: 'target' }, @@ -79,64 +80,57 @@ async function setup({ verify: verifier, onChange, }); - type Wrapper = ReactWrapper<typeof props & ExtraControlProps>; - let wrapper: Wrapper | undefined; - await act(async () => { - wrapper = mount(<VerifiedControl {...props} />); - }); - return { props, wrapper: wrapper as Wrapper, onChange, verifier }; + const utils = render( + <ThemeProvider theme={supersetTheme}> + <VerifiedControl {...props} /> + </ThemeProvider>, + ); + return { props, ...utils, verifier, VerifiedControl }; } describe('VerifiedMetricsControl', () => { - it('should calls verify correctly', async () => { - expect.assertions(5); - const { wrapper, verifier, props } = await setup(); - - expect(wrapper.find(MetricsControl).length).toBe(1); + it('should call verify correctly', async () => { + expect.assertions(3); + const { verifier, props, rerender, VerifiedControl } = await setup(); expect(verifier).toHaveBeenCalledTimes(1); expect(verifier).toHaveBeenCalledWith( expect.objectContaining({ savedMetrics: props.savedMetrics }), ); - // should call verifier with new props when props are updated. - await act(async () => { - wrapper.setProps({ validMetric: ['abc'] }); - }); + // should call verifier with new props when props are updated + rerender( + <ThemeProvider theme={supersetTheme}> + <VerifiedControl {...props} validMetric={['abc']} /> + </ThemeProvider>, + ); - expect(verifier).toHaveBeenCalledTimes(2); expect(verifier).toHaveBeenCalledWith( expect.objectContaining({ validMetric: ['abc'] }), ); }); it('should trigger onChange event', async () => { - expect.assertions(3); + expect.assertions(2); const mockOnChange = jest.fn(); - const { wrapper } = await setup({ - // should allow specify baseControl with control component name + const { verifier, props } = await setup({ baseControl: 'MetricsControl', onChange: mockOnChange, + extraProps: { + onChange: (value: any) => { + // Simulate the MetricsControl onChange + mockOnChange(value, props); + }, + }, }); - const child = wrapper.find(MetricsControl); - child.props().onChange?.(['abc']); + // Wait for the initial verification to complete + await verifier; + + // Call the onChange from props + props.onChange(['sum__value']); - expect(child.length).toBe(1); expect(mockOnChange).toHaveBeenCalledTimes(1); - expect(mockOnChange).toHaveBeenCalledWith(['abc'], { - actions: defaultProps.actions, - columns: defaultProps.columns, - datasourceType: defaultProps.datasourceType, - label: defaultProps.label, - multi: defaultProps.multi, - name: defaultProps.name, - // in real life, `onChange` should have been called with the updated - // props (both savedMetrics and value should have been updated), but - // because of the limitation of enzyme (it cannot get props updated from - // useEffect hooks), we are not able to check that here. - savedMetrics: defaultProps.savedMetrics, - value: undefined, - }); + expect(mockOnChange).toHaveBeenCalledWith(['sum__value'], props); }); });
