test: extract mock plugins into separate file (apache-superset#172)

* test: extract mock plugins into separate file

* fix: use constants

* fix: test coverage

Author: kristw

packages/superset-ui-chart/test/components/MockChartPlugins.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ChartMetadata, ChartPlugin, ChartFormData } from '../../src';
+
+export const TestComponent = ({
+  message,
+  width,
+  height,
+}: {
+  message: string;
+  width: number;
+  height: number;
+}) => (
+  <div className="test-component">
+    <span className="message">{message || 'test-message'}</span>
+    <span className="dimension">{[width, height].join('x')}</span>
+  </div>
+);
+
+export const ChartKeys = {
+  DILIGENT: 'diligent-chart',
+  LAZY: 'lazy-chart',
+  SLOW: 'slow-chart',
+};
+
+export class DiligentChartPlugin extends ChartPlugin<ChartFormData> {
+  constructor() {
+    super({
+      metadata: new ChartMetadata({
+        name: ChartKeys.DILIGENT,
+        thumbnail: '',
+      }),
+      Chart: TestComponent,
+      transformProps: x => x,
+    });
+  }
+}
+
+export class LazyChartPlugin extends ChartPlugin<ChartFormData> {
+  constructor() {
+    super({
+      metadata: new ChartMetadata({
+        name: ChartKeys.LAZY,
+        thumbnail: '',
+      }),
+      // this mirrors `() => import(module)` syntax
+      loadChart: () => Promise.resolve({ default: TestComponent }),
+      // promise without .default
+      loadTransformProps: () => Promise.resolve((x: any) => x),
+    });
+  }
+}
+
+export class SlowChartPlugin extends ChartPlugin<ChartFormData> {
+  constructor() {
+    super({
+      metadata: new ChartMetadata({
+        name: ChartKeys.SLOW,
+        thumbnail: '',
+      }),
+      loadChart: () =>
+        new Promise(resolve => {
+          setTimeout(() => {
+            resolve(TestComponent);
+          }, 1000);
+        }),
+      transformProps: x => x,
+    });
+  }
+}

packages/superset-ui-chart/test/components/SuperChart.test.tsx

