@eturnity/eturnity_reusable_components 9.28.1 → 9.28.3

package/src/components/navigationTabs/navigationTabs.spec.js

@@ -0,0 +1,95 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import NavigationTabs from '@/components/navigationTabs'
+
+// `theme` and `$gettext` are provided globally by jest.setup.js, so specs do
+// not need to re-provide them. See the canonical example at
+// src/components/buttons/closeButton/closeButton.spec.js.
+//
+// The component renders only styled-components (no data-test-id hooks) and must
+// not be changed, so the tab elements are selected structurally: the root
+// wrapper holds one Tab div per item followed by a trailing BottomLine div.
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+const tabsData = [
+  { id: 1, slug: 'overview', label: 'Overview' },
+  {
+    id: 2,
+    slug: 'billing',
+    label: 'Billing',
+    labelInfoText: 'Invoices and payment methods',
+    labelInfoAlign: 'left',
+  },
+  { id: 3, slug: 'users', label: 'Users', isDisabled: true },
+]
+
+describe('NavigationTabs', () => {
+  const mountTabs = (props = {}) =>
+    mount(NavigationTabs, {
+      props: {
+        tabsData,
+        activeTab: 'billing',
+        tabKey: 'slug',
+        tabLabel: 'label',
+        ...props,
+      },
+    })
+
+  // The Tab divs are every direct child of the root except the trailing
+  // BottomLine div.
+  const getTabs = (wrapper) => {
+    const tabEls = Array.from(wrapper.element.children).slice(0, -1)
+    return wrapper.findAll('div').filter((d) => tabEls.includes(d.element))
+  }
+
+  it('renders one tab per item with its label', () => {
+    const wrapper = mountTabs()
+    const tabs = getTabs(wrapper)
+    expect(tabs).toHaveLength(tabsData.length)
+    expect(wrapper.text()).toContain('Overview')
+    expect(wrapper.text()).toContain('Billing')
+    expect(wrapper.text()).toContain('Users')
+  })
+
+  it('emits tab-click with the tabKey value when isIndexKey is false', async () => {
+    const wrapper = mountTabs()
+    const tabs = getTabs(wrapper)
+
+    await tabs[0].trigger('click')
+    await tabs[2].trigger('click')
+
+    const emitted = wrapper.emitted('tab-click')
+    expect(emitted).toHaveLength(2)
+    expect(emitted[0]).toEqual(['overview'])
+    expect(emitted[1]).toEqual(['users'])
+  })
+
+  it('emits tab-click with the index when isIndexKey is true', async () => {
+    const wrapper = mountTabs({ activeTab: 0, isIndexKey: true })
+    const tabs = getTabs(wrapper)
+
+    await tabs[2].trigger('click')
+
+    const emitted = wrapper.emitted('tab-click')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0]).toEqual([2])
+  })
+
+  it('styles the active tab differently from an inactive tab', () => {
+    const wrapper = mountTabs()
+    const tabs = getTabs(wrapper)
+    // activeTab is 'billing' (index 1); its generated class must differ from an
+    // inactive tab's class.
+    expect(tabs[1].classes()).not.toEqual(tabs[0].classes())
+  })
+
+  it('renders info text only for tabs that provide labelInfoText', () => {
+    const wrapper = mountTabs()
+    const infoTexts = wrapper.findAll('[data-test-id="infoText_container"]')
+    expect(infoTexts).toHaveLength(1)
+  })
+})

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