@icij/murmur-next 4.0.0

package/tests/unit/components/HapticCopy.spec.js

@@ -0,0 +1,123 @@
+import { mount } from '@vue/test-utils'
+import HapticCopy from '@/components/HapticCopy.vue'
+import noop from 'lodash/noop'
+
+describe('HapticCopy.vue', () => {
+
+  const propsData = { text: 'Lorem ipsum', noTooltip: true }
+
+  beforeAll(() => {
+    // Prevent multiple Bootstrap Vue warnings in tests
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterAll(() => {
+   console.warn.mockClear()
+  })
+
+  it('is a Vue instance', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('should generate a button', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    expect(wrapper.find('button').exists()).toBeTruthy()
+  })
+
+  it('shouldn\'t hide the label', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    expect(wrapper.find('.haptic-copy__label').classes('sr-only')).toBeFalsy()
+  })
+
+  it('should hide the label', () => {
+    const wrapper = mount(HapticCopy, {
+      propsData: {
+        ...propsData,
+        hideLabel: true
+      }
+    })
+    expect(wrapper.find('.haptic-copy__label').classes('sr-only')).toBeTruthy()
+  })
+
+  it('should use a custom label', () => {
+    const wrapper = mount(HapticCopy, {
+      propsData: {
+        ...propsData,
+        label: 'Copy in the clipboard'
+      }
+    })
+    expect(wrapper.find('.haptic-copy__label').text()).toBe('Copy in the clipboard')
+  })
+
+  it('should emit an `success` event after copying text', async () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    await wrapper.vm.copy()
+    expect(wrapper.emitted().success).toBeTruthy()
+  })
+
+  it('should emit an `attempt` event before copying text', async () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    await wrapper.vm.copy()
+    expect(wrapper.emitted().attempt).toBeTruthy()
+  })
+
+  it('should not fill the tooltip content with an error', async () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    await wrapper.vm.copy()
+    expect(wrapper.vm.tooltipContent).not.toBe('Unable to copy the text')
+  })
+
+  it('should fill the tooltip content with a success message', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    wrapper.vm.openTooltip()
+    expect(wrapper.vm.tooltipContent).toBe('Copied!')
+  })
+
+  it('should empty tooltip content', async () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    await wrapper.vm.closeTooltip()
+    expect(wrapper.vm.tooltipContent).toBe('')
+  })
+
+  it('should have a method `nextTimeout` which returns a promise', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    const promise = wrapper.vm.nextTimeout(noop, 0)
+    expect(promise.then).toBeDefined()
+  })
+
+  it('should have a method `copy` which returns a promise', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    const promise = wrapper.vm.copy()
+    expect(promise.then).toBeDefined()
+  })
+
+  it('should have a method `openTooltip` which returns a promise', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    const promise = wrapper.vm.openTooltip()
+    expect(promise.then).toBeDefined()
+  })
+
+  it('should have a method `closeTooltip` which returns a promise', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    const promise = wrapper.vm.closeTooltip()
+    expect(promise.then).toBeDefined()
+  })
+
+  it('should change the tooltip content with locale message', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    wrapper.vm.openTooltip('haptic-copy.tooltip.succeed')
+    expect(wrapper.vm.tooltipContent).toBe('Copied!')
+    wrapper.vm.openTooltip('haptic-copy.tooltip.failed')
+    expect(wrapper.vm.tooltipContent).toBe('Unable to copy the text')
+  })
+
+  it('should change the tooltip content with arbitrary message', () => {
+    const wrapper = mount(HapticCopy, { propsData })
+    wrapper.vm.openTooltip('foo')
+    expect(wrapper.vm.tooltipContent).toBe('foo')
+    wrapper.vm.openTooltip('bar')
+    expect(wrapper.vm.tooltipContent).toBe('bar')
+  })
+
+})

package/tests/unit/components/ImddbHeader.spec.js

