// La largeur du volet PDF est un reglage que l'utilisateur pose une fois et
// retrouve ensuite : elle doit survivre au rechargement, rester dans des bornes
// utilisables, et ne jamais empecher l'ecran de s'afficher si le stockage
// du navigateur est indisponible.
import { afterEach, describe, expect, it } from 'vitest'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

import VoletsAjustables from '../src/components/VoletsAjustables.vue'

const CLE = 'apercuPdf.largeurVolet'

/** Remplace le stockage du navigateur, absent sous Node. */
function poserStockage(valeur, { leve = false } = {}) {
  globalThis.localStorage = {
    getItem: () => {
      if (leve) throw new Error('stockage indisponible')
      return valeur
    },
    setItem: () => {},
    removeItem: () => {},
  }
}

function rendu(proprietes = {}) {
  return renderToString(
    createSSRApp(VoletsAjustables, { cleStockage: CLE, largeurDefaut: 50, ...proprietes })
  )
}

afterEach(() => {
  delete globalThis.localStorage
})

describe('VoletsAjustables', () => {
  it('applique la largeur par defaut quand rien n est memorise', async () => {
    poserStockage(null)
    const html = await rendu()

    expect(html).toContain('width:50%')
  })

  it('reprend la largeur memorisee', async () => {
    poserStockage('65')
    const html = await rendu()

    expect(html).toContain('width:65%')
    // Les deux volets se partagent la totalite : la poignee ne prend pas de
    // place dans le flux, sinon le second volet deborderait.
    expect(html).toContain('width:35%')
  })

  it('ignore une largeur memorisee hors bornes', async () => {
    // Sans ce garde-fou, une valeur ecrite avant un changement de bornes
    // resterait coincee et rendrait un volet inutilisable.
    poserStockage('95')

    expect(await rendu()).toContain('width:50%')
  })

  it('ignore une valeur memorisee illisible', async () => {
    poserStockage('beaucoup')

    expect(await rendu()).toContain('width:50%')
  })

  it("s'affiche quand même si le stockage est indisponible", async () => {
    // Navigation privee ou stockage bloque : le reglage se perd, pas l'ecran.
    poserStockage(null, { leve: true })

    expect(await rendu()).toContain('width:50%')
  })

  it('expose une poignee de redimensionnement atteignable', async () => {
    poserStockage(null)
    const html = await rendu()

    expect(html).toContain('role="separator"')
    expect(html).toContain('cursor-col-resize')
  })
})