@@ -1,73 +1,33 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import { ChartProps, ChartMetadata, ChartPlugin, ChartFormData, SuperChart } from '../../src';
+import { ChartProps } from '../../src';
+import {
+  ChartKeys,
+  DiligentChartPlugin,
+  LazyChartPlugin,
+  SlowChartPlugin,
+} from './MockChartPlugins';
+import SuperChart from '../../src/components/SuperChart';
 
 describe('SuperChart', () => {
-  const TestComponent = (props: any) => (
-    <div className="test-component">{props.character || 'test-component'}</div>
-  );
   const chartProps = new ChartProps();
 
-  class MyChartPlugin extends ChartPlugin<ChartFormData> {
-    constructor() {
-      super({
-        metadata: new ChartMetadata({
-          name: 'my-chart',
-          thumbnail: '',
-        }),
-        Chart: TestComponent,
-        transformProps: x => x,
-      });
-    }
-  }
-
-  class SecondChartPlugin extends ChartPlugin<ChartFormData> {
-    constructor() {
-      super({
-        metadata: new ChartMetadata({
-          name: 'second-chart',
-          thumbnail: '',
-        }),
-        // this mirrors `() => import(module)` syntax
-        loadChart: () => Promise.resolve({ default: TestComponent }),
-        // promise without .default
-        loadTransformProps: () => Promise.resolve((x: any) => x),
-      });
-    }
-  }
-
-  class SlowChartPlugin extends ChartPlugin<ChartFormData> {
-    constructor() {
-      super({
-        metadata: new ChartMetadata({
-          name: 'slow-chart',
-          thumbnail: '',
-        }),
-        loadChart: () =>
-          new Promise(resolve => {
-            setTimeout(() => {
-              resolve(TestComponent);
-            }, 1000);
-          }),
-        transformProps: x => x,
-      });
-    }
-  }
-
-  new MyChartPlugin().configure({ key: 'my-chart' }).register();
-  new SecondChartPlugin().configure({ key: 'second-chart' }).register();
-  new SlowChartPlugin().configure({ key: 'slow-chart' }).register();
+  new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }).register();
+  new LazyChartPlugin().configure({ key: ChartKeys.LAZY }).register();
+  new SlowChartPlugin().configure({ key: ChartKeys.SLOW }).register();
 
   describe('registered charts', () => {
     it('renders registered chart', done => {
-      const wrapper = shallow(<SuperChart chartType="my-chart" chartProps={chartProps} />);
+      const wrapper = shallow(
+        <SuperChart chartType={ChartKeys.DILIGENT} chartProps={chartProps} />,
+      );
       setTimeout(() => {
         expect(wrapper.render().find('div.test-component')).toHaveLength(1);
         done();
       }, 0);
     });
     it('renders registered chart with default export', done => {
-      const wrapper = shallow(<SuperChart chartType="second-chart" />);
+      const wrapper = shallow(<SuperChart chartType={ChartKeys.LAZY} />);
       setTimeout(() => {
         expect(wrapper.render().find('div.test-component')).toHaveLength(1);
         done();
@@ -82,40 +42,43 @@ describe('SuperChart', () => {
       }, 5);
     });
     it('adds id to container if specified', done => {
-      const wrapper = shallow(<SuperChart chartType="my-chart" id="the-chart" />);
+      const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} id="the-chart" />);
       setTimeout(() => {
         expect(wrapper.render().attr('id')).toEqual('the-chart');
         done();
       }, 0);
     });
     it('adds class to container if specified', done => {
-      const wrapper = shallow(<SuperChart chartType="my-chart" className="the-chart" />);
+      const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} className="the-chart" />);
       setTimeout(() => {
         expect(wrapper.hasClass('the-chart')).toBeTruthy();
         done();
       }, 0);
     });
     it('uses overrideTransformProps when specified', done => {
       const wrapper = shallow(
-        <SuperChart chartType="my-chart" overrideTransformProps={() => ({ character: 'hulk' })} />,
+        <SuperChart
+          chartType={ChartKeys.DILIGENT}
+          overrideTransformProps={() => ({ message: 'hulk' })}
+        />,
       );
       setTimeout(() => {
         expect(
           wrapper
             .render()
-            .find('div.test-component')
+            .find('span.message')
             .text(),
         ).toEqual('hulk');
         done();
       }, 0);
     });
     it('uses preTransformProps when specified', done => {
       const chartPropsWithPayload = new ChartProps({
-        payload: { character: 'hulk' },
+        payload: { message: 'hulk' },
       });
       const wrapper = shallow(
         <SuperChart
-          chartType="my-chart"
+          chartType={ChartKeys.DILIGENT}
           preTransformProps={() => chartPropsWithPayload}
           overrideTransformProps={props => props.payload}
         />,
@@ -124,42 +87,52 @@ describe('SuperChart', () => {
         expect(
           wrapper
             .render()
-            .find('div.test-component')
+            .find('span.message')
             .text(),
         ).toEqual('hulk');
         done();
       }, 0);
     });
     it('uses postTransformProps when specified', done => {
       const wrapper = shallow(
-        <SuperChart chartType="my-chart" postTransformProps={() => ({ character: 'hulk' })} />,
+        <SuperChart
+          chartType={ChartKeys.DILIGENT}
+          postTransformProps={() => ({ message: 'hulk' })}
+        />,
       );
       setTimeout(() => {
         expect(
           wrapper
             .render()
-            .find('div.test-component')
+            .find('span.message')
             .text(),
         ).toEqual('hulk');
         done();
       }, 0);
     });
     it('renders if chartProps is not specified', done => {
-      const wrapper = shallow(<SuperChart chartType="my-chart" />);
+      const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} />);
       setTimeout(() => {
         expect(wrapper.render().find('div.test-component')).toHaveLength(1);
         done();
       }, 0);
     });
     it('does not render anything while waiting for Chart code to load', done => {
-      const wrapper = shallow(<SuperChart chartType="slow-chart" />);
+      const wrapper = shallow(<SuperChart chartType={ChartKeys.SLOW} />);
       setTimeout(() => {
         expect(wrapper.render().children()).toHaveLength(0);
         done();
       }, 0);
     });
+    it('eventually renders after Chart is loaded', done => {
+      const wrapper = shallow(<SuperChart chartType={ChartKeys.SLOW} />);
+      setTimeout(() => {
+        expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+        done();
+      }, 1500);
+    });
     it('does not render if chartProps is null', done => {
-      const wrapper = shallow(<SuperChart chartType="my-chart" chartProps={null} />);
+      const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} chartProps={null} />);
       setTimeout(() => {
         expect(wrapper.render().find('div.test-component')).toHaveLength(0);
         done();
@@ -180,7 +153,7 @@ describe('SuperChart', () => {
   describe('.processChartProps()', () => {
     it('use identity functions for unspecified transforms', () => {
       const chart = new SuperChart({
-        chartType: 'my-chart',
+        chartType: ChartKeys.DILIGENT,
       });
       const chartProps2 = new ChartProps();
       expect(chart.processChartProps({ chartProps: chartProps2 })).toBe(chartProps2);