@eturnity/eturnity_reusable_components 9.28.1 → 9.28.3

package/src/components/tableDropdown/tableDropdown.spec.js

@@ -0,0 +1,193 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import TableDropdown from './index.vue'
+import SearchInput from '@/components/inputs/searchInput'
+import InputText from '@/components/inputs/inputText'
+import MainButton from '@/components/buttons/mainButton'
+import Spinner from '@/components/spinner'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+// Jest config maps .svg but not .png; stub the raster asset the component imports.
+jest.mock('@/assets/icons/file_icon.png', () => 'file-icon-mock', {
+  virtual: true,
+})
+
+beforeAll(() => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }))
+})
+
+const mountDropdown = (props = {}) =>
+  mount(TableDropdown, {
+    props: {
+      colSpan: 2,
+      tableItems: [{ type: 'text', value: 'Selected Item' }],
+      isOpen: false,
+      optionItems: [
+        { display_name: 'Item 1', company_item_number: '123' },
+        { display_name: 'Item 2', company_item_number: '456' },
+      ],
+      optionsDisplay: ['display_name', 'company_item_number'],
+      ...props,
+    },
+  })
+
+const findByText = (wrapper, selector, text) =>
+  wrapper.findAll(selector).find((el) => el.text() === text)
+
+describe('TableDropdown', () => {
+  describe('rendering table items', () => {
+    it('renders a plain text item value', () => {
+      expect(mountDropdown().text()).toContain('Selected Item')
+    })
+
+    it('renders the "Use template..." button for an empty template item', () => {
+      const wrapper = mountDropdown({
+        tableItems: [{ type: 'template', value: '', row: { id: 1 } }],
+      })
+      expect(wrapper.findComponent(MainButton).props('text')).toBe(
+        'Use template...'
+      )
+    })
+
+    it('renders a template link with the value for a filled template item', () => {
+      const wrapper = mountDropdown({
+        tableItems: [{ type: 'template', value: 'My Template', row: { id: 2 } }],
+      })
+      expect(wrapper.text()).toContain('My Template')
+      expect(wrapper.findComponent(MainButton).exists()).toBe(false)
+    })
+
+    it('renders the no-template placeholder text', () => {
+      const wrapper = mountDropdown({
+        tableItems: [{ type: 'no-template' }],
+      })
+      expect(wrapper.text()).toContain('No main component template')
+    })
+
+    it('renders an editable input when customInputDisabled is false', () => {
+      const wrapper = mountDropdown({
+        tableItems: [{ type: 'input', value: 'abc' }],
+        customInputDisabled: false,
+      })
+      expect(wrapper.findComponent(InputText).exists()).toBe(true)
+    })
+
+    it('renders a read-only placeholder when customInputDisabled is true', () => {
+      const wrapper = mountDropdown({
+        tableItems: [{ type: 'input', value: 'abc' }],
+        customInputDisabled: true,
+      })
+      expect(wrapper.findComponent(InputText).exists()).toBe(false)
+      expect(wrapper.find('.input-placeholder').text()).toContain('abc')
+    })
+
+    it('applies rowDataId as the data-id on the matching row', () => {
+      const wrapper = mountDropdown({
+        tableItems: [{ type: 'input', value: 'x', inputType: 'price' }],
+        rowDataId: [{ inputType: 'price', dataId: 'row_price' }],
+      })
+      expect(wrapper.find('[data-id="row_price"]').exists()).toBe(true)
+    })
+  })
+
+  describe('open state', () => {
+    it('does not render the options container when closed', () => {
+      const wrapper = mountDropdown({ isOpen: false })
+      expect(wrapper.findComponent(SearchInput).exists()).toBe(false)
+    })
+
+    it('renders the search input and options when open', () => {
+      const wrapper = mountDropdown({ isOpen: true })
+      expect(wrapper.findComponent(SearchInput).exists()).toBe(true)
+      expect(wrapper.text()).toContain('Item 1')
+      expect(wrapper.text()).toContain('Item 2')
+    })
+
+    it('shows the spinner while options are loading', () => {
+      const wrapper = mountDropdown({ isOpen: true, optionsLoading: true })
+      expect(wrapper.findComponent(Spinner).exists()).toBe(true)
+    })
+
+    it('shows the default empty text when there are no options', () => {
+      const wrapper = mountDropdown({ isOpen: true, optionItems: [] })
+      expect(wrapper.text()).toContain('No components found.')
+    })
+
+    it('shows a custom empty text when provided', () => {
+      const wrapper = mountDropdown({
+        isOpen: true,
+        optionItems: [],
+        emptyText: 'Nothing here',
+      })
+      expect(wrapper.text()).toContain('Nothing here')
+    })
+  })
+
+  describe('interactions', () => {
+    it('emits toggle-dropdown-open with close:true when an open row is clicked', async () => {
+      const wrapper = mountDropdown({ isOpen: true })
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('toggle-dropdown-open')).toEqual([
+        [{ close: true }],
+      ])
+    })
+
+    it('does not emit toggle when the row is disabled', async () => {
+      const wrapper = mountDropdown({ isOpen: false, disabled: true })
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('toggle-dropdown-open')).toBeUndefined()
+    })
+
+    it('emits dropdown-search when the search input changes', async () => {
+      const wrapper = mountDropdown({ isOpen: true })
+      await wrapper.findComponent(SearchInput).vm.$emit('on-change', 'panel')
+      expect(wrapper.emitted('dropdown-search').at(-1)).toEqual(['panel'])
+    })
+
+    it('emits item-selected with the option when an option is clicked', async () => {
+      const wrapper = mountDropdown({ isOpen: true })
+      await findByText(wrapper, 'span', 'Item 1').trigger('click')
+      expect(wrapper.emitted('item-selected')[0][0]).toMatchObject({
+        display_name: 'Item 1',
+      })
+    })
+
+    it('emits on-template-click with the row when the template button is clicked', async () => {
+      const wrapper = mountDropdown({
+        isOpen: true,
+        tableItems: [{ type: 'template', value: '', row: { id: 7 } }],
+      })
+      await wrapper.findComponent(MainButton).trigger('click')
+      expect(wrapper.emitted('on-template-click')).toEqual([[{ id: 7 }]])
+    })
+
+    it('emits on-selected-template-click with the row when the template link is clicked', async () => {
+      const wrapper = mountDropdown({
+        isOpen: true,
+        tableItems: [{ type: 'template', value: 'T1', row: { id: 8 } }],
+      })
+      // Click the innermost value div so the event bubbles to the link's handler.
+      const links = wrapper.findAll('div').filter((d) => d.text() === 'T1')
+      await links.at(-1).trigger('click')
+      expect(wrapper.emitted('on-selected-template-click')).toEqual([
+        [{ id: 8 }],
+      ])
+    })
+
+    it('emits custom-input-change when the editable input changes', async () => {
+      const wrapper = mountDropdown({
+        tableItems: [{ type: 'input', value: 'abc' }],
+        customInputDisabled: false,
+      })
+      await wrapper.findComponent(InputText).vm.$emit('input-change', 'xyz')
+      expect(wrapper.emitted('custom-input-change')).toEqual([['xyz']])
+    })
+  })
+})

