oil-formula-calculator/frontend/cypress/e2e/manage-recipes.cy.js

describe('Manage Recipes Page', () => {
  let adminToken

  before(() => {
    cy.getAdminToken().then(token => { adminToken = token })
  })

  beforeEach(() => {
    cy.visit('/manage', {
      onBeforeLoad(win) {
        win.localStorage.setItem('oil_auth_token', adminToken)
      }
    })
    // Wait for the recipe manager to load
    cy.get('.recipe-manager', { timeout: 10000 }).should('exist')
    // Expand the public recipes section by clicking its title
    cy.contains('公共配方库', { timeout: 10000 }).should('be.visible').click()
    cy.get('.recipe-row', { timeout: 10000 }).should('have.length.gte', 1)
  })

  it('loads and shows recipe lists', () => {
    // Should show public recipes section with at least some recipes
    cy.contains('公共配方库').should('be.visible')
    cy.get('.recipe-row').should('have.length.gte', 1)
  })

  it('search box filters recipes', () => {
    cy.get('.recipe-row').then($rows => {
      const initialCount = $rows.length
      // Type a search term
      cy.get('.search-input').type('薰衣草')
      cy.wait(500)
      // Filtered count should be different (fewer or equal)
      cy.get('.recipe-row').should('have.length.lte', initialCount)
    })
  })

  it('clearing search restores all recipes', () => {
    cy.get('.search-input').type('薰衣草')
    cy.wait(500)
    cy.get('.recipe-row').then($filtered => {
      const filteredCount = $filtered.length
      cy.get('.search-input').clear()
      cy.wait(500)
      cy.get('.recipe-row').should('have.length.gte', filteredCount)
    })
  })

  it('can click a recipe to open the editor overlay', () => {
    // Click the row-info area (which triggers editRecipe)
    cy.get('.recipe-row .row-info').first().click()
    // Editor overlay should appear
    cy.get('.overlay-panel', { timeout: 5000 }).should('be.visible')
    cy.contains('编辑配方').should('be.visible')
    // Should have editor name input
    cy.get('.editor-name-input').should('exist')
  })

  it('editor shows ingredients table with oil inputs', () => {
    cy.get('.recipe-row .row-info').first().click()
    cy.get('.overlay-panel', { timeout: 5000 }).should('be.visible')
    // Ingredients section should have rows with oil search inputs
    cy.get('.overlay-panel .editor-table').should('exist')
    cy.get('.overlay-panel .form-select').should('have.length.gte', 1)
    cy.get('.overlay-panel .editor-drops').should('have.length.gte', 1)
  })

  it('can close the editor overlay', () => {
    cy.get('.recipe-row .row-info').first().click()
    cy.get('.overlay-panel', { timeout: 5000 }).should('be.visible')
    // Close via the close button
    cy.get('.overlay-panel .btn-close').click()
    cy.get('.overlay-panel').should('not.exist')
  })

  it('can close the editor with close button again', () => {
    cy.get('.recipe-row .row-info').first().click()
    cy.get('.overlay-panel', { timeout: 5000 }).should('be.visible')
    // Close via the X button
    cy.get('.overlay-panel .btn-close').click()
    cy.get('.overlay-panel').should('not.exist')
  })

  it('tag filter bar toggles', () => {
    // Look for any tag-related toggle button
    cy.get('body').then($body => {
      const hasToggle = $body.find('.tag-toggle-btn, [class*="tag-filter"] button, button:contains("标签")').length > 0
      if (hasToggle) {
        cy.get('.tag-toggle-btn, [class*="tag-filter"] button, button').contains('标签').first().click()
        cy.wait(500)
        // Tag area should exist after toggle
        cy.get('[class*="tag"]').should('exist')
      }
    })
  })

  it('shows recipe cost in each row', () => {
    cy.get('.row-cost').first().should('not.be.empty')
    cy.get('.row-cost').first().invoke('text').should('contain', '¥')
  })

  it('has add recipe button that opens overlay', () => {
    cy.get('.action-chip').contains('新增').click()
    cy.get('.overlay-panel', { timeout: 5000 }).should('be.visible')
    cy.contains('添加配方').should('be.visible')
    // Close it
    cy.get('.overlay-panel .btn-close').click()
  })
})