@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,191 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import NexxtTextarea from './Textarea.vue'
+
+const mountTextarea = (props: Record<string, unknown> = {}) => mount(NexxtTextarea, { props })
+
+/**
+ * jsdom has no layout engine, so `scrollHeight` is always 0 and `lineHeight`
+ * resolves to `normal`. Autosize is measured against the DOM, so the DOM has to
+ * be told what to report; stubbing these two is what makes the behaviour
+ * observable at all rather than silently passing on zeroes.
+ */
+const stubMetrics = (
+  el: HTMLTextAreaElement,
+  scrollHeight: number,
+  { lineHeight = 20, padding = 0, border = 0 } = {},
+) => {
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, value: scrollHeight })
+  vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+    lineHeight: `${lineHeight}px`,
+    paddingTop: `${padding / 2}px`,
+    paddingBottom: `${padding / 2}px`,
+    borderTopWidth: `${border / 2}px`,
+    borderBottomWidth: `${border / 2}px`,
+  } as CSSStyleDeclaration)
+}
+
+beforeEach(() => vi.restoreAllMocks())
+
+describe('NexxtTextarea labelling', () => {
+  it('points the label at the textarea it labels', () => {
+    const wrapper = mountTextarea({ label: 'Toelichting' })
+    expect(wrapper.find('label').attributes('for')).toBe(wrapper.find('textarea').attributes('id'))
+  })
+
+  it('gives each instance its own id, so two on a page do not collide', () => {
+    const a = mountTextarea({ label: 'A' })
+    const b = mountTextarea({ label: 'B' })
+    expect(a.find('textarea').attributes('id')).not.toBe(b.find('textarea').attributes('id'))
+  })
+
+  it('renders no label element when no label is given', () => {
+    expect(mountTextarea().find('label').exists()).toBe(false)
+  })
+
+  it('marks a required field on the label', () => {
+    expect(mountTextarea({ label: 'A', required: true }).find('label').text()).toContain('*')
+  })
+})
+
+describe('NexxtTextarea error state', () => {
+  it('shows the message only while error is set', () => {
+    expect(mountTextarea({ errorMessage: 'Verplicht' }).text()).not.toContain('Verplicht')
+    expect(mountTextarea({ error: true, errorMessage: 'Verplicht' }).text()).toContain('Verplicht')
+  })
+
+  it('changes the border on the control, not on the wrapper', () => {
+    const normal = mountTextarea()
+    const failing = mountTextarea({ error: true })
+
+    // Which element carries the state is the part worth pinning: styling the
+    // wrapper instead would look identical in a screenshot and be wrong.
+    expect(failing.find('textarea').classes()).not.toEqual(normal.find('textarea').classes())
+    expect(failing.find('div').classes()).toEqual(normal.find('div').classes())
+  })
+})
+
+describe('NexxtTextarea value', () => {
+  it('emits the typed value', async () => {
+    const wrapper = mountTextarea()
+    await wrapper.find('textarea').setValue('hallo')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['hallo'])
+  })
+
+  it('renders a null value as an empty field, not as the word null', () => {
+    // A nullable database column is the normal case for this field, so binding
+    // one must not put "null" in front of the user.
+    const wrapper = mountTextarea({ modelValue: null })
+    expect((wrapper.find('textarea').element as HTMLTextAreaElement).value).toBe('')
+  })
+
+  it('renders the value it is given', () => {
+    expect(
+      (mountTextarea({ modelValue: 'bestaand' }).find('textarea').element as HTMLTextAreaElement)
+        .value,
+    ).toBe('bestaand')
+  })
+})
+
+describe('NexxtTextarea rows and autosize', () => {
+  it('uses a fixed row count by default', () => {
+    expect(mountTextarea().find('textarea').attributes('rows')).toBe('3')
+    expect(mountTextarea({ rows: 6 }).find('textarea').attributes('rows')).toBe('6')
+  })
+
+  it('leaves the height alone when autosize is off', async () => {
+    const wrapper = mountTextarea({ rows: 3 })
+    const el = wrapper.find('textarea').element as HTMLTextAreaElement
+    stubMetrics(el, 400)
+
+    await wrapper.find('textarea').setValue('een\ntwee\ndrie\nvier')
+    await nextTick()
+
+    expect(el.style.height).toBe('')
+  })
+
+  it('grows to the content height when autosize is on', async () => {
+    const wrapper = mountTextarea({ autosize: true })
+    const el = wrapper.find('textarea').element as HTMLTextAreaElement
+    stubMetrics(el, 84, { border: 2 })
+
+    await wrapper.find('textarea').setValue('een\ntwee\ndrie')
+    await nextTick()
+
+    // scrollHeight (84) plus the border, because `height` is border-box here.
+    expect(el.style.height).toBe('86px')
+  })
+
+  it('stops growing at maxRows and starts scrolling instead', async () => {
+    const wrapper = mountTextarea({ autosize: true, maxRows: 4 })
+    const el = wrapper.find('textarea').element as HTMLTextAreaElement
+    // Content wants 200px; the cap is 4 rows of 20 plus 16 padding and 2 border.
+    stubMetrics(el, 200, { lineHeight: 20, padding: 16, border: 2 })
+
+    await wrapper.find('textarea').setValue('veel regels')
+    await nextTick()
+
+    expect(el.style.height).toBe('98px')
+    expect(el.style.overflowY).toBe('auto')
+  })
+
+  it('keeps overflow hidden while still below maxRows', async () => {
+    const wrapper = mountTextarea({ autosize: true, maxRows: 10 })
+    const el = wrapper.find('textarea').element as HTMLTextAreaElement
+    stubMetrics(el, 60, { lineHeight: 20 })
+
+    await wrapper.find('textarea').setValue('kort')
+    await nextTick()
+
+    expect(el.style.overflowY).toBe('hidden')
+  })
+
+  it('resizes on a programmatic value change, not only on typing', async () => {
+    const wrapper = mountTextarea({ autosize: true })
+    const el = wrapper.find('textarea').element as HTMLTextAreaElement
+    stubMetrics(el, 120)
+
+    await wrapper.setProps({ modelValue: 'van buitenaf gezet' })
+    await nextTick()
+
+    expect(el.style.height).toBe('120px')
+  })
+})
+
+describe('NexxtTextarea resize', () => {
+  const grip = (props: Record<string, unknown> = {}) => {
+    const classes = mountTextarea(props).find('textarea').classes()
+    return classes.includes('resize-none') ? 'none' : classes.includes('resize-y') ? 'y' : 'other'
+  }
+
+  it('can be dragged taller by default', () => {
+    expect(grip()).toBe('y')
+  })
+
+  it('drops the grip when resize is none', () => {
+    expect(grip({ resize: 'none' })).toBe('none')
+  })
+
+  it('lets autosize win over an explicit resize', () => {
+    // The autosizer rewrites the height on every keystroke, so a dragged height
+    // would not survive the next character. Asking for both is a mistake worth
+    // resolving one way rather than rendering a grip that undoes itself.
+    expect(grip({ autosize: true, resize: 'vertical' })).toBe('none')
+  })
+})
+
+describe('NexxtTextarea attribute routing', () => {
+  it('puts a consumer class on the wrapper and not on the control', () => {
+    const wrapper = mount(NexxtTextarea, { attrs: { class: 'layout-probe' } })
+    expect(wrapper.find('div').classes()).toContain('layout-probe')
+    expect(wrapper.find('textarea').classes()).not.toContain('layout-probe')
+  })
+
+  it('puts every other attribute on the control and not on the wrapper', () => {
+    const wrapper = mount(NexxtTextarea, { attrs: { maxlength: '120', 'data-probe': 'x' } })
+    expect(wrapper.find('textarea').attributes('maxlength')).toBe('120')
+    expect(wrapper.find('textarea').attributes('data-probe')).toBe('x')
+    expect(wrapper.find('div').attributes('data-probe')).toBeUndefined()
+  })
+})

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

