7.11. Задание: написание тестов для проекта Vue-Pizza

Реализованы тесты для:

1. Утилиты (helpers):
   - Тесты для image.js (getImageUrl, getUserAvatar, getIngredientImage, getPizzaImage)
   - Проверка корректности формирования путей к изображениям
   - Тесты обработки edge cases (пустые значения, разные форматы URL)

2. Store (Pinia):
   - Тесты для pizza store
   - Проверка инициализации состояния
   - Тесты действий (selectDough, selectSize, selectSauce, addIngredient, removeIngredient)
   - Тесты геттеров (hasMinimalComponents, getIngredientQuantity)
   - Тест сброса конфигурации пиццы

3. Компоненты:
   - Тесты для DoughSelector (рендеринг, выбор, события)
   - Тесты для AppButton (props, disabled, loading, события)
   - Проверка корректности эмита событий
   - Тесты применения CSS классов

Author: root

frontend/src/common/components/__tests__/AppButton.spec.js

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AppButton from '../AppButton.vue'
+
+describe('AppButton', () => {
+  it('должен рендериться с текстом из слота', () => {
+    const wrapper = mount(AppButton, {
+      slots: {
+        default: 'Нажми меня'
+      }
+    })
+
+    expect(wrapper.text()).toBe('Нажми меня')
+  })
+
+  it('должен иметь тип button по умолчанию', () => {
+    const wrapper = mount(AppButton)
+    
+    expect(wrapper.find('button').attributes('type')).toBe('button')
+  })
+
+  it('должен применять переданный тип', () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        type: 'submit'
+      }
+    })
+    
+    expect(wrapper.find('button').attributes('type')).toBe('submit')
+  })
+
+  it('должен применять CSS класс для размера', () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        size: 'large'
+      }
+    })
+    
+    expect(wrapper.find('.app-button--large').exists()).toBe(true)
+  })
+
+  it('должен применять CSS класс для варианта', () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        variant: 'secondary'
+      }
+    })
+    
+    expect(wrapper.find('.app-button--secondary').exists()).toBe(true)
+  })
+
+  it('должен быть отключен когда disabled=true', () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        disabled: true
+      }
+    })
+    
+    expect(wrapper.find('button').element.disabled).toBe(true)
+    expect(wrapper.find('.app-button--disabled').exists()).toBe(true)
+  })
+
+  it('должен эмитить событие click при клике', async () => {
+    const wrapper = mount(AppButton)
+    
+    await wrapper.find('button').trigger('click')
+    
+    expect(wrapper.emitted()).toHaveProperty('click')
+    expect(wrapper.emitted().click).toHaveLength(1)
+  })
+
+  it('не должен эмитить событие click когда disabled', async () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        disabled: true
+      }
+    })
+    
+    await wrapper.find('button').trigger('click')
+    
+    expect(wrapper.emitted().click).toBeUndefined()
+  })
+
+  it('должен показывать спиннер в состоянии загрузки', () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        loading: true
+      },
+      slots: {
+        default: 'Загрузка'
+      }
+    })
+    
+    expect(wrapper.find('.app-button__spinner').exists()).toBe(true)
+    expect(wrapper.text()).not.toBe('Загрузка')
+  })
+
+  it('должен быть отключен в состоянии загрузки', () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        loading: true
+      }
+    })
+    
+    expect(wrapper.find('button').element.disabled).toBe(true)
+  })
+
+  it('не должен эмитить событие click в состоянии загрузки', async () => {
+    const wrapper = mount(AppButton, {
+      props: {
+        loading: true
+      }
+    })
+    
+    await wrapper.find('button').trigger('click')
+    
+    expect(wrapper.emitted().click).toBeUndefined()
+  })
+})
+

frontend/src/common/components/__tests__/DoughSelector.spec.js

