@eturnity/eturnity_reusable_components 9.25.17 → 9.28.1

package/package.json

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

package/src/components/collapsableInfoText/collapsableInfoText.spec.js

@@ -0,0 +1,57 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import CollapsableInfoText from '@/components/collapsableInfoText'
+
+// `theme` and the `$gettext` mock are provided globally by jest.setup.js.
+// $gettext returns the message unchanged, so the toggle renders the literal
+// "Show more" / "Show less" labels.
+
+// The component only renders the toggle once the text is longer than 170 chars.
+const LONG_TEXT = 'A long info text. '.repeat(20) // > 170 chars
+const SHORT_TEXT = 'A short info text.' // <= 170 chars
+
+describe('CollapsableInfoText', () => {
+  const mountText = (props = {}) =>
+    mount(CollapsableInfoText, { props: { text: LONG_TEXT, ...props } })
+
+  const findButton = (wrapper, label) =>
+    wrapper.findAll('p').find((p) => p.text() === label)
+
+  it('renders the provided text', () => {
+    const wrapper = mountText({ text: 'Hello integrators' })
+    expect(wrapper.text()).toContain('Hello integrators')
+  })
+
+  it('shows the "Show more" toggle when the text is long', () => {
+    const wrapper = mountText({ text: LONG_TEXT })
+    expect(findButton(wrapper, 'Show more')).toBeDefined()
+    expect(findButton(wrapper, 'Show less')).toBeUndefined()
+  })
+
+  it('hides the toggle when the text is short', () => {
+    const wrapper = mountText({ text: SHORT_TEXT })
+    expect(findButton(wrapper, 'Show more')).toBeUndefined()
+    expect(findButton(wrapper, 'Show less')).toBeUndefined()
+  })
+
+  it('expands to "Show less" when the toggle is clicked', async () => {
+    const wrapper = mountText({ text: LONG_TEXT })
+
+    await findButton(wrapper, 'Show more').trigger('click')
+
+    expect(wrapper.vm.showAll).toBe(true)
+    expect(findButton(wrapper, 'Show less')).toBeDefined()
+    expect(findButton(wrapper, 'Show more')).toBeUndefined()
+  })
+
+  it('collapses back to "Show more" on a second click', async () => {
+    const wrapper = mountText({ text: LONG_TEXT })
+
+    await findButton(wrapper, 'Show more').trigger('click')
+    await findButton(wrapper, 'Show less').trigger('click')
+
+    expect(wrapper.vm.showAll).toBe(false)
+    expect(findButton(wrapper, 'Show more')).toBeDefined()
+    expect(findButton(wrapper, 'Show less')).toBeUndefined()
+  })
+})

package/src/components/collapsableInfoText/collapsableInfoText.stories.js

@@ -50,3 +50,11 @@ ShortText.args = {
   lineCount: 5,
   minWidth: '100%',
 }
+
+export const LargeFontSize = Template.bind({})
+LargeFontSize.args = {
+  text: longCopy,
+  fontSize: '18px',
+  lineCount: 3,
+  minWidth: '100%',
+}

package/src/components/dropdown/Dropdown.stories.js

@@ -123,3 +123,12 @@ DropdownBackgroundColor.args = {
   ...defaultDropdownProps,
   backgroundColor: theme.colors.red,
 }
+
+// Long, unbroken option names should wrap inside the dropdown instead of
+// overflowing horizontally (EPDM-11708).
+export const DropdownLongContent = Template.bind({})
+DropdownLongContent.args = {
+  ...defaultDropdownProps,
+  openingMode: 'click',
+  dropdown: `<div>ThisIsAnExtremelyLongVariantNameWithoutAnySpacesThatUsedToCauseHorizontalScroll</div><div>Another duplicated variant with a very long descriptive name that keeps going</div>`,
+}

package/src/components/dropdown/dropdown.spec.js

@@ -8,48 +8,121 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
   fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
 }))
 
