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')
+  })
+})

test/recipe.test.ts

@@ -0,0 +1,97 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { useRecipe } from '~/composables/recipe'
+import type { Recipe } from '~/types'
+import recipeData from '~/data/recipe.json'
+import { useRecipeStore } from '~/stores/recipe'
+
+const recipe = ref<Recipe>(recipeData as Recipe)
+
+describe('recipe interaction', () => {
+  beforeEach(() => {
+    // creates a fresh pinia and make it active so it's automatically picked
+    // up by any useStore() call without having to pass it to it:
+    // `useStore(pinia)`
+    setActivePinia(createPinia())
+  })
+
+  it('toggle stuff', () => {
+    const rStore = useRecipeStore()
+    rStore.toggleStuff('土豆')
+    expect(rStore.selectedStuff.includes('土豆')).toBe(true)
+    rStore.toggleStuff('土豆')
+    expect(rStore.selectedStuff.includes('土豆')).toBe(false)
+  })
+
+  it('toggle tool', () => {
+    const rStore = useRecipeStore()
+    rStore.toggleTools('电饭煲')
+    expect(rStore.curTool === '电饭煲').toBe(true)
+    rStore.toggleTools('微波炉')
+    expect(rStore.curTool === '微波炉').toBe(true)
+  })
+})
+
+describe('recipe mode', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('loose mode', () => {
+    const rStore = useRecipeStore()
+    const { displayedRecipe } = useRecipe(recipe)
+
+    rStore.curStuff.clear()
+    rStore.curStuff.add('土豆')
+    rStore.curStuff.add('腊肠')
+
+    rStore.curTool = '电饭煲'
+
+    expect(rStore.selectedStuff).toStrictEqual(['土豆', '腊肠'])
+    rStore.setMode('strict')
+
+    displayedRecipe.value.forEach((item) => {
+      expect(item.stuff.includes('土豆') || item.stuff.includes('腊肠')).toBe(true)
+      expect(item.tools?.includes('电饭煲')).toBe(true)
+    })
+  })
+
+  it('strict mode', () => {
+    const rStore = useRecipeStore()
+    const { displayedRecipe } = useRecipe(recipe)
+
+    rStore.curStuff.clear()
+    rStore.curStuff.add('土豆')
+    rStore.curStuff.add('腊肠')
+
+    rStore.curTool = '电饭煲'
+
+    expect(rStore.selectedStuff).toStrictEqual(['土豆', '腊肠'])
+    rStore.setMode('strict')
+
+    displayedRecipe.value.forEach((item) => {
+      expect(item.stuff.includes('土豆') && item.stuff.includes('腊肠')).toBe(true)
+      expect(item.tools?.includes('电饭煲')).toBe(true)
+    })
+  })
+
+  it('survival mode', () => {
+    const rStore = useRecipeStore()
+    const { displayedRecipe } = useRecipe(recipe)
+
+    rStore.curStuff.clear()
+    rStore.curStuff.add('土豆')
+    rStore.curStuff.add('腊肠')
+
+    expect(rStore.selectedStuff).toStrictEqual(['土豆', '腊肠'])
+    rStore.setMode('survival')
+
+    displayedRecipe.value.forEach((item) => {
+      let canCook = false
+      item.stuff.forEach((stuff) => {
+        canCook = canCook && rStore.selectedStuff.includes(stuff)
+      })
+      expect(canCook).toBe(true)
+    })
+  })
+})