@eturnity/eturnity_reusable_components 9.28.0 → 9.28.1

package/package.json

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

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/inputs/inputNumber/InputNumber.stories.js

@@ -1,150 +1,134 @@
 import InputNumber from './index.vue'
 
+// import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
+// How to use:
+// <input-number
+//   :value="inputValue"          // required
+//   placeholder="Enter distance"
+//   unitName="pc"
+//   :numberPrecision="2"
+//   :minNumber="0"
+//   @input-change="onInputChange($event)"
+//   @on-enter-click="onInputSubmit()"
+// />
+
 export default {
   title: 'Components/Inputs/InputNumber',
   component: InputNumber,
-  // argTypes: {},
+  tags: ['autodocs'],
+  argTypes: {
+    value: { description: 'Current value (required). String or number.' },
+    placeholder: { description: 'Placeholder shown when empty' },
+    unitName: { description: 'Unit appended to the value, e.g. "pc"' },
+    showLinearUnitName: {
+      description: 'Render the unit next to the input instead of inside it',
+      control: 'boolean',
+    },
+    numberPrecision: {
+      description: 'Number of decimal places kept',
+      control: 'number',
+    },
+    minNumber: {
+      description: 'Values below this are clamped up to it on blur',
+      control: 'number',
+    },
+    showArrowControls: {
+      description: 'Show the up/down stepper buttons',
+      control: 'boolean',
+    },
+    isError: { description: 'Error state styling', control: 'boolean' },
+    errorMessage: { description: 'Message shown while isError is true' },
+    disabled: { description: 'Disable the input', control: 'boolean' },
+    labelText: { description: 'Text label above the input' },
+    labelInfoText: { description: 'Info tooltip shown next to the label' },
+    fontSize: { description: 'Font size of the input text' },
+  },
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { InputNumber },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-number v-bind="$props" />',
-
-  // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
-  // How to use:
-  // <input-number
-  //     placeholder="Enter distance"
-  //     :isError="false" //default is false
-  //     inputWidth="150px" //by default, this is 100%
-  //     :numberPrecision="3"
-  //     unitName="pc"
-  //     :value="inputValue" //required -- String
-  //     @input-change="onInputChange($event)" //required
-  //     @on-enter-click="onInputSubmit()"
-  //     :errorMessage="Enter a number between 1 and 10"
-  //     :disabled="false"
-  //     :noBorder="true"
-  //     textAlign="left" // "left, right, center"
-  //     :showLinearUnitName="true"
-  //     fontSize="13px"
-  //     labelText="Number of Modules"
-  //     labelInfoText="Here is some information for you..."
-  //     labelInfoAlign="left"
-  // />
+  setup() {
+    return { args }
+  },
+  template: `
+    <div style="width: 260px; padding: 12px;">
+      <InputNumber v-bind="args" />
+    </div>
+  `,
 })
 
 export const Default = Template.bind({})
 Default.args = {
-  placeholder: 'Enter Value',
-  disabled: false,
   value: '',
+  placeholder: 'Enter value',
   inputWidth: '200px',
   minWidth: '150px',
   unitName: 'pc',
-  isError: false,
   numberPrecision: 0,
-  noBorder: false,
-  textAlign: 'left',
-  showLinearUnitName: false,
 }
 