@@ -0,0 +1,96 @@
+import { mount,shallowMount } from '@vue/test-utils'
+import ImddbHeader from '@/components/ImddbHeader.vue'
+
+describe('ImddbHeader.vue', () => {
+  //const global = {renderStubDefaultSlot: true}
+  it('is a Vue instance', () => {
+    const wrapper = shallowMount(ImddbHeader)
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('renders the header as a `headroom` component', () => {
+    const wrapper = shallowMount(ImddbHeader)
+    expect(wrapper.findComponent('headroom-stub').exists()).toBe(true)
+  })
+
+  it('renders the header as a div', () => {
+    const noHeadroom = true
+    const wrapper = shallowMount(ImddbHeader, {
+      propsData: { noHeadroom }
+    })
+    expect(wrapper.find('#imddb-header').element.tagName).toBe('DIV')
+  })
+
+  it('sets the header position to `fixed` by default', () => {
+    const wrapper = shallowMount(ImddbHeader)
+    expect(wrapper.find('#imddb-header').element.style.position).toBe('fixed')
+  })
+
+  it('sets the header position to `relative`', () => {
+    const position = 'relative'
+    const wrapper = shallowMount(ImddbHeader, {
+      propsData: { position }
+    })
+    expect(wrapper.find('#imddb-header').element.style.position).toBe(position)
+  })
+
+  it('sets the header position to `absolute`', () => {
+    const position = 'absolute'
+    const wrapper = shallowMount(ImddbHeader, {
+      propsData: { position }
+    })
+    expect(wrapper.find('#imddb-header').element.style.position).toBe(position)
+  })
+
+  it('renders home link to the default value', () => {
+    const homeUrl = "http://localhost:3000/"
+    const wrapper = shallowMount(ImddbHeader, {global:{renderStubDefaultSlot: true}})
+    expect(wrapper.find('.imddb-header__brand').element.href).toBe(homeUrl)
+  })
+
+  it('renders home link to https://icij.org/', () => {
+    const homeUrl = 'https://icij.org/'
+    const wrapper = shallowMount(ImddbHeader, {
+      propsData: { homeUrl }, global:{renderStubDefaultSlot: true}
+    })
+    expect(wrapper.find('.imddb-header__brand').element.href).toBe(homeUrl)
+  })
+
+  it('renders home link to https://pirhoo.com/', () => {
+    const homeUrl = 'https://pirhoo.com/'
+    const wrapper = shallowMount(ImddbHeader, {
+      propsData: { homeUrl }, global:{renderStubDefaultSlot: true}
+    })
+    expect(wrapper.find('.imddb-header__brand').element.href).toBe(homeUrl)
+  })
+
+  it('renders the navbar as `collapse` by default', () => {
+    const wrapper = shallowMount(ImddbHeader,{global:{renderStubDefaultSlot: true}})
+    expect(wrapper.find('.navbar-collapse').classes('collapse')).toBeTruthy()
+  })
+
+  it('toggles the navbar', async () => {
+    const wrapper = shallowMount(ImddbHeader, {global:{renderStubDefaultSlot: true}})
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.navbar-collapse').classes('collapse')).toBeTruthy()
+    wrapper.vm.toggleNavbar()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.navbar-collapse').classes('collapse')).toBeFalsy()
+    wrapper.vm.toggleNavbar()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.navbar-collapse').classes('collapse')).toBeTruthy()
+  })
+
+  it('should show on mouseenter then hide popover\'',async () => {
+    const wrapper = mount(ImddbHeader,{global:{renderStubDefaultSlot: true},
+      stubs: { teleport: true, BPopover:true , FollowUsPopover:true}})
+
+    expect(wrapper.vm.showFollowUsPopover).toBe(false)
+    const popovertoggler = wrapper.find("#follow-icij")
+    await popovertoggler.trigger("mouseenter")
+    expect(wrapper.vm.showFollowUsPopover).toBe(true)
+
+    wrapper.vm.closeFollowUsPopover()
+    expect(wrapper.vm.showFollowUsPopover).toBe(false)
+  })
+})

package/tests/unit/components/OrdinalLegend.spec.js

@@ -0,0 +1,120 @@
+import { shallowMount } from '@vue/test-utils'
+import OrdinalLegend from '@/components/OrdinalLegend.vue'
+
+describe('OrdinalLegend.vue', () => {
+  let wrapper
+
+  describe('an horizontal legend', () => {
+    beforeEach(() => {
+      const propsData = {
+        data: [
+          { id: 1, color: '#6e40aa', label: 'Paris, France' },
+          { id: 2, color: '#ff5e63', label: 'Sydney, Australia' },
+          { id: 3, color: '#aff05b', label: 'Washington DC, USA' }
+        ],
+        horizontal: true
+      }
+      wrapper = shallowMount(OrdinalLegend, { propsData })
+    })
+
+    it('should be horizontal', () => {
+      expect(wrapper.classes('ordinal-legend--horizontal')).toBeTruthy()
+    })
+
+    it('should start with Paris', () => {
+      expect(wrapper.findAll('.ordinal-legend__item__label').at(0).text()).toBe('Paris, France')
+    })
+
+    it('should end with DC', () => {
+      expect(wrapper.findAll('.ordinal-legend__item__label').at(2).text()).toBe('Washington DC, USA')
+    })
+
+    it('should create 3 legend items', () => {
+      expect(wrapper.findAll('.ordinal-legend__item')).toHaveLength(3)
+    })
+
+    it('should create a marker with the right color for Paris', () => {
+      const path = wrapper.findAll('.ordinal-legend__item__marker__path').at(0)
+      const { nodeValue: fill } = path.element.getAttributeNode('fill')
+      expect(fill).toBe('#6e40aa')
+    })
+
+    it('should create a marker with the right color for Sydney', () => {
+      const path = wrapper.findAll('.ordinal-legend__item__marker__path').at(1)
+      const { nodeValue: fill } = path.element.getAttributeNode('fill')
+      expect(fill).toBe('#ff5e63')
+    })
+  })
+
+
+  describe('a vertical legend with an highlight', () => {
+    beforeEach(() => {
+      const propsData = {
+        data: [
+          { id: 1, color: '#6e40aa', label: 'Paris, France' },
+          { id: 2, color: '#ff5e63', label: 'Sydney, Australia' },
+          { id: 3, color: '#aff05b', label: 'Washington DC, USA' }
+        ],
+        highlight: 2, 
+        value: 1,
+        horizontal: false
+      }
+      wrapper = shallowMount(OrdinalLegend, { propsData })
+    })
+
+    it('should be not horizontal', () => {
+      expect(wrapper.classes('ordinal-legend--horizontal')).toBeFalsy()
+    })
+
+    it('should create 3 legend items', () => {
+      expect(wrapper.findAll('.ordinal-legend__item')).toHaveLength(3)
+    })
+
+    it('should not highlight the first item', () => {
+      const item = wrapper.findAll('.ordinal-legend__item').at(0)
+      expect(item.classes('ordinal-legend__item--highlighted')).toBeFalsy()
+    })
+
+    it('should highlight the second item', () => {
+      const item = wrapper.findAll('.ordinal-legend__item').at(1)
+      expect(item.classes('ordinal-legend__item--highlighted')).toBeTruthy()
+    })
+
+    it('should highlight the first item', () => {
+      const item = wrapper.findAll('.ordinal-legend__item').at(0)
+      expect(item.classes('ordinal-legend__item--selected')).toBeTruthy()
+    })
+
+    it('should emit an highlight event when mouse over the first item', async () => {
+      const item = wrapper.findAll('.ordinal-legend__item a').at(0)
+      await item.trigger('mouseover')
+      expect(wrapper.emitted('update:highlight')).toBeTruthy()
+      expect(wrapper.emitted('update:highlight')).toHaveLength(1)
+      expect(wrapper.emitted('update:highlight')[0]).toEqual([1])
+    })
+
+    it('should emit an highlight event when mouse over the last item', async () => {
+      const item = wrapper.findAll('.ordinal-legend__item a').at(2)
+      await item.trigger('mouseover')
+      expect(wrapper.emitted('update:highlight')).toBeTruthy()
+      expect(wrapper.emitted('update:highlight')).toHaveLength(1)
+      expect(wrapper.emitted('update:highlight')[0]).toEqual([3])
+    })
+
+    it('should emit an update event when mouse click the first item', async () => {
+      const item = wrapper.findAll('.ordinal-legend__item a').at(0)
+      await item.trigger('click')
+      expect(wrapper.emitted('update')).toBeTruthy()
+      expect(wrapper.emitted('update')).toHaveLength(1)
+      expect(wrapper.emitted('update')[0]).toEqual([1])
+    })
+
+    it('should emit an update event when mouse click the last item', async () => {
+      const item = wrapper.findAll('.ordinal-legend__item a').at(2)
+      await item.trigger('click')
+      expect(wrapper.emitted('update')).toBeTruthy()
+      expect(wrapper.emitted('update')).toHaveLength(1)
+      expect(wrapper.emitted('update')[0]).toEqual([3])
+    })
+  })
+})

package/tests/unit/components/RangePicker.spec.ts

@@ -0,0 +1,87 @@
+import {shallowMount} from '@vue/test-utils'
+
+import RangePicker from '@/components/RangePicker.vue'
+
+describe('RangePicker.vue', () => {
+
+  it('renders without crashing', () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: {
+        range: [0.2, 0.8]
+      }
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('correctly initializes data with props', () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: {
+        range: [0.2, 0.8]
+      }
+    })
+    expect(wrapper.vm.start).toBe(0.2)
+    expect(wrapper.vm.end).toBe(0.8)
+  })
+
+  it('sets the correct class based on the variant prop', async () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: { range: [0.1, 0.9], variant: 'secondary' }
+    })
+
+    expect(wrapper.classes()).toContain('range-picker--secondary')
+  })
+
+  it('sets the rounded class if rounded prop is true', async () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: { range: [0.1, 0.9], rounded: true }
+    })
+
+    expect(wrapper.classes()).toContain('range-picker--rounded')
+  })
+
+  it('sets the hover class if hover prop is true', async () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: { range: [0.1, 0.9], hover: true }
+    })
+
+    expect(wrapper.classes()).toContain('range-picker--hover')
+  })
+
+  it('sets the disabled class if value prop is empty', async () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: { range: [] }
+    })
+
+    expect(wrapper.classes()).toContain('range-picker--disabled')
+  })
+
+  it('hides the bounds if value prop is empty', async () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: { range: [] }
+    })
+
+    expect(wrapper.find('.range-picker__bounds').isVisible()).toBeFalsy()
+  })
+
+  it('does not allow bounds closer than minDistance', async () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: { range: [0.1, 0.11], minDistance: 0.05 }
+    })
+
+    wrapper.vm.dragStartBound(0.06)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.start).not.toBe(0.06)
+  })
+
+  it('snaps value based on snap prop', async () => {
+    const wrapper = shallowMount(RangePicker, {
+      propsData: { range: [0.1, 0.9], snap: 0.05 }
+    })
+
+    wrapper.vm.dragStartBound(0.12)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.start).toBe(0.10)
+  })
+})

