gradido/admin/src/components/EditCreationFormular.spec.js

import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import EditCreationFormular from './EditCreationFormular.vue'
import { useMutation, useQuery } from '@vue/apollo-composable'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
import useCreationMonths from '@/composables/useCreationMonths'
import {
  BButton,
  BCol,
  BForm,
  BFormInput,
  BFormRadioGroup,
  BFormTextarea,
  BInputGroup,
  BRow,
} from 'bootstrap-vue-next'
import { nextTick } from 'vue'

vi.mock('@vue/apollo-composable')
vi.mock('vue-i18n')
vi.mock('@/composables/useToast')
vi.mock('@/composables/useCreationMonths')

describe('EditCreationFormular', () => {
  let wrapper
  let mockMutate
  let mockOnDone
  let mockOnError
  const mockRefetch = vi.fn()
  const mockT = vi.fn((key) => key)
  const mockD = vi.fn((date) => new Date(date).toISOString().split('T')[0])
  const mockToastSuccess = vi.fn()
  const mockToastError = vi.fn()
  const mockCreationMonths = {
    radioOptions: vi.fn(() => [
      { item: { short: 'Jan', date: '2023-01-01' }, name: 'January' },
      { item: { short: 'Feb', date: '2023-02-01' }, name: 'February' },
      { item: { short: 'Mar', date: '2023-03-01' }, name: 'March' },
    ]),
    creation: { value: [1000, 1000, 1000] },
  }

  beforeEach(() => {
    mockMutate = vi.fn()
    mockOnDone = vi.fn()
    mockOnError = vi.fn()
    useMutation.mockReturnValue({
      mutate: mockMutate,
      onDone: mockOnDone,
      onError: mockOnError,
    })
    useQuery.mockReturnValue({ refetch: mockRefetch })
    useI18n.mockReturnValue({ t: mockT, d: mockD })
    useAppToast.mockReturnValue({ toastSuccess: mockToastSuccess, toastError: mockToastError })
    useCreationMonths.mockReturnValue(mockCreationMonths)

    wrapper = mount(EditCreationFormular, {
      props: {
        item: {
          id: 1,
          contributionDate: '2023-02-15',
          amount: '300',
          email: 'test@example.com',
        },
        creationUserData: {
          id: 1,
          memo: 'Initial memo',
          amount: 200,
        },
      },
      global: {
        stubs: {
          BForm,
          BRow,
          BCol,
          BButton,
          BFormRadioGroup,
          BInputGroup,
          BFormInput,
          BFormTextarea,
        },
      },
    })
  })

  it('renders the component', () => {
    expect(wrapper.find('.component-edit-creation-formular').exists()).toBe(true)
  })

  it('initializes form with correct values', () => {
    expect(wrapper.vm.text).toBe('Initial memo')
    expect(wrapper.vm.value).toBe(200)
    expect(wrapper.vm.selected).toEqual({ short: 'Feb', date: '2023-02-01' })
  })

  it('computes rangeMax correctly', () => {
    expect(wrapper.vm.rangeMax).toBe(1300) // 1000 + 300
  })

  it('disables submit button when form is invalid', async () => {
    wrapper.vm.text = 'memo'
    const submitButton = wrapper.find('.test-submit')
    await nextTick()
    expect(submitButton.attributes('disabled')).toBeDefined()
  })

  it('enables submit button when form is valid', async () => {
    wrapper.vm.text = 'Valid long text'
    wrapper.vm.value = 100
    const submitButton = wrapper.find('.test-submit')
    await nextTick()
    expect(submitButton.attributes('disabled')).toBeUndefined()
  })

  it('calls mutation on form submit', async () => {
    wrapper.vm.text = 'New memo valid'
    wrapper.vm.value = 250
    await wrapper.find('.test-submit').trigger('click')

    expect(mockMutate).toHaveBeenCalledWith({
      id: 1,
      creationDate: '2023-02-01',
      amount: 250,
      memo: 'New memo valid',
    })
  })

  it('handles successful mutation', async () => {
    wrapper.vm.text = 'New memo valid'
    wrapper.vm.value = 250
    await wrapper.find('.test-submit').trigger('click')

    // Simulate successful mutation
    const onDoneCallback = mockOnDone.mock.calls[0][0]
    onDoneCallback()

    expect(wrapper.emitted('update-creation-data')).toBeTruthy()
    expect(mockToastSuccess).toHaveBeenCalledWith('creation_form.toasted_update')
    expect(mockRefetch).toHaveBeenCalled()
    expect(wrapper.vm.value).toBe(0) // Check if form was reset
  })

  it('handles failed mutation', async () => {
    wrapper.vm.text = 'New memo valid'
    wrapper.vm.value = 250
    await wrapper.find('.test-submit').trigger('click')

    // Simulate failed mutation
    const onErrorCallback = mockOnError.mock.calls[0][0]
    onErrorCallback({ message: 'API Error' })

    expect(mockToastError).toHaveBeenCalledWith('API Error')
    expect(wrapper.vm.value).toBe(0) // Check if form was reset
  })
})