-export const hasError = Template.bind({})
-hasError.args = {
-  placeholder: 'Enter Value',
-  errorMessage: 'This field is required',
-  isError: true,
-  disabled: false,
-  inputWidth: '200px',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: 'Enter Value',
-  disabled: true,
-  value: '',
-  inputWidth: '200px',
-  isError: false,
-  numberPrecision: 0,
-  noBorder: false,
-  textAlign: 'left',
-  showLinearUnitName: false,
+export const WithValueAndUnit = Template.bind({})
+WithValueAndUnit.args = {
+  ...Default.args,
+  value: 10,
+  numberPrecision: 2,
 }
 
 export const LinearUnit = Template.bind({})
 LinearUnit.args = {
-  placeholder: 'Enter Value',
-  disabled: false,
+  ...Default.args,
   value: 10,
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
   numberPrecision: 2,
-  noBorder: false,
-  textAlign: 'left',
   showLinearUnitName: true,
 }
 
-export const NormalUnit = Template.bind({})
-NormalUnit.args = {
-  placeholder: 'Enter Value',
-  disabled: false,
+export const WithArrowControls = Template.bind({})
+WithArrowControls.args = {
+  ...Default.args,
+  value: 5,
+  showArrowControls: true,
+}
+
+export const WithMinNumber = Template.bind({})
+WithMinNumber.args = {
+  ...Default.args,
+  value: 3,
+  minNumber: 5,
+  showArrowControls: true,
+}
+
+export const HasError = Template.bind({})
+HasError.args = {
+  ...Default.args,
+  value: '',
+  isError: true,
+  errorMessage: 'This field is required',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Default.args,
   value: 10,
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: 'left',
-  showLinearUnitName: false,
+  disabled: true,
 }
 
 export const WithLabel = Template.bind({})
 WithLabel.args = {
-  placeholder: 'Enter Value',
-  disabled: false,
+  ...Default.args,
   value: 10,
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
   numberPrecision: 2,
-  noBorder: false,
-  textAlign: 'left',
-  showLinearUnitName: false,
-  labelText: 'Number Input',
+  labelText: 'Number of modules',
 }
 
 export const WithLabelInfo = Template.bind({})
 WithLabelInfo.args = {
-  placeholder: 'Enter Value',
-  disabled: false,
-  value: 10,
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: 'left',
-  showLinearUnitName: false,
-  labelText: 'Number Input',
+  ...WithLabel.args,
   labelInfoText: 'Here is some information for you...',
   labelInfoAlign: 'right',
 }
 
 export const LargerFont = Template.bind({})
 LargerFont.args = {
-  placeholder: 'Enter Value',
-  disabled: false,
-  value: 10,
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: 'left',
-  showLinearUnitName: false,
-  labelText: 'Number Input',
+  ...WithLabel.args,
   fontSize: '16px',
 }

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

@@ -0,0 +1,133 @@
+import { mount } from '@vue/test-utils'
+
+// error_icon.png / date-fns (via translateLang) can't be parsed by jest, so
+// stub them out. iconCache uses import.meta and is mocked like other specs.
+jest.mock('../../../assets/icons/error_icon.png', () => 'error_icon.png')
+jest.mock('@/helpers/translateLang', () => ({
+  langForLocaleString: () => 'en-US',
+  translateLang: (lang) => lang,
+}))
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+import InputNumber from '@/components/inputs/inputNumber'
+
+const mountInput = (props = {}) =>
+  mount(InputNumber, { props: { value: null, numberPrecision: 0, ...props } })
+
+describe('inputNumber/index.vue', () => {
+  describe('rendering', () => {
+    it('renders the value with its unit appended', () => {
+      const wrapper = mountInput({ value: 5, unitName: 'pc' })
+      expect(wrapper.find('input').element.value).toBe('5 pc')
+    })
+
+    it('keeps the unit out of the input when shown as a linear unit', () => {
+      const wrapper = mountInput({
+        value: 5,
+        unitName: 'pc',
+        showLinearUnitName: true,
+      })
+      expect(wrapper.find('input').element.value).toBe('5')
+      expect(wrapper.text()).toContain('pc')
+    })
+
+    it('renders the label text', () => {
+      const wrapper = mountInput({ value: 5, labelText: 'Modules' })
+      expect(wrapper.text()).toContain('Modules')
+    })
+
+    it('renders the error message when isError is set', () => {
+      const wrapper = mountInput({
+        value: 5,
+        isError: true,
+        errorMessage: 'Invalid number',
+      })
+      expect(wrapper.text()).toContain('Invalid number')
+    })
+
+    it('disables the input and hides the arrow controls when disabled', () => {
+      const wrapper = mountInput({
+        value: 5,
+        disabled: true,
+        showArrowControls: true,
+      })
+      expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+      expect(wrapper.findAll('button')).toHaveLength(0)
+    })
+  })
+
+  describe('emits', () => {
+    it('emits input-focus on focus', async () => {
+      const wrapper = mountInput({ value: 5 })
+      await wrapper.find('input').trigger('focus')
+      expect(wrapper.emitted('input-focus')).toHaveLength(1)
+    })
+
+    it('emits input-change with the parsed number while typing', async () => {
+      const wrapper = mountInput({ value: 5 })
+      await wrapper.find('input').trigger('focus')
+      await wrapper.find('input').setValue('7')
+      expect(wrapper.emitted('input-change')).toBeTruthy()
+      expect(wrapper.emitted('input-change').at(-1)).toEqual([7])
+    })
+
+    it('emits on-enter-click when Enter is pressed', async () => {
+      const wrapper = mountInput({ value: 5 })
+      await wrapper.find('input').trigger('keyup.enter')
+      expect(wrapper.emitted('on-enter-click')).toHaveLength(1)
+    })
+  })
+
+  // Boundary Value Analysis: onInputBlur clamps values below `minNumber`.
+  describe('boundary value analysis: minNumber clamping on blur', () => {
+    const blurWith = async (props) => {
+      const wrapper = mountInput(props)
+      await wrapper.find('input').trigger('blur')
+      return wrapper.emitted('input-blur')
+    }
+
+    // minNumber = 10 -> just-below / at / just-above the boundary
+    it.each([
+      ['below the minimum (min - 1)', 9, 10],
+      ['at the minimum', 10, 10],
+      ['above the minimum (min + 1)', 11, 11],
+    ])('clamps a value %s', async (_label, value, expected) => {
+      const emitted = await blurWith({ value, minNumber: 10 })
+      expect(emitted).toEqual([[expected]])
+    })
+
+    it('does not clamp when minNumber is 0 (0 is treated as no minimum)', async () => {
+      // `if (this.minNumber && ...)` makes 0 falsy, so a negative value passes
+      const emitted = await blurWith({ value: -5, minNumber: 0 })
+      expect(emitted).toEqual([[-5]])
+    })
+  })
+
+  // Boundary Value Analysis: decrement is guarded at the negative boundary.
+  describe('boundary value analysis: decrement negative guard', () => {
+    const decrement = async (props) => {
+      const wrapper = mountInput({ showArrowControls: true, ...props })
+      // buttons: [0] increment (up), [1] decrement (down)
+      await wrapper.findAll('button')[1].trigger('click')
+      return wrapper.emitted('input-change')
+    }
+
+    it('emits a negative value when allowNegative is true', async () => {
+      const emitted = await decrement({ value: 5, allowNegative: true })
+      expect(emitted).toEqual([[-1]])
+    })
+
+    it('blocks crossing below zero when allowNegative is false', async () => {
+      const emitted = await decrement({ value: 5, allowNegative: false })
+      expect(emitted).toBeUndefined()
+    })
+
+    it('increments from the zero baseline by the interaction step', async () => {
+      const wrapper = mountInput({ value: 5, showArrowControls: true })
+      await wrapper.findAll('button')[0].trigger('click')
+      expect(wrapper.emitted('input-change')).toEqual([[1]])
+    })
+  })
+})

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

@@ -0,0 +1,103 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+
+// numberConverter pulls in translateLang (date-fns), which jest can't parse.
+// Stub it so locale formatting is deterministic (en-US) under test.
+jest.mock('@/helpers/translateLang', () => ({
+  langForLocaleString: () => 'en-US',
+  translateLang: (lang) => lang,
+}))
+
+import InputNumberQuestion from '@/components/inputs/inputNumberQuestion'
+
+const questionWithUnit = {
+  number_format_precision: 2,
+  number_min_allowed: 0,
+  number_max_allowed: 500,
+  unit_short_name: 'kWh',
+}
+
+const questionPlain = {
+  number_format_precision: 0,
+  number_min_allowed: 1,
+  number_max_allowed: 99,
+  unit_short_name: '',
+}
+
+const mountInput = (props = {}) =>
+  mount(InputNumberQuestion, {
+    props: { question: questionPlain, value: null, ...props },
+  })
+
+describe('inputNumberQuestion/index.vue', () => {
+  describe('rendering', () => {
+    it('formats the initial value through the question precision', () => {
+      const wrapper = mountInput({ question: questionWithUnit, value: '120' })
+      expect(wrapper.find('input').element.value).toBe('120')
+    })
+
+    it('renders the unit when the question carries one', () => {
+      const wrapper = mountInput({ question: questionWithUnit, value: '120' })
+      expect(wrapper.text()).toContain('kWh')
+    })
+
+    it('renders no unit container when the question has no unit', () => {
+      const wrapper = mountInput({ question: questionPlain, value: '5' })
+      expect(wrapper.find('span span').exists()).toBe(false)
+    })
+
+    it('renders the placeholder on the input', () => {
+      const wrapper = mountInput({ placeholder: 'Floor number' })
+      expect(wrapper.find('input').attributes('placeholder')).toBe(
+        'Floor number'
+      )
+    })
+
+    it('renders the error message only when isError is set', () => {
+      const withError = mountInput({
+        isError: true,
+        errorMessage: 'Enter a number between 1 and 99',
+      })
+      expect(withError.text()).toContain('Enter a number between 1 and 99')
+
+      const withoutError = mountInput({
+        isError: false,
+        errorMessage: 'Enter a number between 1 and 99',
+      })
+      expect(withoutError.text()).not.toContain(
+        'Enter a number between 1 and 99'
+      )
+    })
+  })
+
+  describe('emits', () => {
+    // Characterization test — documents current behaviour, do not "fix" here.
+    // The template binds `@input="onChangeHandler"`, so onChangeHandler receives
+    // the native InputEvent, but it treats its argument as the raw value string
+    // (no `$event.target.value`, unlike the sibling `inputNumber.onInput`).
+    // Parsing the event object yields NaN, so typing always emits '' rather than
+    // the parsed number. See EPDM-11715 notes.
+    it('emits input-change on typing (currently always empty, see note)', async () => {
+      const wrapper = mountInput({ question: questionPlain, value: null })
+      await wrapper.find('input').setValue('42')
+      expect(wrapper.emitted('input-change')).toBeTruthy()
+      expect(wrapper.emitted('input-change').at(-1)).toEqual([''])
+    })
+
+    it('emits on-enter-click when Enter is pressed', async () => {
+      const wrapper = mountInput({ value: '5' })
+      await wrapper.find('input').trigger('keyup.enter')
+      expect(wrapper.emitted('on-enter-click')).toHaveLength(1)
+    })
+  })
+
+  describe('clearInput watcher', () => {
+    it('clears the displayed text when clearInput flips to true', async () => {
+      const wrapper = mountInput({ question: questionWithUnit, value: '120' })
+      expect(wrapper.find('input').element.value).toBe('120')
+
+      await wrapper.setProps({ clearInput: true })
+      expect(wrapper.find('input').element.value).toBe('')
+    })
+  })
+})

package/src/components/inputs/inputNumberQuestion/inputNumberQuestion.stories.js

@@ -1,6 +1,18 @@
 import { ref } from 'vue'
 import InputNumberQuestion from './index.vue'
-import theme from '@/assets/theme'
+
+// import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
+// How to use:
+// <input-number-question
+//   :question="question"        // required — { number_format_precision, number_min_allowed, number_max_allowed, unit_short_name }
+//   :value="inputValue"         // required
+//   placeholder="Enter distance"
+//   inputWidth="150px"          // default 100%
+//   :isError="false"
+//   errorMessage="Enter a number between 1 and 10"
+//   @input-change="onInputChange($event)"
+//   @on-enter-click="onInputSubmit()"
+// />
 
 const questionWithUnit = {
   number_format_precision: 2,
@@ -23,6 +35,22 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    question: {
+      description:
+        'Required. Drives formatting: number_format_precision, ' +
+        'number_min_allowed, number_max_allowed, unit_short_name.',
+    },
+    value: { description: 'Current value (required). String or number.' },
+    placeholder: { description: 'Placeholder shown when empty' },
+    inputWidth: { description: 'Width of the input, defaults to 100%' },
+    isError: { description: 'Error state styling', control: 'boolean' },
+    errorMessage: { description: 'Message shown while isError is true' },
+    clearInput: {
+      description: 'When flipped to true, clears the displayed text',
+      control: 'boolean',
+    },
+  },
 }
 
 const Template = (args) => ({
@@ -32,21 +60,14 @@ const Template = (args) => ({
     return { args, val }
   },
   template: `
-    <div data-test-id="input-number-question-story" style="min-width: 280px; padding: 16px;">
+    <div style="min-width: 280px; padding: 16px;">
       <InputNumberQuestion
-        :question="args.question"
+        v-bind="args"
         :value="val"
-        :placeholder="args.placeholder"
-        :is-error="args.isError"
-        :input-width="args.inputWidth"
-        :error-message="args.errorMessage"
         @input-change="val = $event"
       />
     </div>
   `,
-  provide: {
-    theme,
-  },
 })
 
 export const WithUnit = Template.bind({})

package/src/components/sideMenu/sideMenu.spec.js

@@ -0,0 +1,109 @@
+import { mount } from '@vue/test-utils'
+import SideMenu from '@/components/sideMenu'
+import Spinner from '@/components/spinner'
+
+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 = [
+  { key: 'dashboard', label: 'Dashboard', icon: 'house' },
+  { key: 'projects', label: 'Projects', icon: 'house' },
+  {
+    key: 'settings',
+    label: 'Settings',
+    icon: 'gear',
+    children: [
+      { key: 'general', label: 'General' },
+      { key: 'billing', label: 'Billing' },
+    ],
+  },
+]
+
+const mountMenu = (props = {}) =>
+  mount(SideMenu, {
+    props: { tabsData, activeTab: 'dashboard', ...props },
+  })
+
+const item = (wrapper, key) =>
+  wrapper.find(`[data-id="sub_menu_settings_${key}"]`)
+
+describe('sideMenu/index.vue', () => {
+  it('shows a spinner and no menu items while tabsData is empty', () => {
+    const wrapper = mount(SideMenu, {
+      props: { tabsData: [], activeTab: 'dashboard' },
+    })
+
+    expect(wrapper.findComponent(Spinner).exists()).toBe(true)
+    expect(item(wrapper, 'dashboard').exists()).toBe(false)
+  })
+
+  it('renders a menu item with its label for each flat tab', () => {
+    const wrapper = mountMenu()
+
+    expect(item(wrapper, 'dashboard').exists()).toBe(true)
+    expect(item(wrapper, 'dashboard').text()).toContain('Dashboard')
+    expect(item(wrapper, 'projects').text()).toContain('Projects')
+  })
+
+  it('marks the active tab with data-active="true"', () => {
+    const wrapper = mountMenu({ activeTab: 'projects' })
+
+    expect(item(wrapper, 'projects').attributes('data-active')).toBe('true')
+    expect(item(wrapper, 'dashboard').attributes('data-active')).toBe('false')
+  })
+
+  it('emits tab-click with the activeKey when a flat item is clicked', async () => {
+    const wrapper = mountMenu()
+
+    await item(wrapper, 'projects').trigger('click')
+
+    expect(wrapper.emitted('tab-click')).toHaveLength(1)
+    expect(wrapper.emitted('tab-click')[0]).toEqual([{ activeKey: 'projects' }])
+  })
+
+  it('hides nested children until the parent is expanded', async () => {
+    const wrapper = mountMenu()
+
+    expect(item(wrapper, 'general').exists()).toBe(false)
+
+    await item(wrapper, 'settings').trigger('click')
+    expect(item(wrapper, 'general').exists()).toBe(true)
+    expect(item(wrapper, 'billing').exists()).toBe(true)
+
+    // clicking the parent again collapses it
+    await item(wrapper, 'settings').trigger('click')
+    expect(item(wrapper, 'general').exists()).toBe(false)
+  })
+
+  it('emits tab-click with activeKey and parentKey when a child is clicked', async () => {
+    const wrapper = mountMenu()
+
+    await item(wrapper, 'settings').trigger('click')
+    await item(wrapper, 'general').trigger('click')
+
+    expect(wrapper.emitted('tab-click')[0]).toEqual([
+      { activeKey: 'general', parentKey: 'settings' },
+    ])
+  })
+
+  it('renders the logout button and app version, and emits on-logout on click', async () => {
+    const wrapper = mountMenu({ hasLogout: true, appVersion: 'v1.2.3' })
+
+    const logout = wrapper.find('[data-id="button_settings_logout"]')
+    expect(logout.exists()).toBe(true)
+    expect(wrapper.text()).toContain('v1.2.3')
+
+    await logout.trigger('click')
+    expect(wrapper.emitted('on-logout')).toHaveLength(1)
+  })
+
+  it('hides the logout section when hasLogout is false', () => {
+    const wrapper = mountMenu({ hasLogout: false })
+
+    expect(wrapper.find('[data-id="button_settings_logout"]').exists()).toBe(
+      false
+    )
+  })
+})

package/src/components/sideMenu/sideMenu.stories.js

@@ -7,6 +7,19 @@ const flatMenu = [
   { key: 'settings', label: 'Settings', icon: 'House' },
 ]
 
+const nestedMenu = [
+  { key: 'dashboard', label: 'Dashboard', icon: 'House' },
+  {
+    key: 'settings',
+    label: 'Settings',
+    icon: 'House',
+    children: [
+      { key: 'general', label: 'General' },
+      { key: 'billing', label: 'Billing' },
+    ],
+  },
+]
+
 export default {
   title: 'Components/Navigation/SideMenu',
   component: SideMenu,
@@ -51,3 +64,33 @@ SecondActive.args = {
   ...FlatItems.args,
   activeTab: 'projects',
 }
+
+// A collapsible parent item — click "Settings" to expand its children.
+export const NestedItems = Template.bind({})
+NestedItems.args = {
+  tabsData: nestedMenu,
+  activeTab: 'general',
+  activeParentTab: 'settings',
+  hasLogout: false,
+  appVersion: 'Storybook',
+}
+
+// Bottom section with the logout button and the app version.
+export const WithLogout = Template.bind({})
+WithLogout.args = {
+  tabsData: flatMenu,
+  activeTab: 'dashboard',
+  activeParentTab: null,
+  hasLogout: true,
+  appVersion: 'v1.2.3',
+}
+
+// While tabsData is empty the menu shows a loading spinner.
+export const Loading = Template.bind({})
+Loading.args = {
+  tabsData: [],
+  activeTab: 'dashboard',
+  activeParentTab: null,
+  hasLogout: false,
+  appVersion: 'Storybook',
+}