@eturnity/eturnity_reusable_components 9.28.2 → 9.28.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.28.2",
+  "version": "9.28.3",
   "files": [
     "dist",
     "src"

package/src/components/pagination/pagination.spec.js

@@ -0,0 +1,174 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Pagination from './index.vue'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+describe('Pagination', () => {
+  const mountPagination = (props = {}) => {
+    const fetchPage = jest.fn()
+    const wrapper = mount(Pagination, {
+      props: {
+        fetchPage,
+        currentPage: 1,
+        paginationParams: { pages: 3, previous: null, next: 2 },
+        ...props,
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+    return { wrapper, fetchPage }
+  }
+
+  it('does not render the nav when there is only one page', () => {
+    const { wrapper } = mountPagination({
+      paginationParams: { pages: 1, previous: null, next: null },
+    })
+    expect(wrapper.find('nav').exists()).toBe(false)
+  })
+
+  it('does not render the nav when pages is zero', () => {
+    const { wrapper } = mountPagination({
+      paginationParams: { pages: 0, previous: null, next: null },
+    })
+    expect(wrapper.find('nav').exists()).toBe(false)
+  })
+
+  it('renders the nav when there is more than one page', () => {
+    const { wrapper } = mountPagination()
+    expect(wrapper.find('nav').exists()).toBe(true)
+  })
+
+  it('renders the back button and calls fetchPage(previous) on click', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 2,
+      paginationParams: { pages: 5, previous: 1, next: 3 },
+    })
+    const back = wrapper.find('[data-id="pagination_back_button"]')
+    expect(back.exists()).toBe(true)
+    await back.trigger('click')
+    expect(fetchPage).toHaveBeenCalledWith(1)
+  })
+
+  it('omits the back button on the first page', () => {
+    const { wrapper } = mountPagination({
+      currentPage: 1,
+      paginationParams: { pages: 5, previous: null, next: 2 },
+    })
+    expect(wrapper.find('[data-id="pagination_back_button"]').exists()).toBe(
+      false
+    )
+  })
+
+  it('renders the next button and calls fetchPage(next) on click', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 2,
+      paginationParams: { pages: 5, previous: 1, next: 3 },
+    })
+    const next = wrapper.find('[data-id="pagination_next_button"]')
+    expect(next.exists()).toBe(true)
+    await next.trigger('click')
+    expect(fetchPage).toHaveBeenCalledWith(3)
+  })
+
+  it('omits the next button on the last page', () => {
+    const { wrapper } = mountPagination({
+      currentPage: 5,
+      paginationParams: { pages: 5, previous: 4, next: null },
+    })
+    expect(wrapper.find('[data-id="pagination_next_button"]').exists()).toBe(
+      false
+    )
+  })
+
+  it('renders the first-page shortcut and calls fetchPage(1) on click', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 4,
+      paginationParams: { pages: 10, previous: 3, next: 5 },
+    })
+    const first = wrapper.find('[data-id="pagination_page_button_1"]')
+    expect(first.exists()).toBe(true)
+    await first.trigger('click')
+    expect(fetchPage).toHaveBeenCalledWith(1)
+  })
+
+  it('renders the last-page shortcut and calls fetchPage(pages) on click', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 4,
+      paginationParams: { pages: 10, previous: 3, next: 5 },
+    })
+    const last = wrapper.find('[data-id="pagination_page_button_10"]')
+    expect(last.exists()).toBe(true)
+    await last.trigger('click')
+    expect(fetchPage).toHaveBeenCalledWith(10)
+  })
+
+  it('shows both leading and trailing ellipses when the current page is in the middle', () => {
+    const { wrapper } = mountPagination({
+      currentPage: 5,
+      paginationParams: { pages: 10, previous: 4, next: 6 },
+    })
+    expect(wrapper.findAll('span').filter((s) => s.text() === '...')).toHaveLength(
+      2
+    )
+  })
+
+  it('shows no ellipses on a small range', () => {
+    const { wrapper } = mountPagination({
+      currentPage: 1,
+      paginationParams: { pages: 3, previous: null, next: 2 },
+    })
+    expect(
+      wrapper.findAll('span').filter((s) => s.text() === '...')
+    ).toHaveLength(0)
+  })
+
+  it('renders the window of page numbers around the current page', () => {
+    const { wrapper } = mountPagination({
+      currentPage: 4,
+      paginationParams: { pages: 10, previous: 3, next: 5 },
+    })
+    ;[3, 4, 5].forEach((n) => {
+      expect(
+        wrapper.find(`[data-id="pagination_page_button_${n}"]`).exists()
+      ).toBe(true)
+    })
+  })
+
+  it('marks the current page button as active', () => {
+    const { wrapper } = mountPagination({
+      currentPage: 4,
+      paginationParams: { pages: 10, previous: 3, next: 5 },
+    })
+    const current = wrapper.find('[data-id="pagination_page_button_4"]')
+    expect(current.classes()).toContain('active')
+  })
+
+  it('calls fetchPage with the clicked page number', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 4,
+      paginationParams: { pages: 10, previous: 3, next: 5 },
+    })
+    await wrapper.find('[data-id="pagination_page_button_5"]').trigger('click')
+    expect(fetchPage).toHaveBeenCalledWith(5)
+  })
+
+  it('renders exactly two page numbers when there are only two pages', () => {
+    const { wrapper } = mountPagination({
+      currentPage: 1,
+      paginationParams: { pages: 2, previous: null, next: 2 },
+    })
+    ;[1, 2].forEach((n) => {
+      expect(
+        wrapper.find(`[data-id="pagination_page_button_${n}"]`).exists()
+      ).toBe(true)
+    })
+    expect(
+      wrapper.find('[data-id="pagination_page_button_3"]').exists()
+    ).toBe(false)
+  })
+})

