@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/molecules/TimelineEvent/TimelineEvent.test.ts

@@ -0,0 +1,224 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TimelineEvent from './TimelineEvent.vue'
+
+const baseEvent = {
+  id: 1,
+  happened_at: '2024-06-15T10:30:00.000Z',
+  medium_type: null,
+  url: null,
+  page_title: null,
+  request_reason: null,
+  agenda_item_type: null,
+  source: 'system',
+  direction: 'outbound',
+  description: null,
+}
+
+const mountEvent = (eventOverrides = {}, props = {}) =>
+  mount(TimelineEvent, {
+    props: {
+      event: { ...baseEvent, type: 'contact_created', ...eventOverrides },
+      ...props,
+    },
+    global: {
+      stubs: {
+        NexxtIcon: true,
+      },
+    },
+  })
+
+describe('TimelineEvent', () => {
+  it('renders the formatted date', () => {
+    const wrapper = mountEvent()
+    const dateText = wrapper.find('.extra-small-normal').text()
+    expect(dateText).toContain('om')
+  })
+
+  it('sets data-event-source attribute from direction', () => {
+    const wrapper = mountEvent({ direction: 'inbound' })
+    expect(wrapper.attributes('data-event-source')).toBe('inbound')
+  })
+
+  it('sets data-event-date attribute from happened_at', () => {
+    const wrapper = mountEvent({ happened_at: '2024-06-15T10:30:00.000Z' })
+    expect(wrapper.attributes('data-event-date')).toBe('2024-06-15T10:30:00.000Z')
+  })
+
+  it('sets date-event-type attribute from type', () => {
+    const wrapper = mountEvent({ type: 'page_viewed' })
+    expect(wrapper.attributes('date-event-type')).toBe('page_viewed')
+  })
+
+  it('renders the event label for a known event type', () => {
+    const wrapper = mountEvent({ type: 'contact_created' })
+    expect(wrapper.text()).toContain('Contact aangemaakt')
+  })
+
+  it('renders the event type as label for an unknown event type', () => {
+    const wrapper = mountEvent({ type: 'custom_unknown_type' })
+    expect(wrapper.text()).toContain('custom_unknown_type')
+  })
+
+  it('does not render a link when event.url is null', () => {
+    const wrapper = mountEvent({ url: null })
+    expect(wrapper.find('a').exists()).toBe(false)
+  })
+
+  it('renders a link when event.url is set', () => {
+    const wrapper = mountEvent({ url: 'https://example.com' })
+    const link = wrapper.find('a')
+    expect(link.exists()).toBe(true)
+    expect(link.attributes('href')).toBe('https://example.com')
+    expect(link.attributes('target')).toBe('_blank')
+  })
+
+  it('renders event.description as link text when set', () => {
+    const wrapper = mountEvent({ url: 'https://example.com', description: 'Mijn voorstel' })
+    expect(wrapper.find('a').text()).toContain('Mijn voorstel')
+  })
+
+  it('renders event.url as link text when description is null', () => {
+    const wrapper = mountEvent({ url: 'https://example.com', description: null })
+    expect(wrapper.find('a').text()).toContain('https://example.com')
+  })
+
+  it('renders event.description as plain text when there is no url', () => {
+    const wrapper = mountEvent({ url: null, description: 'Naar Jan de Vries' })
+    expect(wrapper.find('a').exists()).toBe(false)
+    expect(wrapper.text()).toContain('Naar Jan de Vries')
+  })
+
+  it('does not render the url as text when there is no url', () => {
+    const wrapper = mountEvent({ url: null, description: null })
+    expect(wrapper.find('.rounded-xl').text()).toBe('Contact aangemaakt')
+  })
+
+  it('prefers event.label over the label from the config map', () => {
+    const wrapper = mountEvent({
+      type: 'proposal_status_changed',
+      label: 'Status gewijzigd van Gepland naar Verzonden',
+    })
+    expect(wrapper.text()).toContain('Status gewijzigd van Gepland naar Verzonden')
+    expect(wrapper.text()).not.toContain('Status gewijzigd van X')
+  })
+
+  it('still takes icon and color from the config map when only label is overridden', () => {
+    const wrapper = mountEvent({ type: 'proposal_status_changed', label: 'Eigen label' })
+    expect(wrapper.find('.rounded-full').classes()).toContain('bg-purple-500')
+  })
+
+  it('prefers event.color over the color from the config map', () => {
+    const wrapper = mountEvent({ type: 'contact_created', color: 'bg-emerald-500' })
+    const iconWrapper = wrapper.find('.rounded-full')
+    expect(iconWrapper.classes()).toContain('bg-emerald-500')
+    expect(iconWrapper.classes()).not.toContain('bg-pink-500')
+  })
+
+  it('prefers event.icon over the icon from the config map', () => {
+    const wrapper = mount(TimelineEvent, {
+      props: {
+        event: { ...baseEvent, type: 'contact_created', icon: 'star' },
+      },
+    })
+    expect(wrapper.find('i').classes()).toContain('fa-star')
+  })
+
+  it('falls back to the default icon and color for an unknown type without overrides', () => {
+    const wrapper = mount(TimelineEvent, {
+      props: { event: { ...baseEvent, type: 'unknown_type' } },
+    })
+    expect(wrapper.find('.rounded-full').classes()).toContain('bg-gray-500')
+    expect(wrapper.find('i').classes()).toContain('fa-info')
+  })
+
+  it('renders an event that only has type and happened_at', () => {
+    const wrapper = mount(TimelineEvent, {
+      props: {
+        event: { id: 'sent-12', type: 'proposal_sent', happened_at: '2024-06-15T10:30:00.000Z' },
+      },
+    })
+    expect(wrapper.text()).toContain('Voorstel verzonden')
+  })
+
+  it('does not render request_reason when not set', () => {
+    const wrapper = mountEvent({ request_reason: null })
+    expect(wrapper.text()).not.toContain('Reden:')
+  })
+
+  it('renders request_reason when set', () => {
+    const wrapper = mountEvent({ request_reason: 'Interesse in de woning' })
+    expect(wrapper.text()).toContain('Reden: Interesse in de woning')
+  })
+
+  it('aligns outbound events to the left by default (no justify-end)', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    expect(wrapper.classes()).not.toContain('justify-end')
+  })
+
+  it('aligns inbound events to the right when splitView is true', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    expect(wrapper.classes()).toContain('justify-end')
+  })
+
+  it('does not align inbound events to the right when splitView is false', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: false })
+    expect(wrapper.classes()).not.toContain('justify-end')
+  })
+
+  it('reverses icon and content order for inbound events in splitView', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    const innerRow = wrapper.find('.flex.w-full.shrink-0')
+    expect(innerRow.classes()).toContain('flex-row-reverse')
+  })
+
+  it('does not reverse order for outbound events', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    const innerRow = wrapper.find('.flex.w-full.shrink-0')
+    expect(innerRow.classes()).not.toContain('flex-row-reverse')
+  })
+
+  it('applies max-w-lg to content when splitView is true', () => {
+    const wrapper = mountEvent({}, { splitView: true })
+    const content = wrapper.find('.rounded-xl')
+    expect(content.classes()).toContain('max-w-lg')
+  })
+
+  it('does not apply max-w-lg to content when splitView is false', () => {
+    const wrapper = mountEvent({}, { splitView: false })
+    const content = wrapper.find('.rounded-xl')
+    expect(content.classes()).not.toContain('max-w-lg')
+  })
+
+  it('defaults splitView to true', () => {
+    const wrapper = mount(TimelineEvent, {
+      props: {
+        event: { ...baseEvent, type: 'contact_created', direction: 'inbound' },
+      },
+      global: { stubs: { NexxtIcon: true } },
+    })
+    expect(wrapper.classes()).toContain('justify-end')
+  })
+
+  it('applies correct background color class for known event type', () => {
+    const wrapper = mountEvent({ type: 'contact_created' })
+    const iconWrapper = wrapper.find('.rounded-full')
+    expect(iconWrapper.classes()).toContain('bg-pink-500')
+  })
+
+  it('applies default background color for unknown event type', () => {
+    const wrapper = mountEvent({ type: 'unknown_type' })
+    const iconWrapper = wrapper.find('.rounded-full')
+    expect(iconWrapper.classes()).toContain('bg-gray-500')
+  })
+
+  it('aligns date text to the right for inbound events in splitView', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    expect(wrapper.find('.extra-small-normal').classes()).toContain('text-right')
+  })
+
+  it('does not align date text to the right for outbound events', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    expect(wrapper.find('.extra-small-normal').classes()).not.toContain('text-right')
+  })
+})

