@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,165 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ReferenceCard, { type ProposalReference } from './ReferenceCard.vue'
+
+const REFERENCE: ProposalReference = {
+  index: 1,
+  postalCode: '7905BK',
+  streetName: 'Klaverkamp',
+  houseNumber: 22,
+  houseType: 'Tussenwoning',
+  city: 'Zwolle',
+  mainImageUrl: 'https://example.com/house.webp',
+  latitude: 52.5168,
+  longitude: 6.083,
+  useSurface: 124,
+  parcelSurface: 210,
+  buildYear: 1998,
+  volume: 420,
+  energyLabel: 'C',
+  garage: null,
+  insulation: null,
+  shedStorageType: null,
+  saleDate: '2024-03-18',
+  dateOnOfferSince: null,
+  transportDate: null,
+  salePrice: '465000',
+  indexedSalePrice: null,
+  pricePerSquareMeter: null,
+}
+
+const normalize = (text: string) => text.replace(/[\u00a0\u202f]/g, ' ')
+
+const mountCard = (reference: Partial<ProposalReference> = {}, props = {}) =>
+  mount(ReferenceCard, {
+    props: { reference: { ...REFERENCE, ...reference }, ...props },
+  })
+
+describe('ReferenceCard', () => {
+  it('renders the address, location, price and sale date', () => {
+    const wrapper = mountCard()
+
+    expect(wrapper.text()).toContain('Klaverkamp 22')
+    expect(wrapper.text()).toContain('7905BK Zwolle')
+    expect(normalize(wrapper.text())).toContain('€ 465.000')
+    expect(wrapper.text()).toContain('18-03-2024')
+  })
+
+  it('renders string and numeric house number extensions after the house number', () => {
+    expect(mountCard({ houseNumberExt: 'a' }).text()).toContain('Klaverkamp 22-a')
+    expect(mountCard({ houseNumberExt: 2 }).text()).toContain('Klaverkamp 22-2')
+  })
+
+  it('formats the sale price as currency', () => {
+    expect(normalize(mountCard({ salePrice: '1485000' }).text())).toContain('€ 1.485.000')
+  })
+
+  it('parses Dutch thousands separators in sale prices', () => {
+    expect(normalize(mountCard({ salePrice: '383.877' }).text())).toContain('€ 383.877')
+  })
+
+  it('supports another locale and currency', () => {
+    const wrapper = mountCard({}, { locale: 'en-US', currency: 'USD' })
+
+    expect(normalize(wrapper.text())).toContain('$465,000')
+  })
+
+  it('falls back to the raw sale price when it is not a number', () => {
+    expect(mountCard({ salePrice: 'op aanvraag' }).text()).toContain('op aanvraag')
+  })
+
+  it('renders the image when provided', () => {
+    const img = mountCard().find('img')
+
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe('https://example.com/house.webp')
+    expect(img.attributes('alt')).toBe('Klaverkamp 22')
+  })
+
+  it('renders a placeholder when the image is missing', () => {
+    const wrapper = mountCard({ mainImageUrl: null })
+
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.find('.fa-house').exists()).toBe(true)
+  })
+
+  it('renders the energy label only when present', () => {
+    expect(mountCard().text()).toContain('Energielabel')
+    expect(mountCard({ energyLabel: null }).text()).not.toContain('Energielabel')
+  })
+
+  it('omits the price column entirely when there is no price', () => {
+    const wrapper = mountCard({ salePrice: null })
+
+    expect(wrapper.text()).not.toContain('€')
+    expect(wrapper.text()).not.toContain('18-03-2024')
+  })
+
+  it('falls back to the raw sale date when it is unparsable', () => {
+    expect(mountCard({ saleDate: 'onbekend' }).text()).toContain('onbekend')
+  })
+
+  it('toggles selection when the card is clicked', async () => {
+    const wrapper = mountCard()
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([true])
+
+    await wrapper.setProps({ modelValue: true })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+  })
+
+  it('toggles selection with the keyboard', async () => {
+    const wrapper = mountCard()
+
+    await wrapper.trigger('keydown.space')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([true])
+
+    await wrapper.setProps({ modelValue: true })
+    await wrapper.trigger('keydown.enter')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+  })
+
+  it('reflects the selected state in aria-checked and the label', async () => {
+    const wrapper = mountCard({}, { modelValue: false })
+
+    expect(wrapper.attributes('aria-checked')).toBe('false')
+    expect(wrapper.text()).toContain('Selecteer deze woning')
+
+    await wrapper.setProps({ modelValue: true })
+
+    expect(wrapper.attributes('aria-checked')).toBe('true')
+    expect(wrapper.text()).toContain('Meegenomen in advies')
+  })
+
+  it('emits details with the reference without toggling selection', async () => {
+    const wrapper = mountCard()
+
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.emitted('details')?.[0]).toEqual([REFERENCE])
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('merges custom messages with the defaults', () => {
+    const wrapper = mountCard(
+      {},
+      {
+        modelValue: true,
+        messages: { selected: 'Gekozen', details: 'Details', energyLabel: 'Label' },
+      },
+    )
+
+    expect(wrapper.text()).toContain('Gekozen')
+    expect(wrapper.text()).toContain('Label')
+    expect(wrapper.find('button').text()).toBe('Details')
+  })
+
+  it('keeps the default message for keys that are not overridden', () => {
+    const wrapper = mountCard({}, { messages: { details: 'Details' } })
+
+    expect(wrapper.text()).toContain('Selecteer deze woning')
+    expect(wrapper.text()).toContain('Energielabel')
+  })
+})

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SocialMediaTemplate from './SocialMediaTemplate.vue'
+
+export default {
+  title: 'Components/Organisms/Social Media Template',
+  component: SocialMediaTemplate,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['post', 'video', 'slideshow'],
+    },
+    selected: {
+      control: 'boolean',
+    },
+    muted: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof SocialMediaTemplate>
+
+type Story = StoryObj<typeof SocialMediaTemplate>
+
+export const Post: Story = {
+  args: {
+    variant: 'post',
+    media: 'https://loremflickr.com/400/600/house',
+    mediaType: 'image',
+    name: 'Amsterdam',
+    type: 'Woning',
+    selected: false,
+  },
+}
+
+export const Video: Story = {
+  args: {
+    variant: 'video',
+    media: '/barcelona.mp4',
+    mediaType: 'video',
+    muted: true,
+    name: 'Barcelona',
+    type: 'Woning',
+    selected: false,
+  },
+}
+
+export const Slideshow: Story = {
+  args: {
+    variant: 'slideshow',
+    media: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
+    mediaType: 'image',
+    name: 'Stockholm',
+    type: 'Bedrijfsunit',
+  },
+}
+
+export const Selected: Story = {
+  args: {
+    variant: 'post',
+    media: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
+    mediaType: 'image',
+    name: 'Amsterdam',
+    type: 'Woning',
+    selected: true,
+  },
+}

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

