Files
oil-formula-calculator/frontend/cypress/e2e/recipe-search.cy.js
Hera Zhao ee8ec23dc7 Refactor frontend to Vue 3 + Vite + Pinia + Cypress E2E
- Replace single-file 8441-line HTML with Vue 3 SPA
- Pinia stores: auth, oils, recipes, diary, ui
- Composables: useApi, useDialog, useSmartPaste, useOilTranslation
- 6 shared components: RecipeCard, RecipeDetailOverlay, TagPicker, etc.
- 9 page views: RecipeSearch, RecipeManager, Inventory, OilReference, etc.
- 14 Cypress E2E test specs (113 tests), all passing
- Multi-stage Dockerfile (Node build + Python runtime)
- Demo video generation scripts (TTS + subtitles + screen recording)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 18:35:00 +00:00

46 lines
1.5 KiB
JavaScript

describe('Recipe Search', () => {
beforeEach(() => {
cy.visit('/')
// Wait for recipes to load
cy.get('.recipe-card, .empty-state', { timeout: 10000 }).should('exist')
})
it('displays recipe cards in the grid', () => {
cy.get('.recipe-card').should('have.length.gte', 1)
})
it('each recipe card shows name and oils', () => {
cy.get('.recipe-card').first().within(() => {
cy.get('.recipe-card-name').should('not.be.empty')
cy.get('.recipe-card-oils').should('not.be.empty')
})
})
it('filters recipes by search input', () => {
cy.get('.recipe-card').then($cards => {
const initialCount = $cards.length
cy.get('input[placeholder*="搜索"]').type('薰衣草')
// Should filter, possibly fewer results
cy.wait(500)
cy.get('.recipe-card').should('have.length.lte', initialCount)
})
})
it('clears search and restores all recipes', () => {
cy.get('input[placeholder*="搜索"]').type('薰衣草')
cy.wait(500)
cy.get('.recipe-card').then($filtered => {
const filteredCount = $filtered.length
cy.get('input[placeholder*="搜索"]').clear()
cy.wait(500)
cy.get('.recipe-card').should('have.length.gte', filteredCount)
})
})
it('opens recipe detail when clicking a card', () => {
cy.get('.recipe-card').first().click()
// Should show detail overlay or panel
cy.get('[class*="overlay"], [class*="detail"]', { timeout: 5000 }).should('be.visible')
})
})