package/tests/unit/components/ResponsiveIframe.spec.js

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils'
+import ResponsiveIframe from '@/components/ResponsiveIframe'
+
+describe('ResponsiveIframe', () => {
+
+  const propsData = {
+    url: 'https://projects.icij.org/the-implant-files/graphics/'
+  }
+
+  it('is a Vue instance', () => {
+    const wrapper = shallowMount(ResponsiveIframe, { propsData })
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('creates a root div with a unique id', () => {
+    const first = shallowMount(ResponsiveIframe, { propsData })
+    const second = shallowMount(ResponsiveIframe, { propsData })
+    expect(first.element.id).not.toBe(second.element.id)
+  })
+})

package/tests/unit/components/ScaleLegend.spec.js

@@ -0,0 +1,139 @@
+import { shallowMount } from '@vue/test-utils'
+import { scaleThreshold } from 'd3-scale'
+import ScaleLegend from '@/components/ScaleLegend.vue'
+import { vi } from 'vitest'
+
+describe('ScaleLegend.vue', () => {
+  let wrapper
+  // Common mocks on computed properties
+  const colorScaleContext = vi.fn(() => ({ fillRect: vi.fn() }))
+  const colorScaleBase64 = vi.fn()
+  const computed = { colorScaleBase64, colorScaleContext }
+
+  describe('with a the default scale function', () => {
+
+    beforeEach(() => {
+      const propsData = { min: 0, max: 150 }
+      wrapper = shallowMount(ScaleLegend, { propsData, computed })
+    })
+
+    it('should be a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('should return 0% for no `cursorValue`', () => {
+      expect(wrapper.vm.cursorLeft).toBe('0%')
+    })
+
+    it('should return 0% for 0 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 0 })
+      expect(wrapper.vm.cursorLeft).toBe('0%')
+    })
+
+    it('should return 100% for 150 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 150 })
+      expect(wrapper.vm.cursorLeft).toBe('100%')
+    })
+
+    it('should return have cursor for 150 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 150 })
+      expect(wrapper.vm.hasCursor).toBeTruthy()
+    })
+
+    it('should return set a class for 150 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 150 })
+      expect(wrapper.classes('scale-legend--has-cursor')).toBeTruthy()
+    })
+
+    it('should not have cursor for null as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: null })
+      expect(wrapper.vm.hasCursor).toBeFalsy()
+    })
+
+    it('should return not set a class for null as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: null })
+      expect(wrapper.classes('scale-legend--has-cursor')).toBeFalsy()
+    })
+
+    it('should give around 100 for the width 100', () => {
+      const value = Math.round(wrapper.vm.widthScale(100))
+      expect(value).toBe(100)
+    })
+
+    it('should give around 150 for the width 150', () => {
+      const value = Math.round(wrapper.vm.widthScale(150))
+      expect(value).toBe(150)
+    })
+  })
+
+  describe('with a threshold scale', () => {
+
+    beforeEach(() => {
+      // Create a scale with:
+      // * values from 0 to 10,000 in white
+      // * values from 10,000 to 20,000 in pink
+      // * values from 20,000 to 30,000 in red
+      const colorScale = scaleThreshold()
+        .domain([1e4, 2e4])
+        .range(["white", "pink", "red"])
+      // Create a scale for value between 0 and 30,000
+      const propsData = { min: 0, max: 3e4, width: 150, colorScale }
+      wrapper = shallowMount(ScaleLegend, { propsData, computed })
+    })
+
+    it('should be a Vue instance', () => {
+      expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('should get the correct colors', () => {
+      expect(wrapper.vm.colorScaleFunction(0)).toBe('white')
+      expect(wrapper.vm.colorScaleFunction(1e3)).toBe('white')
+      expect(wrapper.vm.colorScaleFunction(1e4)).toBe('pink')
+      expect(wrapper.vm.colorScaleFunction(1e5)).toBe('red')
+    })
+
+    it('should get white for the x value 0', () => {
+      expect(wrapper.vm.widthScaleColor(0)).toBe('white')
+    })
+
+    it('should get white for the x value 25', () => {
+      expect(wrapper.vm.widthScaleColor(25)).toBe('white')
+    })
+
+    it('should get pink for the x value 99', () => {
+      expect(wrapper.vm.widthScaleColor(99)).toBe('pink')
+    })
+
+    it('should get pink for the x value 75', () => {
+      expect(wrapper.vm.widthScaleColor(75)).toBe('pink')
+    })
+
+    it('should get red for the x value 125', () => {
+      expect(wrapper.vm.widthScaleColor(125)).toBe('red')
+    })
+
+    it('should get red for the x value 150', () => {
+      expect(wrapper.vm.widthScaleColor(150)).toBe('red')
+    })
+
+    it('should return 33% for 10,000 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 1e4 })
+      expect(wrapper.vm.cursorLeft).toBe('33%')
+    })
+
+    it('should return 50% for 15,000 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 15e3 })
+      expect(wrapper.vm.cursorLeft).toBe('50%')
+    })
+
+    it('should return 67% for 20,000 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 2e4 })
+      expect(wrapper.vm.cursorLeft).toBe('67%')
+    })
+
+    it('should return 100% for 30,000 as `cursorValue`', async () => {
+      await wrapper.setProps({ cursorValue: 3e4 })
+      expect(wrapper.vm.cursorLeft).toBe('100%')
+    })
+  })
+})

