Commit dc41104b authored by Martin Wortschack's avatar Martin Wortschack 🔴 Committed by Filipa Lacerda
Browse files

feat: Add click handler to chart types 

- Utilize v-on=$listeners on chart
- Extend several chart types
parent caf1605c

components/charts/area/area.vue

+1 −1
Original line number Diff line number Diff line
@@ -194,7 +194,7 @@ export default { 


<template>

  <div class="position-relative">

    <chart v-bind="$attrs" :options="options" @created="onCreated" @updated="onUpdated"/>

    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" @updated="onUpdated"/>

    <chart-tooltip

      v-if="chart"

      :show="showTooltip"

components/charts/column/column.vue

+1 −1
Original line number Diff line number Diff line
@@ -166,7 +166,7 @@ export default { 
</script>

<template>

  <div class="position-relative">

    <chart v-bind="$attrs" :options="options" @created="onCreated" @updated="onUpdated"/>

    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" @updated="onUpdated"/>

    <chart-tooltip

      v-if="chart"

      :show="showTooltip"

components/charts/line/line.vue

+1 −1
Original line number Diff line number Diff line
@@ -185,7 +185,7 @@ export default { 


<template>

  <div class="position-relative">

    <chart v-bind="$attrs" :options="options" @created="onCreated" @updated="onUpdated"/>

    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" @updated="onUpdated"/>

    <chart-tooltip

      v-if="chart"

      :show="showTooltip"

components/charts/stacked_column/stacked_column.vue

+1 −1
Original line number Diff line number Diff line
@@ -211,7 +211,7 @@ export default { 
</script>

<template>

  <div class="position-relative">

    <chart v-bind="$attrs" :options="options" @created="onCreated" @updated="onUpdated"/>

    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" @updated="onUpdated"/>

    <chart-tooltip

      v-if="chart"

      :show="showTooltip"

tests/components/charts/column_chart.spec.js

0 → 100644
+70 −0
Original line number Diff line number Diff line 
import { shallowMount } from '@vue/test-utils';

import ColumnChart from '../../../components/charts/column/column.vue';

import Chart from '../../../components/charts/chart/chart.vue';



describe('column chart component', () => {

  const defaultChartProps = {

    xAxisTitle: 'x axis',

    yAxisTitle: 'y axis',

    xAxisType: 'category',

    data: {

      Full: [

        ['Mon', 1220],

        ['Tue', 932],

        ['Wed', 901],

        ['Thu', 934],

        ['Fri', 1290],

        ['Sat', 1330],

        ['Sun', 1320],

      ],

    },

  };

  let wrapper;



  const TooltipStub = {

    name: 'chart-tooltip',

    template: '<div />',

  };



  const chartItemClickedSpy = jest.fn();



  const factory = (props = defaultChartProps) => {

    wrapper = shallowMount(ColumnChart, {

      propsData: { ...props },

      stubs: {

        chart: true,

        'chart-tooltip': TooltipStub,

      },

      listeners: {

        chartItemClicked: chartItemClickedSpy,

      },

    });

    const chart = {

      getDom: jest.fn(() => ({

        addEventListener: jest.fn(),

        removeEventListener: jest.fn(),

      })),

    };

    wrapper.setData({ chart });

  };



  beforeEach(() => {

    factory();

  });



  afterEach(() => {

    wrapper.destroy();

  });



  it('emits "created" when onCreated is called', () => {

    wrapper.vm.onCreated(wrapper.vm.chart);



    expect(wrapper.emitted('created')).toBeTruthy();

  });



  it('calls event listener when "chartItemClicked" is emitted on the Chart component', () => {

    wrapper.find(Chart).vm.$emit('chartItemClicked');



    expect(chartItemClickedSpy).toHaveBeenCalled();

  });

});