Merge pull request #14966 from apache/fix-component-missing-error

fix(option): check the missing component before merge theme

src/model/Global.ts

@@ -137,6 +137,20 @@ const BUILTIN_CHARTS_MAP = {
 
 const componetsMissingLogPrinted: Record<string, boolean> = {};
 
+function checkMissingComponents(option: ECUnitOption) {
+    each(option, function (componentOption, mainType: ComponentMainType) {
+        if (!ComponentModel.hasClass(mainType)) {
+            const componentImportName = BUITIN_COMPONENTS_MAP[mainType as keyof typeof BUITIN_COMPONENTS_MAP];
+            if (componentImportName && !componetsMissingLogPrinted[componentImportName]) {
+                error(`Component ${mainType} is used but not imported.
+import { ${componentImportName} } from 'echarts/components';
+echarts.use([${componentImportName}]);`);
+                componetsMissingLogPrinted[componentImportName] = true;
+            }
+        }
+    });
+}
+
 class GlobalModel extends Model<ECUnitOption> {
     // @readonly
     option: ECUnitOption;
@@ -238,6 +252,9 @@ class GlobalModel extends Model<ECUnitOption> {
 
         if (!type || type === 'recreate') {
             const baseOption = optionManager.mountOption(type === 'recreate');
+            if (__DEV__) {
+                checkMissingComponents(baseOption);
+            }
 
             if (!this.option || type === 'recreate') {
                 initBase(this, baseOption);
@@ -308,16 +325,6 @@ class GlobalModel extends Model<ECUnitOption> {
             }
 
             if (!ComponentModel.hasClass(mainType)) {
-                if (__DEV__) {
-                    const componentImportName = BUITIN_COMPONENTS_MAP[mainType as keyof typeof BUITIN_COMPONENTS_MAP];
-                    if (componentImportName && !componetsMissingLogPrinted[componentImportName]) {
-                        error(`Component ${mainType} is used but not imported.
-import { ${componentImportName} } from 'echarts/components';
-echarts.use([${componentImportName}]);`);
-                        componetsMissingLogPrinted[componentImportName] = true;
-                    }
-                }
-
                 // globalSettingTask.dirty();
                 option[mainType] = option[mainType] == null
                     ? clone(componentOption)
@@ -990,6 +997,7 @@ function mergeTheme(option: ECUnitOption, theme: ThemeOption): void {
         if (name === 'colorLayer' && notMergeColorLayer) {
             return;
         }
+
         // If it is component model mainType, the model handles that merge later.
         // otherwise, merge them here.
         if (!ComponentModel.hasClass(name)) {

test/ut/spec/model/componentMissing.test.ts

@@ -32,7 +32,7 @@ use([PieChart, TitleComponent, CanvasRenderer]);
 import { EChartsOption } from '../../../../src/export/option';
 
 
-function createChart(): EChartsType {
+function createChart(theme?: object): EChartsType {
     const el = document.createElement('div');
     Object.defineProperty(el, 'clientWidth', {
         get() {
@@ -44,7 +44,7 @@ function createChart(): EChartsType {
             return 400;
         }
     });
-    const chart = init(el);
+    const chart = init(el, theme);
     return chart;
 };
 
@@ -61,11 +61,15 @@ echarts.use([${seriesImportName}]);`;
 }
 
 
+// !!!!IMPORTANTE NOTE:
+// DO NOT test on the same component twice.
+// Because error message will be cached. It will not report on the same component twice.
 
 describe('model_componentMissing', function () {
+    const oldConsoleErr = console.error;
+
     it('Should report grid component missing error', function () {
         const chart = createChart();
-        const oldConsoleErr = console.error;
         console.error = jest.fn();
         chart.setOption<EChartsOption>({
             xAxis: {},
@@ -81,7 +85,6 @@ describe('model_componentMissing', function () {
 
     it('Should report dataZoom component missing error', function () {
         const chart = createChart();
-        const oldConsoleErr = console.error;
         console.error = jest.fn();
         chart.setOption<EChartsOption>({
             dataZoom: {}
@@ -95,7 +98,6 @@ describe('model_componentMissing', function () {
 
     it('Should not report title component missing error', function () {
         const chart = createChart();
-        const oldConsoleErr = console.error;
         console.error = jest.fn();
         chart.setOption<EChartsOption>({
             title: {},
@@ -108,7 +110,6 @@ describe('model_componentMissing', function () {
 
     it('Should report funnel series missing error', function () {
         const chart = createChart();
-        const oldConsoleErr = console.error;
         console.error = jest.fn();
         chart.setOption<EChartsOption>({
             series: [{
@@ -124,7 +125,6 @@ describe('model_componentMissing', function () {
 
     it('Should not report pie series missing error', function () {
         const chart = createChart();
-        const oldConsoleErr = console.error;
         console.error = jest.fn();
         chart.setOption<EChartsOption>({
             series: [{
@@ -132,6 +132,20 @@ describe('model_componentMissing', function () {
             }]
         });
         expect(console.error).not.toBeCalled();
+        console.error = oldConsoleErr;
+    });
+
+
+    it('Should not report visualMap component missing error when using theme', function () {
+        const chart = createChart({
+            visualMap: {
+                borderColor: '#71708A'
+            }
+        });
+
+        console.error = jest.fn();
+        chart.setOption<EChartsOption>({});
+        expect(console.error).not.toBeCalled();
 
         console.error = oldConsoleErr;
     });