@eturnity/eturnity_reusable_components 9.28.2 → 9.28.3-ZOO-3.0

package/src/components/threeDots/threeDots.stories.js

@@ -7,6 +7,25 @@ const basicOptions = [
   { value: 'delete', name: 'Delete' },
 ]
 
+const nestedOptions = [
+  { value: 'edit', name: 'Edit' },
+  {
+    value: 'move',
+    name: 'Move to',
+    children: [
+      { value: 'folder_a', name: 'Folder A' },
+      { value: 'folder_b', name: 'Folder B' },
+    ],
+  },
+  { value: 'delete', name: 'Delete' },
+]
+
+const withDisabledOptions = [
+  { value: 'edit', name: 'Edit' },
+  { value: 'duplicate', name: 'Duplicate', disabled: true },
+  { value: 'delete', name: 'Delete' },
+]
+
 export default {
   title: 'Components/ThreeDots/ThreeDots',
   component: ThreeDots,
@@ -57,3 +76,33 @@ Loading.args = {
   ...Default.args,
   isLoading: true,
 }
+
+export const WithNestedChildren = Template.bind({})
+WithNestedChildren.args = {
+  ...Default.args,
+  options: nestedOptions,
+}
+
+export const WithDisabledOption = Template.bind({})
+WithDisabledOption.args = {
+  ...Default.args,
+  options: withDisabledOptions,
+}
+
+export const DarkTheme = Template.bind({})
+DarkTheme.args = {
+  ...Default.args,
+  colorTheme: 'dark',
+}
+
+export const NoTextWrap = Template.bind({})
+NoTextWrap.args = {
+  ...Default.args,
+  textWrap: false,
+}
+
+export const CustomIconColor = Template.bind({})
+CustomIconColor.args = {
+  ...Default.args,
+  iconColor: '#2196F3',
+}

package/src/components/videoThumbnail/videoThumbnail.spec.js

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import VideoThumbnail from './index.vue'
+import Icon from '@/components/icon'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+const SRC = 'https://example.com/thumb.jpg'
+
+const mountThumbnail = (props = {}) =>
+  mount(VideoThumbnail, { props: { src: SRC, ...props } })
+
+describe('VideoThumbnail', () => {
+  it('renders the image with the provided src', () => {
+    expect(mountThumbnail().find('img').attributes('src')).toBe(SRC)
+  })
+
+  it('updates the image when the src prop changes', async () => {
+    const wrapper = mountThumbnail()
+    await wrapper.setProps({ src: 'https://example.com/other.jpg' })
+    expect(wrapper.find('img').attributes('src')).toBe(
+      'https://example.com/other.jpg'
+    )
+  })
+
+  it('renders the play icon', () => {
+    expect(mountThumbnail().findComponent(Icon).attributes('name')).toBe('play')
+  })
+
+  it('uses the default play icon color and size', () => {
+    const icon = mountThumbnail().findComponent(Icon)
+    expect(icon.attributes('color')).toBe('blue')
+    expect(icon.attributes('size')).toBe('50px')
+  })
+
+  it('forwards playIconColor and playIconSize to the icon', () => {
+    const icon = mountThumbnail({
+      playIconColor: 'red',
+      playIconSize: '20px',
+    }).findComponent(Icon)
+    expect(icon.attributes('color')).toBe('red')
+    expect(icon.attributes('size')).toBe('20px')
+  })
+})