From e8c2910f7f7abbce1f65124c508bb603a73728a0 Mon Sep 17 00:00:00 2001 From: Bruno Motta Date: Tue, 16 Mar 2021 17:18:36 -0300 Subject: [PATCH 1/3] Tests for CollectionControl --- .../CollectionControl.less | 0 .../CollectionControl.test.tsx | 171 ++++++++++++++++++ .../index.jsx} | 12 +- 3 files changed, 179 insertions(+), 4 deletions(-) rename superset-frontend/src/explore/components/controls/{ => CollectionControl}/CollectionControl.less (100%) create mode 100644 superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx rename superset-frontend/src/explore/components/controls/{CollectionControl.jsx => CollectionControl/index.jsx} (93%) diff --git a/superset-frontend/src/explore/components/controls/CollectionControl.less b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.less similarity index 100% rename from superset-frontend/src/explore/components/controls/CollectionControl.less rename to superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.less diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx new file mode 100644 index 0000000000000..82d9adfc1a3ae --- /dev/null +++ b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx @@ -0,0 +1,171 @@ +/** + * 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 userEvent from '@testing-library/user-event'; +import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import CollectionControl from '.'; + +jest.mock('@superset-ui/chart-controls', () => ({ + InfoTooltipWithTrigger: (props: any) => ( + + ), +})); + +jest.mock('..', () => ({ + __esModule: true, + default: { + TestControl: (props: any) => ( + + ), + }, +})); + +let defaultProps = { + actions: { + addDangerToast: jest.fn(), + addInfoToast: jest.fn(), + addSuccessToast: jest.fn(), + addWarningToast: jest.fn(), + createNewSlice: jest.fn(), + fetchDatasourcesStarted: jest.fn(), + fetchDatasourcesSucceeded: jest.fn(), + fetchFaveStar: jest.fn(), + saveFaveStar: jest.fn(), + setControlValue: jest.fn(), + setDatasource: jest.fn(), + setDatasourceType: jest.fn(), + setDatasources: jest.fn(), + setExploreControls: jest.fn(), + sliceUpdated: jest.fn(), + toggleFaveStar: jest.fn(), + updateChartTitle: jest.fn(), + }, + addTooltip: 'Add an item', + controlName: 'TestControl', + description: null, + hovered: false, + itemGenerator: jest.fn(), + keyAccessor: jest.fn(), + label: 'Time series columns', + name: 'column_collection', + onChange: jest.fn(), + placeholder: 'Empty collection', + type: 'CollectionControl', + validationErrors: [], + validators: [jest.fn()], + value: [{ key: 'hrYAZ5iBH' }], +}; + +beforeEach(() => { + defaultProps = { + actions: { + addDangerToast: jest.fn(), + addInfoToast: jest.fn(), + addSuccessToast: jest.fn(), + addWarningToast: jest.fn(), + createNewSlice: jest.fn(), + fetchDatasourcesStarted: jest.fn(), + fetchDatasourcesSucceeded: jest.fn(), + fetchFaveStar: jest.fn(), + saveFaveStar: jest.fn(), + setControlValue: jest.fn(), + setDatasource: jest.fn(), + setDatasourceType: jest.fn(), + setDatasources: jest.fn(), + setExploreControls: jest.fn(), + sliceUpdated: jest.fn(), + toggleFaveStar: jest.fn(), + updateChartTitle: jest.fn(), + }, + addTooltip: 'Add an item', + controlName: 'TestControl', + description: null, + hovered: false, + itemGenerator: jest.fn(), + keyAccessor: jest.fn(), + label: 'Time series columns', + name: 'column_collection', + onChange: jest.fn(), + placeholder: 'Empty collection', + type: 'CollectionControl', + validationErrors: [], + validators: [jest.fn()], + value: [{ key: 'hrYAZ5iBH' }], + }; +}); + +test('Should render', () => { + render(); + expect(screen.getByTestId('CollectionControl')).toBeInTheDocument(); +}); + +test('Should show the button with the label', () => { + render(); + expect( + screen.getByRole('button', { name: defaultProps.label }), + ).toBeInTheDocument(); + expect( + screen.getByRole('button', { name: defaultProps.label }), + ).toHaveTextContent(defaultProps.label); +}); + +test('Should have add button', () => { + render(); + + expect(defaultProps.onChange).toBeCalledTimes(0); + userEvent.click(screen.getByRole('button', { name: 'add-item' })); + expect(defaultProps.onChange).toBeCalledWith([ + { key: 'hrYAZ5iBH' }, + undefined, + ]); +}); + +test('Should have remove button', () => { + render(); + + expect(defaultProps.onChange).toBeCalledTimes(0); + userEvent.click(screen.getByRole('button', { name: 'remove-item' })); + expect(defaultProps.onChange).toBeCalledWith([]); +}); + +test('Should have SortableDragger icon', () => { + render(); + expect(screen.getByTestId('SortableDragger')).toBeVisible(); +}); + +test('Should call Control component', () => { + render(); + + expect(defaultProps.onChange).toBeCalledTimes(0); + userEvent.click(screen.getByTestId('TestControl')); + expect(defaultProps.onChange).toBeCalledWith([{ key: 'hrYAZ5iBH' }]); +}); diff --git a/superset-frontend/src/explore/components/controls/CollectionControl.jsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx similarity index 93% rename from superset-frontend/src/explore/components/controls/CollectionControl.jsx rename to superset-frontend/src/explore/components/controls/CollectionControl/index.jsx index 198df6d5cc515..a5e8c2715bedd 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl.jsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx @@ -28,8 +28,8 @@ import { } from 'react-sortable-hoc'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; -import ControlHeader from '../ControlHeader'; -import controlMap from '.'; +import ControlHeader from 'src/explore/components/ControlHeader'; +import controlMap from '..'; import './CollectionControl.less'; const propTypes = { @@ -60,7 +60,11 @@ const defaultProps = { const SortableListGroupItem = SortableElement(ListGroupItem); const SortableListGroup = SortableContainer(ListGroup); const SortableDragger = SortableHandle(() => ( - + )); export default class CollectionControl extends React.Component { @@ -134,7 +138,7 @@ export default class CollectionControl extends React.Component { render() { return ( -
+
{this.renderList()} Date: Mon, 22 Mar 2021 14:20:14 -0300 Subject: [PATCH 2/3] add role to icon --- .../controls/CollectionControl/CollectionControl.test.tsx | 2 +- .../src/explore/components/controls/CollectionControl/index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx index 82d9adfc1a3ae..72d88825d68be 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx @@ -159,7 +159,7 @@ test('Should have remove button', () => { test('Should have SortableDragger icon', () => { render(); - expect(screen.getByTestId('SortableDragger')).toBeVisible(); + expect(screen.getByRole('img')).toBeVisible(); }); test('Should call Control component', () => { diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx index a5e8c2715bedd..7f49d71b1ab2b 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx @@ -61,7 +61,7 @@ const SortableListGroupItem = SortableElement(ListGroupItem); const SortableListGroup = SortableContainer(ListGroup); const SortableDragger = SortableHandle(() => ( From 134e2987e1ad296b4e0a99f9b2308ad640be3a2a Mon Sep 17 00:00:00 2001 From: Bruno Motta Date: Thu, 25 Mar 2021 13:47:03 -0300 Subject: [PATCH 3/3] applying factory to props --- .../CollectionControl.test.tsx | 83 +++++-------------- 1 file changed, 23 insertions(+), 60 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx index 72d88825d68be..f2c0490305995 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx @@ -49,7 +49,7 @@ jest.mock('..', () => ({ }, })); -let defaultProps = { +const createProps = () => ({ actions: { addDangerToast: jest.fn(), addInfoToast: jest.fn(), @@ -83,89 +83,52 @@ let defaultProps = { validationErrors: [], validators: [jest.fn()], value: [{ key: 'hrYAZ5iBH' }], -}; - -beforeEach(() => { - defaultProps = { - actions: { - addDangerToast: jest.fn(), - addInfoToast: jest.fn(), - addSuccessToast: jest.fn(), - addWarningToast: jest.fn(), - createNewSlice: jest.fn(), - fetchDatasourcesStarted: jest.fn(), - fetchDatasourcesSucceeded: jest.fn(), - fetchFaveStar: jest.fn(), - saveFaveStar: jest.fn(), - setControlValue: jest.fn(), - setDatasource: jest.fn(), - setDatasourceType: jest.fn(), - setDatasources: jest.fn(), - setExploreControls: jest.fn(), - sliceUpdated: jest.fn(), - toggleFaveStar: jest.fn(), - updateChartTitle: jest.fn(), - }, - addTooltip: 'Add an item', - controlName: 'TestControl', - description: null, - hovered: false, - itemGenerator: jest.fn(), - keyAccessor: jest.fn(), - label: 'Time series columns', - name: 'column_collection', - onChange: jest.fn(), - placeholder: 'Empty collection', - type: 'CollectionControl', - validationErrors: [], - validators: [jest.fn()], - value: [{ key: 'hrYAZ5iBH' }], - }; }); test('Should render', () => { - render(); + const props = createProps(); + render(); expect(screen.getByTestId('CollectionControl')).toBeInTheDocument(); }); test('Should show the button with the label', () => { - render(); - expect( - screen.getByRole('button', { name: defaultProps.label }), - ).toBeInTheDocument(); - expect( - screen.getByRole('button', { name: defaultProps.label }), - ).toHaveTextContent(defaultProps.label); + const props = createProps(); + render(); + expect(screen.getByRole('button', { name: props.label })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: props.label })).toHaveTextContent( + props.label, + ); }); test('Should have add button', () => { - render(); + const props = createProps(); + render(); - expect(defaultProps.onChange).toBeCalledTimes(0); + expect(props.onChange).toBeCalledTimes(0); userEvent.click(screen.getByRole('button', { name: 'add-item' })); - expect(defaultProps.onChange).toBeCalledWith([ - { key: 'hrYAZ5iBH' }, - undefined, - ]); + expect(props.onChange).toBeCalledWith([{ key: 'hrYAZ5iBH' }, undefined]); }); test('Should have remove button', () => { - render(); + const props = createProps(); + render(); - expect(defaultProps.onChange).toBeCalledTimes(0); + expect(props.onChange).toBeCalledTimes(0); userEvent.click(screen.getByRole('button', { name: 'remove-item' })); - expect(defaultProps.onChange).toBeCalledWith([]); + expect(props.onChange).toBeCalledWith([]); }); test('Should have SortableDragger icon', () => { - render(); + const props = createProps(); + render(); expect(screen.getByRole('img')).toBeVisible(); }); test('Should call Control component', () => { - render(); + const props = createProps(); + render(); - expect(defaultProps.onChange).toBeCalledTimes(0); + expect(props.onChange).toBeCalledTimes(0); userEvent.click(screen.getByTestId('TestControl')); - expect(defaultProps.onChange).toBeCalledWith([{ key: 'hrYAZ5iBH' }]); + expect(props.onChange).toBeCalledWith([{ key: 'hrYAZ5iBH' }]); });