@icij/murmur-next 4.0.0 → 4.0.3

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

@@ -1,157 +0,0 @@
-import {mount, shallowMount} from "@vue/test-utils";
-import AccordionStep from "@/components/AccordionStep.vue";
-import {AccordionKey} from "@/keys";
-
-
-import type {Accordion, AccordionProvide} from "@/types";
-import {Mocked} from "vitest";
-
-let mockAccordion: Mocked<Accordion>
-describe('AccordionStep', () => {
-    // Stubs Bootstrap Vue components
-    const stubs = {'b-card': true, 'b-collapse': true, 'b-button': true}
-    const step = Symbol("Accordion")
-    const steps = [step, Symbol("step2")]
-
-
-    let provide: AccordionProvide
-
-
-    beforeAll(() => {
-        mockAccordion = {
-            step,
-            steps,
-            isActiveStep: vi.fn(),
-            isPreviousStep: vi.fn(),
-            isFirstStep: vi.fn(),
-            isLastStep: vi.fn(),
-            emitAccordionPreviousStepEvent: vi.fn(),
-            emitAccordionNextStepEvent: vi.fn()
-        }
-        provide = {
-            [AccordionKey]: mockAccordion
-        }
-    })
-    beforeEach(() => {
-        mockAccordion.isActiveStep.mockClear()
-        mockAccordion.isPreviousStep.mockClear()
-        mockAccordion.isFirstStep.mockClear()
-        mockAccordion.isLastStep.mockClear()
-        mockAccordion.emitAccordionPreviousStepEvent.mockClear()
-        mockAccordion.emitAccordionNextStepEvent.mockClear()
-    })
-
-    describe('should display a title ', () => {
-        it('using title property', () => {
-            const propsData = {step, title: 'Titre'}
-            const wrapper = shallowMount(AccordionStep, {
-                propsData,
-                global: {provide, stubs, renderStubDefaultSlot: true}
-            })
-            const element = wrapper.find(".accordion-wrapper__content__step__heading")
-            expect(element.text()).toBe('Titre')
-
-        })
-        it('using slot named title', () => {
-            const propsData = {step}
-            const wrapper = shallowMount(AccordionStep, {
-                propsData, global: {provide, renderStubDefaultSlot: true}, slots: {title: '<div>Titre test</div>'}
-            })
-            const element = wrapper.find(".accordion-wrapper__content__step__heading")
-            expect(element.text()).toBe('Titre test')
-
-        })
-    })
-    describe('should display a content ', () => {
-        it('using content property', () => {
-            const propsData = {step, content: 'content to show'}
-            const wrapper = shallowMount(AccordionStep, {
-                propsData,
-                global: {provide, stubs, renderStubDefaultSlot: true}
-            })
-            const element = wrapper.find(".accordion-wrapper__content__step__main")
-            expect(element.text()).toBe('content to show')
-
-        })
-        it('using slot named content', () => {
-            const propsData = {step}
-            const wrapper = shallowMount(AccordionStep, {
-                propsData,
-                global: {provide, stubs, renderStubDefaultSlot: true},
-                slots: {content: '<div>content to show in slot</div>'}
-            })
-            const element = wrapper.find(".accordion-wrapper__content__step__main")
-            expect(element.text()).toBe('content to show in slot')
-        })
-    })
-    describe('display status class', () => {
-        describe('when the step is active', () => {
-
-            it('should have the class --active', async () => {
-                mockAccordion.isActiveStep.mockReturnValueOnce(false)
-                const propsData = {step}
-                let wrapper = mount(AccordionStep,
-                    {propsData, global: {provide, stubs, renderStubDefaultSlot: true}})
-
-                const notActiveElement = wrapper.find('.accordion-wrapper__content__step--active')
-                expect(notActiveElement.exists()).toBeFalsy()
-
-                mockAccordion.isActiveStep.mockReturnValueOnce(true)
-                wrapper = mount(AccordionStep, {propsData, global: {provide, stubs, renderStubDefaultSlot: true}})
-                const activeElement = wrapper.find('.accordion-wrapper__content__step--active')
-                expect(activeElement.exists()).toBeTruthy()
-            })
-            it('the content should be visible', async () => {
-                mockAccordion.isActiveStep.mockReturnValueOnce(false)
-                const propsData = {step}
-                let wrapper = mount(AccordionStep, {propsData, global: {provide, stubs, renderStubDefaultSlot: true}})
-
-                const notActiveElement = wrapper.find('.accordion-wrapper__content__step b-collapse-stub')
-                expect(notActiveElement.attributes().visible).toBe("false")
-
-                mockAccordion.isActiveStep.mockReturnValueOnce(true)
-                wrapper = mount(AccordionStep, {propsData, global: {provide, stubs, renderStubDefaultSlot: true}})
-                const activeElement = wrapper.find('.accordion-wrapper__content__step b-collapse-stub')
-                expect(activeElement.attributes().visible).toBe("true")
-            })
-
-        })
-
-        it('when the step is the previous one', async () => {
-            mockAccordion.isPreviousStep.mockReturnValueOnce(false)
-            const propsData = {step}
-            let wrapper = mount(AccordionStep, {propsData, global: {provide, stubs, renderStubDefaultSlot: true}})
-
-            const notActiveElement = wrapper.find('.accordion-wrapper__content__step--previous')
-            expect(notActiveElement.exists()).toBeFalsy()
-
-            mockAccordion.isPreviousStep.mockReturnValueOnce(true)
-            wrapper = mount(AccordionStep, {propsData, global: {provide, stubs, renderStubDefaultSlot: true}})
-            const activeElement = wrapper.find('.accordion-wrapper__content__step--previous')
-            expect(activeElement.exists()).toBeTruthy()
-        })
-    })
-
-    describe('action buttons', () => {
-        it('displays a back button', async () => {
-            const propsData = {step}
-            const wrapper = shallowMount(AccordionStep, {
-                propsData,
-                global: {provide, stubs, renderStubDefaultSlot: true}
-            })
-            const element = wrapper.find('.accordion-wrapper__content__step__back-button')
-            expect(element.exists()).toBeTruthy()
-            await element.trigger('click')
-            expect(wrapper.emitted()).toHaveProperty('previous-step')
-        })
-
-        it('displays a next button', async () => {
-            const propsData = {step}
-            const wrapper = mount(AccordionStep, {propsData, global: {provide, stubs, renderStubDefaultSlot: true}})
-            const element = wrapper.find('.accordion-wrapper__content__step__continue-button')
-            expect(element.exists()).toBeTruthy()
-            await element.trigger('click')
-            expect(wrapper.emitted()).toHaveProperty('next-step')
-        })
-    })
-})

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

