From 94dcf2eea5701af7dec25b9d4abf9c5e51d8da99 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 11 Sep 2026 02:30:14 +0200 Subject: [PATCH] Align song details typography and cards --- e2e/musica.e2e.ts | 44 ++++ src/lib/components/FichaDeCancion.svelte | 267 ++++++++++++----------- src/lib/components/Pestanas.svelte | 3 +- src/lib/components/Valoracion.svelte | 3 +- 4 files changed, 192 insertions(+), 125 deletions(-) diff --git a/e2e/musica.e2e.ts b/e2e/musica.e2e.ts index b6b4b3d..b055ced 100644 --- a/e2e/musica.e2e.ts +++ b/e2e/musica.e2e.ts @@ -166,6 +166,50 @@ test.describe('Página de música', () => { await expect(favorito.locator('svg')).toHaveAttribute('width', '28'); await expect(lista.locator('svg')).toHaveAttribute('width', '28'); }); + + test('la letra y las tarjetas de la ficha comparten retícula y tipografía de interfaz', async ({ + page + }) => { + await page.goto('/canciones/ton-silence-me-libere'); + + const filaPestanas = page.getByRole('tablist', { name: 'Contenido del tema' }); + const ficha = page.locator('aside.lateral'); + const tituloFicha = ficha.getByRole('heading', { name: 'Ficha' }); + const cajaPestanas = await filaPestanas.boundingBox(); + const cajaFicha = await tituloFicha.boundingBox(); + + expect(cajaPestanas).not.toBeNull(); + expect(cajaFicha).not.toBeNull(); + expect( + Math.abs( + (cajaPestanas?.y ?? 0) + + (cajaPestanas?.height ?? 0) - + ((cajaFicha?.y ?? 0) + (cajaFicha?.height ?? 0)) + ) + ).toBeLessThan(2); + + const familiaPestana = await filaPestanas + .getByRole('tab', { name: 'Letra' }) + .evaluate((elemento) => getComputedStyle(elemento).fontFamily); + const familiaFicha = await tituloFicha.evaluate( + (elemento) => getComputedStyle(elemento).fontFamily + ); + const familiaLetra = await page + .locator('.texto.versos') + .evaluate((elemento) => getComputedStyle(elemento).fontFamily); + expect(familiaFicha).toBe(familiaPestana); + expect(familiaLetra).not.toBe(familiaFicha); + await expect(filaPestanas.getByRole('tab', { name: 'Letra' })).toHaveCSS('font-size', '15px'); + await expect(tituloFicha).toHaveCSS('font-size', '15px'); + await expect(ficha.locator('dl').first()).toHaveCSS('font-size', '15px'); + + const tarjetas = ficha.locator('section.bloque'); + expect(await tarjetas.count()).toBeGreaterThanOrEqual(2); + for (const tarjeta of await tarjetas.all()) { + await expect(tarjeta).toHaveCSS('border-top-style', 'solid'); + await expect(tarjeta).toHaveCSS('overflow', 'hidden'); + } + }); }); test.describe('Etiquetas', () => { diff --git a/src/lib/components/FichaDeCancion.svelte b/src/lib/components/FichaDeCancion.svelte index ab8054c..60c3cae 100644 --- a/src/lib/components/FichaDeCancion.svelte +++ b/src/lib/components/FichaDeCancion.svelte @@ -1,8 +1,8 @@