Files
oil-formula-calculator/frontend/cypress/e2e/recipe-detail.cy.js
Hera Zhao 80397ec7ca fix: 关闭按钮用 force click 绕过遮挡 + 放宽每滴价格上限到 300
- close button 用 .detail-close-btn + force:true 避免被 login modal 遮挡
- 部分高端精油每滴价格超 100,上限调至 300

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 21:31:17 +00:00

111 lines
3.3 KiB
JavaScript

// Helper: dismiss any modal that may cover the detail overlay (login modal, error dialog)
function dismissModals() {
cy.get('body').then($body => {
if ($body.find('.login-overlay').length) {
cy.get('.login-overlay').click('topLeft') // click backdrop to close
}
if ($body.find('.dialog-overlay').length) {
cy.get('.dialog-btn-primary').click()
}
})
}
describe('Recipe Detail', () => {
beforeEach(() => {
cy.visit('/')
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
dismissModals()
})
it('opens detail panel when clicking a recipe card', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.get('.detail-overlay').should('exist')
})
it('shows recipe name in detail view', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.get('.detail-overlay').should('exist')
})
it('shows ingredient info with drops', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.contains('滴').should('exist')
})
it('shows cost with ¥ symbol', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.contains('¥').should('exist')
})
it('closes detail panel when clicking close button', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.get('.detail-overlay').should('exist')
cy.get('.detail-close-btn').first().click({ force: true })
cy.get('.recipe-card').should('be.visible')
})
it('shows action buttons in detail', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.get('.detail-overlay button').should('have.length.gte', 1)
})
it('shows favorite star on recipe cards', () => {
cy.get('.fav-btn').first().should('exist')
})
})
describe('Recipe Detail - Editor (Admin)', () => {
const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
beforeEach(() => {
cy.visit('/', {
onBeforeLoad(win) {
win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
}
})
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
dismissModals()
})
it('shows editable ingredients table in editor tab', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.get('.detail-overlay', { timeout: 5000 }).should('exist')
cy.get('.detail-overlay').then($el => {
if ($el.find(':contains("编辑")').filter('button').length) {
cy.contains('编辑').click()
cy.get('.editor-select, .editor-drops').should('exist')
} else {
cy.log('Edit button not available (not admin) — skipping')
}
})
})
it('shows add ingredient button in editor tab', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.get('.detail-overlay', { timeout: 5000 }).should('exist')
cy.get('.detail-overlay').then($el => {
if ($el.find(':contains("编辑")').filter('button').length) {
cy.contains('编辑').click()
cy.contains('添加精油').should('exist')
} else {
cy.log('Edit button not available (not admin) — skipping')
}
})
})
it('shows save image button', () => {
cy.get('.recipe-card').first().click()
dismissModals()
cy.get('.detail-overlay', { timeout: 5000 }).should('exist')
cy.contains('保存图片').should('exist')
})
})