@@ -0,0 +1,101 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DoughSelector from '../DoughSelector.vue'
+
+describe('DoughSelector', () => {
+  const mockDoughType = {
+    id: 1,
+    name: 'Тонкое',
+    description: 'Из твердых сортов пшеницы',
+    price: 300
+  }
+
+  it('должен рендериться с корректными данными', () => {
+    const wrapper = mount(DoughSelector, {
+      props: {
+        doughType: mockDoughType,
+        selectedId: null
+      }
+    })
+
+    expect(wrapper.find('b').text()).toBe('Тонкое')
+    expect(wrapper.find('span').text()).toBe('Из твердых сортов пшеницы')
+  })
+
+  it('должен отображать выбранное состояние', () => {
+    const wrapper = mount(DoughSelector, {
+      props: {
+        doughType: mockDoughType,
+        selectedId: 1
+      }
+    })
+
+    const input = wrapper.find('input[type="radio"]')
+    expect(input.element.checked).toBe(true)
+  })
+
+  it('должен отображать невыбранное состояние', () => {
+    const wrapper = mount(DoughSelector, {
+      props: {
+        doughType: mockDoughType,
+        selectedId: 2
+      }
+    })
+
+    const input = wrapper.find('input[type="radio"]')
+    expect(input.element.checked).toBe(false)
+  })
+
+  it('должен эмитить событие change при клике', async () => {
+    const wrapper = mount(DoughSelector, {
+      props: {
+        doughType: mockDoughType,
+        selectedId: null
+      }
+    })
+
+    const input = wrapper.find('input[type="radio"]')
+    await input.trigger('change')
+
+    expect(wrapper.emitted()).toHaveProperty('change')
+    expect(wrapper.emitted().change[0]).toEqual([mockDoughType])
+  })
+
+  it('должен эмитить событие update:selectedId при клике', async () => {
+    const wrapper = mount(DoughSelector, {
+      props: {
+        doughType: mockDoughType,
+        selectedId: null
+      }
+    })
+
+    const input = wrapper.find('input[type="radio"]')
+    await input.trigger('change')
+
+    expect(wrapper.emitted()).toHaveProperty('update:selectedId')
+    expect(wrapper.emitted()['update:selectedId'][0]).toEqual([1])
+  })
+
+  it('должен применять правильный CSS класс для тонкого теста', () => {
+    const wrapper = mount(DoughSelector, {
+      props: {
+        doughType: { ...mockDoughType, id: 1 },
+        selectedId: null
+      }
+    })
+
+    expect(wrapper.find('.dough-selector--light').exists()).toBe(true)
+  })
+
+  it('должен применять правильный CSS класс для толстого теста', () => {
+    const wrapper = mount(DoughSelector, {
+      props: {
+        doughType: { ...mockDoughType, id: 2, name: 'Толстое' },
+        selectedId: null
+      }
+    })
+
+    expect(wrapper.find('.dough-selector--large').exists()).toBe(true)
+  })
+})
+

frontend/src/common/helpers/__tests__/image.spec.js

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import { getImageUrl, getUserAvatar, getIngredientImage, getPizzaImage } from '../image'
+
+describe('Image Helpers', () => {
+  describe('getImageUrl', () => {
+    it('должен добавлять слеш в начало если его нет', () => {
+      const result = getImageUrl('test.jpg')
+      expect(result).toBe('/test.jpg')
+    })
+
+    it('должен возвращать путь как есть если слеш уже есть', () => {
+      const result = getImageUrl('/img/test.jpg')
+      expect(result).toBe('/img/test.jpg')
+    })
+
+    it('должен заменять /public/ на /', () => {
+      const result = getImageUrl('/public/img/test.jpg')
+      expect(result).toBe('/img/test.jpg')
+    })
+
+    it('должен возвращать URL как есть если это http/https', () => {
+      const result = getImageUrl('https://example.com/image.jpg')
+      expect(result).toBe('https://example.com/image.jpg')
+    })
+
+    it('должен возвращать пустую строку для пустого пути', () => {
+      const result = getImageUrl('')
+      expect(result).toBe('')
+    })
+  })
+
+  describe('getUserAvatar', () => {
+    it('должен возвращать путь к аватару через getImageUrl', () => {
+      const result = getUserAvatar('/img/users/user1.jpg')
+      expect(result).toBe('/img/users/user1.jpg')
+    })
+
+    it('должен возвращать дефолтный аватар если путь не указан', () => {
+      const result = getUserAvatar('')
+      expect(result).toBe('/img/users/default-avatar.svg')
+    })
+  })
+
+  describe('getIngredientImage', () => {
+    it('должен возвращать путь к изображению ингредиента', () => {
+      const result = getIngredientImage('/img/filling/tomatoes.svg')
+      expect(result).toBe('/img/filling/tomatoes.svg')
+    })
+
+    it('должен возвращать пустую строку для пустого пути', () => {
+      const result = getIngredientImage('')
+      expect(result).toBe('')
+    })
+  })
+
+  describe('getPizzaImage', () => {
+    it('должен возвращать путь к изображению пиццы', () => {
+      const result = getPizzaImage('/img/pizzas/pepperoni.png')
+      expect(result).toBe('/img/pizzas/pepperoni.png')
+    })
+
+    it('должен возвращать дефолтное изображение для пустого пути', () => {
+      const result = getPizzaImage('')
+      expect(result).toBe('/img/product.svg')
+    })
+  })
+})
+