package/src/components/tables/mainTable/mainTable.spec.js

@@ -0,0 +1,101 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import MainTable from './index.vue'
+import Spinner from '@/components/spinner'
+
+beforeAll(() => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }))
+})
+
+const SLOT = `
+  <tbody>
+    <tr>
+      <td data-test-id="r1c1">A</td>
+      <td data-test-id="r1c2">B</td>
+    </tr>
+    <tr>
+      <td data-test-id="r2c1">C</td>
+      <td data-test-id="r2c2">D</td>
+    </tr>
+  </tbody>
+`
+
+const mountTable = (props = {}, options = {}) =>
+  mount(MainTable, {
+    props,
+    slots: { default: SLOT },
+    ...options,
+  })
+
+describe('MainTable', () => {
+  describe('title', () => {
+    it('renders the title when titleText is provided', () => {
+      expect(mountTable({ titleText: 'projects' }).text()).toContain('projects')
+    })
+
+    it('does not render a title by default', () => {
+      const wrapper = mountTable()
+      expect(wrapper.text()).not.toContain('projects')
+    })
+  })
+
+  describe('loading', () => {
+    it('shows the spinner and hides the table while loading', () => {
+      const wrapper = mountTable({ isLoading: true })
+      expect(wrapper.findComponent(Spinner).exists()).toBe(true)
+      expect(wrapper.find('table').exists()).toBe(false)
+    })
+
+    it('renders the table with slot content when not loading', () => {
+      const wrapper = mountTable()
+      expect(wrapper.findComponent(Spinner).exists()).toBe(false)
+      expect(wrapper.find('table').exists()).toBe(true)
+      expect(wrapper.find('[data-test-id="r1c1"]').text()).toBe('A')
+    })
+  })
+
+  describe('column hover (hasAimHover)', () => {
+    it('highlights the whole column on mouseover and clears it on mouseleave', async () => {
+      const wrapper = mountTable(
+        { hasAimHover: true },
+        { attachTo: document.body }
+      )
+
+      await wrapper.find('[data-test-id="r1c1"]').trigger('mouseover')
+      expect(
+        wrapper.find('[data-test-id="r1c1"]').classes()
+      ).toContain('hovered-column')
+      expect(
+        wrapper.find('[data-test-id="r2c1"]').classes()
+      ).toContain('hovered-column')
+      expect(
+        wrapper.find('[data-test-id="r1c2"]').classes()
+      ).not.toContain('hovered-column')
+
+      await wrapper.find('table').trigger('mouseleave')
+      expect(
+        wrapper.find('[data-test-id="r2c1"]').classes()
+      ).not.toContain('hovered-column')
+
+      wrapper.unmount()
+    })
+
+    it('does not highlight columns when hasAimHover is false', async () => {
+      const wrapper = mountTable(
+        { hasAimHover: false },
+        { attachTo: document.body }
+      )
+
+      await wrapper.find('[data-test-id="r1c1"]').trigger('mouseover')
+      expect(
+        wrapper.find('[data-test-id="r2c1"]').classes()
+      ).not.toContain('hovered-column')
+
+      wrapper.unmount()
+    })
+  })
+})

