@icij/murmur-next 4.0.0

package/tests/unit/datavisualisations/LineChart.spec.js

@@ -0,0 +1,155 @@
+import * as d3 from 'd3'
+import { mount } from '@vue/test-utils'
+import LineChart from '@/datavisualisations/LineChart.vue'
+
+vi.mock('d3', async () => {
+  return {
+    ...await vi.importActual('d3'),
+  }
+})
+
+// Mock HTML element offset so the size of the chart can be calculated
+// dynamically using JSDOM and tests
+Object.defineProperties(window.HTMLElement.prototype, {
+  offsetWidth: {
+    get () { return parseFloat(this.style.width) || 0 }
+  },
+  offsetHeight: {
+    get () { return parseFloat(this.style.height) || 0 }
+  }
+})
+
+describe('LineChart.vue', () => {
+
+  describe('a single chart', () => {
+
+    let wrapper
+
+    beforeEach(async () => {
+
+      const propsData = {
+        fixedHeight: 300,
+        xAxisTicks: d3.timeYear.every(1),
+        data: [
+            { date: 2000, value: 0 },
+            { date: 2001, value: 1 },
+            { date: 2002, value: 2 },
+            { date: 2003, value: 3 },
+            { date: 2004, value: 4 }
+        ]
+      }
+
+      wrapper = mount(LineChart, { propsData })
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('is a fixed height chart, regardeless of the mode', async () => {
+      expect(wrapper.vm.height).toBe(300)
+      await wrapper.setProps({ socialMode: true })
+      expect(wrapper.vm.height).toBe(300)
+    })
+
+    it('creates five x-axis ticks', async () => {
+      expect(wrapper.findAll('.line-chart__axis--x .tick')).toHaveLength(5)
+    })
+
+    it('creates x-axis ticks with the right years ', async () => {
+      const ticks = wrapper.findAll('.line-chart__axis--x .tick')
+      expect(ticks.at(0).text()).toBe('2000')
+      expect(ticks.at(1).text()).toBe('2001')
+      expect(ticks.at(2).text()).toBe('2002')
+      expect(ticks.at(3).text()).toBe('2003')
+      expect(ticks.at(4).text()).toBe('2004')
+    })
+  })
+
+  describe('a two steps line chart using remote JSON', () => {
+
+    let wrapper
+
+    beforeEach(async () => {
+      d3.json = vi.fn().mockReturnValue([
+        { date: 2019, value: 50 },
+        { date: 2020, value: 100 }
+      ])
+
+      const propsData = {
+        data: 'http://localhost/data.json',
+        xAxisTicks: d3.timeYear.every(1)
+      }
+      wrapper = mount(LineChart, { propsData })
+      wrapper.vm.$el.style.width = '500px'
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates two x-axis ticks', async () => {
+      expect(wrapper.findAll('.line-chart__axis--x .tick')).toHaveLength(2)
+    })
+
+    it('creates x-axis ticks with the right years ', async () => {
+      const ticks = wrapper.findAll('.line-chart__axis--x .tick')
+      expect(ticks.at(0).text()).toBe('2019')
+      expect(ticks.at(1).text()).toBe('2020')
+    })
+  })
+
+  describe('a 10 columns chart with two highlights using remote CSV', () => {
+
+    let wrapper
+
+    beforeEach(async () => {
+      d3.csv = vi.fn().mockReturnValue([
+        { date: 2000, indicator: 0, highlight: false },
+        { date: 2001, indicator: 10, highlight: false },
+        { date: 2002, indicator: 20, highlight: false },
+        { date: 2003, indicator: 30, highlight: false },
+        { date: 2004, indicator: 40, highlight: false },
+        { date: 2005, indicator: 50, highlight: true },
+        { date: 2006, indicator: 60, highlight: false },
+        { date: 2007, indicator: 70, highlight: true },
+        { date: 2008, indicator: 80, highlight: false },
+        { date: 2009, indicator: 90, highlight: false }
+      ])
+
+      const propsData = {
+        data: 'http://localhost/data.csv',
+        dataUrlType: 'csv',
+        xAxisTicks: d3.timeYear.every(1),
+        seriesName: 'indicator'
+      }
+      wrapper = mount(LineChart, { propsData })
+    })
+
+    afterEach(async () => {
+      wrapper.unmount()
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates ten x-axis ticks', () => {
+      expect(wrapper.findAll('.line-chart__axis--x .tick')).toHaveLength(10)
+    })
+
+    it('creates x-axis ticks with the right years', () => {
+      const ticks = wrapper.findAll('.line-chart__axis--x .tick')
+      expect(ticks.at(0).text()).toBe('2000')
+      expect(ticks.at(1).text()).toBe('2001')
+      expect(ticks.at(2).text()).toBe('2002')
+      expect(ticks.at(3).text()).toBe('2003')
+      expect(ticks.at(4).text()).toBe('2004')
+      expect(ticks.at(5).text()).toBe('2005')
+      expect(ticks.at(6).text()).toBe('2006')
+      expect(ticks.at(7).text()).toBe('2007')
+      expect(ticks.at(8).text()).toBe('2008')
+      expect(ticks.at(9).text()).toBe('2009')
+    })
+  })
+})

package/tests/unit/datavisualisations/StackedBarChart.spec.js

@@ -0,0 +1,294 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import StackedBarChart from '@/datavisualisations/StackedBarChart.vue'
+
+// Mock HTML element offset so the size of the chart can be calculated
+// dynamicly using JSDOM and tests
+Object.defineProperties(window.HTMLElement.prototype, {
+  offsetWidth: {
+    get () { return parseFloat(this.style.width) || 0 }
+  },
+  offsetHeight: {
+    get () { return parseFloat(this.style.height) || 0 }
+  }
+})
+
+describe('StackedBarChart.vue', () => {
+
+  describe('a stacked-bars chart with two bars in four groups', () => {
+
+    let wrapper
+
+    beforeEach(async () => {
+      vi.useFakeTimers()
+
+      const propsData = {
+        data: [
+          { label: "Avatar", budget: 237, box_office: 2784 },
+          { label: "ET: The Extra-Terrestrial", budget: 11, box_office: 793 },
+          { label: "Finding Nemo", budget: 94, box_office: 940 },
+          { label: "Ghostbusters", budget: 14, box_office: 229 }
+        ]
+      }
+
+      wrapper = mount(StackedBarChart, { propsData })
+    })
+
+    afterEach(async () => {
+      await vi.runAllTimersAsync()
+      vi.useRealTimers()
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates four bars', async () => {
+      expect(wrapper.findAll('.stacked-bar-chart__groups__item')).toHaveLength(4)
+    })
+
+    it('creates the first group of bars with maximum width', () => {
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const budgetBar = firstGroup.find('.stacked-bar-chart__groups__item__bars__item--budget')
+      const boxOfficeBar = firstGroup.find('.stacked-bar-chart__groups__item__bars__item--box-office')
+      const totalWidth = budgetBar.element.offsetWidth + boxOfficeBar.element.offsetWidth
+      expect(totalWidth).toBe(100)
+    })
+
+    it('creates the second group of bars with ~27% width', () => {
+      const secondGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(1)
+      const budgetBar = secondGroup.find('.stacked-bar-chart__groups__item__bars__item--budget')
+      const boxOfficeBar = secondGroup.find('.stacked-bar-chart__groups__item__bars__item--box-office')
+      const totalWidth = Math.round(budgetBar.element.offsetWidth + boxOfficeBar.element.offsetWidth)
+      expect(totalWidth).toBe(27)
+    })
+
+    it('creates the third group of bars with ~34% width', () => {
+      const secondGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(2)
+      const budgetBar = secondGroup.find('.stacked-bar-chart__groups__item__bars__item--budget')
+      const boxOfficeBar = secondGroup.find('.stacked-bar-chart__groups__item__bars__item--box-office')
+      const totalWidth = Math.round(budgetBar.element.offsetWidth + boxOfficeBar.element.offsetWidth)
+      expect(totalWidth).toBe(34)
+    })
+
+    it('creates the first group of bars with budget taking ~8% width', () => {
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const budgetBar = firstGroup.find('.stacked-bar-chart__groups__item__bars__item--budget')
+      const width = Math.round(budgetBar.element.offsetWidth)
+      expect(width).toBe(8)
+    })
+
+    it('creates the first group of bars with box_office taking ~92% width', () => {
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const boxOfficeBar = firstGroup.find('.stacked-bar-chart__groups__item__bars__item--box-office')
+      const width = Math.round(boxOfficeBar.element.offsetWidth)
+      expect(width).toBe(92)
+    })
+
+    it('creates the first group with "Avatar" as label', () => {
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const label = firstGroup.find('.stacked-bar-chart__groups__item__label')
+      expect(label.text()).toBe("Avatar")
+    })
+
+    it('creates the second group with "ET: The Extra-Terrestrial" as label', () => {
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(1)
+      const label = firstGroup.find('.stacked-bar-chart__groups__item__label')
+      expect(label.text()).toBe("ET: The Extra-Terrestrial")
+    })
+
+    it('creates the first group with "Avatar" as label when ordered by "budget"', async () => {
+      await wrapper.setProps({ sortBy: 'budget' })
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const label = firstGroup.find('.stacked-bar-chart__groups__item__label')
+      expect(label.text()).toBe("ET: The Extra-Terrestrial")
+    })
+
+    it('creates a legend with "budget" and "box_office" items', () => {
+      const budgetLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(0)
+      const boxOfficeLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(1)
+      expect(budgetLegend.text()).toBe("budget")
+      expect(boxOfficeLegend.text()).toBe("box_office")
+    })
+
+    it('highlights the legend "budget"', async () => {
+      const budgetLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(0)
+      expect(budgetLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeFalsy()
+      await budgetLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay)
+      expect(budgetLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeTruthy()
+    })
+
+    it('highlights the bars for "budget"', async () => {
+      const budgetLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(0)
+      await budgetLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay)
+      const budgetBars = wrapper.findAll('.stacked-bar-chart__groups__item__bars__item--budget')
+      expect(budgetBars.at(0).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(1).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(2).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(3).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('highlights the bars for "box_office"', async () => {
+      const boxOfficeLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(1)
+      await boxOfficeLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay)
+      const budgetBars = wrapper.findAll('.stacked-bar-chart__groups__item__bars__item--box-office')
+      expect(budgetBars.at(0).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(1).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(2).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(3).classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('highlights the legend "budget" on mouseover and "box_office" by default', async () => {
+      await wrapper.setProps({ highlights: ['box_office'] })
+      const budgetLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(0)
+      const boxOfficeLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(1)
+      expect(budgetLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeFalsy()
+      expect(boxOfficeLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeTruthy()
+      await budgetLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay)
+      expect(budgetLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeTruthy()
+      expect(boxOfficeLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeFalsy()
+    })
+
+    it('highlights the bars for "box_office" after a while', async () => {
+      const boxOfficeLegend = wrapper.findAll('.stacked-bar-chart__legend__item').at(1)
+      await boxOfficeLegend.trigger('mouseover')
+      expect(boxOfficeLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeFalsy()
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay / 2)
+      expect(boxOfficeLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeFalsy()
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay * 2)
+      expect(boxOfficeLegend.classes('stacked-bar-chart__legend__item--highlighted')).toBeTruthy()
+    })
+
+    it('highlights the whole "Avatar" row', async () => {
+      await wrapper.setProps({ rowHighlights: ['Avatar'] })
+      const boxOffice = wrapper.findAll('.stacked-bar-chart__groups__item__bars__item').at(0)
+      const budget = wrapper.findAll('.stacked-bar-chart__groups__item__bars__item').at(1)
+      expect(boxOffice.classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budget.classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('highlights the whole "Ghostbusters" row', async () => {
+      await wrapper.setProps({ rowHighlights: ['Ghostbusters'] })
+      const boxOffice = wrapper.findAll('.stacked-bar-chart__groups__item__bars__item').at(6)
+      const budget = wrapper.findAll('.stacked-bar-chart__groups__item__bars__item').at(7)
+      expect(boxOffice.classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budget.classes('stacked-bar-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('creates bars with specific colors', async () => {
+      await wrapper.setProps({ barColors: [ "#000", "#444" ] })
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const budgetBar = firstGroup.find('.stacked-bar-chart__groups__item__bars__item--budget')
+      const boxOfficeBar = firstGroup.find('.stacked-bar-chart__groups__item__bars__item--box-office')
+      expect(budgetBar.element.style['background-color']).toBe('rgb(0, 0, 0)')
+      expect(boxOfficeBar.element.style['background-color']).toBe('rgb(68, 68, 68)')
+    })
+
+    it('creates legend with specific colors', async () => {
+      await wrapper.setProps({ barColors: [ "#000", "#444" ] })
+      const legendBoxes = wrapper.findAll('.stacked-bar-chart__legend__item__box')
+      const budgetBox = legendBoxes.at(0)
+      const boxOfficeBox = legendBoxes.at(1)
+      expect(budgetBox.element.style['background-color']).toBe('rgb(0, 0, 0)')
+      expect(boxOfficeBox.element.style['background-color']).toBe('rgb(68, 68, 68)')
+    })
+
+    it('creates one legend when using explicit keys', async () => {
+      await wrapper.setProps({ keys: [ "box_office" ] })
+      const legendItems = wrapper.findAll('.stacked-bar-chart__legend__item')
+      expect(legendItems).toHaveLength(1)
+    })
+
+    it('creates one bar when using explicit keys', async () => {
+      await wrapper.setProps({ keys: [ "box_office" ] })
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const bars = firstGroup.findAll('.stacked-bar-chart__groups__item__bars__item')
+      expect(bars).toHaveLength(1)
+    })
+
+    it('creates legend with custom group names', async () => {
+      await wrapper.setProps({ groups: [ "Budget", "Box Office" ] })
+      const legendItems = wrapper.findAll('.stacked-bar-chart__legend__item')
+      expect(legendItems.at(0).text()).toBe("Budget")
+      expect(legendItems.at(1).text()).toBe("Box Office")
+    })
+
+    it('creates bar direct labeling without formatting', async () => {
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const values = firstGroup.findAll('.stacked-bar-chart__groups__item__bars__item__value')
+      expect(values.at(0).text()).toBe('237')
+      expect(values.at(1).text()).toBe('2784')
+    })
+
+    it('creates bar direct labeling without with currency formatting', async () => {
+      await wrapper.setProps({ xAxisTickFormat: '$,' })
+      const firstGroup = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const values = firstGroup.findAll('.stacked-bar-chart__groups__item__bars__item__value')
+      expect(values.at(0).text()).toBe('$237')
+      expect(values.at(1).text()).toBe('$2,784')
+    })
+  })
+
+  describe('a stacked-bars chart with 3 bars in 3 groups with empty values', () => {
+
+    let wrapper
+
+    beforeEach(async () => {
+
+      const propsData = {
+        labelField: 'label',
+        fixedHeight: 500,
+        hideEmptyValues: true,
+        highlightDelay: 0,
+        data: [
+          { label: 'today', foo: 90, 'baz 1': 5, 'baz 2': 5 },
+          { label: 'tomorrow', foo: 40, 'baz 1': 10, 'baz 2': 0 },
+          { label: 'next week', foo: 0, 'baz 1': 20, 'baz 2': 0 }
+        ]
+      }
+
+      const attrs = {
+        style: 'width: 600px'
+      }
+
+      wrapper = mount(StackedBarChart, { propsData, attrs })
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates 3 bars', async () => {
+      expect(wrapper.findAll('.stacked-bar-chart__groups__item')).toHaveLength(3)
+    })
+
+    it('creates the first bar with no hidden bars', () => {
+      const group = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const hiddenBars = group.findAll('.stacked-bar-chart__groups__item__bars__item--hidden')
+      expect(hiddenBars).toHaveLength(0)
+    })
+
+    it('creates the first bar with normalized classes on bar', () => {
+      const group = wrapper.findAll('.stacked-bar-chart__groups__item').at(0)
+      const items = group.findAll('.stacked-bar-chart__groups__item__bars__item')
+      expect(items.at(0).classes('stacked-bar-chart__groups__item__bars__item--foo')).toBeTruthy()
+      expect(items.at(1).classes('stacked-bar-chart__groups__item__bars__item--baz-1')).toBeTruthy()
+      expect(items.at(2).classes('stacked-bar-chart__groups__item__bars__item--baz-2')).toBeTruthy()
+    })
+
+    it('creates the second bar with one hidden bar', () => {
+      const group = wrapper.findAll('.stacked-bar-chart__groups__item').at(1)
+      const hiddenBars = group.findAll('.stacked-bar-chart__groups__item__bars__item--hidden')
+      expect(hiddenBars).toHaveLength(1)
+    })
+
+    it('creates the third bar with two hidden bars', () => {
+      const group = wrapper.findAll('.stacked-bar-chart__groups__item').at(2)
+      const hiddenBars = group.findAll('.stacked-bar-chart__groups__item__bars__item--hidden')
+      expect(hiddenBars).toHaveLength(2)
+    })
+  })
+})