Question

我正在Vue-Electron应用程序中使用vue-c3，并且还运行vue-test-utils进行单元测试。

如何测试此方法？

// vue-single file component

 methods: {
    showAnnotation() {
      // console.log("threshold", this.dataColumn[0][this.newThreshold]);
      this.handler.$emit("dispatch", chart => {
        chart.tooltip.show({
          x: this.dataColumn[0][this.newThreshold]
        });
      });
    }
  }

我也不知道如何测试工具提示，该提示在calculated.options内

在vue单个文件组件内部，

 mounted() {
    this.initData(); // here I get data from parent component
    this.handler.$emit("init", this.options); // init C3 options
  },


//.... omit code for simplicity...

computed:{
 options() {
      let vm = this;
      return {
        },
        data: {
          xs: this.axisSetting,
          columns: this.dataColumn,
        },
        tooltip: {
          format: {
            title(d) {
              return;
            },
            value: function(value, ratio, id) {
              var format = d3.format(".2f");
              return format(value);
            }
          },
          contents: function(d, defaultTitleFormat, defaultValueFormat, color){
            console.log(d[0].id);
            if (d[0].id === "dependent_y_axis" || d[0].id === "line") {
              // Use default rendering
              let $$ = this;
              let config = $$.config;
              let CLASS = $$.CLASS;
              let titleFormat =
                config.tooltip_format_title || defaultTitleFormat;
              let nameFormat =
                config.tooltip_format_name ||
                function(name) {
                  return name;
                };
              let valueFormat =
                config.tooltip_format_value || defaultValueFormat;

              let text, i, title, value, name, bgcolor;
              name = nameFormat(d[0].name);
              value = valueFormat(d[0].value, d[0].ratio, d[0].id,d[0].index);
              bgcolor = $$.levelColor
                ? $$.levelColor(d[0].value)
                : color(d[0].id);
                 text = `
                    <table ${pos} class='c3-tooltip'>
                        <tr>
                            <th colspan='2'> dist </th>
                        </tr> 
                        <tr class='c3-tooltip-name-${d[0].id}'>
                            <td class='name'>
                            <span style='background-color:${bgcolor}'></span>
                            ${d[0].id}
                            </td>
                            <td class='value'>
                            ${dist[d[0].index]} 
                            </td>
                        </tr>
                    </table> 
                    `;
              return text;
            }
          }
        },
      };
    }
  },

}

我将代码绑定如下，但是..

覆盖率报告显示showAnnotation内部实现未被覆盖
compute.options内部的整个工具提示未涵盖。

describe('GraphDisplay', function () {
  it('test Optional tooltip', () => {
    let localThis = {
      tooltip: {
        format: {
          title() {
            return null
          },
          value() {
            return null
          }
        }
      }
    }

    // console.log(GraphDisplay.computed.options())
    expect(GraphDisplay.computed.options.call(localThis)).toBeTruthy

  })

  it('description', () => {
    let localThis = {
      handler: {
        $emit(...args) {
          return null
        }
      }

    }
    GraphDisplay.methods.showAnnotation.call(localThis)

  })
})

我认为也许我在想错，在覆盖率报告中看到很多未发现的代码行感觉不对，这只是感觉不对。

如何在vue-test-utils上或使用其他工具测试vue-c3

0 个答案: