malio-layer-ui/app/components/malio/input/InputTextArea.test.ts

import {describe, expect, it} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import InputTextArea from './InputTextArea.vue'

type InputTextAreaProps = {
  id?: string
  label?: string
  name?: string
  autocomplete?: string
  modelValue?: string | null
  size?: number | string
  textInput?: string
  textLabel?: string
  required?: boolean
  maxLength?: number
  showCounter?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  rounded?: string
}

const InputTextAreaForTest = InputTextArea as DefineComponent<InputTextAreaProps>

describe('MalioInputTextArea', () => {
  it('renders the initial textarea value', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {modelValue: 'initial textarea value'},
    })

    expect(wrapper.get('textarea').element.value).toBe('initial textarea value')
  })

  it('renders the label text and reuses a provided id', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {id: 'custom-textarea-id', label: 'Description'},
    })

    expect(wrapper.get('textarea').attributes('id')).toBe('custom-textarea-id')
    expect(wrapper.get('label').attributes('for')).toBe('custom-textarea-id')
    expect(wrapper.get('label').text()).toBe('Description')
  })

  it('generates an id when missing', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {label: 'Description'},
    })

    const textareaId = wrapper.get('textarea').attributes('id')
    expect(textareaId?.startsWith('malio-input-textarea-')).toBe(true)
    expect(wrapper.get('label').attributes('for')).toBe(textareaId)
  })

  it('applies name, autocomplete and rows attributes', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {name: 'bio', autocomplete: 'on', size: 4},
    })

    expect(wrapper.get('textarea').attributes('name')).toBe('bio')
    expect(wrapper.get('textarea').attributes('autocomplete')).toBe('on')
    expect(wrapper.get('textarea').attributes('rows')).toBe('4')
  })

  it('sets required, readonly and disabled attributes', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {
        required: true,
        readonly: true,
        disabled: true,
      },
    })

    expect(wrapper.get('textarea').attributes('required')).toBeDefined()
    expect(wrapper.get('textarea').attributes('readonly')).toBeDefined()
    expect(wrapper.get('textarea').attributes('disabled')).toBeDefined()
    expect(wrapper.get('textarea').classes()).toContain('cursor-not-allowed')
  })

  it('emits update:modelValue on input change', async () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {modelValue: ''},
    })

    await wrapper.get('textarea').setValue('new textarea value')

    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new textarea value'])
  })

  it('shows the character counter when enabled', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {
        modelValue: 'hello',
        showCounter: true,
        maxLength: 20,
      },
    })

    expect(wrapper.get('span.text-xs').text()).toBe('5/20')
    expect(wrapper.get('textarea').classes()).toContain('pb-6')
  })

  it('shows hint message in muted color', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {hint: 'Helpful hint'},
    })

    expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
  })

  it('shows error state on textarea and label', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {
        label: 'Description',
        error: 'Textarea error',
      },
    })

    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
    expect(wrapper.get('label').classes()).toContain('text-m-danger')
    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
    expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
  })

  it('shows success state on textarea and label', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {
        label: 'Description',
        success: 'Textarea success',
      },
    })

    expect(wrapper.get('textarea').classes()).toContain('border-m-success')
    expect(wrapper.get('label').classes()).toContain('text-m-success')
    expect(wrapper.get('p.text-m-success').text()).toBe('Textarea success')
  })

  it('prioritizes error over success', () => {
    const wrapper = mount(InputTextAreaForTest, {
      props: {
        error: 'Textarea error',
        success: 'Textarea success',
      },
    })

    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
  })

  it('renders as a single root element (works as a single grid item)', () => {
    const host = document.createElement('div')
    document.body.appendChild(host)
    const wrapper = mount(InputTextAreaForTest, {
      attachTo: host,
    })

    // host > div[data-v-app] > component roots
    const app = host.firstElementChild as HTMLElement
    expect(app.children.length).toBe(1)

    wrapper.unmount()
    host.remove()
  })

  it('applies primary scrollbar class on focus', async () => {
    const wrapper = mount(InputTextAreaForTest)

    expect(wrapper.get('textarea').classes()).not.toContain('textarea-scrollbar-primary')

    await wrapper.get('textarea').trigger('focus')

    expect(wrapper.get('textarea').classes()).toContain('textarea-scrollbar-primary')
  })

  it('removes primary scrollbar class on blur', async () => {
    const wrapper = mount(InputTextAreaForTest)

    await wrapper.get('textarea').trigger('focus')
    await wrapper.get('textarea').trigger('blur')

    expect(wrapper.get('textarea').classes()).not.toContain('textarea-scrollbar-primary')
  })
})