@@ -0,0 +1,319 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TimelineEvent from './TimelineEvent.vue'
+
+export default {
+  title: 'Components/Molecules/Timeline Event',
+  component: TimelineEvent,
+} satisfies Meta<typeof TimelineEvent>
+
+type Story = StoryObj<typeof TimelineEvent>
+
+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,
+}
+
+export const ContactCreated: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'contact_created',
+    },
+    splitView: true,
+  },
+}
+
+export const InboundEvent: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'contact_requested',
+      direction: 'inbound',
+    },
+    splitView: true,
+  },
+}
+
+export const PageViewed: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'page_viewed',
+      url: 'https://example.com/page',
+      page_title: 'Example Page',
+      description: 'Example Page',
+    },
+    splitView: true,
+  },
+}
+
+export const WhatsAppMessageReceived: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'whatsapp_message_received',
+    },
+    splitView: true,
+  },
+}
+
+export const WhatsAppMessageSent: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'whatsapp_message_sent',
+      direction: 'outbound',
+    },
+    splitView: true,
+  },
+}
+
+export const WithUrl: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'proposal_sent',
+      url: 'https://example.com/proposal/123',
+      description: 'Voorstel Q2 2024',
+    },
+    splitView: true,
+  },
+}
+
+export const WithRequestReason: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'house_viewing_requested',
+      request_reason: 'Interesse in de woning na open dag',
+    },
+    splitView: true,
+  },
+}
+
+export const SplitViewDisabled: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'contact_created',
+      direction: 'inbound',
+    },
+    splitView: false,
+  },
+}
+
+export const ViewingAgendaItemScheduled: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'viewing_agenda_item_scheduled',
+    },
+    splitView: true,
+  },
+}
+
+export const ProposalAccepted: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'proposal_accepted',
+    },
+    splitView: true,
+  },
+}
+
+export const KeyHandoverScheduled: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'key_handover_agenda_item_scheduled',
+    },
+    splitView: true,
+  },
+}
+
+export const AutomationPhaseOpened: Story = {
+  args: {
+    event: { ...baseEvent, type: 'automation_phase_opened' },
+    splitView: true,
+  },
+}
+
+export const AutomationWhatsAppButtonClicked: Story = {
+  args: {
+    event: { ...baseEvent, type: 'automation_whatsapp_button_clicked' },
+    splitView: true,
+  },
+}
+
+export const AutomationButtonMailAnswered: Story = {
+  args: {
+    event: { ...baseEvent, type: 'automation_button_mail_answered' },
+    splitView: true,
+  },
+}
+
+export const WaitingListSignup: Story = {
+  args: {
+    event: { ...baseEvent, type: 'waiting_list_signup' },
+    splitView: true,
+  },
+}
+
+export const ViewingCreated: Story = {
+  args: {
+    event: { ...baseEvent, type: 'viewing_created' },
+    splitView: true,
+  },
+}
+
+export const GeneralAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'general_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const SalesAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'sales_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const AgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const AppraisalAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'appraisal_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const PurchaseAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'purchase_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const StructuralInspectionAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'structural_inspection_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const ValuationAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'valuation_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const MortgageAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'mortgage_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const PurchaseDeedSigningAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'purchase_deed_signing_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const ProposalOpened: Story = {
+  args: {
+    event: { ...baseEvent, type: 'proposal_opened' },
+    splitView: true,
+  },
+}
+
+export const FinalInspectionAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'final_inspection_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const TransportAgendaItemScheduled: Story = {
+  args: {
+    event: { ...baseEvent, type: 'transport_agenda_item_scheduled' },
+    splitView: true,
+  },
+}
+
+export const NewsletterOpened: Story = {
+  args: {
+    event: { ...baseEvent, type: 'newsletter_opened' },
+    splitView: true,
+  },
+}
+
+export const AutomationPhaseSent: Story = {
+  args: {
+    event: { ...baseEvent, type: 'automation_phase_sent' },
+    splitView: true,
+  },
+}
+
+export const AutomationPhaseDelivered: Story = {
+  args: {
+    event: { ...baseEvent, type: 'automation_phase_delivered' },
+    splitView: true,
+  },
+}
+
+export const NewsletterSent: Story = {
+  args: {
+    event: { ...baseEvent, type: 'newsletter_sent' },
+    splitView: true,
+  },
+}
+
+export const NewsletterDelivered: Story = {
+  args: {
+    event: { ...baseEvent, type: 'newsletter_delivered' },
+    splitView: true,
+  },
+}
+
+export const HouseValuationRequested: Story = {
+  args: {
+    event: { ...baseEvent, type: 'house_valuation_requested' },
+    splitView: true,
+  },
+}
+
+export const Unsubscribed: Story = {
+  args: {
+    event: { ...baseEvent, type: 'unsubscribed' },
+    splitView: true,
+  },
+}
+
+export const UnknownEventType: Story = {
+  args: {
+    event: {
+      ...baseEvent,
+      type: 'custom_event_type',
+    },
+    splitView: true,
+  },
+}