@eturnity/eturnity_reusable_components 9.25.17-qa-03.0 → 9.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.25.17-qa-03.0",
+  "version": "9.28.0",
   "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/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])
+    })
+  })
+})

package/src/components/filterComponent/viewFilter.vue

@@ -382,8 +382,9 @@
     position: absolute;
     z-index: 99;
     top: 8px;
-    left: 100%;
-    transform: translateX(-50%);
+    /* Anchor to the trigger's left and grow rightward; clampBoxToViewport()
+       shifts it back in when wide content would overflow the viewport. */
+    left: 0;
     width: max-content;
     max-width: calc(100vw - 32px);
     background-color: ${(props) => props.theme.colors.white};
@@ -501,6 +502,7 @@
     data() {
       return {
         isOptionsVisible: false,
+        boxResizeObserver: null,
       }
     },
     computed: {
@@ -514,10 +516,63 @@
         return getDateFormat(this.activeLanguage)
       },
     },
+    watch: {
+      // Keep the filter box on screen: clamp on open and whenever its content
+      // resizes (e.g. a wide value is selected) or the window resizes.
+      isOptionsVisible(visible) {
+        if (visible) {
+          this.$nextTick(() => {
+            this.clampBoxToViewport()
+            this.observeBoxResize()
+            window.addEventListener('resize', this.clampBoxToViewport)
+          })
+        } else {
+          this.teardownBoxObservers()
+        }
+      },
+    },
     beforeUnmount() {
       document.removeEventListener('click', this.handleClickOutside)
+      this.teardownBoxObservers()
     },
     methods: {
+      // Shift the absolutely-positioned filter box left when its right edge
+      // would overflow the viewport, then clamp so the left edge stays visible.
+      clampBoxToViewport() {
+        const el = this.$refs.boxContainer?.$el
+        if (!el) {
+          return
+        }
+        el.style.transform = 'none'
+        const rect = el.getBoundingClientRect()
+        const margin = 16
+        const viewportWidth = window.innerWidth
+        let shift = 0
+        if (rect.right > viewportWidth - margin) {
+          shift = viewportWidth - margin - rect.right
+        }
+        if (rect.left + shift < margin) {
+          shift = margin - rect.left
+        }
+        el.style.transform = shift !== 0 ? `translateX(${shift}px)` : 'none'
+      },
+      observeBoxResize() {
+        const el = this.$refs.boxContainer?.$el
+        if (!el || typeof ResizeObserver === 'undefined') {
+          return
+        }
+        this.boxResizeObserver = new ResizeObserver(() =>
+          this.clampBoxToViewport()
+        )
+        this.boxResizeObserver.observe(el)
+      },
+      teardownBoxObservers() {
+        if (this.boxResizeObserver) {
+          this.boxResizeObserver.disconnect()
+          this.boxResizeObserver = null
+        }
+        window.removeEventListener('resize', this.clampBoxToViewport)
+      },
       isDateColumn(column) {
         if (column === 'updated') {
           return true

package/src/components/inputs/select/select.spec.js

@@ -0,0 +1,154 @@
+/* eslint-disable */
+import { flushPromises, mount } from '@vue/test-utils'
+import Select from './index.vue'
+import Option from './option/index.vue'
+
+// import.meta in the real iconCache.mjs cannot be parsed by Jest.
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+// jsdom does not implement ResizeObserver, which the select observes on mount.
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+
+// Host component mirrors the documented usage (selector + dropdown slots) so the
+// spec exercises the public contract rather than internals.
+const Host = {
+  components: { Select, Option },
+  props: ['selectProps', 'options'],
+  template: `
+    <Select v-bind="selectProps">
+      <template #selector="{ selectedValue }">
+        <span data-test-id="selector">{{ selectedValue }}</span>
+      </template>
+      <template #dropdown>
+        <Option
+          v-for="opt in options"
+          :key="opt"
+          :value="opt"
+          :data-id="'opt_' + opt"
+        >{{ opt }}</Option>
+      </template>
+    </Select>
+  `,
+}
+
+const THREE_OPTIONS = ['one', 'two', 'three']
+const SIX_OPTIONS = ['one', 'two', 'three', 'four', 'five', 'six']
+
+const mountSelect = (selectProps = {}, options = THREE_OPTIONS) =>
+  mount(Host, {
+    props: {
+      // isFixedDropdownPosition avoids the requestAnimationFrame scroll loop,
+      // which would otherwise keep running after the test unmounts.
+      // shouldUseTeleport keeps the dropdown inside the wrapper so it can be queried.
+      selectProps: {
+        isFixedDropdownPosition: true,
+        shouldUseTeleport: false,
+        ...selectProps,
+      },
+      options,
+    },
+  })
+
+const selectInstance = (wrapper) => wrapper.findComponent(Select)
+
+const openDropdown = async (wrapper) => {
+  await wrapper.find('.select-button').trigger('click')
+  await flushPromises()
+  await wrapper.vm.$nextTick()
+}
+
+describe('RCselect', () => {
+  it('renders the label with the optional hint and required star', () => {
+    const wrapper = mountSelect({
+      label: 'Service territory',
+      labelOptional: true,
+      isRequiredLabel: true,
+    })
+    expect(wrapper.text()).toContain('Service territory')
+    expect(wrapper.text()).toContain('optional')
+    // IsRequiredLabelStar renders the asterisk character.
+    expect(wrapper.text()).toContain('*')
+  })
+
+  it('initialises the selector slot from the value prop', () => {
+    const wrapper = mountSelect({ value: 'two' })
+    expect(wrapper.find('[data-test-id="selector"]').text()).toBe('two')
+  })
+
+  it('updates the selector when the value prop changes', async () => {
+    const wrapper = mountSelect({ value: 'one' })
+    await wrapper.setProps({ selectProps: { value: 'three' } })
+    expect(wrapper.find('[data-test-id="selector"]').text()).toBe('three')
+  })
+
+  it('opens the dropdown on trigger click and emits on-dropdown-open', async () => {
+    const wrapper = mountSelect()
+    expect(selectInstance(wrapper).emitted('on-dropdown-open')).toBeUndefined()
+
+    await openDropdown(wrapper)
+
+    expect(selectInstance(wrapper).emitted('on-dropdown-open')).toHaveLength(1)
+    expect(wrapper.find('.rc-select-dropdown').isVisible()).toBe(true)
+  })
+
+  it('emits input-change with the option value and closes on selection', async () => {
+    const wrapper = mountSelect()
+    await openDropdown(wrapper)
+
+    await wrapper.find('[data-id="opt_two"]').trigger('click')
+
+    const select = selectInstance(wrapper)
+    expect(select.emitted('input-change')).toHaveLength(1)
+    expect(select.emitted('input-change')[0]).toEqual(['two'])
+    expect(select.emitted('on-dropdown-close')).toHaveLength(1)
+  })
+
+  it('shows the search field once the option count reaches the threshold', async () => {
+    const wrapper = mountSelect({}, SIX_OPTIONS)
+    await openDropdown(wrapper)
+    expect(wrapper.find('[data-test-id="input"]').exists()).toBe(true)
+  })
+
+  it('hides the search field when there are fewer options than the threshold', async () => {
+    const wrapper = mountSelect({}, THREE_OPTIONS)
+    await openDropdown(wrapper)
+    expect(wrapper.find('[data-test-id="input"]').exists()).toBe(false)
+  })
+
+  it('honours a custom minOptionLength for the search field', async () => {
+    const wrapper = mountSelect({ minOptionLength: 3 }, THREE_OPTIONS)
+    await openDropdown(wrapper)
+    expect(wrapper.find('[data-test-id="input"]').exists()).toBe(true)
+  })
+
+  it('does not show the search field when isSearchable is false', async () => {
+    const wrapper = mountSelect({ isSearchable: false }, SIX_OPTIONS)
+    await openDropdown(wrapper)
+    expect(wrapper.find('[data-test-id="input"]').exists()).toBe(false)
+  })
+
+  it('renders the error message when hasError is set', () => {
+    const wrapper = mountSelect({
+      hasError: true,
+      errorMessage: 'Selection required',
+    })
+    const error = wrapper.find('[data-test-id="error_message_wrapper"]')
+    expect(error.exists()).toBe(true)
+    expect(error.text()).toBe('Selection required')
+  })
+
+  it('hides the caret when showCaret is false', () => {
+    expect(mountSelect().find('.caret_dropdown').exists()).toBe(true)
+    expect(
+      mountSelect({ showCaret: false }).find('.caret_dropdown').exists()
+    ).toBe(false)
+  })
+})