plotBands not being mounted in tests with Jest

[WaldemarEnns]

Hello there, I face the following problem:

I have this component:

<template>
  <highcharts ref="chart" :options="chartOptions" :update-args="[true, true, true]" />
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import Highcharts from 'highcharts'
import { Chart } from 'highcharts-vue'
import bullet from 'highcharts/modules/bullet'
import { TBenchmarkZones } from '@/utils/helpers/types'

bullet(Highcharts)

export default Vue.extend({
  name: 'BulletGraph',
  components: {
    highcharts: Chart
  },
  props: {
    title: {
      required: false,
      type: String as PropType<string>
    },
    subtitle: {
      required: true,
      type: String as PropType<string>
    },
    seriesName: {
      required: false,
      type: String as PropType<string>
    },
    setValue: {
      required: true,
      type: Number as PropType<number>
    },
    isValue: {
      required: true,
      type: Number as PropType<number>
    },
    benchmarkzones: {
      required: true,
      type: Object as PropType<TBenchmarkZones>
    },
    unit: {
      required: true,
      type: String as PropType<string>
    },
    loading: {
      required: false,
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  watch: {
    loading: function (newVal: boolean) {
      if (newVal === true) {
        (this.$refs.chart as any).chart.showLoading()
      } else {
        (this.$refs.chart as any).chart.hideLoading()
      }
    }
  },
  computed: {
    chartOptions () {
      return {
        chart: {
          inverted: true,
          type: 'bullet',
          height: '120px',
          style: {
            fontFamily: 'myriad-pro'
          }
        },
        title: {
          useHtml: true,
          text: this.title ? this.title : null,
          margin: 30,
          align: 'left'
        },
        legend: {
          enabled: false
        },
        tooltip: {
          useHtml: true,
          pointFormat: `<b>{point.y}</b> ${this.unit}`
        },
        series: [{
          pointPadding: 0.25,
          borderWidth: 0,
          targetOptions: {
            width: '200%'
          },
          name: this.seriesName ? this.seriesName : null,
          color: 'transparent',
          data: [{
            y: this.isValue
          }]
        }],
        xAxis: {
          categories: [
            this.subtitle
          ],
          labels: {
            useHtml: true,
            padding: 30
          }
        },
        yAxis: {
          title: {
            enabled: false
          },
          max: this.benchmarkzones.max,
          min: this.benchmarkzones.min,
          gridLineWidth: 0,
          plotBands: [
            {
              id: 'red',
              from: this.benchmarkzones.min,
              to: this.benchmarkzones.green ? this.benchmarkzones.green : this.benchmarkzones.red,
              color: this.benchmarkzones.green ? '#288970' : '#931322'
            },
            {
              id: 'orange',
              from: this.benchmarkzones.green ? this.benchmarkzones.green : this.benchmarkzones.red,
              to: this.benchmarkzones.yellow,
              color: {
                linearGradient: { x1: 0, x2: 1, y1: 1, y2: 1 },
                stops: [
                  [0, this.benchmarkzones.green ? '#288970' : '#931322'],
                  [0.15, '#D4A92A'],
                  [0.80, '#D4A92A'],
                  [1, this.benchmarkzones.green ? '#931322' : '#288970']
                ]
              }
            },
            {
              id: 'green',
              from: this.benchmarkzones.yellow,
              to: this.benchmarkzones.max,
              color: this.benchmarkzones.green ? '#931322' : '#288970'
            }
          ],
          plotLines: [
            {
              value: this.isValue,
              width: 2,
              color: 'rgba(255,255,255,0.0)',
              zIndex: 5,
              label: {
                useHTML: true,
                rotation: 0,
                align: 'center',
                y: -10,
                text: '<div class="set-tooltip primary--text"><span class="target-label">IST</span><div class="arrow-down"></div></div>'
              }
            },
            {
              value: this.setValue,
              width: 2,
              color: 'rgba(255,255,255,0.0)',
              zIndex: 5,
              label: {
                useHTML: true,
                rotation: 0,
                align: 'center',
                y: -10,
                text: '<div class="set-tooltip green--text"><span class="target-label">SOLL</span><div class="arrow-down"></div></div>'
              }
            }
          ]
        },
        credits: {
          enabled: false
        },
        exporting: {
          enabled: false
        }
      }
    }
  }
})
</script>

<style lang="sass">

  .set-tooltip
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    text-align: center
    font-weight: bold
    left: -4px !important
    position: relative !important

  .arrow-down
    width: 0
    height: 0
    border-left: 5px solid transparent !important
    border-right: 5px solid transparent !important
    border-top-width: 20px !important
    border-top-style: solid !important

</style>

Using plotLines in a customized BulletGraph makes it possible for me to mark a current value and an achievable value.

In my jest tests-setup, I now try to mount the component and find the plotBands by their class-name:

describe('BulletGraph.vue', () => {
  let wrapper: Wrapper<Vue>

  beforeEach(() => {
    wrapper = mount(
      BulletGraph,
      {
        localVue,
        propsData: {
          title: 'Benchmark in 2020',
          subtitle: 'Overall value for 2020',
          seriesName: 'Meters per round',
          setValue: 5,
          isValue: 4,
          unit: 'meters',
          benchmarkzones: {
            min: 0,
            max: 12,
            yellow: 5,
            red: 3
          }
        }
      }
    )

  })

  it('sets the set value correctly', () => {
    wrapper.get('.set-tooltip.green--text')
  })

})

wrapper.get('.set-tooltip.green--text') will fail, because it simply can not find my plotLines. I use useHtml to create little arrows as markers for the isValue and setValue.

Why can't my jest-environment find the plotLines? I also tried using await localVue.nextTick() to await the rendering, but it didn't work out.

Any suggestion?

Check out my updated CodePen of the official HighCharts example for bullet graphs.

[wchmiel]

Hi @WaldemarEnns ,

Thank you for contacting us. Unfortunately, I'm not sure what can be the issue here. In the attached demo elements are rendered correctly as HTML elements. Are you sure everything in Jest is configured correctly? Unfortunately, I'm not a Jest expert.

Kind regards!

[Denyllon]

Closed due to inactivity.