@@ -1,57 +0,0 @@
-import { mount, shallowMount } from "@vue/test-utils";
-
-import type { Step } from "@/types";
-import AccordionWrapper from "@/components/AccordionWrapper.vue";
-describe('AccordionStep', () => {
-    // Stubs Bootstrap Vue components
-    const step1: Step = "step1"
-    const step2: Step = Symbol("step2")
-    const step3: Step = Symbol("step3")
-
-    const steps: Step[] = [step1, step2, step3]
-    describe('should update the current step ', () => {
-
-        it('has step2 has current step', () => {
-            const propsData = { step: step2, steps }
-            const wrapper = shallowMount(AccordionWrapper, { propsData })
-            expect(wrapper.exists()).toBeTruthy()
-            expect(wrapper.vm.isActiveStep(step2)).toBe(true)
-
-        })
-        it('has step1 has first step', () => {
-            const propsData = { step: step1, steps }
-            const wrapper = shallowMount(AccordionWrapper , { propsData })
-            expect(wrapper.vm.isFirstStep(step1)).toBe(true)
-        })
-
-        it('has step3 has last step', () => {
-            const propsData = { step: step3, steps }
-            const wrapper = shallowMount(AccordionWrapper, { propsData })
-            expect(wrapper.vm.isLastStep(step3)).toBe(true)
-        })
-        it('changes from step1 to step2', async () => {
-            const propsData = { step: step1, steps }
-            const wrapper = shallowMount(AccordionWrapper, { propsData })
-            expect(wrapper.vm.isActiveStep(step1)).toBe(true)
-            wrapper.vm.emitAccordionNextStepEvent()
-            expect(wrapper.emitted()).toHaveProperty('step-change')
-            const actual = wrapper.emitted('step-change')?.[0][0]
-            expect(actual).toEqual(step2)
-        })
-        it('changes from step2 to step1', async () => {
-            const propsData = { step: step2, steps }
-            const wrapper = mount(AccordionWrapper, { propsData })
-            expect(wrapper.vm.isActiveStep(step2)).toBe(true)
-            wrapper.vm.emitAccordionPreviousStepEvent()
-            expect(wrapper.emitted()).toHaveProperty('step-change')
-            const actual = wrapper.emitted('step-change')?.[0][0]
-            expect(actual).toEqual(step1)
-            await wrapper.setProps({ step: step1 })
-            wrapper.vm.emitAccordionPreviousStepEvent()
-            const actual2 = wrapper.emitted('step-change')?.[1][0]
-            expect(actual2).toEqual(step1)
-        })
-
-    })
-
-})

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

