test: add recipe mode & component render

test/component.test.ts

@@ -0,0 +1,55 @@
+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')
+  })
+})