@eturnity/eturnity_reusable_components 9.25.17 → 9.28.0

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

@@ -2,53 +2,223 @@ import { computed, ref } from 'vue'
 import Select from './index.vue'
 import Option from './option/index.vue'
 
-const SELECT_SAMPLE_OPTIONS = [
-  { key: '1', label: 'value one' },
-  { key: '2', label: 'value two' },
-  { key: '3', label: 'value three' },
-  { key: '4', label: 'value four' },
+// To use:
+// import Select from '@eturnity/eturnity_reusable_components/src/components/inputs/select'
+// import Option from '@eturnity/eturnity_reusable_components/src/components/inputs/select/option'
+// <Select v-bind="props">
+//   <template #selector="{ selectedValue }">{{ selectedValue.label }}</template>
+//   <template #dropdown>
+//     <Option v-for="o in options" :key="o.key" :value="o">{{ o.label }}</Option>
+//   </template>
+// </Select>
+
+// The search field only appears once the dropdown holds at least
+// `minOptionLength` (5 by default) options — see the WithSearchField story.
+const FEW_OPTIONS = [
+  { key: '1', label: 'Apple' },
+  { key: '2', label: 'Banana' },
+  { key: '3', label: 'Cherry' },
+]
+
+const MANY_OPTIONS = [
+  { key: '1', label: 'Austria' },
+  { key: '2', label: 'Belgium' },
+  { key: '3', label: 'Denmark' },
+  { key: '4', label: 'France' },
+  { key: '5', label: 'Germany' },
+  { key: '6', label: 'Italy' },
+  { key: '7', label: 'Spain' },
+  { key: '8', label: 'Switzerland' },
 ]
 
 export default {
   title: 'Components/Inputs/Select',
   component: Select,
+  tags: ['autodocs'],
+  parameters: {
+    // The select relies on scoped slots (#selector="{ selectedValue }"), which
+    // Storybook's dynamic source generator cannot serialise (it throws
+    // "selectedValue is not defined"). Show the static story code instead.
+    docs: {
+      source: { type: 'code' },
+    },
+  },
+  argTypes: {
+    label: { description: 'Text shown above/beside the select' },
+    value: {
+      description: 'The currently selected value (any type, often an object)',
+      control: false,
+    },
+    options: {
+      description: 'Demo-only: the list of options rendered in the dropdown',
+      control: false,
+    },
+    alignItems: {
+      description: 'Label position relative to the select',
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    colorMode: {
+      description: 'Visual theme of the select',
+      control: 'inline-radio',
+      options: ['light', 'dark', 'transparent'],
+    },
+    isSearchable: {
+      description:
+        'Whether a search field is shown once the option count reaches minOptionLength',
+      control: 'boolean',
+    },
+    minOptionLength: {
+      description: 'Minimum number of options before the search field appears',
+      control: 'number',
+    },
+    searchPlacement: {
+      description: 'Where the search field renders',
+      control: 'inline-radio',
+      options: ['trigger', 'dropdown'],
+    },
+    disabled: { description: 'Disables the select', control: 'boolean' },
+    hasError: {
+      description: 'Shows the select in an error state',
+      control: 'boolean',
+    },
+    errorMessage: {
+      description: 'Message rendered below the select when hasError is true',
+      control: 'text',
+    },
+    selectWidth: { description: 'Width of the select trigger' },
+    optionWidth: { description: 'Width of the dropdown menu' },
+
+    // slots
+    selector: { description: 'Renders the selected value in the trigger' },
+    dropdown: { description: 'Holds the <Option> elements' },
+  },
 }
 
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: { Select, Option },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
-    return { args, selectSampleOptions: SELECT_SAMPLE_OPTIONS }
+    const options = args.options || FEW_OPTIONS
+    // Give dark / transparent modes a dark backdrop so the white text is legible.
+    const wrapperStyle = ['dark', 'transparent'].includes(args.colorMode)
+      ? 'background: #2b2b2b; padding: 20px; border-radius: 4px;'
+      : 'padding: 20px;'
+    return { args, options, wrapperStyle }
   },
-  template: `<Select v-bind="args">
-                <template #selector="{ selectedValue }">
-                    value selected: {{ selectedValue.label }}
-                </template>
-                <template #dropdown>
-                    <Option
-                      v-for="item in selectSampleOptions"
-                      :key="item.key"
-                      :value="item"
-                    >
-                      {{ item.label }}
-                    </Option>
-                </template>
-            </Select>`,
+  template: `
+    <div :style="wrapperStyle">
+      <Select v-bind="args">
+        <template #selector="{ selectedValue }">
+          {{ selectedValue ? selectedValue.label : 'Select an option' }}
+        </template>
+        <template #dropdown>
+          <Option
+            v-for="item in options"
+            :key="item.key"
+            :value="item"
+          >
+            {{ item.label }}
+          </Option>
+        </template>
+      </Select>
+    </div>
+  `,
 })
 
 export const Default = Template.bind({})
 Default.args = {
-  hoverDropdown: false,
-  selectWidth: '100%',
-  optionWidth: '50%',
-  label: 'Service territory',
+  label: 'Fruit',
+  alignItems: 'vertical',
+  options: FEW_OPTIONS,
+  value: FEW_OPTIONS[0],
+}
+
+/**
+ * With more than 5 options the search field is shown automatically so the user
+ * can filter the list. Open the dropdown to see the search input.
+ */
+export const WithSearchField = Template.bind({})
+WithSearchField.args = {
+  label: 'Country',
+  alignItems: 'vertical',
+  options: MANY_OPTIONS,
+  value: MANY_OPTIONS[4],
+}
+
+/**
+ * The search field can also be rendered inside the dropdown itself instead of
+ * in the trigger, via `searchPlacement="dropdown"`.
+ */
+export const SearchInsideDropdown = Template.bind({})
+SearchInsideDropdown.args = {
+  label: 'Country',
+  alignItems: 'vertical',
+  searchPlacement: 'dropdown',
+  options: MANY_OPTIONS,
+  value: MANY_OPTIONS[4],
+}
+
+/**
+ * Set `minOptionLength` to change how many options trigger the search field.
+ * Here it appears with only 3 options.
+ */
+export const LowerSearchThreshold = Template.bind({})
+LowerSearchThreshold.args = {
+  label: 'Fruit',
+  alignItems: 'vertical',
+  minOptionLength: 3,
+  options: FEW_OPTIONS,
+  value: FEW_OPTIONS[0],
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  label: 'Fruit',
+  alignItems: 'vertical',
+  disabled: true,
+  options: FEW_OPTIONS,
+  value: FEW_OPTIONS[0],
+}
+
+export const WithError = Template.bind({})
+WithError.args = {
+  label: 'Fruit',
   alignItems: 'vertical',
-  value: SELECT_SAMPLE_OPTIONS[1],
+  hasError: true,
+  errorMessage: 'This field is required',
+  options: FEW_OPTIONS,
+  value: null,
+}
+
+export const HorizontalLabel = Template.bind({})
+HorizontalLabel.args = {
+  label: 'Fruit',
+  alignItems: 'horizontal',
+  options: FEW_OPTIONS,
+  value: FEW_OPTIONS[0],
+}
+
+export const ColorModeDark = Template.bind({})
+ColorModeDark.args = {
+  label: 'Fruit',
+  alignItems: 'vertical',
+  colorMode: 'dark',
+  options: FEW_OPTIONS,
+  value: FEW_OPTIONS[0],
+}
+
+export const ColorModeTransparent = Template.bind({})
+ColorModeTransparent.args = {
+  label: 'Fruit',
+  alignItems: 'vertical',
+  colorMode: 'transparent',
+  options: FEW_OPTIONS,
+  value: FEW_OPTIONS[0],
 }
 
 /**
- * Customizable Select
+ * A customizable select lets the user type a value that is not in the list and
+ * add it as a new option.
  */
 const CustomizableTemplate = (args) => ({
   components: { Select, Option },
@@ -60,7 +230,7 @@ const CustomizableTemplate = (args) => ({
       label: customOptionValue,
     })
     const customizableOptions = computed(() => {
-      const options = [...SELECT_SAMPLE_OPTIONS]
+      const options = [...FEW_OPTIONS]
       if (customOption.value) {
         options.push(customOption.value)
       }
@@ -83,33 +253,37 @@ const CustomizableTemplate = (args) => ({
       onInputChange,
     }
   },
-  template: `<Select
-    v-bind="args"
-    :custom-option-adapter="createCustomOption"
-    @input-change="onInputChange"
-  >
-    <template #selector="{ selectedValue }">
-      value selected: {{ selectedValue.label }}
-    </template>
-    <template #dropdown>
-      <Option
-        v-for="(item) in customizableOptions"
-        :key="item.key"
-        :value="item"
-      >
-        {{ item.label }}
-      </Option>
-    </template>
-    <template #customOption="{ customOptionValue }">
-      <Option
-        data-custom-option
-        :value="createCustomOption(customOptionValue)"
+  template: `
+    <div style="padding: 20px;">
+      <Select
+        v-bind="args"
+        :custom-option-adapter="createCustomOption"
+        @input-change="onInputChange"
       >
-        {{ customOptionValue }}
-        <div>(custom)</div>
-      </Option>
-    </template>
-  </Select>`,
+        <template #selector="{ selectedValue }">
+          {{ selectedValue ? selectedValue.label : 'Select an option' }}
+        </template>
+        <template #dropdown>
+          <Option
+            v-for="item in customizableOptions"
+            :key="item.key"
+            :value="item"
+          >
+            {{ item.label }}
+          </Option>
+        </template>
+        <template #customOption="{ customOptionValue }">
+          <Option
+            data-custom-option
+            :value="createCustomOption(customOptionValue)"
+          >
+            {{ customOptionValue }}
+            <div>(custom)</div>
+          </Option>
+        </template>
+      </Select>
+    </div>
+  `,
 })
 
 export const Customizable = CustomizableTemplate.bind({})
@@ -117,5 +291,5 @@ Customizable.args = {
   label: 'Customizable select',
   alignItems: 'vertical',
   isCustomizable: true,
-  value: SELECT_SAMPLE_OPTIONS[1],
+  value: FEW_OPTIONS[1],
 }

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

@@ -0,0 +1,59 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import RcSlider from '@/components/inputs/slider'
+
+// Isolate the wrapper from the third-party @vueform/slider, which does not
+// render meaningfully under jsdom. The stub records the props it receives and
+// lets us emit its `update` event.
+jest.mock('@vueform/slider', () => ({
+  __esModule: true,
+  default: {
+    name: 'VueformSlider',
+    props: ['max', 'min', 'value', 'tooltips'],
+    emits: ['update'],
+    template: '<div data-test-id="vueform-slider"></div>',
+  },
+}))
+
+describe('RcSlider', () => {
+  const mountSlider = (props = {}) => mount(RcSlider, { props })
+  const innerSlider = (wrapper) =>
+    wrapper.findComponent({ name: 'VueformSlider' })
+
+  it('renders the current value with its unit', () => {
+    const wrapper = mountSlider({ value: 35, unit: '%' })
+    expect(wrapper.text()).toContain('35')
+    expect(wrapper.text()).toContain('%')
+  })
+
+  it('forwards value, min and max to the underlying slider', () => {
+    const inner = innerSlider(
+      mountSlider({ value: 120, minValue: 10, maxValue: 500 })
+    )
+    expect(inner.props('value')).toBe(120)
+    expect(inner.props('min')).toBe(10)
+    expect(inner.props('max')).toBe(500)
+  })
+
+  it('applies the documented defaults', () => {
+    const wrapper = mountSlider()
+    const inner = innerSlider(wrapper)
+    expect(inner.props('value')).toBe(0)
+    expect(inner.props('min')).toBe(0)
+    expect(inner.props('max')).toBe(100)
+    expect(wrapper.text()).toContain('0')
+  })
+
+  it('always disables the built-in tooltips', () => {
+    expect(innerSlider(mountSlider()).props('tooltips')).toBe(false)
+  })
+
+  it('emits change with the new value when the slider updates', async () => {
+    const wrapper = mountSlider({ value: 10 })
+
+    await innerSlider(wrapper).vm.$emit('update', 42)
+
+    expect(wrapper.emitted('change')).toHaveLength(1)
+    expect(wrapper.emitted('change')[0]).toEqual([42])
+  })
+})

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

@@ -11,7 +11,9 @@ export default {
     docs: {
       description: {
         component:
-          'Wrapper around `@vueform/slider` with Eturnity styling. The inner control is registered as `VueformSlider` so it cannot recurse into the host component.',
+          'Wrapper around `@vueform/slider` with Eturnity styling. The inner ' +
+          'control is registered as `VueformSlider` so it cannot recurse into ' +
+          'the host component.',
       },
     },
   },
@@ -31,7 +33,7 @@ const Template = (args) => ({
       () => args.value,
       (v) => {
         innerValue.value = v
-      },
+      }
     )
     const onSliderChange = (v) => {
       innerValue.value = v

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

@@ -0,0 +1,88 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import SwitchField from '@/components/inputs/switchField'
+import RCIcon from '@/components/icon'
+import InfoText from '@/components/infoText'
+
+// 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')),
+}))
+
+const OPTIONS = [
+  { value: 0, content: 'Off', dataId: 'opt_off' },
+  { value: 1, content: 'Auto', dataId: 'opt_auto' },
+  { value: 2, content: 'On', dataId: 'opt_on' },
+]
+
+describe('SwitchField', () => {
+  const mountSwitch = (props = {}) =>
+    mount(SwitchField, { props: { options: OPTIONS, value: 1, ...props } })
+
+  it('renders one option per entry with its content', () => {
+    const wrapper = mountSwitch()
+    expect(wrapper.find('[data-id="opt_off"]').exists()).toBe(true)
+    expect(wrapper.find('[data-id="opt_auto"]').exists()).toBe(true)
+    expect(wrapper.find('[data-id="opt_on"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Off')
+    expect(wrapper.text()).toContain('Auto')
+    expect(wrapper.text()).toContain('On')
+  })
+
+  it('emits on-switch-change with the clicked value', async () => {
+    const wrapper = mountSwitch()
+
+    await wrapper.find('[data-id="opt_on"]').trigger('click')
+
+    expect(wrapper.emitted('on-switch-change')).toHaveLength(1)
+    expect(wrapper.emitted('on-switch-change')[0]).toEqual([2])
+  })
+
+  it('emits the matching value for each option clicked', async () => {
+    const wrapper = mountSwitch()
+
+    await wrapper.find('[data-id="opt_off"]').trigger('click')
+    await wrapper.find('[data-id="opt_auto"]').trigger('click')
+
+    const emitted = wrapper.emitted('on-switch-change')
+    expect(emitted).toHaveLength(2)
+    expect(emitted[0]).toEqual([0])
+    expect(emitted[1]).toEqual([1])
+  })
+
+  it('does not emit when disabled', async () => {
+    const wrapper = mountSwitch({ disabled: true })
+
+    await wrapper.find('[data-id="opt_on"]').trigger('click')
+
+    expect(wrapper.emitted('on-switch-change')).toBeUndefined()
+  })
+
+  it('renders the label with the required star', () => {
+    const wrapper = mountSwitch({ label: 'Mode', isRequiredLabel: true })
+    expect(wrapper.text()).toContain('Mode')
+    expect(wrapper.text()).toContain('*')
+  })
+
+  it('renders the info text only when a message is provided', () => {
+    expect(mountSwitch({ label: 'Mode' }).findComponent(InfoText).exists()).toBe(
+      false
+    )
+    expect(
+      mountSwitch({ label: 'Mode', infoTextMessage: 'Helpful hint' })
+        .findComponent(InfoText)
+        .exists()
+    ).toBe(true)
+  })
+
+  it('renders an icon only for options that define one', () => {
+    const wrapper = mountSwitch({
+      options: [
+        { value: 0, content: 'A', icon: 'check', iconSize: '12px' },
+        { value: 1, content: 'B' },
+      ],
+      value: 0,
+    })
+    expect(wrapper.findAllComponents(RCIcon)).toHaveLength(1)
+  })
+})