@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import SocialMediaCustomTemplate from './SocialMediaCustomTemplate.vue'
+
+describe('SocialMediaCustomTemplate', () => {
+  it('renders correctly with video and poster', () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const video = wrapper.find('video')
+
+    expect(wrapper.element.tagName).toBe('BUTTON')
+    expect(video.exists()).toBe(true)
+    // Check video properties directly
+    const videoElement = video.element as HTMLVideoElement
+    expect(videoElement.muted).toBe(true)
+    expect(video.attributes('poster')).toContain('Template_aanvragen.jpg')
+  })
+
+  it('handles video ended event correctly', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const videoElement = wrapper.find('video').element as HTMLVideoElement
+    const loadSpy = vi.spyOn(videoElement, 'load').mockImplementation(() => {})
+
+    // Simulate video ending
+    await wrapper.find('video').trigger('ended')
+
+    expect(videoElement.currentTime).toBe(0)
+    expect(loadSpy).toHaveBeenCalled()
+  })
+
+  it('plays video on mouseenter after first play', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const videoElement = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(videoElement, 'play').mockImplementation(() => Promise.resolve())
+
+    // Set state to hasPlayedOnce
+    await wrapper.find('video').trigger('ended')
+
+    // Trigger mouseenter
+    await wrapper.trigger('mouseenter')
+
+    expect(playSpy).toHaveBeenCalled()
+  })
+
+  it('pauses video on mouseleave after first play', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const videoElement = wrapper.find('video').element as HTMLVideoElement
+    const pauseSpy = vi.spyOn(videoElement, 'pause')
+
+    // Set state to hasPlayedOnce
+    await wrapper.find('video').trigger('ended')
+
+    // Trigger mouseleave
+    await wrapper.trigger('mouseleave')
+
+    expect(pauseSpy).toHaveBeenCalled()
+  })
+
+  it('sets loop to true after first play', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const video = wrapper.find('video')
+    const videoElement = video.element as HTMLVideoElement
+
+    expect(videoElement.loop).toBe(false)
+
+    // Simulate video ending
+    await video.trigger('ended')
+
+    expect(videoElement.loop).toBe(true)
+  })
+
+  it('does not play on mouseenter before first play has ended', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const videoElement = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(videoElement, 'play')
+
+    await wrapper.trigger('mouseenter')
+
+    expect(playSpy).not.toHaveBeenCalled()
+  })
+
+  it('does not pause on mouseleave before first play has ended', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const videoElement = wrapper.find('video').element as HTMLVideoElement
+    const pauseSpy = vi.spyOn(videoElement, 'pause')
+
+    await wrapper.trigger('mouseleave')
+
+    expect(pauseSpy).not.toHaveBeenCalled()
+  })
+
+  it('internal methods do nothing if hasPlayedOnce is false', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const videoElement = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(videoElement, 'play').mockImplementation(() => Promise.resolve())
+    const pauseSpy = vi.spyOn(videoElement, 'pause')
+
+    // @ts-expect-error - calling internal method
+    wrapper.vm.handleMouseEnter()
+    // @ts-expect-error - calling internal method
+    wrapper.vm.handleMouseLeave()
+
+    expect(playSpy).not.toHaveBeenCalled()
+    expect(pauseSpy).not.toHaveBeenCalled()
+  })
+
+  it('plays onMounted if videoRef is valid', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    const videoElement = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(videoElement, 'play').mockImplementation(() => Promise.resolve())
+
+    // Simulate onMounted behavior by calling it again (it already ran once on mount)
+    // @ts-expect-error - manually calling onMounted setup code
+    wrapper.vm.handleMouseEnter() // hasPlayedOnce is false, should not play
+    expect(playSpy).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SocialMediaType from './SocialMediaType.vue'
+
+export default {
+  title: 'Components/Molecules/Social Media Type',
+  component: SocialMediaType,
+} satisfies Meta<typeof SocialMediaType>
+
+type Story = StoryObj<typeof SocialMediaType>
+
+export const Post: Story = {
+  args: {
+    variant: 'post',
+    icons: ['facebook', 'instagram', 'linkedin', 'x', 'google'],
+  },
+}
+
+export const Reel: Story = {
+  args: {
+    variant: 'reel',
+    chip: 'Nieuw!',
+  },
+}
+
+export const Story: Story = {
+  args: {
+    variant: 'story',
+    icons: ['instagram'],
+  },
+}
+
+export const ReelSelected: Story = {
+  args: {
+    variant: 'reel',
+    selected: true,
+  },
+}

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

@@ -0,0 +1,126 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import SocialMediaType from './SocialMediaType.vue'
+import SocialIcons, { type NexxtSocialIconsProps } from '../SocialIcons/SocialIcons.vue'
+
+type Variant = 'post' | 'reel' | 'story'
+
+describe('SocialMediaType', () => {
+  it.each([
+    ['post', 'Post', { facebook: true, instagram: true, linkedin: true, x: true, google: true }],
+    ['reel', 'TikTok & Reel', { instagram: true, tiktok: true }],
+    ['story', 'Story', { instagram: true }],
+  ])('renders correctly for variant: %s', (variant, expectedLabel, expectedIcons) => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: variant as Variant,
+      },
+    })
+
+    // Check label
+    expect(wrapper.text()).toContain(expectedLabel)
+
+    // Check SocialIcons props
+    const socialIcons = wrapper.findComponent(SocialIcons)
+    expect(socialIcons.exists()).toBe(true)
+
+    Object.entries(expectedIcons).forEach(([prop, value]) => {
+      expect(socialIcons.props(prop as keyof NexxtSocialIconsProps)).toBe(value)
+    })
+  })
+
+  it('renders the chip when provided', () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: 'post',
+        chip: 'Featured',
+      },
+    })
+    expect(wrapper.text()).toContain('Featured')
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: 'reel',
+      },
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('normalizes twitter to x in custom icons', () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: 'post',
+        icons: ['twitter', 'facebook'],
+      },
+    })
+
+    const socialIcons = wrapper.findComponent(SocialIcons)
+    expect(socialIcons.props('x')).toBe(true)
+    expect(socialIcons.props('facebook')).toBe(true)
+  })
+
+  it('handles custom icons array correctly', () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: 'reel',
+        icons: ['instagram', 'tiktok', 'linkedin'],
+      },
+    })
+
+    const socialIcons = wrapper.findComponent(SocialIcons)
+    expect(socialIcons.props('instagram')).toBe(true)
+    expect(socialIcons.props('tiktok')).toBe(true)
+    expect(socialIcons.props('linkedin')).toBe(true)
+    expect(socialIcons.props('facebook')).toBe(false)
+  })
+
+  it('renders the selected state correctly', () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: 'story',
+        selected: true,
+      },
+    })
+    expect(wrapper.classes()).toContain('bg-gray-50')
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    const checkIcon = icons.find((icon) => icon.props('name') === 'check')
+    expect(checkIcon).toBeDefined()
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: 'post',
+        label: 'My Custom Post',
+      },
+    })
+    expect(wrapper.text()).toContain('My Custom Post')
+  })
+
+  it('handles default branch for variant (if TS bypassed)', () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        // @ts-expect-error - testing invalid variant bypass
+        variant: 'invalid',
+      },
+    })
+    const socialIcons = wrapper.findComponent(SocialIcons)
+    // Should hit default: return {}
+    expect(socialIcons.exists()).toBe(true)
+  })
+
+  it('handles empty icons array', () => {
+    const wrapper = mount(SocialMediaType, {
+      props: {
+        variant: 'post',
+        icons: [],
+      },
+    })
+    const socialIcons = wrapper.findComponent(SocialIcons)
+    // Should have no icons
+    expect(socialIcons.exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Source, { SOURCE_MAP } from './Source.vue'
+
+export default {
+  title: 'Components/Molecules/Source',
+  component: Source,
+  argTypes: {
+    source: {
+      control: 'select',
+      options: Object.keys(SOURCE_MAP),
+    },
+  },
+} satisfies Meta<typeof Source>
+
+type Story = StoryObj<typeof Source>
+
+export const Default: Story = {
+  args: {
+    source: 'website',
+  },
+}
+
+export const All: Story = {
+  render: () => ({
+    components: { Source },
+    setup: () => ({ sources: Object.keys(SOURCE_MAP) }),
+    template: `
+      <div class="flex flex-col gap-2">
+        <div v-for="source in sources" :key="source" class="flex items-center gap-3">
+          <Source :source="source" />
+        </div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Source, { SOURCE_MAP } from './Source.vue'
+
+describe('Source', () => {
+  it('renders an image for sources with an image', () => {
+    const wrapper = mount(Source, { props: { source: 'realworks' } })
+    expect(wrapper.find('img').exists()).toBe(true)
+  })
+
+  it('sets the correct alt text on the image', () => {
+    const wrapper = mount(Source, { props: { source: 'realworks' } })
+    expect(wrapper.find('img').attributes('alt')).toBe(SOURCE_MAP.realworks)
+  })
+
+  it('renders an icon for sources without an image', () => {
+    const wrapper = mount(Source, { props: { source: 'website' } })
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.find('span[class*="rounded-full"]').exists()).toBe(true)
+  })
+
+  it('renders the label text for sources without an image', () => {
+    const wrapper = mount(Source, { props: { source: 'website' } })
+    expect(wrapper.text()).toContain(SOURCE_MAP.website)
+  })
+
+  it('applies the correct bg color class for icon sources', () => {
+    const wrapper = mount(Source, { props: { source: 'website' } })
+    expect(wrapper.find('span[class*="rounded-full"]').classes()).toContain(
+      'bg-cornflower-blue-500',
+    )
+  })
+
+  it('applies the correct height class on the image', () => {
+    const wrapper = mount(Source, { props: { source: 'realworks' } })
+    expect(wrapper.find('img').classes()).toContain('h-4')
+  })
+
+  it('renders the label for all sources without errors', () => {
+    for (const source of Object.keys(SOURCE_MAP) as (keyof typeof SOURCE_MAP)[]) {
+      const wrapper = mount(Source, { props: { source } })
+      expect(wrapper.exists()).toBe(true)
+    }
+  })
+})

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

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, within } from 'storybook/test'
+import TabbedContend from './TabbedContent.vue'
+
+const PANELS = `
+  <template #overview>
+    <div style="background-color: #dbeafe; padding: 32px; border-radius: 12px; min-height: 200px;">
+      <h2 style="font-size: 20px; font-weight: 600; margin-bottom: 8px;">Overview</h2>
+      <p>This is the Overview content. Here you can find a summary of everything that matters.</p>
+    </div>
+  </template>
+  <template #details>
+    <div style="background-color: #dcfce7; padding: 32px; border-radius: 12px; min-height: 200px;">
+      <h2 style="font-size: 20px; font-weight: 600; margin-bottom: 8px;">Details</h2>
+      <p>This is the Details content. All the specifics and fine print live here.</p>
+    </div>
+  </template>
+  <template #settings>
+    <div style="background-color: #fef9c3; padding: 32px; border-radius: 12px; min-height: 200px;">
+      <h2 style="font-size: 20px; font-weight: 600; margin-bottom: 8px;">Settings</h2>
+      <p>This is the Settings content. Configure your preferences here.</p>
+    </div>
+  </template>
+`
+
+export default {
+  title: 'Components/Molecules/Tabbed Content',
+  component: TabbedContend,
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 350px; padding: 16px; background-color: #F5F5F5;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof TabbedContend>
+
+type Story = StoryObj<typeof TabbedContend>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { TabbedContend },
+    setup() {
+      return { args }
+    },
+    template: `<TabbedContend v-bind="args">${PANELS}</TabbedContend>`,
+  }),
+  args: {
+    tabs: ['Overview', 'Details', 'Settings'],
+  },
+}
+
+export const Animated: Story = {
+  render: (args) => ({
+    components: { TabbedContend },
+    setup() {
+      return { args }
+    },
+    template: `<TabbedContend v-bind="args">${PANELS}</TabbedContend>`,
+  }),
+  args: {
+    tabs: ['Overview', 'Details', 'Settings'],
+    animated: true,
+  },
+}
+
+/**
+ * `tabs` accepteert naast losse strings ook `{ label, icon }`. De slotnaam komt
+ * dan van het label, net als bij de stringvorm.
+ */
+export const WithIcons: Story = {
+  args: {
+    tabs: [
+      { label: 'Overview', icon: 'house' },
+      { label: 'Details', icon: 'list' },
+      { label: 'Settings', icon: 'gear' },
+    ],
+  },
+  render: (args) => ({
+    components: { TabbedContend },
+    setup: () => ({ args }),
+    template: `
+      <TabbedContend v-bind="args" style="width: 520px">
+        <template #overview>Overzicht</template>
+        <template #details>Details</template>
+        <template #settings>Instellingen</template>
+      </TabbedContend>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Het paneel toont het slot dat bij het label hoort; met het ruwe object als
+    // modelwaarde bleef het leeg.
+    await expect(canvas.getByRole('tabpanel')).toHaveTextContent('Overzicht')
+    await expect(canvasElement.querySelectorAll('i.fa-house').length).toBeGreaterThan(0)
+  },
+}

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

@@ -0,0 +1,109 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeAll } from 'vitest'
+import TabbedContent from './TabbedContent.vue'
+
+beforeAll(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+const tabs = ['Overview', 'Details', 'Settings']
+
+describe('TabbedContent', () => {
+  it('defaults to the first tab', () => {
+    const wrapper = mount(TabbedContent, {
+      props: { tabs },
+      slots: {
+        overview: '<div>Overview content</div>',
+        details: '<div>Details content</div>',
+      },
+    })
+    expect(wrapper.find('[role="tabpanel"]').text()).toContain('Overview content')
+  })
+
+  it('shows the slot for the v-model selected tab', () => {
+    const wrapper = mount(TabbedContent, {
+      props: { tabs, modelValue: 'Details' },
+      slots: {
+        overview: '<div>Overview content</div>',
+        details: '<div>Details content</div>',
+      },
+    })
+    expect(wrapper.find('[role="tabpanel"]').text()).toContain('Details content')
+  })
+
+  it('sets aria-labelledby based on the selected tab', () => {
+    const wrapper = mount(TabbedContent, {
+      props: { tabs, modelValue: 'Overview' },
+    })
+    expect(wrapper.find('[role="tabpanel"]').attributes('aria-labelledby')).toBe('tab-overview')
+  })
+
+  it('converts tab labels with spaces to hyphenated slot names', () => {
+    const wrapper = mount(TabbedContent, {
+      props: { tabs: ['My Reports', 'Other'], modelValue: 'My Reports' },
+      slots: {
+        'my-reports': '<div>Report content</div>',
+      },
+    })
+    expect(wrapper.find('[role="tabpanel"]').text()).toContain('Report content')
+  })
+
+  it('emits update:modelValue when a tab is clicked', async () => {
+    const wrapper = mount(TabbedContent, {
+      props: { tabs, modelValue: 'Overview' },
+    })
+    const buttons = wrapper.findAll('[role="tab"]')
+    await buttons[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['Details'])
+  })
+
+  it('updates displayed content when modelValue prop changes', async () => {
+    const wrapper = mount(TabbedContent, {
+      props: { tabs, modelValue: 'Overview' },
+      slots: {
+        overview: '<div>Overview content</div>',
+        details: '<div>Details content</div>',
+      },
+    })
+    await wrapper.setProps({ modelValue: 'Details' })
+    expect(wrapper.find('[role="tabpanel"]').text()).toContain('Details content')
+  })
+})
+
+describe('TabbedContent met tab-objecten', () => {
+  // NexxtTabs accepteert sinds de icoonondersteuning ook { label, icon }. Geen
+  // enkele story of test gaf die vorm door, en het component behandelde elke tab
+  // als string: het zette het hele object in een model dat een label verwacht.
+  const iconTabs = [
+    { label: 'Overview', icon: 'house' },
+    { label: 'Details', icon: 'list' },
+  ] as const
+
+  it('vult het model met het label en niet met het object', () => {
+    const wrapper = mount(TabbedContent, { props: { tabs: [...iconTabs] } })
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['Overview'])
+  })
+
+  it('leidt de slotnaam af van het label', () => {
+    const wrapper = mount(TabbedContent, {
+      props: { tabs: [...iconTabs] },
+      slots: { overview: '<div>Overzicht</div>' },
+    })
+    expect(wrapper.find('[role="tabpanel"]').text()).toContain('Overzicht')
+  })
+
+  it('kent de volgorde van objecttabs, zodat de richting klopt', async () => {
+    // Op props.tabs vergelijken gaf met objecten twee keer -1, waardoor de
+    // richting altijd backward werd. Zichtbaar in de klassen die de Transition
+    // meekrijgt bij vooruit versus achteruit.
+    const wrapper = mount(TabbedContent, {
+      props: { tabs: [...iconTabs], animated: true, modelValue: 'Overview' },
+    })
+    await wrapper.setProps({ modelValue: 'Details' })
+
+    expect((wrapper.vm as unknown as { direction: string }).direction).toBe('forward')
+  })
+})