flights_web_raw/e2e/cypress/integration/components/input.cy.ts

import { uiHelpers } from '../../support/helpers/ui-helpers'

describe('Input Component Tests', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3001')
  })

  describe('Input Display', () => {
    it('should render input element', () => {
      cy.getByTestId('text-input').should('be.visible')
    })

    it('should have placeholder text', () => {
      cy.getByTestId('text-input').should('have.attr', 'placeholder')
    })

    it('should have correct input type', () => {
      cy.getByTestId('text-input').should('have.attr', 'type', 'text')
    })

    it('should be enabled by default', () => {
      cy.getByTestId('text-input').should('not.be.disabled')
    })
  })

  describe('Input Interaction', () => {
    it('should accept text input', () => {
      cy.getByTestId('text-input').type('test value')
      cy.getByTestId('text-input').should('have.value', 'test value')
    })

    it('should clear input value', () => {
      cy.getByTestId('text-input').type('test')
      cy.getByTestId('text-input').clear()
      cy.getByTestId('text-input').should('have.value', '')
    })

    it('should support focus', () => {
      cy.getByTestId('text-input').focus()
      cy.getByTestId('text-input').should('have.focus')
    })

    it('should trigger change event', () => {
      cy.getByTestId('text-input').type('test')
      cy.getByTestId('input-change-count').should('contain', '1')
    })

    it('should trigger blur event', () => {
      cy.getByTestId('text-input').focus().blur()
      cy.getByTestId('input-blur-count').should('contain', '1')
    })
  })

  describe('Input Validation', () => {
    it('should show required error', () => {
      cy.getByTestId('required-input').focus().blur()
      cy.getByTestId('required-error').should('be.visible')
    })

    it('should show min length error', () => {
      cy.getByTestId('min-length-input').type('a')
      cy.getByTestId('min-length-error').should('be.visible')
    })

    it('should show email validation error', () => {
      cy.getByTestId('email-input').type('invalid')
      cy.getByTestId('email-error').should('be.visible')
    })

    it('should clear error on valid input', () => {
      cy.getByTestId('email-input').type('invalid')
      cy.getByTestId('email-error').should('be.visible')
      cy.getByTestId('email-input').clear().type('test@example.com')
      cy.getByTestId('email-error').should('not.be.visible')
    })

    it('should validate pattern', () => {
      cy.getByTestId('phone-input').type('abc')
      cy.getByTestId('phone-error').should('be.visible')
    })
  })

  describe('Input Disabled State', () => {
    it('should disable input', () => {
      cy.getByTestId('disabled-input').should('be.disabled')
    })

    it('should prevent typing in disabled input', () => {
      cy.getByTestId('disabled-input').type('test', { force: true })
      cy.getByTestId('disabled-input').should('have.value', '')
    })

    it('should show disabled styling', () => {
      cy.getByTestId('disabled-input').should('have.css', 'opacity')
    })
  })

  describe('Input Read-only State', () => {
    it('should be read-only', () => {
      cy.getByTestId('readonly-input').should('have.attr', 'readonly')
    })

    it('should prevent modification', () => {
      cy.getByTestId('readonly-input').type('test', { force: true })
      cy.getByTestId('readonly-input').should('not.have.value', 'test')
    })
  })

  describe('Input Types', () => {
    it('should support text input', () => {
      cy.getByTestId('text-input').type('test')
      cy.getByTestId('text-input').should('have.value', 'test')
    })

    it('should support email input', () => {
      cy.getByTestId('email-input').type('test@example.com')
      cy.getByTestId('email-input').should('have.value', 'test@example.com')
    })

    it('should support password input', () => {
      cy.getByTestId('password-input').type('secret123')
      cy.getByTestId('password-input').should('have.attr', 'type', 'password')
    })

    it('should support number input', () => {
      cy.getByTestId('number-input').type('123')
      cy.getByTestId('number-input').should('have.value', '123')
    })

    it('should support date input', () => {
      cy.getByTestId('date-input').type('2025-05-15')
      cy.getByTestId('date-input').should('have.value', '2025-05-15')
    })
  })

  describe('Input Variants', () => {
    it('should render standard input', () => {
      cy.getByTestId('standard-input').should('be.visible')
    })

    it('should render outlined input', () => {
      cy.getByTestId('outlined-input').should('have.class', 'outlined')
    })

    it('should render filled input', () => {
      cy.getByTestId('filled-input').should('have.class', 'filled')
    })

    it('should have different sizes', () => {
      cy.getByTestId('small-input').should('have.class', 'small')
      cy.getByTestId('medium-input').should('have.class', 'medium')
      cy.getByTestId('large-input').should('have.class', 'large')
    })
  })

  describe('Input Prefix/Suffix', () => {
    it('should display prefix icon', () => {
      cy.getByTestId('input-with-prefix').within(() => {
        cy.getByTestId('input-prefix').should('be.visible')
      })
    })

    it('should display suffix icon', () => {
      cy.getByTestId('input-with-suffix').within(() => {
        cy.getByTestId('input-suffix').should('be.visible')
      })
    })

    it('should allow suffix action', () => {
      cy.getByTestId('input-with-clear-button').within(() => {
        cy.getByTestId('clear-button').should('be.visible')
      })
    })

    it('should toggle visibility with suffix', () => {
      cy.getByTestId('password-input-with-toggle').within(() => {
        cy.getByTestId('toggle-visibility-button').click()
        cy.getByTestId('password-input').should('have.attr', 'type', 'text')
      })
    })
  })

  describe('Input Placeholder Behavior', () => {
    it('should show placeholder when empty', () => {
      cy.getByTestId('text-input').should('have.attr', 'placeholder', 'Enter text')
    })

    it('should hide placeholder when focused', () => {
      cy.getByTestId('text-input').focus()
      cy.getByTestId('text-input').should('have.attr', 'placeholder')
    })

    it('should hide placeholder when value present', () => {
      cy.getByTestId('text-input').type('value')
      // Placeholder attr still exists but visual should be hidden
      cy.getByTestId('text-input').should('have.value', 'value')
    })
  })

  describe('Input Label', () => {
    it('should display input label', () => {
      cy.getByTestId('labeled-input-label').should('be.visible')
    })

    it('should associate label with input', () => {
      cy.getByTestId('labeled-input-label').click()
      cy.getByTestId('labeled-input').should('have.focus')
    })

    it('should show required indicator', () => {
      cy.getByTestId('required-input-label').should('contain', '*')
    })

    it('should show error state in label', () => {
      cy.getByTestId('error-input').focus().blur()
      cy.getByTestId('error-input-label').should('have.class', 'error')
    })
  })

  describe('Input Helper Text', () => {
    it('should display helper text', () => {
      cy.getByTestId('input-helper-text').should('be.visible')
    })

    it('should show character count', () => {
      cy.getByTestId('input-with-counter').type('test')
      cy.getByTestId('char-count').should('contain', '4')
    })

    it('should show error text', () => {
      cy.getByTestId('error-input').focus().blur()
      cy.getByTestId('error-message').should('be.visible')
    })
  })

  describe('Input Performance', () => {
    it('should handle rapid typing', () => {
      cy.getByTestId('text-input').type('abcdefghijklmnop{backspace}{backspace}')
      cy.getByTestId('text-input').should('have.value', 'abcdefghijklmno')
    })

    it('should handle long text', () => {
      const longText = 'a'.repeat(500)
      cy.getByTestId('text-input').type(longText)
      cy.getByTestId('text-input').should('have.value', longText)
    })

    it('should handle paste events', () => {
      cy.getByTestId('text-input').invoke('val', 'pasted text')
      cy.getByTestId('text-input').trigger('input')
      cy.getByTestId('text-input').should('have.value', 'pasted text')
    })
  })

  describe('Accessibility', () => {
    it('should have accessible name', () => {
      cy.getByTestId('labeled-input').should('have.attr', 'aria-label')
    })

    it('should announce errors', () => {
      cy.getByTestId('error-input').focus().blur()
      cy.getByTestId('error-input').should('have.attr', 'aria-invalid', 'true')
    })

    it('should support keyboard shortcuts', () => {
      cy.getByTestId('text-input').focus()
      cy.getByTestId('text-input').type('{ctrl}a')
      cy.getByTestId('text-input').type('{ctrl}c')
    })
  })
})