@@ -0,0 +1,466 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import SocialMediaTemplate from './SocialMediaTemplate.vue'
+
+describe('SocialMediaTemplate', () => {
+  it('renders an image when media is an image file', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: 'https://example.com/image.jpg',
+        mediaType: 'image',
+        name: 'Amsterdam',
+        type: 'Woning',
+      },
+    })
+
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('renders a video when media is a video file', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/barcelona.mp4',
+        mediaType: 'video',
+        name: 'Barcelona',
+        type: 'Woning',
+        muted: true,
+      },
+    })
+
+    expect(wrapper.find('video').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  it('displays the name and type correctly', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: 'https://example.com/image.png',
+        mediaType: 'image',
+        name: 'Amsterdam',
+        type: 'Woning',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Amsterdam')
+    expect(wrapper.text()).toContain('Woning')
+  })
+
+  it('shows play icon when variant is video', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+      },
+    })
+
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    const playIcon = icons.find((icon) => icon.props('name') === 'play-circle')
+    expect(playIcon).toBeDefined()
+  })
+
+  it('does not show play icon when variant is post', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+      },
+    })
+
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    const playIcon = icons.find((icon) => icon.props('name') === 'play')
+    expect(playIcon).toBeUndefined()
+  })
+
+  it('shows selected overlay when selected prop is true', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+        selected: true,
+      },
+    })
+
+    const overlay = wrapper.find('.bg-cornflower-blue-200\\/70')
+    expect(overlay.classes()).toContain('opacity-100')
+  })
+
+  it('hides selected overlay when selected prop is false', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+        selected: false,
+      },
+    })
+
+    const overlay = wrapper.find('.bg-cornflower-blue-200\\/70')
+    expect(overlay.classes()).toContain('opacity-0')
+  })
+
+  it('plays video on mouseenter when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(video, 'play').mockImplementation(() => Promise.resolve())
+
+    await wrapper.trigger('mouseenter')
+
+    expect(playSpy).toHaveBeenCalled()
+  })
+
+  it('pauses video on mouseleave when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const pauseSpy = vi.spyOn(video, 'pause')
+
+    await wrapper.trigger('mouseleave')
+
+    expect(pauseSpy).toHaveBeenCalled()
+  })
+
+  it('applies aspect-9/16 class when variant is video', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-9/16')
+  })
+
+  it('applies h-80 class when variant is post', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('h-80')
+  })
+
+  it('uses media_type prop for image rendering', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test-without-extension',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+      },
+    })
+
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('uses media_type prop for video rendering', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test-video-without-extension',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    expect(wrapper.find('video').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  it('correctly map various media extensions to mime types', () => {
+    const extensions = {
+      mp4: 'video/mp4',
+      webm: 'video/webm',
+      ogg: 'video/ogg',
+      mov: 'video/quicktime',
+      avi: 'video/x-msvideo',
+      mkv: 'video/x-matroska',
+      unknown: 'video/mp4',
+    }
+
+    Object.entries(extensions).forEach(([ext, expectedMime]) => {
+      const wrapper = mount(SocialMediaTemplate, {
+        props: {
+          variant: 'video',
+          media: `/test.${ext}`,
+          mediaType: 'video',
+          mediaExtension: ext === 'unknown' ? undefined : ext,
+          name: 'Test',
+          type: 'Video',
+        },
+      })
+
+      const source = wrapper.find('source')
+      expect(source.attributes('type')).toBe(expectedMime)
+    })
+  })
+
+  it('handles custom aspect ratio correctly', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        aspectRatio: '16:9',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-16/9')
+  })
+
+  it('applies video-specific colors when variant is video', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        selected: true,
+      },
+    })
+
+    // Check overlay background
+    const overlay = wrapper.find('.z-10')
+    expect(overlay.classes()).toContain('bg-purple-200/70')
+
+    // Check checkmark background
+    const checkmarkCircle = overlay.find('.rounded-full')
+    expect(checkmarkCircle.classes()).toContain('bg-purple-500')
+
+    // Check info block background
+    const infoBlock = wrapper.find('.z-20')
+    expect(infoBlock.classes()).toContain('bg-purple-500')
+  })
+
+  it('uses correct icons based on variant', () => {
+    const variants = [
+      { variant: 'post', icon: 'image' },
+      { variant: 'video', icon: 'play-circle' },
+      { variant: 'slideshow', icon: 'images' },
+    ]
+
+    variants.forEach(({ variant, icon }) => {
+      const wrapper = mount(SocialMediaTemplate, {
+        props: {
+          variant: variant as 'post' | 'video' | 'slideshow',
+          media: '/test.jpg',
+          mediaType: 'image',
+          name: 'Test',
+          type: 'Test',
+        },
+      })
+      const nexxtIcon = wrapper.find('.z-20').findComponent({ name: 'NexxtIcon' })
+      expect(nexxtIcon.props('name')).toBe(icon)
+    })
+  })
+
+  it('shows image-stack icon when variant is slideshow', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'slideshow',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Slideshow',
+      },
+    })
+
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    const stackIcon = icons.find((icon) => icon.props('name') === 'images')
+    expect(stackIcon).toBeDefined()
+  })
+
+  it('correctly uses parsedAspectRatio for slideshow variant', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'slideshow',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Slideshow',
+        aspectRatio: '1:1',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-1/1')
+  })
+
+  it('correctly returns empty string aspect ratio when mediaType is image and no aspect ratio is provided', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video', // TriggerparsedAspectRatio evaluation
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    // Classes should not include any aspect ratio class
+    const classes = wrapper.classes()
+    expect(classes.some((c) => c.startsWith('aspect-'))).toBe(false)
+  })
+
+  it('computes undefined mime type when mediaType is image', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: 'test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    // @ts-expect-error - testing computed property internal
+    expect(wrapper.vm.videoMimeType).toBeUndefined()
+  })
+
+  it('handles custom aspect ratio with aspect- prefix correctly', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        aspectRatio: 'aspect-4:3',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-4/3')
+  })
+
+  it('emits click event on click', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('emits click event on enter key down', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    await wrapper.trigger('keydown.enter')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('emits click event on space key down', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    await wrapper.trigger('keydown.space')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('plays video on focus when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(video, 'play').mockImplementation(() => Promise.resolve())
+
+    await wrapper.trigger('focus')
+
+    expect(playSpy).toHaveBeenCalled()
+  })
+
+  it('pauses video on blur when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const pauseSpy = vi.spyOn(video, 'pause')
+
+    await wrapper.trigger('blur')
+
+    expect(pauseSpy).toHaveBeenCalled()
+  })
+})