refactor(src/explore/comp/controls/metricControl): migrate Enzyme test to RTL syntax (#29380)

Signed-off-by: hainenber <dotronghai96@gmail.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
Đỗ Trọng Hải 2024-06-28 23:22:19 +07:00 committed by GitHub
parent f128718d34
commit a3f0d00714
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 53 deletions

View File

@ -1,53 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import configureStore from 'redux-mock-store';
import { shallow } from 'enzyme';
import MetricDefinitionOption from 'src/explore/components/controls/MetricControl/MetricDefinitionOption';
import AggregateOption from 'src/explore/components/controls/MetricControl/AggregateOption';
import {
StyledMetricOption,
StyledColumnOption,
} from 'src/explore/components/optionRenderers';
describe('MetricDefinitionOption', () => {
const mockStore = configureStore([]);
const store = mockStore({});
function setup(props) {
return shallow(<MetricDefinitionOption store={store} {...props} />).dive();
}
it('renders a StyledMetricOption given a saved metric', () => {
const wrapper = setup({
option: { metric_name: 'a_saved_metric', expression: 'COUNT(*)' },
});
expect(wrapper.find(StyledMetricOption)).toExist();
});
it('renders a StyledColumnOption given a column', () => {
const wrapper = setup({ option: { column_name: 'a_column' } });
expect(wrapper.find(StyledColumnOption)).toExist();
});
it('renders an AggregateOption given an aggregate metric', () => {
const wrapper = setup({ option: { aggregate_name: 'an_aggregate' } });
expect(wrapper.find(AggregateOption)).toExist();
});
});

View File

@ -0,0 +1,60 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { render, screen } from 'spec/helpers/testing-library';
import MetricDefinitionOption from 'src/explore/components/controls/MetricControl/MetricDefinitionOption';
import userEvent from '@testing-library/user-event';
type MetricDefinitionOptionProps = {
option: {
metric_name?: string;
expression?: string;
column_name?: string;
aggregate_name?: string;
};
};
const renderMetricDefinitionOption = (props: MetricDefinitionOptionProps) => {
render(<MetricDefinitionOption {...props} />, {
useRedux: true,
useRouter: true,
});
};
test('renders a given saved metric and display SQL expression popover when hovered', async () => {
renderMetricDefinitionOption({
option: { metric_name: 'a_saved_metric', expression: 'COUNT(*)' },
});
expect(await screen.findByText('a_saved_metric')).toBeInTheDocument();
// Grab calculator icon and mock mouse hovering over it
const calculatorIcon = await screen.findByLabelText('calculator');
userEvent.hover(calculatorIcon);
expect(await screen.findByText('SQL expression')).toBeInTheDocument();
});
test('renders when given a column', async () => {
renderMetricDefinitionOption({ option: { column_name: 'a_column' } });
expect(await screen.findByText('a_column')).toBeInTheDocument();
});
test('renders when given an aggregate metric', async () => {
renderMetricDefinitionOption({ option: { aggregate_name: 'an_aggregate' } });
expect(await screen.findByText('an_aggregate')).toBeInTheDocument();
});