package/src/components/progressBar/progressBar.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { mount } from '@vue/test-utils'
 import RCProgressBar from '@/components/progressBar'
 import defaultProps from './defaultProps'
@@ -9,44 +10,53 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 
 describe('progressBar/index.vue', () => {
-  it('progress bar is rendered with correct props', async () => {
-    const labelText = 'test_label_text'
-
-    const wrapper = mount(RCProgressBar, {
-      props: { ...defaultProps, labelText },
-      global: {
-        provide: {
-          theme,
-        },
-      },
+  const mountBar = (props = {}) =>
+    mount(RCProgressBar, {
+      props,
+      global: { provide: { theme } },
     })
 
-    const progressBarProgress = wrapper.find(
-      '[data-test-id="progress_bar_progress"]'
-    )
-    const progressBarLabel = wrapper.find('[data-test-id="progress_bar_label"]')
+  it('renders the progress container and fill', () => {
+    const wrapper = mountBar()
+    expect(
+      wrapper.find('[data-test-id="progress_bar_container"]').exists()
+    ).toBe(true)
+    expect(
+      wrapper.find('[data-test-id="progress_bar_progress"]').exists()
+    ).toBe(true)
+  })
+
+  it('renders the label when labelText is provided', () => {
+    const wrapper = mountBar({ labelText: 'test_label_text' })
+    const label = wrapper.find('[data-test-id="progress_bar_label"]')
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toBe('test_label_text')
+  })
 
-    expect(wrapper.vm.fillProgress).toBe(defaultProps.fillProgress)
-    expect(progressBarProgress.exists()).toBe(true)
-    expect(progressBarLabel.exists()).toBe(true)
+  it('omits the label when labelText is empty (the default)', () => {
+    const wrapper = mountBar()
+    expect(wrapper.find('[data-test-id="progress_bar_label"]').exists()).toBe(
+      false
+    )
+  })
 
-    expect(progressBarLabel.text()).toContain(labelText)
+  it('defaults fillProgress to 0', () => {
+    expect(mountBar().props('fillProgress')).toBe(0)
   })
 
-  it('progress bar progress changes', async () => {
-    const wrapper = mount(RCProgressBar, {
-      props: {},
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+  it('accepts fillProgress as a string or a number', async () => {
+    const wrapper = mountBar({ fillProgress: defaultProps.fillProgress })
+    expect(wrapper.props('fillProgress')).toBe(defaultProps.fillProgress)
 
-    expect(wrapper.vm.fillProgress).toBe(0)
+    await wrapper.setProps({ fillProgress: 40 })
+    expect(wrapper.props('fillProgress')).toBe(40)
+  })
 
-    await wrapper.setProps({ fillProgress: defaultProps.fillProgress })
+  it('defaults appTheme to light and accepts dark', async () => {
+    const wrapper = mountBar()
+    expect(wrapper.props('appTheme')).toBe('light')
 
-    expect(wrapper.vm.fillProgress).toBe(defaultProps.fillProgress)
+    await wrapper.setProps({ appTheme: 'dark' })
+    expect(wrapper.props('appTheme')).toBe('dark')
   })
 })

package/src/components/projectMarker/projectMarker.spec.js

@@ -0,0 +1,154 @@
+/* eslint-disable */
+import { mount, DOMWrapper } from '@vue/test-utils'
+import ProjectMarker from './index.vue'
+import Icon from '@/components/icon'
+import MainButton from '@/components/buttons/mainButton'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+const marker = (overrides = {}) => ({
+  choice: null,
+  color: '#9C27B0',
+  can_be_deleted: true,
+  translations: { 'en-us': { name: 'In progress' } },
+  ...overrides,
+})
+
+const mountMarker = (props = {}) =>
+  mount(ProjectMarker, {
+    props: { markerData: marker(), activeLanguage: 'en-us', ...props },
+  })
+
+/** The clickable pill is the first element child of the root container. */
+const clickPill = (wrapper) =>
+  new DOMWrapper(wrapper.element.children[0]).trigger('click')
+
+describe('ProjectMarker', () => {
+  it('does not render the pill when there is no translation for the active language', () => {
+    const wrapper = mountMarker({ activeLanguage: 'de-de' })
+    expect(wrapper.text()).not.toContain('In progress')
+  })
+
+  it('renders the marker name from the active language translation', () => {
+    expect(mountMarker().text()).toContain('In progress')
+  })
+
+  it('renders a color dot and no status icon for a plain marker', () => {
+    const wrapper = mountMarker()
+    expect(wrapper.findComponent(Icon).exists()).toBe(false)
+  })
+
+  it('renders the checkmark icon for a sold marker', () => {
+    const wrapper = mountMarker({
+      markerData: marker({
+        choice: 'sold',
+        translations: { 'en-us': { name: 'Sold' } },
+      }),
+    })
+    const icon = wrapper.findComponent(Icon)
+    expect(icon.exists()).toBe(true)
+    expect(icon.attributes('name')).toBe('checkmark')
+  })
+
+  it('renders the cross_filled icon for a lost marker', () => {
+    const wrapper = mountMarker({
+      markerData: marker({
+        choice: 'lost',
+        translations: { 'en-us': { name: 'Lost' } },
+      }),
+    })
+    const icon = wrapper.findComponent(Icon)
+    expect(icon.exists()).toBe(true)
+    expect(icon.attributes('name')).toBe('cross_filled')
+  })
+
+  it('renders the date only when a date is provided', () => {
+    expect(mountMarker({ date: '23.07.2022' }).text()).toContain('23.07.2022')
+    expect(mountMarker().text()).not.toContain('23.07.2022')
+  })
+
+  describe('edition', () => {
+    const editableProps = { isEditable: true }
+
+    it('shows the three-dots affordance when edition is allowed', () => {
+      const wrapper = mountMarker(editableProps)
+      expect(wrapper.find('.dotContainer').exists()).toBe(true)
+    })
+
+    it('hides the affordance when isEditable is false', () => {
+      expect(mountMarker().find('.dotContainer').exists()).toBe(false)
+    })
+
+    it('hides the affordance when the marker cannot be deleted', () => {
+      const wrapper = mountMarker({
+        ...editableProps,
+        markerData: marker({ can_be_deleted: false }),
+      })
+      expect(wrapper.find('.dotContainer').exists()).toBe(false)
+    })
+
+    it('hides the affordance for a limited partner without group support', () => {
+      const wrapper = mountMarker({ ...editableProps, isLimitedPartner: true })
+      expect(wrapper.find('.dotContainer').exists()).toBe(false)
+    })
+
+    it('restores the affordance for a limited partner with group support', () => {
+      const wrapper = mountMarker({
+        ...editableProps,
+        isLimitedPartner: true,
+        isGroupSupport: true,
+      })
+      expect(wrapper.find('.dotContainer').exists()).toBe(true)
+    })
+
+    it('toggles the edit menu when the pill is clicked', async () => {
+      const wrapper = mountMarker(editableProps)
+      expect(wrapper.text()).not.toContain('Edit')
+
+      await clickPill(wrapper)
+      expect(wrapper.text()).toContain('Edit')
+      expect(wrapper.text()).toContain('Delete')
+
+      await clickPill(wrapper)
+      expect(wrapper.text()).not.toContain('Edit')
+    })
+
+    it('does not open the menu when edition is not allowed', async () => {
+      const wrapper = mountMarker()
+      await clickPill(wrapper)
+      expect(wrapper.text()).not.toContain('Edit')
+    })
+
+    it('emits editHandler when the Edit action is clicked', async () => {
+      const wrapper = mountMarker(editableProps)
+      await clickPill(wrapper)
+
+      const editItem = wrapper
+        .findAll('div')
+        .find((d) => d.text() === 'Edit')
+      await editItem.trigger('click')
+
+      expect(wrapper.emitted('editHandler')).toHaveLength(1)
+    })
+
+    it('opens the delete confirmation modal and emits deleteHandler on confirm', async () => {
+      const wrapper = mountMarker(editableProps)
+      await clickPill(wrapper)
+
+      const deleteItem = wrapper
+        .findAll('div')
+        .find((d) => d.text() === 'Delete')
+      await deleteItem.trigger('click')
+      expect(wrapper.text()).toContain('delete_confirm_text')
+
+      const confirm = wrapper
+        .findAllComponents(MainButton)
+        .find((b) => b.props('text') === 'Delete')
+      await confirm.trigger('click')
+
+      expect(wrapper.emitted('deleteHandler')).toHaveLength(1)
+    })
+  })
+})

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