@nexxtmove/ui 0.1.21 → 0.1.23

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

@@ -0,0 +1,131 @@
+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('does not call handleEnded if videoRef is null', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    // @ts-expect-error - manually setting ref to null for test
+    wrapper.vm.videoRef = null
+
+    // Trigger handleEnded directly (internally)
+    // @ts-expect-error - calling internal method
+    wrapper.vm.handleEnded()
+
+    // @ts-expect-error - checking internal state
+    expect(wrapper.vm.hasPlayedOnce).toBe(false)
+  })
+
+  it('internal methods do nothing if videoRef is null', async () => {
+    const wrapper = mount(SocialMediaCustomTemplate)
+    // @ts-expect-error - manually setting ref to null for test
+    wrapper.vm.videoRef = null
+    // @ts-expect-error - manually setting hasPlayedOnce for branch test
+    wrapper.vm.hasPlayedOnce = true
+
+    // Trigger handleMouseEnter directly (internally)
+    // @ts-expect-error - calling internal method
+    wrapper.vm.handleMouseEnter()
+    // Trigger handleMouseLeave directly (internally)
+    // @ts-expect-error - calling internal method
+    wrapper.vm.handleMouseLeave()
+
+    // No errors should occur
+  })
+
+  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/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import missingVideo from '../../assets/video/Template_aanvragen.mp4'
+import { ref, onMounted } from 'vue'
+
+defineOptions({
+  name: 'NexxtSocialMediaCustomTemplate',
+})
+
+const videoRef = ref<HTMLVideoElement>()
+const hasPlayedOnce = ref(false)
+
+const handleEnded = () => {
+  if (videoRef.value) {
+    videoRef.value.load()
+    hasPlayedOnce.value = true
+  }
+}
+
+const handleMouseEnter = () => {
+  if (hasPlayedOnce.value && videoRef.value) {
+    videoRef.value.play()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (hasPlayedOnce.value && videoRef.value) {
+    videoRef.value.pause()
+  }
+}
+
+onMounted(() => {
+  if (videoRef.value) {
+    videoRef.value.play()
+  }
+})
+</script>
+
+<template>
+  <button
+    class="flex aspect-9/16 w-64 cursor-pointer items-center justify-center overflow-hidden rounded-3xl bg-gray-50 outline-1 -outline-offset-1 outline-gray-200 transition-all focus-visible:outline-2 focus-visible:outline-cornflower-blue-600"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <video
+      ref="videoRef"
+      :src="missingVideo"
+      muted
+      playsinline
+      :loop="hasPlayedOnce"
+      class="h-full w-full object-cover"
+      poster="../../assets/images/Template_aanvragen.jpg"
+      @ended.once="handleEnded"
+    />
+  </button>
+</template>

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

@@ -0,0 +1,71 @@
+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',
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=578-340&t=CbHvOQfEMIr7M5mO-11',
+    },
+  },
+} 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,
+  },
+}