@@ -1,30 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import ActiveTextTruncate from '@/components/ActiveTextTruncate.vue'
-
-// Mock HTML element offset so the size of the wrapper can be calculated
-// dynamically using JSDOM and tests
-Object.defineProperties(window.HTMLElement.prototype, {
-  offsetWidth: {
-    get () { return parseFloat(this.style.width) || 0 }
-  }
-})
-
-describe('ActiveTextTruncate.vue', () => {
-
-  it('should be a Vue instance', () => {
-    const wrapper = shallowMount(ActiveTextTruncate)
-    expect(wrapper.vm).toBeTruthy()
-  })
-
-  it('should display text in the default slot', () => {
-    const slots = { default: ['Lorem ipsum dolor sit amet.'] }
-    const wrapper = shallowMount(ActiveTextTruncate, { slots })
-    expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet.')
-  })
-
-  it('shoud wrap text', () => {
-    const slots = { default: ['Lorem ipsum dolor sit amet.'] }
-    const wrapper = shallowMount(ActiveTextTruncate, { slots })
-    expect(wrapper.find('.active-text-truncate__wrapper__text').exists()).toBeTruthy()
-  })
-})

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

@@ -1,124 +0,0 @@
-import MutationObserver from 'mutationobserver-shim'
-import { mount,flushPromises } from '@vue/test-utils'
-import AdvancedLinkForm from '@/components/AdvancedLinkForm.vue'
-
-describe('AdvancedLinkForm.vue', () => {
-  const createContainer = (tag = 'div') => {
-    const container = document.createElement(tag)
-    document.body.appendChild(container)
-    return container
-  }
-  const global = {stubs: {HapticCopy: true}}
-  it('should be a Vue instance', () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    expect(wrapper.vm).toBeTruthy()
-  })
-
-  it('should create 4 nav items (tabs) by default', async () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.nav-item').length).toBe(4)
-  })
-
-  it('should create 4 pans by default, only one active', async () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.tab-pane').length).toBe(4)
-    expect(wrapper.findAll('.tab-pane.active').length).toBe(1)
-  })
-
-  it('should create a raw link input, active by default', async () => {
-    const propsData = { link: 'https://www.icij.org', title: 'A Great Website' }
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.tab-pane.active .advanced-link-form__raw__input').exists()).toBeTruthy()
-    expect(wrapper.find('.advanced-link-form__raw__input').element._value).toBe(propsData.link)
-  })
-
-  it('should create switch between form using `modelValue` property', async () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.tab-pane.active .advanced-link-form__raw').exists()).toBeTruthy()
-    await wrapper.setProps({modelValue: 1})
-    await flushPromises()
-    expect(wrapper.find('.tab-pane.active .advanced-link-form__rich').exists()).toBeTruthy()
-    await wrapper.setProps({modelValue: 2})
-    await flushPromises()
-    expect(wrapper.find('.tab-pane.active .advanced-link-form__markdown').exists()).toBeTruthy()
-  })
-
-  it('should create only 3 forms, markdown active by default ', async () => {
-    const propsData = { forms: ['raw', 'markdown', 'html'], modelValue: 1 }
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    await flushPromises()
-    expect(wrapper.findAll('.tab-pane').length).toBe(3)
-    expect(wrapper.find('.tab-pane.active .advanced-link-form__markdown').exists()).toBeTruthy()
-  })
-
-  it('should not use card by default', async () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.classes()).not.toContain('advanced-link-form--card')
-    expect(wrapper.find('.nav').classes()).not.toContain('card-header-tabs')
-    expect(wrapper.find('.tab-pane.active').classes()).not.toContain('card-body')
-  })
-
-  it('should use card when property is set', async () => {
-    const propsData = { card: true }
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.classes()).toContain('advanced-link-form--card')
-    expect(wrapper.find('.nav').classes()).toContain('card-header-tabs')
-    expect(wrapper.find('.tab-pane.active').classes()).toContain('card-body')
-  })
-
-  it('should not use pills by default', () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    expect(wrapper.classes()).not.toContain('advanced-link-form--pills')
-    expect(wrapper.find('.nav').classes()).not.toContain('nav-pills')
-  })
-
-  it('should use pills when property is set', () => {
-    const propsData = { pills: true }
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    expect(wrapper.classes()).toContain('advanced-link-form--pills')
-    expect(wrapper.find('.nav').classes()).toContain('nav-pills')
-  })
-
-  it('should not use small layout by default', () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    expect(wrapper.classes()).not.toContain('advanced-link-form--small')
-  })
-
-  it('should use small layout when property is set', () => {
-    const propsData = { small: true }
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    expect(wrapper.classes()).toContain('advanced-link-form--small')
-  })
-
-  it('should not use vertical layout by default', () => {
-    const wrapper = mount(AdvancedLinkForm, { global })
-    expect(wrapper.classes()).not.toContain('advanced-link-form--vertical')
-  })
-
-  it('should use vertical layout when property is set', () => {
-    const propsData = { vertical: true }
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    expect(wrapper.classes()).toContain('advanced-link-form--vertical')
-  })
-
-  it('should use the title in markdown input', async () => {
-    const propsData = { link: 'https://www.icij.org', title: 'A Great Website' }
-    const markdown = `[${propsData.title}](${propsData.link})`
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.advanced-link-form__markdown__input').element.value).toBe(markdown)
-  })
-
-  it('should use the title in rich input', () => {
-    const propsData = { link: 'https://www.icij.org', title: 'A Great Website' }
-    const wrapper = mount(AdvancedLinkForm, { propsData, global })
-    expect(wrapper.find('.advanced-link-form__rich__input').text()).toBe(propsData.title)
-    expect(wrapper.find('.advanced-link-form__rich__input').attributes('href')).toBe(propsData.link)
-  })
-})

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