package/src/components/threeDots/threeDots.spec.js

@@ -0,0 +1,121 @@
+/* eslint-disable */
+import { mount, DOMWrapper } from '@vue/test-utils'
+import ThreeDots from './index.vue'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+const options = [
+  { value: 'edit', name: 'Edit' },
+  { value: 'del', name: 'Delete', disabled: true },
+  {
+    value: 'more',
+    name: 'More',
+    children: [
+      { value: 'c1', name: 'Child 1' },
+      { value: 'c2', name: 'Child 2' },
+    ],
+  },
+]
+
+// The dropdown is teleported to <body>, so query it there rather than in the wrapper.
+const inBody = (selector) => document.body.querySelector(selector)
+const optionEl = (value) =>
+  inBody(`[data-id="three_dots_option_item_0_${value}"]`)
+const click = (el) => new DOMWrapper(el).trigger('click')
+
+let wrapper
+const mountDots = (props = {}) => {
+  wrapper = mount(ThreeDots, {
+    props: { options, ...props },
+    attachTo: document.body,
+  })
+  return wrapper
+}
+
+afterEach(() => {
+  wrapper?.unmount()
+  wrapper = null
+})
+
+describe('ThreeDots', () => {
+  it('exposes dataId and dataQaId on the trigger', () => {
+    const w = mountDots({ dataId: 'row_actions', dataQaId: 'qa_actions' })
+    expect(w.find('[data-id="row_actions"]').exists()).toBe(true)
+    expect(w.find('[data-qa-id="qa_actions"]').exists()).toBe(true)
+  })
+
+  it('does not render the dropdown until the trigger is clicked', async () => {
+    mountDots()
+    expect(optionEl('edit')).toBeNull()
+  })
+
+  it('opens the dropdown and lists the options on click', async () => {
+    const w = mountDots()
+    await w.trigger('click')
+
+    expect(optionEl('edit')).not.toBeNull()
+    expect(optionEl('del')).not.toBeNull()
+    expect(optionEl('more')).not.toBeNull()
+    expect(document.body.textContent).toContain('Edit')
+  })
+
+  it('shows the spinner and no options while loading', async () => {
+    const w = mountDots({ isLoading: true })
+    await w.trigger('click')
+
+    expect(inBody('[data-test-id="spinner_container"]')).not.toBeNull()
+    expect(optionEl('edit')).toBeNull()
+  })
+
+  it('emits on-select and closes when a plain option is clicked', async () => {
+    const w = mountDots()
+    await w.trigger('click')
+
+    await click(optionEl('edit'))
+
+    expect(w.emitted('on-select')).toHaveLength(1)
+    expect(w.emitted('on-select')[0][0]).toMatchObject({ value: 'edit' })
+    expect(w.emitted('on-select')[0][0].name).toBe('Edit')
+    expect(optionEl('edit')).toBeNull()
+  })
+
+  it('emits on-click (not on-select) and stays open for a disabled option', async () => {
+    const w = mountDots()
+    await w.trigger('click')
+
+    await click(optionEl('del'))
+
+    expect(w.emitted('on-click')[0][0]).toMatchObject({ value: 'del' })
+    expect(w.emitted('on-select')).toBeUndefined()
+    expect(optionEl('del')).not.toBeNull()
+  })
+
+  it('emits on-click and stays open for an option with children', async () => {
+    const w = mountDots()
+    await w.trigger('click')
+
+    await click(optionEl('more'))
+
+    expect(w.emitted('on-click')[0][0]).toMatchObject({ value: 'more' })
+    expect(w.emitted('on-select')).toBeUndefined()
+    expect(optionEl('more')).not.toBeNull()
+  })
+
+  it('reveals children on hover and emits on-select when a child is clicked', async () => {
+    const w = mountDots()
+    await w.trigger('click')
+
+    await new DOMWrapper(optionEl('more')).trigger('mouseover')
+    expect(document.body.textContent).toContain('Child 1')
+
+    const child = new DOMWrapper(document.body)
+      .findAll('div')
+      .find((d) => d.text() === 'Child 1')
+    await child.trigger('click')
+
+    expect(w.emitted('on-select')).toHaveLength(1)
+    expect(w.emitted('on-select')[0][0]).toMatchObject({ value: 'c1' })
+  })
+})

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')
+  })
+})