+const mountDropdown = (props = {}) =>
+  mount(RCDropdown, {
+    props: { ...defaultProps, ...props },
+    slots: { ...defaultProps },
+    global: { provide: { theme } },
+  })
+
 describe('dropdown/index.vue', () => {
-  it('dropdown is rendered with correct trigger text', async () => {
-    const wrapper = mount(RCDropdown, {
-      props: { ...defaultProps },
-      slots: { ...defaultProps },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+  it('renders the trigger and dropdown slots', () => {
+    const wrapper = mountDropdown()
+
+    const trigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const content = wrapper.find('[data-test-id="dropdown_dropdown_content"]')
+
+    expect(trigger.exists()).toBe(true)
+    expect(trigger.text()).toContain(defaultProps.trigger)
+    expect(content.html()).toContain('DROPDOWN OPTION 1')
+    expect(content.html()).toContain('DROPDOWN OPTION 2')
+  })
+
+  it('opens on click only when opening-mode is "click"', async () => {
+    const wrapper = mountDropdown({ openingMode: 'click' })
+
+    const trigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const dropdownWrapper = wrapper.find(
+      '[data-test-id="dropdown_dropdown_wrapper"]'
+    )
+
+    expect(dropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await trigger.trigger('hover')
+    expect(dropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await trigger.trigger('click')
+    expect(dropdownWrapper.classes('openDropdown')).toBe(true)
+  })
+
+  it('does not apply the openDropdown class in hover mode', async () => {
+    const wrapper = mountDropdown({ openingMode: 'hover' })
+
+    const trigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const dropdownWrapper = wrapper.find(
+      '[data-test-id="dropdown_dropdown_wrapper"]'
+    )
+
+    await trigger.trigger('click')
+
+    expect(dropdownWrapper.classes('openDropdown')).toBe(false)
+  })
+
+  it('toggles open and closed on repeated clicks', async () => {
+    const wrapper = mountDropdown({ openingMode: 'click' })
+
+    const trigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const dropdownWrapper = wrapper.find(
+      '[data-test-id="dropdown_dropdown_wrapper"]'
+    )
+
+    await trigger.trigger('click')
+    expect(dropdownWrapper.classes('openDropdown')).toBe(true)
 
-    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    await trigger.trigger('click')
+    expect(dropdownWrapper.classes('openDropdown')).toBe(false)
+  })
+
+  it('emits on-dropdown-toggle with the new open state', async () => {
+    const wrapper = mountDropdown({ openingMode: 'click' })
+
+    const trigger = wrapper.find('[data-test-id="dropdown_trigger"]')
 
-    expect(dropdownTrigger.exists()).toBe(true)
-    expect(dropdownTrigger.text()).toContain(defaultProps.trigger)
+    await trigger.trigger('click')
+    await trigger.trigger('click')
+
+    expect(wrapper.emitted('on-dropdown-toggle')).toHaveLength(2)
+    expect(wrapper.emitted('on-dropdown-toggle')[0]).toEqual([true])
+    expect(wrapper.emitted('on-dropdown-toggle')[1]).toEqual([false])
   })
 
-  it('dropdown opens on click only', async () => {
+  it('closes when clicking outside in click mode', async () => {
+    // attachTo so the mounted click-outside listener sees a connected element
     const wrapper = mount(RCDropdown, {
       props: { ...defaultProps, openingMode: 'click' },
       slots: { ...defaultProps },
-      global: {
-        provide: {
-          theme,
-        },
-      },
+      global: { provide: { theme } },
+      attachTo: document.body,
     })
 
-    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
-    const dropdownDropdownWrapper = wrapper.find(
+    const trigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const dropdownWrapper = wrapper.find(
       '[data-test-id="dropdown_dropdown_wrapper"]'
     )
 
-    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+    await trigger.trigger('click')
+    expect(dropdownWrapper.classes('openDropdown')).toBe(true)
 
-    await dropdownTrigger.trigger('hover')
+    document.body.click()
+    await wrapper.vm.$nextTick()
 
-    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+    expect(dropdownWrapper.classes('openDropdown')).toBe(false)
+    wrapper.unmount()
+  })
 
-    await dropdownTrigger.trigger('click')
+  it('renders long unbroken content inside the dropdown window (EPDM-11708)', () => {
+    const longName =
+      'ThisIsAnExtremelyLongVariantNameWithoutAnySpacesThatUsedToCauseHorizontalScroll'
+    const wrapper = mount(RCDropdown, {
+      props: { ...defaultProps },
+      slots: {
+        trigger: defaultProps.trigger,
+        dropdown: `<div>${longName}</div>`,
+      },
+      global: { provide: { theme } },
+    })
 
-    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(true)
+    const content = wrapper.find('[data-test-id="dropdown_dropdown_content"]')
+    expect(content.text()).toContain(longName)
   })
 })

package/src/components/dropdown/index.vue

@@ -69,6 +69,8 @@
     min-width: 160px;
     box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
     z-index: 1;
+    overflow-wrap: break-word;
+    word-break: break-word;
   `
 
   const WrapperButton = styled('div', wrapperAttrs)`

package/src/components/filter/Filter.stories.js

@@ -0,0 +1,177 @@
+import FilterComponent from './index.vue'
+import theme from '@/assets/theme'
+
+// To use:
+// import Filter from '@eturnity/eturnity_reusable_components/src/components/filter'
+// <Filter
+//   :filter-data="filterData"
+//   :filter-views="filterViews"
+//   :button-text="buttonText"
+//   active-view="Default view"
+//   @on-filter-settings-change="..."
+//   @on-reset-filters="..."
+// />
+
+// The panel (`FilterSettings`) is data-driven: each `filterData` entry is a
+// column of type `columns` (draggable visibility checkboxes) or `filter`
+// (selectable / range filters). `filter_type` drives which control renders.
+const FILTER_DATA = [
+  {
+    type: 'columns',
+    columnName: 'Columns',
+    dataOptions: [
+      { choice: 'name', text: 'Name', selected: true },
+      { choice: 'status', text: 'Status', selected: true },
+      { choice: 'created', text: 'Created', selected: false },
+    ],
+  },
+  {
+    type: 'filter',
+    columnName: 'Filters',
+    dataOptions: [
+      {
+        field: 'status',
+        label: 'Status',
+        filter_type: 'multi_select_string',
+        dataId: 'filter_status',
+        selectedText: 'All',
+        choices: [
+          { text: 'Active', choice: 'active', selected: true },
+          { text: 'Archived', choice: 'archived', selected: false },
+        ],
+      },
+      {
+        field: 'is_favourite',
+        label: 'Favourite',
+        filter_type: 'boolean',
+        dataId: 'filter_favourite',
+        selectedText: 'Any',
+        choices: [
+          { text: 'Yes', choice: true, selected: false },
+          { text: 'No', choice: false, selected: false },
+        ],
+      },
+      {
+        field: 'power',
+        label: 'Power (kW)',
+        filter_type: 'integer_range',
+        dataId: 'filter_power',
+        selectedText: '',
+        unit: 'kW',
+        choices: [],
+        range: { start: null, end: null },
+      },
+    ],
+  },
+]
+
+const FILTER_VIEWS = [{ name: 'Default view' }, { name: 'My projects' }]
+
+const BUTTON_TEXT = {
+  apply_view: 'Apply view',
+  save_view: 'Save view',
+  cancel: 'Cancel',
+}
+
+// Two applied filters → the trigger badge shows "2".
+const CURRENT_FILTER_DATA = {
+  filters: [{ field: 'status' }, { field: 'is_favourite' }],
+}
+
+export default {
+  title: 'Components/Filter/Filter',
+  component: FilterComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Dropdown filter built from a `ParentDropdown` trigger and a ' +
+          '`FilterSettings` panel. Click the trigger to open the panel; the ' +
+          'badge shows how many filters are currently applied.',
+      },
+    },
+  },
+  argTypes: {
+    dropdownText: { control: 'text' },
+    componentName: { control: 'text' },
+    showActiveFilter: { control: 'boolean' },
+    activeView: { control: 'text' },
+    filterData: { control: false },
+    filterViews: { control: false },
+    buttonText: { control: false },
+    currentFilterData: { control: false },
+  },
+}
+
+const Template = (args) => ({
+  components: { FilterComponent },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="filter-story" style="padding: 24px; min-height: 360px;">
+      <FilterComponent v-bind="args" />
+    </div>
+  `,
+  provide: { theme },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  componentName: 'demo',
+  dropdownText: 'Default view',
+  filterData: FILTER_DATA,
+  filterViews: FILTER_VIEWS,
+  buttonText: BUTTON_TEXT,
+  activeView: 'Default view',
+  showActiveFilter: true,
+  currentFilterData: CURRENT_FILTER_DATA,
+}
+
+/**
+ * Without any saved views the top section (active-view select + reset) is
+ * hidden and only the filter columns are shown.
+ */
+export const NoSavedViews = Template.bind({})
+NoSavedViews.args = {
+  componentName: 'demo',
+  dropdownText: 'Filters',
+  filterData: FILTER_DATA,
+  filterViews: [],
+  buttonText: BUTTON_TEXT,
+  activeView: null,
+  showActiveFilter: true,
+  currentFilterData: null,
+}
+
+/**
+ * `showActiveFilter: false` hides the active-view select while keeping the
+ * reset action.
+ */
+export const WithoutActiveFilterSelect = Template.bind({})
+WithoutActiveFilterSelect.args = {
+  componentName: 'demo',
+  dropdownText: 'Default view',
+  filterData: FILTER_DATA,
+  filterViews: FILTER_VIEWS,
+  buttonText: BUTTON_TEXT,
+  activeView: 'Default view',
+  showActiveFilter: false,
+  currentFilterData: CURRENT_FILTER_DATA,
+}
+
+/**
+ * A custom trigger label and a single applied filter (badge shows "1").
+ */
+export const CustomTriggerText = Template.bind({})
+CustomTriggerText.args = {
+  componentName: 'demo',
+  dropdownText: 'Project filters',
+  filterData: FILTER_DATA,
+  filterViews: FILTER_VIEWS,
+  buttonText: BUTTON_TEXT,
+  activeView: 'Default view',
+  showActiveFilter: true,
+  currentFilterData: { filters: [{ field: 'status' }] },
+}

package/src/components/filter/filter.spec.js

@@ -0,0 +1,183 @@
+/* eslint-disable */
+import { flushPromises, mount } from '@vue/test-utils'
+import FilterComponent from '@/components/filter'
+
+// The real children pull in heavy deps (date picker, draggable, teleported
+// selects, icon cache) that can't run under Jest. Stub them so we can test the
+// host component's own contract: the applied-filters badge, open/close
+// behaviour, and the emit wiring between the panel and the parent.
+jest.mock('@/components/filter/parentDropdown', () => ({
+  __esModule: true,
+  default: {
+    name: 'ParentDropdown',
+    props: ['componentName', 'dropdownText', 'isOpen', 'numberOfFiltersApplied'],
+    emits: ['on-toggle'],
+    template:
+      '<button data-test-id="parent-dropdown" @click="$emit(\'on-toggle\')">{{ numberOfFiltersApplied }}</button>',
+  },
+}))
+jest.mock('@/components/filter/filterSettings', () => ({
+  __esModule: true,
+  default: {
+    name: 'FilterSettings',
+    template: '<div data-test-id="filter-settings"></div>',
+  },
+}))
+
+// requestIdleCallback is absent in jsdom; stub it as a no-op so the panel only
+// mounts on an explicit toggle (no background prewarm timers in tests).
+beforeAll(() => {
+  global.requestIdleCallback = jest.fn()
+  global.cancelIdleCallback = jest.fn()
+})
+afterAll(() => {
+  delete global.requestIdleCallback
+  delete global.cancelIdleCallback
+})
+
+const baseProps = { filterData: [], filterViews: [] }
+
+const mountFilter = (props = {}) =>
+  mount(FilterComponent, { props: { ...baseProps, ...props } })
+
+const parentDropdown = (wrapper) =>
+  wrapper.findComponent({ name: 'ParentDropdown' })
+const filterSettings = (wrapper) =>
+  wrapper.findComponent({ name: 'FilterSettings' })
+
+const badge = (props) =>
+  parentDropdown(mountFilter(props)).props('numberOfFiltersApplied')
+
+describe('FilterComponent', () => {
+  describe('numberOfFiltersApplied badge', () => {
+    it('counts live custom_view_filter rows', () => {
+      expect(
+        badge({
+          currentFilterData: {
+            filters: [
+              { custom_view_filter: true },
+              { custom_view_filter: false },
+              { custom_view_filter: true },
+            ],
+          },
+        })
+      ).toBe(2)
+    })
+
+    it('counts distinct fields for flat filter rows', () => {
+      expect(
+        badge({
+          currentFilterData: {
+            filters: [{ field: 'a' }, { field: 'a' }, { field: 'b' }],
+          },
+        })
+      ).toBe(2)
+    })
+
+    it('falls back to the row count for plain value filters', () => {
+      expect(
+        badge({ currentFilterData: { filters: ['x', 'y', 'z'] } })
+      ).toBe(3)
+    })
+
+    it('falls back to the active view filters when no live data is present', () => {
+      expect(
+        badge({
+          currentFilterData: null,
+          activeFilterView: {
+            filters: [{ field: 'x' }, { field: 'y' }],
+            columns: ['a', 'b'],
+          },
+        })
+      ).toBe(2)
+    })
+
+    it('counts custom_view_filter columns of the active view when present', () => {
+      expect(
+        badge({
+          currentFilterData: null,
+          activeFilterView: {
+            filters: [{ field: 'x' }],
+            columns: [
+              { custom_view_filter: true },
+              { custom_view_filter: true },
+              { custom_view_filter: false },
+            ],
+          },
+        })
+      ).toBe(2)
+    })
+
+    it('is zero with no filters applied', () => {
+      expect(badge({})).toBe(0)
+    })
+  })
+
+  describe('open / close behaviour', () => {
+    it('mounts the panel and emits on-filter-panel-open when opened', async () => {
+      const wrapper = mountFilter()
+      expect(filterSettings(wrapper).exists()).toBe(false)
+
+      await parentDropdown(wrapper).vm.$emit('on-toggle')
+      await flushPromises()
+
+      expect(filterSettings(wrapper).exists()).toBe(true)
+      expect(filterSettings(wrapper).isVisible()).toBe(true)
+      expect(wrapper.emitted('on-filter-panel-open')).toHaveLength(1)
+    })
+
+    it('keeps the panel mounted but hidden when toggled closed', async () => {
+      const wrapper = mountFilter()
+      await parentDropdown(wrapper).vm.$emit('on-toggle')
+      await parentDropdown(wrapper).vm.$emit('on-toggle')
+
+      expect(filterSettings(wrapper).exists()).toBe(true)
+      expect(filterSettings(wrapper).isVisible()).toBe(false)
+    })
+
+    it('closes when the closeDropdown prop becomes true', async () => {
+      const wrapper = mountFilter()
+      await parentDropdown(wrapper).vm.$emit('on-toggle')
+      expect(wrapper.vm.isDropdownOpen).toBe(true)
+
+      await wrapper.setProps({ closeDropdown: true })
+      expect(wrapper.vm.isDropdownOpen).toBe(false)
+    })
+  })
+
+  describe('panel event wiring', () => {
+    const openWrapper = async () => {
+      const wrapper = mountFilter()
+      await parentDropdown(wrapper).vm.$emit('on-toggle')
+      return wrapper
+    }
+
+    it('re-emits a view selection and closes the dropdown', async () => {
+      const wrapper = await openWrapper()
+      const view = { name: 'My view' }
+
+      await filterSettings(wrapper).vm.$emit('on-view-select', view)
+
+      expect(wrapper.emitted('on-filter-view-select')[0]).toEqual([view])
+      expect(wrapper.vm.isDropdownOpen).toBe(false)
+    })
+
+    it('re-emits a reset and closes the dropdown', async () => {
+      const wrapper = await openWrapper()
+
+      await filterSettings(wrapper).vm.$emit('on-reset-filters')
+
+      expect(wrapper.emitted('on-reset-filters')).toHaveLength(1)
+      expect(wrapper.vm.isDropdownOpen).toBe(false)
+    })
+
+    it('forwards filter changes as on-filter-settings-change', async () => {
+      const wrapper = await openWrapper()
+      const change = { field: 'status', value: true }
+
+      await filterSettings(wrapper).vm.$emit('on-filter-change', change)
+
+      expect(wrapper.emitted('on-filter-settings-change')[0]).toEqual([change])
+    })
+  })
+})