@eturnity/eturnity_reusable_components 9.25.17 → 9.28.0

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -1,127 +1,131 @@
+import { ref, watch } from 'vue'
 import TextAreaInput from './index.vue'
 
+// To use:
+// import TextAreaInput from '@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput'
+// <text-area-input
+//   placeholder="Comments"
+//   :value="form.note"
+//   label="Question 5"
+//   row-height="4"
+//   :is-error="false"
+//   error-text="This field is required"
+//   @input-change="onInputChange($event)"
+// />
+
 export default {
   title: 'Components/Inputs/TextAreaInput',
   component: TextAreaInput,
-  // argTypes: {},
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'text' },
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    rowHeight: { control: 'text' },
+    fontSize: { control: 'text' },
+    inputWidth: { control: 'text' },
+    resize: {
+      control: 'inline-radio',
+      options: ['none', 'both', 'horizontal', 'vertical'],
+    },
+    alignItems: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    appTheme: { control: 'inline-radio', options: ['light', 'dark'] },
+    isDisabled: { control: 'boolean' },
+    isError: { control: 'boolean' },
+    errorText: { control: 'text' },
+    infoTextMessage: { control: 'text' },
+    isRequiredLabel: { control: 'boolean' },
+  },
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { TextAreaInput },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<text-area-input v-bind="$props" />',
-
-  // import TextAreaInput from "@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput"
-  // To use:
-  // <text-area-input
-  //     placeholder="Comments"
-  //     @input-change="onInputChange({ value: $event, type: 'note' })"
-  //     :value="form.note"
-  //     rowHeight="4" //optional
-  //     :isError="false"
-  //     :errorText="$gettext('field_required')"
-  //     infoTextMessage="My info message"
-  //     label="Question 5"
-  //     alignItems="horizontal" // horizontal, vertical
-  //     :isDisabled="true"
-  // />
+  setup() {
+    const model = ref(args.value)
+    watch(
+      () => args.value,
+      (v) => {
+        model.value = v
+      }
+    )
+    return { args, model }
+  },
+  template: `
+    <div style="padding: 16px;">
+      <TextAreaInput v-bind="args" :value="model" @input-change="model = $event" />
+    </div>
+  `,
 })
 
-export const Default = Template.bind({})
-Default.args = {
+const baseArgs = {
   placeholder: 'Enter a comment',
-  isDisabled: false,
   rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
   value: '',
   alignItems: 'vertical',
   inputWidth: '350px',
 }
 
+export const Default = Template.bind({})
+Default.args = {
+  ...baseArgs,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
-  placeholder: 'Enter a comment',
+  ...baseArgs,
   isDisabled: true,
-  rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
-  value: '',
-  alignItems: 'vertical',
-  inputWidth: '350px',
+  value: 'Cannot edit this',
 }
 
 export const Error = Template.bind({})
 Error.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '2',
+  ...baseArgs,
   isError: true,
   errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
-  value: '',
-  alignItems: 'vertical',
-  inputWidth: '350px',
 }
 
 export const WithLabel = Template.bind({})
 WithLabel.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
+  ...baseArgs,
   label: 'Description',
+  infoTextMessage: 'Here is some information',
   value: 'Here is my description!',
-  alignItems: 'vertical',
-  inputWidth: '350px',
 }
 
 export const HorizontalLabel = Template.bind({})
 HorizontalLabel.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '2',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
+  ...baseArgs,
   label: 'Description',
+  infoTextMessage: 'Here is some information',
   value: 'Here is my description!',
   alignItems: 'horizontal',
-  inputWidth: '350px',
+}
+
+export const RequiredLabel = Template.bind({})
+RequiredLabel.args = {
+  ...baseArgs,
+  label: 'Description',
+  isRequiredLabel: true,
 }
 
 export const LargerTextArea = Template.bind({})
 LargerTextArea.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
-  rowHeight: '5',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
+  ...baseArgs,
   label: 'Description',
+  rowHeight: '5',
   value: 'Here is my description!',
-  alignItems: 'vertical',
+  inputWidth: null,
 }
 
 export const LargerFontSize = Template.bind({})
 LargerFontSize.args = {
-  placeholder: 'Enter a comment',
-  isDisabled: false,
+  ...baseArgs,
+  label: 'Description',
   rowHeight: '5',
   fontSize: '24px',
-  isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
-  label: 'Description',
   value: 'Here is my description!',
-  alignItems: 'vertical',
+  inputWidth: null,
 }

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

@@ -0,0 +1,90 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import TextAreaInput from '@/components/inputs/textAreaInput'
+import InfoText from '@/components/infoText'
+
+// InfoText renders an icon; the real iconCache.mjs uses import.meta.
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('TextAreaInput', () => {
+  const mountTextArea = (props = {}) =>
+    mount(TextAreaInput, { props: { value: '', ...props } })
+
+  it('renders a textarea with the value, placeholder and row height', () => {
+    const textarea = mountTextArea({
+      value: 'Hello',
+      placeholder: 'Enter a comment',
+      rowHeight: '5',
+    }).find('textarea')
+
+    expect(textarea.element.value).toBe('Hello')
+    expect(textarea.attributes('placeholder')).toBe('Enter a comment')
+    expect(textarea.attributes('rows')).toBe('5')
+  })
+
+  it('emits input-change with the new value when typing', async () => {
+    const wrapper = mountTextArea()
+
+    await wrapper.find('textarea').setValue('new text')
+
+    expect(wrapper.emitted('input-change')).toHaveLength(1)
+    expect(wrapper.emitted('input-change')[0]).toEqual(['new text'])
+  })
+
+  it('does not emit input-change when disabled', async () => {
+    const wrapper = mountTextArea({ isDisabled: true })
+    const textarea = wrapper.find('textarea')
+
+    expect(textarea.attributes('disabled')).toBeDefined()
+    await textarea.setValue('blocked')
+
+    expect(wrapper.emitted('input-change')).toBeUndefined()
+  })
+
+  it('emits input-blur and input-focus with the current value', async () => {
+    const wrapper = mountTextArea({ value: 'abc' })
+    const textarea = wrapper.find('textarea')
+
+    await textarea.trigger('focus')
+    await textarea.trigger('blur')
+
+    expect(wrapper.emitted('input-focus')[0]).toEqual(['abc'])
+    expect(wrapper.emitted('input-blur')[0]).toEqual(['abc'])
+  })
+
+  it('renders the label with the required star', () => {
+    const wrapper = mountTextArea({ label: 'Description', isRequiredLabel: true })
+    expect(wrapper.text()).toContain('Description')
+    expect(wrapper.text()).toContain('*')
+  })
+
+  it('renders the info text only when a message is provided', () => {
+    expect(
+      mountTextArea({ label: 'Description' }).findComponent(InfoText).exists()
+    ).toBe(false)
+    expect(
+      mountTextArea({ label: 'Description', infoTextMessage: 'Some hint' })
+        .findComponent(InfoText)
+        .exists()
+    ).toBe(true)
+  })
+
+  it('shows the error text only when isError is set', () => {
+    expect(mountTextArea({ errorText: 'Required' }).text()).not.toContain(
+      'Required'
+    )
+    expect(
+      mountTextArea({ isError: true, errorText: 'Required' }).text()
+    ).toContain('Required')
+  })
+
+  it('prefers inputDataId over dataId for the textarea data-id', () => {
+    const textarea = mountTextArea({
+      inputDataId: 'note_input',
+      dataId: 'fallback',
+    }).find('textarea')
+    expect(textarea.attributes('data-id')).toBe('note_input')
+  })
+})