@@ -1,50 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import Brand from '@/components/Brand.vue'
-
-describe('Brand.vue', () => {
-
-  it('should be a Vue instance', () => {
-    const wrapper = shallowMount(Brand)
-    expect(wrapper.vm).toBeTruthy()
-  })
-
-  it('should generate a SVG', () => {
-    const wrapper = shallowMount(Brand)
-    expect(wrapper.find('svg').exists()).toBeTruthy()
-  })
-
-  it('should change logo color to red', () => {
-    const color = "red"
-    const propsData = { color }
-    const wrapper = shallowMount(Brand, { propsData })
-    expect(wrapper.element.style.color).toBe(color)
-  })
-
-  it('should change logo color to blue', () => {
-    const color = "blue"
-    const propsData = { color }
-    const wrapper = shallowMount(Brand, { propsData })
-    expect(wrapper.element.style.color).toBe(color)
-  })
-
-  it('should change logo color to #A10207', () => {
-    const color = "rgb(161, 2, 7)"
-    const propsData = { color }
-    const wrapper = shallowMount(Brand, { propsData })
-    expect(wrapper.element.style.color).toBe(color)
-  })
-
-  it('should change logo background to red', () => {
-    const background = "red"
-    const propsData = { background }
-    const wrapper = shallowMount(Brand, { propsData })
-    expect(wrapper.element.style.background).toBe(background)
-  })
-
-  it('should change logo background to rgb(161, 2, 7)', () => {
-    const background = "rgb(161, 2, 7)"
-    const propsData = { background }
-    const wrapper = shallowMount(Brand, { propsData })
-    expect(wrapper.element.style.background).toBe(background)
-  })
-})

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

