import { mount } from '@vue/test-utils'
import { describe, expect, it, vi } from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import ChooseFood from '../src/components/ChooseFood.vue'
import { useRecipeStore } from '~/stores/recipe'

describe('ChooseFood.vue', () => {
  it('should render', async () => {
    const pinia = createTestingPinia({
      createSpy: vi.fn,
    })
    const wrapper = mount(ChooseFood, {
      global: {
        plugins: [
          pinia,
        ],
      },
    })

    const rStore = useRecipeStore()

    rStore.curStuff.add('黄瓜')

    expect(wrapper.find('.vegetable-tag').exists()).toBe(true)
    expect(wrapper.find('.cook-filter-recipes').exists()).toBe(true)

    await wrapper.find('.vegetable-tag').trigger('click')

    const tags = wrapper.find('.cook-filter-recipes').findAll('.dish-tag')

    expect(tags.length > 0).toBe(true)

    tags.forEach((tag) => {
      const result = tag.text().includes('🥒') || tag.text().includes('🍲')
      expect(result).toBe(true)
    })
  })

  it('should be interactive', async () => {
    // const wrapper = mount(ChooseFood)
    // expect(wrapper.text()).toContain('0')

    // expect(wrapper.find('.inc').exists()).toBe(true)

    // expect(wrapper.find('.dec').exists()).toBe(true)

    // await wrapper.get('.inc').trigger('click')

    // expect(wrapper.text()).toContain('1')

    // await wrapper.get('.dec').trigger('click')

    // expect(wrapper.text()).toContain('0')
  })
})