refactor: convert controlUtils to TypeScript (2 of 2) (#13520)

superset-frontend/spec/javascripts/explore/controlUtils_spec.tsx

@@ -16,8 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import { getChartControlPanelRegistry, t } from '@superset-ui/core';
+import {
+  ControlConfig,
+  ControlPanelState,
+  CustomControlItem,
+  DatasourceMeta,
+} from '@superset-ui/chart-controls';
 import {
   getControlConfig,
   getControlState,
@@ -30,13 +35,20 @@ import {
   controlPanelSectionsChartOptionsTable,
 } from 'spec/javascripts/explore/fixtures';
 
+const getKnownControlConfig = (controlKey: string, vizType: string) =>
+  getControlConfig(controlKey, vizType) as ControlConfig;
+
+const getKnownControlState = (...args: Parameters<typeof getControlState>) =>
+  getControlState(...args) as Exclude<ReturnType<typeof getControlState>, null>;
+
 describe('controlUtils', () => {
-  const state = {
-    datasource: {
-      columns: ['a', 'b', 'c'],
+  const state: ControlPanelState = {
+    datasource: ({
+      columns: [{ column_name: 'a' }],
       metrics: [{ metric_name: 'first' }, { metric_name: 'second' }],
-    },
+    } as unknown) as DatasourceMeta,
     controls: {},
+    form_data: { datasource: '1__table', viz_type: 'table' },
   };
 
   beforeAll(() => {
@@ -66,15 +78,14 @@ describe('controlUtils', () => {
   describe('getControlConfig', () => {
     it('returns a valid spatial controlConfig', () => {
       const spatialControl = getControlConfig('color_scheme', 'test-chart');
-      expect(spatialControl.type).toEqual('ColorSchemeControl');
+      expect(spatialControl?.type).toEqual('ColorSchemeControl');
     });
 
     it('overrides according to vizType', () => {
-      let control = getControlConfig('color_scheme', 'test-chart');
+      let control = getKnownControlConfig('color_scheme', 'test-chart');
       expect(control.label).toEqual('Color Scheme');
 
-      // deck_polygon overrides and removes validators
-      control = getControlConfig('color_scheme', 'test-chart-override');
+      control = getKnownControlConfig('color_scheme', 'test-chart-override');
       expect(control.label).toEqual('My beautiful colors');
     });
 
@@ -102,27 +113,21 @@ describe('controlUtils', () => {
 
   describe('applyMapStateToPropsToControl,', () => {
     it('applies state to props as expected', () => {
-      let control = getControlConfig('all_columns', 'table');
+      let control = getKnownControlConfig('all_columns', 'table');
       control = applyMapStateToPropsToControl(control, state);
-      expect(control.options).toEqual(['a', 'b', 'c']);
-    });
-
-    it('removes the mapStateToProps key from the object', () => {
-      let control = getControlConfig('all_columns', 'table');
-      control = applyMapStateToPropsToControl(control, state);
-      expect(control.mapStateToProps[0]).toBe(undefined);
+      expect(control.options).toEqual([{ column_name: 'a' }]);
     });
   });
 
   describe('getControlState', () => {
     it('to still have the functions', () => {
-      const control = getControlState('metrics', 'table', state, ['a']);
+      const control = getKnownControlState('metrics', 'table', state, 'a');
       expect(typeof control.mapStateToProps).toBe('function');
-      expect(typeof control.validators[0]).toBe('function');
+      expect(typeof control.validators?.[0]).toBe('function');
     });
 
-    it('to fix multi with non-array values', () => {
-      const control = getControlState('all_columns', 'table', state, 'a');
+    it('to make sure value is array', () => {
+      const control = getKnownControlState('all_columns', 'table', state, 'a');
       expect(control.value).toEqual(['a']);
     });
 
@@ -133,10 +138,10 @@ describe('controlUtils', () => {
         state,
         'stack',
       );
-      expect(control.value).toBe('stack');
+      expect(control?.value).toBe('stack');
 
       control = getControlState('stacked_style', 'test-chart', state, 'FOO');
-      expect(control.value).toBeNull();
+      expect(control?.value).toBeNull();
     });
 
     it('returns null for non-existent field', () => {
@@ -146,19 +151,19 @@ describe('controlUtils', () => {
 
     it('applies the default function for metrics', () => {
       const control = getControlState('metrics', 'table', state);
-      expect(control.default).toEqual(['first']);
+      expect(control?.default).toEqual(['first']);
     });
 
     it('applies the default function for metric', () => {
       const control = getControlState('metric', 'table', state);
-      expect(control.default).toEqual('first');
+      expect(control?.default).toEqual('first');
     });
 
     it('applies the default function, prefers count if it exists', () => {
       const stateWithCount = {
         ...state,
         datasource: {
-          ...state.datasource,
+          ...(state.datasource as DatasourceMeta),
           metrics: [
             { metric_name: 'first' },
             { metric_name: 'second' },
@@ -167,7 +172,7 @@ describe('controlUtils', () => {
         },
       };
       const control = getControlState('metrics', 'table', stateWithCount);
-      expect(control.default).toEqual(['count']);
+      expect(control?.default).toEqual(['count']);
     });
 
     it('should not apply mapStateToProps when initializing', () => {
@@ -175,15 +180,15 @@ describe('controlUtils', () => {
         ...state,
         controls: undefined,
       });
-      expect(typeof control.default).toBe('function');
-      expect(control.value).toBe(undefined);
+      expect(typeof control?.default).toBe('function');
+      expect(control?.value).toBe(undefined);
     });
   });
 
   describe('validateControl', () => {
     it('validates the control, returns an error if empty', () => {
       const control = getControlState('metric', 'table', state, null);
-      expect(control.validationErrors).toEqual(['cannot be empty']);
+      expect(control?.validationErrors).toEqual(['cannot be empty']);
     });
     it('should not validate if control panel is initializing', () => {
       const control = getControlState(
@@ -192,7 +197,7 @@ describe('controlUtils', () => {
         { ...state, controls: undefined },
         undefined,
       );
-      expect(control.validationErrors).toBeUndefined();
+      expect(control?.validationErrors).toBeUndefined();
     });
   });
 
@@ -209,14 +214,14 @@ describe('controlUtils', () => {
       let controlItem = findControlItem(
         controlPanelSectionsChartOptions,
         'rose_area_proportion',
-      );
+      ) as CustomControlItem;
       expect(controlItem.name).toEqual('rose_area_proportion');
       expect(controlItem).toHaveProperty('config');
 
       controlItem = findControlItem(
         controlPanelSectionsChartOptions,
         'stacked_style',
-      );
+      ) as CustomControlItem;
       expect(controlItem.name).toEqual('stacked_style');
       expect(controlItem).toHaveProperty('config');
     });

superset-frontend/spec/javascripts/explore/fixtures.tsx

@@ -19,9 +19,14 @@
 
 import React from 'react';
 import { t } from '@superset-ui/core';
-import { ColumnOption } from '@superset-ui/chart-controls';
+import {
+  ColumnMeta,
+  ColumnOption,
+  ControlConfig,
+  ControlPanelSectionConfig,
+} from '@superset-ui/chart-controls';
 
-export const controlPanelSectionsChartOptions = [
+export const controlPanelSectionsChartOptions: ControlPanelSectionConfig[] = [
   {
     label: t('Chart Options'),
     expanded: true,
@@ -63,7 +68,7 @@ export const controlPanelSectionsChartOptions = [
   },
 ];
 
-export const controlPanelSectionsChartOptionsOnlyColorScheme = [
+export const controlPanelSectionsChartOptionsOnlyColorScheme: ControlPanelSectionConfig[] = [
   {
     label: t('Chart Options'),
     expanded: true,
@@ -71,7 +76,7 @@ export const controlPanelSectionsChartOptionsOnlyColorScheme = [
   },
 ];
 
-export const controlPanelSectionsChartOptionsTable = [
+export const controlPanelSectionsChartOptionsTable: ControlPanelSectionConfig[] = [
   {
     label: t('Chart Options'),
     expanded: true,
@@ -96,7 +101,7 @@ export const controlPanelSectionsChartOptionsTable = [
             }),
             commaChoosesOption: false,
             freeForm: true,
-          },
+          } as ControlConfig<'SelectControl', ColumnMeta>,
         },
       ],
     ],