web_Admision/front/tests/components/WebPage.test.js

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { mount, shallowMount } from '@vue/test-utils'
import { ref, computed, nextTick } from 'vue'
import { setActivePinia, createPinia } from 'pinia'

// Since WebPage.vue has many dependencies, we'll test the showModal logic in isolation
// by extracting the logic into a testable unit

describe('WebPage showModal function', () => {
  // Simulate the showModal function logic from WebPage.vue
  const tipoLabels = {
    requisitos: 'Requisitos',
    pagos: 'Pagos',
    vacantes: 'Vacantes',
    cronograma: 'Cronograma'
  }

  const createShowModal = (procesosPublicados) => {
    const detalleModal = ref({
      titulo: '',
      descripcion: '',
      imagen_url: null,
      imagen_url_2: null,
      listas: []
    })
    const detalleModalVisible = ref(false)

    const showModal = ({ procesoId, tipo }) => {
      const proceso = procesosPublicados.value.find(p => p.id === procesoId)
      if (!proceso) return

      const detalle = proceso.detalles?.find(d => d.tipo === tipo)

      if (detalle) {
        detalleModal.value = {
          titulo: detalle.titulo_detalle || tipoLabels[tipo] || tipo,
          descripcion: detalle.descripcion || '',
          imagen_url: detalle.imagen_url || null,
          imagen_url_2: detalle.imagen_url_2 || null,
          listas: detalle.listas || []
        }
      } else {
        detalleModal.value = {
          titulo: `${tipoLabels[tipo] || tipo} - ${proceso.titulo}`,
          descripcion: '',
          imagen_url: null,
          imagen_url_2: null,
          listas: []
        }
      }

      detalleModalVisible.value = true
    }

    return { showModal, detalleModal, detalleModalVisible }
  }

  describe('when proceso has matching detalle', () => {
    it('displays detalle information when detalle exists for the tipo', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Admisión 2026',
          detalles: [
            {
              tipo: 'requisitos',
              titulo_detalle: 'Requisitos de Admisión',
              descripcion: 'Lista de requisitos necesarios para postular',
              imagen_url: 'https://example.com/requisitos.jpg',
              imagen_url_2: 'https://example.com/requisitos2.jpg',
              listas: ['DNI vigente', 'Certificado de estudios', 'Foto carnet']
            }
          ]
        }
      ])

      const { showModal, detalleModal, detalleModalVisible } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'requisitos' })

      expect(detalleModalVisible.value).toBe(true)
      expect(detalleModal.value.titulo).toBe('Requisitos de Admisión')
      expect(detalleModal.value.descripcion).toBe('Lista de requisitos necesarios para postular')
      expect(detalleModal.value.imagen_url).toBe('https://example.com/requisitos.jpg')
      expect(detalleModal.value.imagen_url_2).toBe('https://example.com/requisitos2.jpg')
      expect(detalleModal.value.listas).toEqual(['DNI vigente', 'Certificado de estudios', 'Foto carnet'])
    })

    it('uses tipo label as title when titulo_detalle is not provided', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Admisión 2026',
          detalles: [
            {
              tipo: 'pagos',
              descripcion: 'Información de pagos'
            }
          ]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'pagos' })

      expect(detalleModal.value.titulo).toBe('Pagos')
      expect(detalleModal.value.descripcion).toBe('Información de pagos')
    })

    it('handles detalle with vacantes tipo correctly', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Proceso Ordinario',
          detalles: [
            {
              tipo: 'vacantes',
              titulo_detalle: 'Vacantes Disponibles',
              descripcion: '100 vacantes para todas las carreras',
              listas: ['Medicina: 20', 'Ingeniería: 30', 'Derecho: 50']
            }
          ]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'vacantes' })

      expect(detalleModal.value.titulo).toBe('Vacantes Disponibles')
      expect(detalleModal.value.listas).toHaveLength(3)
    })

    it('handles detalle with cronograma tipo correctly', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Admisión Extraordinaria',
          detalles: [
            {
              tipo: 'cronograma',
              titulo_detalle: 'Cronograma de Actividades',
              descripcion: 'Fechas importantes del proceso',
              imagen_url: 'https://example.com/cronograma.png'
            }
          ]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'cronograma' })

      expect(detalleModal.value.titulo).toBe('Cronograma de Actividades')
      expect(detalleModal.value.imagen_url).toBe('https://example.com/cronograma.png')
    })
  })

  describe('when proceso does not have matching detalle', () => {
    it('creates default modal data with proceso title when no detalle found', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Admisión 2026',
          detalles: [] // No detalles
        }
      ])

      const { showModal, detalleModal, detalleModalVisible } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'requisitos' })

      expect(detalleModalVisible.value).toBe(true)
      expect(detalleModal.value.titulo).toBe('Requisitos - Admisión 2026')
      expect(detalleModal.value.descripcion).toBe('')
      expect(detalleModal.value.imagen_url).toBeNull()
      expect(detalleModal.value.imagen_url_2).toBeNull()
      expect(detalleModal.value.listas).toEqual([])
    })

    it('creates default modal for pagos when no detalle', () => {
      const procesosPublicados = ref([
        {
          id: 2,
          titulo: 'Proceso Especial',
          detalles: [
            { tipo: 'requisitos', titulo_detalle: 'Requisitos' } // Only requisitos, no pagos
          ]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 2, tipo: 'pagos' })

      expect(detalleModal.value.titulo).toBe('Pagos - Proceso Especial')
    })

    it('handles proceso with undefined detalles array', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Proceso Sin Detalles'
          // No detalles property at all
        }
      ])

      const { showModal, detalleModal, detalleModalVisible } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'vacantes' })

      expect(detalleModalVisible.value).toBe(true)
      expect(detalleModal.value.titulo).toBe('Vacantes - Proceso Sin Detalles')
    })
  })

  describe('when proceso is not found', () => {
    it('does not open modal when procesoId does not match any proceso', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Admisión 2026',
          detalles: []
        }
      ])

      const { showModal, detalleModal, detalleModalVisible } = createShowModal(procesosPublicados)

      showModal({ procesoId: 999, tipo: 'requisitos' }) // Non-existent ID

      expect(detalleModalVisible.value).toBe(false)
    })

    it('does not modify modal data when proceso not found', () => {
      const procesosPublicados = ref([
        { id: 1, titulo: 'Admisión 2026', detalles: [] }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      // Set initial state
      const initialState = { ...detalleModal.value }

      showModal({ procesoId: 999, tipo: 'requisitos' })

      expect(detalleModal.value).toEqual(initialState)
    })
  })

  describe('modal data handling edge cases', () => {
    it('handles empty strings in detalle properties', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Test Proceso',
          detalles: [
            {
              tipo: 'requisitos',
              titulo_detalle: '',
              descripcion: '',
              imagen_url: '',
              listas: []
            }
          ]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'requisitos' })

      // Empty titulo_detalle should fall back to tipo label
      expect(detalleModal.value.titulo).toBe('Requisitos')
      expect(detalleModal.value.descripcion).toBe('')
    })

    it('handles null values in detalle properties', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Test Proceso',
          detalles: [
            {
              tipo: 'pagos',
              titulo_detalle: 'Pagos',
              descripcion: null,
              imagen_url: null,
              imagen_url_2: null,
              listas: null
            }
          ]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'pagos' })

      expect(detalleModal.value.descripcion).toBe('')
      expect(detalleModal.value.imagen_url).toBeNull()
      expect(detalleModal.value.listas).toEqual([])
    })

    it('correctly maps all tipo labels', () => {
      const testCases = [
        { tipo: 'requisitos', expectedLabel: 'Requisitos' },
        { tipo: 'pagos', expectedLabel: 'Pagos' },
        { tipo: 'vacantes', expectedLabel: 'Vacantes' },
        { tipo: 'cronograma', expectedLabel: 'Cronograma' }
      ]

      testCases.forEach(({ tipo, expectedLabel }) => {
        const procesosPublicados = ref([
          { id: 1, titulo: 'Test', detalles: [] }
        ])

        const { showModal, detalleModal } = createShowModal(procesosPublicados)

        showModal({ procesoId: 1, tipo })

        expect(detalleModal.value.titulo).toBe(`${expectedLabel} - Test`)
      })
    })

    it('handles unknown tipo by using tipo as label', () => {
      const procesosPublicados = ref([
        { id: 1, titulo: 'Test', detalles: [] }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 1, tipo: 'unknown_tipo' })

      expect(detalleModal.value.titulo).toBe('unknown_tipo - Test')
    })
  })

  describe('multiple procesos scenarios', () => {
    it('correctly finds the right proceso among multiple', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Proceso Uno',
          detalles: [{ tipo: 'requisitos', titulo_detalle: 'Requisitos Uno' }]
        },
        {
          id: 2,
          titulo: 'Proceso Dos',
          detalles: [{ tipo: 'requisitos', titulo_detalle: 'Requisitos Dos' }]
        },
        {
          id: 3,
          titulo: 'Proceso Tres',
          detalles: [{ tipo: 'requisitos', titulo_detalle: 'Requisitos Tres' }]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      showModal({ procesoId: 2, tipo: 'requisitos' })

      expect(detalleModal.value.titulo).toBe('Requisitos Dos')
    })

    it('handles showing different tipos for different procesos', () => {
      const procesosPublicados = ref([
        {
          id: 1,
          titulo: 'Proceso A',
          detalles: [
            { tipo: 'requisitos', titulo_detalle: 'Requisitos A' },
            { tipo: 'pagos', titulo_detalle: 'Pagos A' }
          ]
        },
        {
          id: 2,
          titulo: 'Proceso B',
          detalles: [
            { tipo: 'vacantes', titulo_detalle: 'Vacantes B' }
          ]
        }
      ])

      const { showModal, detalleModal } = createShowModal(procesosPublicados)

      // Show pagos for proceso 1
      showModal({ procesoId: 1, tipo: 'pagos' })
      expect(detalleModal.value.titulo).toBe('Pagos A')

      // Then show vacantes for proceso 2
      showModal({ procesoId: 2, tipo: 'vacantes' })
      expect(detalleModal.value.titulo).toBe('Vacantes B')
    })
  })
})