@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/organisms/Table/Table.test.ts

@@ -0,0 +1,320 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Table from './Table.vue'
+
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email' },
+]
+
+const rows = [
+  { name: 'Alice', email: 'alice@example.com' },
+  { name: 'Bob', email: 'bob@example.com' },
+  { name: 'Carol', email: 'carol@example.com' },
+]
+
+describe('Table', () => {
+  describe('rendering', () => {
+    it('renders column headers', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      expect(wrapper.text()).toContain('Name')
+      expect(wrapper.text()).toContain('Email')
+    })
+
+    it('renders row data', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      expect(wrapper.text()).toContain('Alice')
+      expect(wrapper.text()).toContain('bob@example.com')
+    })
+
+    it('renders empty slot when rows is empty', () => {
+      const wrapper = mount(Table, { props: { columns, rows: [] } })
+      expect(wrapper.text()).toContain('Geen data beschikbaar')
+    })
+
+    it('renders custom empty slot content', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows: [] },
+        slots: { empty: 'Nothing here' },
+      })
+      expect(wrapper.text()).toContain('Nothing here')
+    })
+
+    it('renders cell slot content', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows },
+        slots: { 'cell-name': '<strong>custom</strong>' },
+      })
+      expect(wrapper.html()).toContain('<strong>custom</strong>')
+    })
+  })
+
+  describe('sorting', () => {
+    it('renders sort icon on sortable columns', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const headers = wrapper.findAll('[role="columnheader"]')
+      const nameHeader = headers[0]
+      expect(nameHeader.find('i').exists()).toBe(true)
+    })
+
+    it('does not render sort icon on non-sortable columns', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const headers = wrapper.findAll('[role="columnheader"]')
+      const emailHeader = headers[1]
+      expect(emailHeader.find('i').exists()).toBe(false)
+    })
+
+    it('emits update:sortKey when clicking a sortable header', async () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      await nameHeader.trigger('click')
+      expect(wrapper.emitted('update:sortKey')).toBeTruthy()
+      expect(wrapper.emitted('update:sortKey')![0]).toEqual(['name'])
+    })
+
+    it('emits desc direction when clicking an already sorted column', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, sortKey: 'name', sortDirection: 'asc' },
+      })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      await nameHeader.trigger('click')
+      expect(wrapper.emitted('update:sortDirection')![0]).toEqual(['desc'])
+    })
+
+    it('does not emit sort when clicking a non-sortable header', async () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const emailHeader = wrapper.findAll('[role="columnheader"]')[1]
+      await emailHeader.trigger('click')
+      expect(wrapper.emitted('update:sortKey')).toBeFalsy()
+    })
+
+    it('sets aria-sort to ascending on the active sort column', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, sortKey: 'name', sortDirection: 'asc' },
+      })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      expect(nameHeader.attributes('aria-sort')).toBe('ascending')
+    })
+
+    it('sets aria-sort to descending on the active sort column', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, sortKey: 'name', sortDirection: 'desc' },
+      })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      expect(nameHeader.attributes('aria-sort')).toBe('descending')
+    })
+
+    it('sets aria-sort to none on an inactive sortable column', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const nameHeader = wrapper.findAll('[role="columnheader"]')[0]
+      expect(nameHeader.attributes('aria-sort')).toBe('none')
+    })
+  })
+
+  describe('selection', () => {
+    it('does not render checkboxes when selectable is false', () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+    })
+
+    it('renders a checkbox per row and one in the header when selectable', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true },
+      })
+      const checkboxes = wrapper.findAll('input[type="checkbox"]')
+      expect(checkboxes).toHaveLength(rows.length + 1)
+    })
+
+    it('emits update:modelValue with all rows when select-all is clicked', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true },
+      })
+      const headerCheckbox = wrapper.find('input[type="checkbox"]')
+      await headerCheckbox.setValue(true)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([rows])
+    })
+
+    it('emits update:modelValue with empty array when deselecting all', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [...rows] },
+      })
+      const headerCheckbox = wrapper.find('input[type="checkbox"]')
+      await headerCheckbox.setValue(false)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[]])
+    })
+
+    it('emits update:modelValue with the row when a row checkbox is changed', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true },
+      })
+      const rowCheckboxes = wrapper.findAll('input[type="checkbox"]').slice(1)
+      await rowCheckboxes[0].setValue(true)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[rows[0]]])
+    })
+
+    it('removes row from selection when an already-selected row checkbox is changed', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [rows[0], rows[1]] },
+      })
+      const rowCheckboxes = wrapper.findAll('input[type="checkbox"]').slice(1)
+      await rowCheckboxes[0].setValue(false)
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[rows[1]]])
+    })
+
+    describe('single selection', () => {
+      it('does not render select-all checkbox in single mode', () => {
+        const wrapper = mount(Table, {
+          props: { columns, rows, selectable: true, selectionMode: 'single' },
+        })
+        const checkboxes = wrapper.findAll('input[type="checkbox"]')
+        expect(checkboxes).toHaveLength(rows.length)
+      })
+
+      it('replaces selection when a different row is selected in single mode', async () => {
+        const wrapper = mount(Table, {
+          props: {
+            columns,
+            rows,
+            selectable: true,
+            selectionMode: 'single',
+            modelValue: [rows[0]],
+          },
+        })
+        const rowCheckboxes = wrapper.findAll('input[type="checkbox"]')
+        await rowCheckboxes[1].setValue(true)
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual([[rows[1]]])
+      })
+
+      it('unselects row when clicking the checkbox of a selected row in single mode', async () => {
+        const wrapper = mount(Table, {
+          props: {
+            columns,
+            rows,
+            selectable: true,
+            selectionMode: 'single',
+            modelValue: [rows[0]],
+          },
+        })
+        const rowCheckboxes = wrapper.findAll('input[type="checkbox"]')
+        await rowCheckboxes[0].setValue(false)
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual([[]])
+      })
+    })
+  })
+
+  describe('row click', () => {
+    it('emits row-click with the row data when clicking a row', async () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[0].trigger('click')
+      expect(wrapper.emitted('row-click')).toBeTruthy()
+      expect(wrapper.emitted('row-click')![0]).toEqual([rows[0]])
+    })
+
+    it('does not toggle selection when clicking a row directly', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+      })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[0].trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('does not emit row-click or selection when clicking a button inside a row', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+        slots: { 'cell-name': '<button>action</button>' },
+      })
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.emitted('row-click')).toBeFalsy()
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('does not emit row-click or selection when clicking a link inside a row', async () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, selectable: true, modelValue: [] },
+        slots: { 'cell-name': '<a href="#">link</a>' },
+      })
+      await wrapper.find('a').trigger('click')
+      expect(wrapper.emitted('row-click')).toBeFalsy()
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('emits row-click but not update:modelValue when selectable is false', async () => {
+      const wrapper = mount(Table, { props: { columns, rows } })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[0].trigger('click')
+      expect(wrapper.emitted('row-click')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    describe('selectOnRowClick', () => {
+      it('toggles selection when clicking a row if selectOnRowClick is true', async () => {
+        const wrapper = mount(Table, {
+          props: {
+            columns,
+            rows,
+            selectable: true,
+            selectOnRowClick: true,
+            modelValue: [],
+          },
+        })
+        const dataRows = wrapper.findAll('[role="row"]').slice(1)
+        await dataRows[0].trigger('click')
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual([[rows[0]]])
+        expect(wrapper.emitted('row-click')).toBeFalsy()
+      })
+
+      it('adds cursor-pointer class when selectOnRowClick is enabled', () => {
+        const wrapper = mount(Table, {
+          props: {
+            columns,
+            rows,
+            selectable: true,
+            selectOnRowClick: true,
+          },
+        })
+        const dataRows = wrapper.findAll('[role="row"]').slice(1)
+        expect(dataRows[0].classes()).toContain('cursor-pointer')
+      })
+    })
+  })
+
+  describe('loading', () => {
+    it('does not render the loading overlay when loading is false', () => {
+      const wrapper = mount(Table, { props: { columns, rows, loading: false } })
+      expect(wrapper.find('[data-testid="loading-overlay"]').exists()).toBe(false)
+    })
+
+    it('renders the loading overlay when loading is true', () => {
+      const wrapper = mount(Table, { props: { columns, rows, loading: true } })
+      expect(wrapper.find('[data-testid="loading-overlay"]').exists()).toBe(true)
+    })
+
+    it('renders custom loading slot content', () => {
+      const wrapper = mount(Table, {
+        props: { columns, rows, loading: true },
+        slots: { loading: '<span>custom loader</span>' },
+      })
+      expect(wrapper.text()).toContain('custom loader')
+    })
+  })
+
+  describe('keyboard navigation', () => {
+    it('moves focus to next row on ArrowDown', async () => {
+      const wrapper = mount(Table, { props: { columns, rows }, attachTo: document.body })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[0].trigger('keydown', { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(dataRows[1].element)
+      wrapper.unmount()
+    })
+
+    it('moves focus to previous row on ArrowUp', async () => {
+      const wrapper = mount(Table, { props: { columns, rows }, attachTo: document.body })
+      const dataRows = wrapper.findAll('[role="row"]').slice(1)
+      await dataRows[1].trigger('keydown', { key: 'ArrowUp' })
+      expect(document.activeElement).toBe(dataRows[0].element)
+      wrapper.unmount()
+    })
+  })
+})

package/src/components/organisms/TimelinePhaseblock/TimelinePhaseblock.stories.ts

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TimelinePhaseblock from './TimelinePhaseblock.vue'
+import type { TimelinePhase } from '../../molecules/TimelineEvent/TimelineTypes'
+
+export default {
+  title: 'Components/Organisms/Timeline Phaseblock',
+  component: TimelinePhaseblock,
+} satisfies Meta<typeof TimelinePhaseblock>
+
+type Story = StoryObj<typeof TimelinePhaseblock>
+
+const makePhase = (
+  value: number,
+  entered_at: string | null = '2024-06-01T09:00:00.000Z',
+  exited_at: string | null = '2024-07-01T09:00:00.000Z',
+  events: TimelinePhase['events'] = [],
+): TimelinePhase => ({
+  phase: { value },
+  entered_at,
+  exited_at,
+  events,
+})
+
+const sampleEvent = {
+  id: 1,
+  type: 'contact_created',
+  happened_at: '2024-06-10T10:30:00.000Z',
+  medium_type: null,
+  url: null,
+  page_title: null,
+  request_reason: null,
+  agenda_item_type: null,
+  source: 'system',
+  direction: 'outbound',
+  description: null,
+}
+
+// Single phase at the end of the timeline (no separator shown)
+export const SinglePhase: Story = {
+  args: {
+    phase: makePhase(1),
+    index: 0,
+    phases: [makePhase(1)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// First phase (index 0) in split view — shows the Outbound/Inbound header
+export const FirstPhaseWithHeader: Story = {
+  args: {
+    phase: makePhase(4),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase separator visible — phase progressed upward (arrow up)
+export const PhaseProgressedUp: Story = {
+  args: {
+    phase: makePhase(4),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase separator visible — phase regressed downward (arrow down)
+export const PhaseRegressedDown: Story = {
+  args: {
+    phase: makePhase(2),
+    index: 0,
+    phases: [makePhase(2), makePhase(4)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Last item in a multi-phase list — no separator shown
+export const LastInList: Story = {
+  args: {
+    phase: makePhase(1),
+    index: 1,
+    phases: [makePhase(4), makePhase(1)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// Non-split view — with phase separator
+export const NonSplitView: Story = {
+  args: {
+    phase: makePhase(3),
+    index: 0,
+    phases: [makePhase(3), makePhase(1)],
+    isSplitView: false,
+    isLast: false,
+  },
+}
+
+// Non-split view — single/last phase (no separator)
+export const NonSplitViewLast: Story = {
+  args: {
+    phase: makePhase(3),
+    index: 0,
+    phases: [makePhase(3)],
+    isSplitView: false,
+    isLast: true,
+  },
+}
+
+// Non-split view — with events
+export const NonSplitViewWithEvents: Story = {
+  args: {
+    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
+      sampleEvent,
+      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
+    ]),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: false,
+    isLast: false,
+  },
+}
+
+// Phase with events
+export const WithEvents: Story = {
+  args: {
+    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
+      sampleEvent,
+      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
+      {
+        ...sampleEvent,
+        id: 3,
+        type: 'whatsapp_message_received',
+        direction: 'inbound',
+        happened_at: '2024-06-15T11:00:00.000Z',
+      },
+    ]),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// All phases shown together (newest first)
+export const FullTimeline: Story = {
+  args: {
+    phase: makePhase(5, '2024-08-01T09:00:00.000Z', null, [
+      { ...sampleEvent, id: 4, type: 'proposal_accepted', happened_at: '2024-08-05T10:00:00.000Z' },
+    ]),
+    index: 0,
+    phases: [
+      makePhase(5, '2024-08-01T09:00:00.000Z', null),
+      makePhase(4, '2024-06-01T09:00:00.000Z', '2024-08-01T09:00:00.000Z'),
+      makePhase(1, '2024-01-01T09:00:00.000Z', '2024-06-01T09:00:00.000Z'),
+    ],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase with no entered_at or exited_at dates
+export const NoDates: Story = {
+  args: {
+    phase: makePhase(2, null, null),
+    index: 0,
+    phases: [makePhase(2, null, null), makePhase(1, null, null)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Inactive phase (value 0)
+export const InactivePhase: Story = {
+  args: {
+    phase: makePhase(0),
+    index: 0,
+    phases: [makePhase(0)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// Wonen phase (value 6 — highest)
+export const WonenPhase: Story = {
+  args: {
+    phase: makePhase(6),
+    index: 0,
+    phases: [makePhase(6), makePhase(5)],
+    isSplitView: true,
+    isLast: false,
+  },
+}