package/src/components/molecules/TimelineLanes/TimelineLanes.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TimelineLanes from './TimelineLanes.vue'
+
+export default {
+  title: 'Components/Molecules/Timeline Lanes',
+  component: TimelineLanes,
+} satisfies Meta<typeof TimelineLanes>
+
+type Story = StoryObj<typeof TimelineLanes>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const CustomLabels: Story = {
+  args: {
+    leftLabel: 'Nexxtmove',
+    rightLabel: 'Contact',
+  },
+}
+
+export const WithoutTooltips: Story = {
+  args: {
+    leftLabel: 'Nexxtmove',
+    rightLabel: 'Contact',
+    leftTooltip: '',
+    rightTooltip: '',
+  },
+}

package/src/components/molecules/TimelineLanes/TimelineLanes.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TimelineLanes from './TimelineLanes.vue'
+
+const mountLanes = (props = {}) => mount(TimelineLanes, { props })
+
+describe('TimelineLanes', () => {
+  it('defaults to the Outbound and Inbound labels', () => {
+    const wrapper = mountLanes()
+    expect(wrapper.text()).toContain('Outbound')
+    expect(wrapper.text()).toContain('Inbound')
+  })
+
+  it('renders custom labels', () => {
+    const wrapper = mountLanes({ leftLabel: 'Nexxtmove', rightLabel: 'Contact' })
+    expect(wrapper.text()).toContain('Nexxtmove')
+    expect(wrapper.text()).toContain('Contact')
+    expect(wrapper.text()).not.toContain('Outbound')
+  })
+
+  it('renders a tooltip trigger for each lane by default', () => {
+    const wrapper = mountLanes()
+    expect(wrapper.findAll('i.fa-circle-info')).toHaveLength(2)
+  })
+
+  it('hides a tooltip when its text is empty', () => {
+    const wrapper = mountLanes({ leftTooltip: '', rightTooltip: '' })
+    expect(wrapper.findAll('i.fa-circle-info')).toHaveLength(0)
+  })
+})