package/tests/unit/components/SecretInput.spec.js

@@ -0,0 +1,81 @@
+import { mount, shallowMount } from '@vue/test-utils'
+import SecretInput from '@/components/SecretInput.vue'
+
+describe('SecretInput.vue', () => {
+  // Stubs Bootstrap Vue components
+  const stubs = ['b-input-group-prepend', 'b-input-group-append', 'b-input-group', 'b-form-input', 'b-button', 'haptic-copy']
+  const global = {stubs, renderStubDefaultSlot:true}
+  it('should be a Vue instance', () => {
+    const wrapper = shallowMount(SecretInput, { global })
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('changes visibility according to the "visible" prop', async () => {
+    const propsData = { value: 'a secret value' }
+    const wrapper = shallowMount(SecretInput, { global, propsData })
+    expect(wrapper.vm.inputType).toBe("password")
+    await wrapper.setProps({ visible: true })
+    expect(wrapper.vm.inputType).toBe("text")
+
+  })
+
+  it('sets initial visibility according to the "visible" prop', () => {
+    const propsData = { value: 'a secret value', visible: true }
+    const wrapper = shallowMount(SecretInput, { global, propsData })
+    expect(wrapper.vm.inputType).toBe("text")
+  })
+
+  it('emits "input" event when changing visibility', async () => {
+    const propsData = { value: 'a secret value' }
+    const wrapper = mount(SecretInput, { global, propsData })
+    await wrapper.find(".secret-input__toggler").trigger("click")
+    expect(wrapper.emitted("update:visible")).toBeTruthy()
+    expect(wrapper.emitted("update:visible")[0][0]).toBe(true)
+  })
+
+  it('shows an eye icon when input is not visible', () => {
+    const propsData = { value: 'a secret value', visible: false }
+    const wrapper = shallowMount(SecretInput, { global, propsData })
+    expect(wrapper.vm.togglerIcon[1]).toBe('eye')
+  })
+
+  it('shows an eye-slash icon when input is visible', () => {
+    const propsData = { value: 'a secret value', visible: true }
+    const wrapper = shallowMount(SecretInput, { global, propsData })
+    expect(wrapper.vm.togglerIcon[1]).toBe('eye-slash')
+  })
+
+  it('shows the toggler button by default', () => {
+    const wrapper = mount(SecretInput, {global})
+    expect(wrapper.find('.secret-input__toggler').exists()).toBeTruthy()
+  })
+
+  it('hides the toggler button', () => {
+    const propsData = { value: 'a secret value', noToggler: true }
+    const wrapper = shallowMount(SecretInput, { global, propsData })
+    expect(wrapper.find('.secret-input__toggler').exists()).toBeFalsy()
+  })
+
+  it('shows the haptic copy button by default', () => {
+    const wrapper = shallowMount(SecretInput, { global })
+    expect(wrapper.find('.secret-input__copy').exists()).toBeTruthy()
+  })
+
+  it('hides the haptic copy button', () => {
+    const propsData = { value: 'a secret value', noHapticCopy: true }
+    const wrapper = shallowMount(SecretInput, { global, propsData })
+    expect(wrapper.find('.secret-input__copy').exists()).toBeFalsy()
+  })
+
+  it('uses haptic copy button primary variant by default', () => {
+    const wrapper = shallowMount(SecretInput, { global })
+    expect(wrapper.find('.secret-input__copy').classes('btn-primary')).toBeTruthy()
+  })
+
+  it('changes haptic copy button variant', () => {
+    const propsData = { hapticCopyVariant: 'info' }
+    const wrapper = shallowMount(SecretInput, { global, propsData })
+    expect(wrapper.find('.secret-input__copy').classes('btn-primary')).toBeFalsy()
+    expect(wrapper.find('.secret-input__copy').classes('btn-info')).toBeTruthy()
+  })
+})