@eturnity/eturnity_reusable_components 9.25.17 → 9.28.1

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