@@ -1,29 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import ContentPlaceholder from '@/components/ContentPlaceholder.vue'
-
-describe('ContentPlaceholder.vue', () => {
-
-  it('is a Vue instance', () => {
-    const wrapper = shallowMount(ContentPlaceholder)
-    expect(wrapper.vm).toBeTruthy()
-  })
-
-  it('renders props.rows when passed', () => {
-    const rows = [
-      {
-        height: '1em',
-        boxes: [ [0, 10], [0, 20] ]
-      },
-      {
-        height: '1em',
-        boxes: [ [0, 10] ]
-      }
-    ]
-
-    const wrapper = shallowMount(ContentPlaceholder, {
-      propsData: { rows }
-    })
-
-    expect(wrapper.findAll('.content-placeholder__wrapper__row').length).toBe(2)
-  })
-})

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

@@ -1,72 +0,0 @@
-import { mount } from '@vue/test-utils'
-import CustomPagination from '@/components/CustomPagination.vue'
-
-describe('CustomPagination.vue', () => {
-  it('is a Vue instance', () => {
-    const wrapper = mount(CustomPagination)
-    expect(wrapper.vm).toBeTruthy()
-  })
-
-  it('renders the pagination component', () => {
-    const wrapper = mount(CustomPagination)
-    expect(wrapper.find('.custom-pagination').exists()).toEqual(true)
-  })
-
-  it('expects totalRows, perPage, modelValue as props', () => {
-    const propsData = { totalRows: 200, perPage: 20, modelValue: 2 }
-    const wrapper = mount(CustomPagination, { propsData })
-    expect(wrapper.vm.totalRows).toBe(200)
-    expect(wrapper.vm.perPage).toBe(20)
-    expect(wrapper.vm.modelValue).toBe(2)
-  })
-
-  it('accepts pills as a prop to change pagination styling', () => {
-    const propsData = { pills: true }
-    const wrapper = mount(CustomPagination, { propsData })
-    expect(wrapper.vm.pills).toBeTruthy()
-  })
-
-  it('calculates numberOfPages based on the totalRows and perPage prop values', () => {
-    const propsData = { totalRows: 200, perPage: 20 }
-    const wrapper = mount(CustomPagination, { propsData })
-    expect(wrapper.vm.numberOfPages).toBe(10)
-  })
-
-  it('emits an event on form submit with the currentPageInput', async () => {
-    const propsData = { totalRows: 200, perPage: 20, }
-    const wrapper = mount(CustomPagination, { propsData })
-    const input = wrapper.find('.form-control')
-    input.element.value = 3
-    await input.trigger('input')
-    wrapper.vm.customPaginationForm.dispatchEvent(new Event("submit"))
-
-    expect(wrapper.emitted("update:modelValue")[0]).toContain(3)
-  })
-
-  it('does not emit an event if the currentPageInput is invalid', async () => {
-    const propsData = { totalRows: 200, perPage: 20, }
-    const wrapper = mount(CustomPagination, { propsData })
-    expect(wrapper.vm.currentPageInput).toBe('')
-    await wrapper.vm.applyJumpFormPage()
-    expect(wrapper.emitted()).toMatchObject({})
-  })
-
-  it('sets errors if the currentPageInput is invalid', async () => {
-    const propsData = { totalRows: 200, perPage: 20, }
-    const wrapper = mount(CustomPagination, { propsData })
-    expect(wrapper.vm.currentPageInput).toBe('')
-    await wrapper.vm.applyJumpFormPage()
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.errors.length).toBe(1)
-  })
-
-  it('renders an element containing the errors if the currentPageInput is invalid', async () => {
-    const propsData = { totalRows: 200, perPage: 20, }
-    const wrapper = mount(CustomPagination, { propsData })
-    expect(wrapper.vm.currentPageInput).toBe('')
-    await wrapper.vm.applyJumpFormPage()
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.find('#invalid-number-error').exists()).toEqual(true)
-  })
-})