@icij/murmur-next 4.0.0

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

@@ -0,0 +1,443 @@
+import { mount } from '@vue/test-utils'
+import StackedColumnChart from '@/datavisualisations/StackedColumnChart.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('StackedColumnChart.vue', () => {
+  const createContainer = (tag = 'div') => {
+    const container = document.createElement(tag)
+    document.body.appendChild(container)
+    return container
+  }
+
+  describe('a stacked-colmuns chart with two columns in four groups and direct labeling', () => {
+    let wrapper
+
+    beforeEach(async () => {
+      vi.useFakeTimers()
+
+      const propsData = {
+        highlightDelay: 2,
+        data: [
+          { date: 2006, foo: 90, bar: 10 },
+          { date: 2007, foo: 80, bar: 10 },
+          { date: 2008, foo: 70, bar: 10 },
+          { date: 2009, foo: 60, bar: 10 }
+        ]
+      }
+
+      wrapper = mount(StackedColumnChart, { propsData, attachTo: createContainer() })
+    })
+
+    afterEach(async () => {
+      await vi.runAllTimersAsync()
+      vi.useRealTimers()
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates four columns', async () => {
+      expect(wrapper.findAll('.stacked-column-chart__groups__item')).toHaveLength(4)
+    })
+
+    it('creates the first group of columns with maximum height', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const fooColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const totalHeight = fooColumn.element.offsetHeight + barColumn.element.offsetHeight
+      expect(totalHeight).toBe(100)
+    })
+
+    it('creates the second group of columns with ~90% height', () => {
+      const secondGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(1)
+      const fooColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const totalHeight = fooColumn.element.offsetHeight + barColumn.element.offsetHeight
+      expect(totalHeight).toBe(90)
+    })
+
+    it('creates the third group of columns with ~80% height', () => {
+      const secondGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(2)
+      const fooColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const totalHeight = fooColumn.element.offsetHeight + barColumn.element.offsetHeight
+      expect(totalHeight).toBe(80)
+    })
+
+    it('creates the first group of columns with `foo` taking 90% height', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const fooColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const width = fooColumn.element.offsetHeight
+      expect(width).toBe(90)
+    })
+
+    it('creates the first group of columns with `bar` taking 10% height', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const barColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const width = barColumn.element.offsetHeight
+      expect(width).toBe(10)
+    })
+
+    it('creates the first group with "2006" as label', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const label = firstGroup.find('.stacked-column-chart__groups__item__label')
+      expect(label.text()).toBe("2006")
+    })
+
+    it('creates the second group with "2007" as label', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(1)
+      const label = firstGroup.find('.stacked-column-chart__groups__item__label')
+      expect(label.text()).toBe("2007")
+    })
+
+    it('creates the first group with "2009" as label when ordered by "foo"', async () => {
+      await wrapper.setProps({ sortBy: 'foo' })
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const label = firstGroup.find('.stacked-column-chart__groups__item__label')
+      expect(label.text()).toBe("2009")
+    })
+
+    it('creates a legend with "foo" and "bar" items', () => {
+      const fooLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(0)
+      const barLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(1)
+      expect(fooLegend.text()).toBe("foo")
+      expect(barLegend.text()).toBe("bar")
+    })
+
+    it('hightlight the legend "foo"', async () => {
+      const fooLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(0)
+      expect(fooLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeFalsy()
+      await fooLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay + 10)
+      expect(fooLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeTruthy()
+    })
+
+    it('hightlight the columns for "foo"', async () => {
+      const fooLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(0)
+      await fooLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay)
+      const fooColumns = wrapper.findAll('.stacked-column-chart__groups__item__bars__item--foo')
+      expect(fooColumns.at(0).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(fooColumns.at(1).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(fooColumns.at(2).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(fooColumns.at(3).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('hightlight the columns for "bar"', async () => {
+      const barLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(1)
+      await barLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay)
+      const budgetBars = wrapper.findAll('.stacked-column-chart__groups__item__bars__item--bar')
+      expect(budgetBars.at(0).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(1).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(2).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(budgetBars.at(3).classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('hightlight the legend "foo" on mouseover and "bar" by default', async () => {
+      await wrapper.setProps({ highlights: ['bar'] })
+      const fooLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(0)
+      const barLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(1)
+      expect(fooLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeFalsy()
+      expect(barLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeTruthy()
+      await fooLegend.trigger('mouseover')
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay)
+      expect(fooLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeTruthy()
+      expect(barLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeFalsy()
+    })
+
+    it('hightlight the columns for "bar" after a while', async () => {
+      const barLegend = wrapper.findAll('.stacked-column-chart__legend__item').at(1)
+      await wrapper.setProps({ highlightDelay: 150 })
+      await barLegend.trigger('mouseover')
+      expect(barLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeFalsy()
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay / 2)
+      expect(barLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeFalsy()
+      await vi.advanceTimersByTimeAsync(wrapper.vm.highlightDelay * 2)
+      expect(barLegend.classes('stacked-column-chart__legend__item--highlighted')).toBeTruthy()
+    })
+
+    it('hightlight the whole "2006" column', async () => {
+      await wrapper.setProps({ columnHighlights: [2006] })
+      const foo = wrapper.findAll('.stacked-column-chart__groups__item__bars__item').at(0)
+      const bar = wrapper.findAll('.stacked-column-chart__groups__item__bars__item').at(1)
+      expect(foo.classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(bar.classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('hightlight the whole "2009" column', async () => {
+      await wrapper.setProps({ columnHighlights: [2009] })
+      const foo = wrapper.findAll('.stacked-column-chart__groups__item__bars__item').at(6)
+      const bar = wrapper.findAll('.stacked-column-chart__groups__item__bars__item').at(7)
+      expect(foo.classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+      expect(bar.classes('stacked-column-chart__groups__item__bars__item--highlighted')).toBeTruthy()
+    })
+
+    it('creates columns with specific colors', async () => {
+      await wrapper.setProps({ barColors: [ "#000", "#444" ] })
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const fooColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      expect(fooColumn.element.style['background-color']).toBe('rgb(0, 0, 0)')
+      expect(barColumn.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-column-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 explicite keys', async () => {
+      await wrapper.setProps({ keys: [ "foo" ] })
+      const legendItems = wrapper.findAll('.stacked-column-chart__legend__item')
+      expect(legendItems).toHaveLength(1)
+    })
+
+    it('creates one bar when using explicite keys', async () => {
+      await wrapper.setProps({ keys: [ "foo" ] })
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const columns = firstGroup.findAll('.stacked-column-chart__groups__item__bars__item')
+      expect(columns).toHaveLength(1)
+    })
+
+    it('creates legend with custom group names', async () => {
+      await wrapper.setProps({ groups: [ "Foo", "Bar" ] })
+      const legendItems = wrapper.findAll('.stacked-column-chart__legend__item')
+      expect(legendItems.at(0).text()).toBe("Foo")
+      expect(legendItems.at(1).text()).toBe("Bar")
+    })
+
+    it('creates bar direct labeling without formatting', async () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const values = firstGroup.findAll('.stacked-column-chart__groups__item__bars__item__value')
+      expect(values.at(0).text()).toBe('90')
+      expect(values.at(1).text()).toBe('10')
+    })
+
+    it('creates bar direct labeling without with currency formatting', async () => {
+      await wrapper.setProps({ yAxisTickFormat: '$,' })
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const values = firstGroup.findAll('.stacked-column-chart__groups__item__bars__item__value')
+      expect(values.at(0).text()).toBe('$90')
+      expect(values.at(1).text()).toBe('$10')
+    })
+
+    it('creates an invisible left axis', async () => {
+      const leftAxis = wrapper.find('.stacked-column-chart__left-axis')
+      expect(leftAxis.attributes('style')).toBe('display: none;')
+    })
+  })
+
+  describe('a stacked-colmuns chart with 3 columns in 2 groups and no direct labeling', () => {
+
+    let wrapper
+
+    beforeEach(async () => {
+
+      const propsData = {
+        labelField: 'label',
+        noDirectLabeling:  true,
+        fixedHeight: 500,
+        barMaxWidth: '50%',
+        data: [
+          { label: 'today', foo: 90, bar: 5, baz: 5 },
+          { label: 'tomorrow', foo: 40, bar: 10, baz: 0 }
+        ]
+      }
+
+      const attrs = {
+        style: 'width: 600px'
+      }
+
+      wrapper = mount(StackedColumnChart, { propsData, attachTo: createContainer(), attrs })
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates 2 columns', async () => {
+      expect(wrapper.findAll('.stacked-column-chart__groups__item')).toHaveLength(2)
+    })
+
+    it('creates the first group of columns with maximum height', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const fooColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const bazColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--baz')
+      const totalHeight = fooColumn.element.offsetHeight + barColumn.element.offsetHeight + bazColumn.element.offsetHeight
+      expect(totalHeight).toBe(100)
+    })
+
+    it('creates the first group of columns with maximum width', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const fooColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const bazColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--baz')
+      expect(fooColumn.element.style.maxWidth).toBe('50%')
+      expect(barColumn.element.style.maxWidth).toBe('50%')
+      expect(bazColumn.element.style.maxWidth).toBe('50%')
+    })
+
+    it('creates the second group of columns with ~50% height', () => {
+      const secondGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(1)
+      const fooColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const bazColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--baz')
+      const totalHeight = fooColumn.element.offsetHeight + barColumn.element.offsetHeight + bazColumn.element.offsetHeight
+      expect(totalHeight).toBe(50)
+    })
+
+    it('creates the first group of columns with right height for each', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const fooColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const bazColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--baz')
+      expect(fooColumn.element.offsetHeight).toBe(90)
+      expect(barColumn.element.offsetHeight).toBe(5)
+      expect(bazColumn.element.offsetHeight).toBe(5)
+    })
+
+    it('creates the first group of columns with right height for each', () => {
+      const secondGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(1)
+      const fooColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const bazColumn = secondGroup.find('.stacked-column-chart__groups__item__bars__item--baz')
+      expect(fooColumn.element.offsetHeight).toBe(40)
+      expect(barColumn.element.offsetHeight).toBe(10)
+      expect(bazColumn.element.offsetHeight).toBe(0)
+    })
+
+    it('creates a visible left axis', async () => {
+      const leftAxis = wrapper.find('.stacked-column-chart__left-axis')
+      expect(leftAxis.attributes('style')).not.toBe('display: none;')
+    })
+
+    it('creates a left axis with the same sizes than the component', async () => {
+      const leftAxis = wrapper.find('.stacked-column-chart__left-axis')
+      expect(leftAxis.attributes('width')).toBe('600px')
+      expect(leftAxis.attributes('height')).toBe('500px')
+    })
+
+    it('creates a left axis with 0 as minimum value', async () => {
+      const firstTick = wrapper.find('.stacked-column-chart__left-axis .tick:first-of-type text')
+      expect(firstTick.text()).toBe('0')
+    })
+
+    it('creates a left axis with 100 as minimum value', async () => {
+      const lastTick = wrapper.find('.stacked-column-chart__left-axis .tick:last-of-type text')
+      expect(lastTick.text()).toBe('100')
+    })
+  })
+
+  describe('a stacked-colmuns chart with 3 columns in 3 groups and a max value', () => {
+
+    let wrapper
+
+    beforeEach(async () => {
+
+      const propsData = {
+        labelField: 'label',
+        fixedHeight: 500,
+        maxValue: 200,
+        data: [
+          { label: 'today', foo: 90, bar: 5, baz: 5 },
+          { label: 'tomorrow', foo: 40, bar: 10, baz: 0 }
+        ]
+      }
+
+      const attrs = {
+        style: 'width: 600px'
+      }
+
+      wrapper = mount(StackedColumnChart, { propsData, attachTo: createContainer(), attrs })
+    })
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates 2 columns', async () => {
+      expect(wrapper.findAll('.stacked-column-chart__groups__item')).toHaveLength(2)
+    })
+
+    it('creates the first group of columns with maximum height', () => {
+      const firstGroup = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const fooColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--foo')
+      const barColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--bar')
+      const bazColumn = firstGroup.find('.stacked-column-chart__groups__item__bars__item--baz')
+      const totalHeight = fooColumn.element.offsetHeight + barColumn.element.offsetHeight + bazColumn.element.offsetHeight
+      expect(totalHeight).toBe(50)
+    })
+  })
+
+  describe('a stacked-colmuns chart with 3 columns 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, bar: 5, baz: 5 },
+          { label: 'tomorrow', foo: 40, bar: 10, baz: 0 },
+          { label: 'next week', foo: 0, bar: 20, baz: 0 }
+        ]
+      }
+
+      const attrs = {
+        style: 'width: 600px'
+      }
+
+      wrapper = mount(StackedColumnChart, { propsData, attachTo: createContainer(), attrs })
+    })
+
+
+    it('is a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('creates 3 columns', async () => {
+      expect(wrapper.findAll('.stacked-column-chart__groups__item')).toHaveLength(3)
+    })
+
+    it('creates the first column with no hidden bars', () => {
+      const group = wrapper.findAll('.stacked-column-chart__groups__item').at(0)
+      const hiddenBars = group.findAll('.stacked-column-chart__groups__item__bars__item--hidden')
+      expect(hiddenBars).toHaveLength(0)
+    })
+
+    it('creates the second column with one hidden bar', () => {
+      const group = wrapper.findAll('.stacked-column-chart__groups__item').at(1)
+      const hiddenBars = group.findAll('.stacked-column-chart__groups__item__bars__item--hidden')
+      expect(hiddenBars).toHaveLength(1)
+    })
+
+    it('creates the third column with two hidden bars', () => {
+      const group = wrapper.findAll('.stacked-column-chart__groups__item').at(2)
+      const hiddenBars = group.findAll('.stacked-column-chart__groups__item__bars__item--hidden')
+      expect(hiddenBars).toHaveLength(2)
+    })
+  })
+})

package/tests/unit/i18n.spec.ts

@@ -0,0 +1,19 @@
+import { locale, fallbackLocale, i18n } from '@/i18n'
+import  {I18n} from 'vue-i18n'
+
+describe('i18n.js', () => {
+
+  it('exposes a static method called install', () => {
+
+    expectTypeOf(i18n).toMatchTypeOf<I18n>()
+  })
+
+  it('should use `en` as default locale', () => {
+    expect(locale).toBe('en')
+  })
+
+
+  it('should use `en` as default fallback locale', () => {
+    expect(fallbackLocale).toBe('en')
+  })
+})

package/tests/unit/main.spec.js

@@ -0,0 +1,82 @@
+import Murmur from '@/main'
+import {createApp} from "vue";
+
+describe('main.js', () => {
+  it('exposes a static method called `install`', () => {
+    expect(Murmur.install).toBeDefined()
+  })
+
+  it('exposes a static method called `setLocaleMessage`', () => {
+    expect(Murmur.setLocaleMessage).toBeDefined()
+  })
+
+  it('exposes a static method called `mergeLocaleMessage`', () => {
+    expect(Murmur.mergeLocaleMessage).toBeDefined()
+  })
+
+  it('exposes a static method called `setLocale`', () => {
+    expect(Murmur.setLocale).toBeDefined()
+  })
+
+  it('exposes a static method called `getLocale`', () => {
+    expect(Murmur.getLocale).toBeDefined()
+  })
+
+  it('use plugin to register Murmur components ', () => {
+    const app = createApp()
+    expect(app._context.components.ContentPlaceholder).toBeUndefined()
+    app.use(Murmur)
+    expect(app._context.components.ContentPlaceholder).toBeDefined()
+  })
+
+  it('has a list of components', () => {
+    expect(Murmur.components).toHaveProperty('Brand')
+    expect(Murmur.components).toHaveProperty('ContentPlaceholder')
+    expect(Murmur.components).toHaveProperty('DonateForm')
+    expect(Murmur.components).toHaveProperty('EmbeddableFooter')
+    expect(Murmur.components).toHaveProperty('EmbedForm')
+    expect(Murmur.components).toHaveProperty('FollowUsPopover')
+    expect(Murmur.components).toHaveProperty('Fa')
+    expect(Murmur.components).toHaveProperty('GenericFooter')
+    expect(Murmur.components).toHaveProperty('GenericHeader')
+    expect(Murmur.components).toHaveProperty('ImddbHeader')
+    expect(Murmur.components).toHaveProperty('ResponsiveIframe')
+    expect(Murmur.components).toHaveProperty('SharingOptions')
+    expect(Murmur.components).toHaveProperty('SignUpForm')
+    expect(Murmur.components).toHaveProperty('SlideUpDown')
+  })
+
+  it('has a locale', () => {
+    expect(Murmur.getLocale()).toBe("en")
+  })
+
+  it('can update the locale', () => {
+    Murmur.setLocale('en')
+    expect(Murmur.getLocale()).toBe('en')
+    Murmur.setLocale('fr')
+    expect(Murmur.getLocale()).toBe('fr')
+  })
+
+  it('can define a new locale', () => {
+    Murmur.setLocaleMessage('jp', {
+      hello: 'もしもし'
+    })
+
+    Murmur.setLocale('jp')
+    expect(Murmur.i18n.global.t('hello')).toBe('もしもし')
+  })
+
+  it('can merge an existing locale with new messages', () => {
+    expect(Murmur.getLocale()).toBe('en')
+    Murmur.mergeLocaleMessage('en', {
+      hello: 'world',
+      foo: 'bar'
+    })
+    expect(Murmur.i18n.global.t('hello')).toBe('world')
+    expect(Murmur.i18n.global.t('foo')).toBe('bar')
+  })
+
+  afterEach(() => {
+    Murmur.setLocale('en')
+  })
+})