package/src/components/molecules/Toast/Toast.stories.ts

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import NexxtToast from './Toast.vue'
+
+export default {
+  title: 'Components/Molecules/Toast',
+  component: NexxtToast,
+  decorators: [
+    () => ({
+      template:
+        '<div style="padding: 24px; display: flex; justify-content: center;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof NexxtToast>
+
+type Story = StoryObj<typeof NexxtToast>
+
+const render = (args: Story['args']) => ({
+  components: { NexxtToast },
+  setup() {
+    const visible = ref(true)
+    return { args, visible }
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 80px;">
+      <NexxtToast v-if="visible" v-bind="args" @dismiss="visible = false" />
+      <div v-else style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+        <span style="font-size: 13px; color: #6b7280;">Toast dismissed by parent</span>
+        <button
+          style="font-size: 12px; padding: 4px 12px; border-radius: 6px; border: 1px solid #d1d5db; cursor: pointer; background: white;"
+          @click="visible = true"
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  `,
+})
+
+export const Info: Story = {
+  render,
+  args: {
+    variant: 'info',
+    title: 'Nieuwe update beschikbaar',
+    message: 'Er is een nieuwe versie beschikbaar. Vernieuw de pagina om bij te werken.',
+  },
+}
+
+export const Success: Story = {
+  render,
+  args: {
+    variant: 'success',
+    title: 'Opgeslagen',
+    message: 'Je wijzigingen zijn succesvol opgeslagen.',
+  },
+}
+
+export const Warning: Story = {
+  render,
+  args: {
+    variant: 'warning',
+    title: 'Let op',
+    message: 'Je sessie verloopt over 5 minuten.',
+  },
+}
+
+export const Error: Story = {
+  render,
+  args: {
+    variant: 'error',
+    title: 'Er is iets misgegaan',
+    message: 'De actie kon niet worden voltooid. Probeer het opnieuw.',
+  },
+}
+
+export const TitleOnly: Story = {
+  render,
+  args: {
+    variant: 'success',
+    title: 'Opgeslagen',
+  },
+}
+
+export const MessageOnly: Story = {
+  render,
+  args: {
+    variant: 'info',
+    message: 'Je wijzigingen zijn succesvol opgeslagen.',
+  },
+}
+
+export const NotDismissible: Story = {
+  render,
+  args: {
+    variant: 'warning',
+    title: 'Verplichte melding',
+    message: 'Deze melding kan niet worden gesloten.',
+    dismissible: false,
+  },
+}
+
+export const AutoClose: Story = {
+  render,
+  args: {
+    variant: 'success',
+    title: 'Opgeslagen',
+    message: 'Verdwijnt automatisch na 4 seconden.',
+    autoClose: 4000,
+  },
+}

package/src/components/molecules/Toast/Toast.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NexxtToast from './Toast.vue'
+
+describe('NexxtToast', () => {
+  it('renders title and message', () => {
+    const wrapper = mount(NexxtToast, {
+      props: { title: 'Opgeslagen', message: 'Je wijzigingen zijn opgeslagen.' },
+    })
+    expect(wrapper.text()).toContain('Opgeslagen')
+    expect(wrapper.text()).toContain('Je wijzigingen zijn opgeslagen.')
+  })
+
+  it('renders only title when no message is provided', () => {
+    const wrapper = mount(NexxtToast, { props: { title: 'Alleen titel' } })
+    expect(wrapper.findAll('p')).toHaveLength(1)
+    expect(wrapper.find('p').text()).toBe('Alleen titel')
+  })
+
+  it('renders only message when no title is provided', () => {
+    const wrapper = mount(NexxtToast, { props: { message: 'Alleen bericht' } })
+    expect(wrapper.findAll('p')).toHaveLength(1)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(NexxtToast, {
+      slots: { default: '<span class="custom">Custom content</span>' },
+    })
+    expect(wrapper.find('.custom').text()).toBe('Custom content')
+  })
+
+  it('emits dismiss when close button is clicked', async () => {
+    const wrapper = mount(NexxtToast, { props: { title: 'Test' } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('dismiss')).toHaveLength(1)
+  })
+
+  it('hides close button when dismissible is false', () => {
+    const wrapper = mount(NexxtToast, { props: { title: 'Test', dismissible: false } })
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+
+  it('has role status for non-error variants', () => {
+    const wrapper = mount(NexxtToast, { props: { title: 'Test' } })
+    expect(wrapper.find('[role="status"]').exists()).toBe(true)
+  })
+
+  it('has role alert for error variant', () => {
+    const wrapper = mount(NexxtToast, { props: { variant: 'error', title: 'Test' } })
+    expect(wrapper.find('[role="alert"]').exists()).toBe(true)
+  })
+
+  it.each(['info', 'success', 'warning', 'error'] as const)(
+    'renders %s variant with correct toast class',
+    (variant) => {
+      const wrapper = mount(NexxtToast, { props: { variant, title: 'Test' } })
+      const root = wrapper.find('[role="alert"], [role="status"]')
+      expect(root.classes()).toContain(`toast-${variant}`)
+    },
+  )
+
+  it('shows the SVG timer circle when autoClose is set', () => {
+    const wrapper = mount(NexxtToast, { props: { title: 'Test', autoClose: 3000 } })
+    expect(wrapper.find('svg').exists()).toBe(true)
+    expect(wrapper.find('circle').exists()).toBe(true)
+  })
+
+  it('does not show SVG timer circle without autoClose', () => {
+    const wrapper = mount(NexxtToast, { props: { title: 'Test' } })
+    expect(wrapper.find('svg').exists()).toBe(false)
+  })
+
+  it('sets the correct animation duration on the timer circle', () => {
+    const wrapper = mount(NexxtToast, { props: { title: 'Test', autoClose: 5000 } })
+    const circle = wrapper.find('circle')
+    expect(circle.attributes('style')).toContain('animation-duration: 5000ms')
+  })
+
+  describe('autoClose timer', () => {
+    beforeEach(() => vi.useFakeTimers())
+    afterEach(() => vi.useRealTimers())
+
+    it('emits dismiss after autoClose ms', async () => {
+      const wrapper = mount(NexxtToast, { props: { title: 'Test', autoClose: 3000 } })
+      expect(wrapper.emitted('dismiss')).toBeFalsy()
+      vi.advanceTimersByTime(3000)
+      expect(wrapper.emitted('dismiss')).toHaveLength(1)
+    })
+
+    it('does not emit dismiss when autoClose is 0', async () => {
+      const wrapper = mount(NexxtToast, { props: { title: 'Test', autoClose: 0 } })
+      vi.advanceTimersByTime(10000)
+      expect(wrapper.emitted('dismiss')).toBeFalsy()
+    })
+
+    it('clears the timer on unmount', () => {
+      const wrapper = mount(NexxtToast, { props: { title: 'Test', autoClose: 3000 } })
+      wrapper.unmount()
+      vi.advanceTimersByTime(3000)
+      // No error thrown and no emit after unmount
+    })
+  })
+})