diff --git a/README.fr.md b/README.fr.md index c83aa2b..638460e 100644 --- a/README.fr.md +++ b/README.fr.md @@ -10,7 +10,7 @@ Version anglaise : [readme.md](readme.md) Ce fork a été testé avec jQuery `4.0.0` dans la démo minimale et il est couvert par des tests unitaires et visuels automatisés. Le coeur du plugin peut s'initialiser, naviguer, redimensionner, ajouter/supprimer des pages et se détruire correctement dans les tests sur navigateur moderne. -La compatibilité avec tous les navigateurs et appareils modernes n'est pas encore garantie. Safari/WebKit, iOS, Android tactile, l'accessibilité et les régressions visuelles en contexte produit restent à valider spécifiquement. +La couverture visuelle automatisée tourne actuellement sur Chromium desktop et sur un viewport mobile compact Chromium. Un projet Playwright WebKit est configuré quand l'hôte possède les dépendances système WebKit requises ; sur la machine locale actuelle, il n'est pas activé car `libgstcodecparsers-1.0.so.0` est absente. Les appareils iOS/Android natifs, l'accessibilité et les régressions visuelles en contexte produit restent à valider spécifiquement. ## Modifications réalisées @@ -38,6 +38,8 @@ La compatibilité avec tous les navigateurs et appareils modernes n'est pas enco - Correction de la mise en page de la démo minimale afin que les dimensions mesurées par turn.js correspondent à la taille réellement rendue des pages. - Ajout de tests unitaires avec Vitest et JSDOM. - Ajout de tests visuels Playwright et de snapshots de référence pour la démo minimale. +- Ajout d'une validation visuelle Chromium mobile pour la démo minimale et les démos magazine. +- Ajout d'une validation Playwright WebKit conditionnelle pour les hôtes qui possèdent les dépendances système WebKit requises. - Ajout des scripts npm et de la configuration projet pour les tests automatisés. - Régénération de `turn.min.js` à partir de la source mise à jour. @@ -185,6 +187,8 @@ La suite actuelle couvre : - le rendu de la démo minimale ; - le rendu après page tournée ; - la géométrie en viewport compact ; +- les contrôles et la géométrie en viewport mobile Chromium ; +- les smoke tests des démos magazine et magazine monopage en Chromium desktop et mobile ; - les mesures de page pendant l'animation. ## Prérequis @@ -192,6 +196,8 @@ La suite actuelle couvre : - Node.js pour le développement et les tests. - jQuery `4.0.0` pour la démo maintenue et la configuration de test actuelle. - Un navigateur pris en charge par Playwright pour les tests visuels. +- Les tests visuels Chromium utilisent l'exécutable Chromium local quand `/usr/bin/chromium` est disponible. +- Les tests visuels WebKit requièrent Playwright WebKit et la bibliothèque système `libgstcodecparsers-1.0.so.0` ; définir `TURNJS_ENABLE_WEBKIT=1` force le projet WebKit sur un hôte préparé. Les anciennes versions de jQuery faisaient partie du spike de compatibilité, mais ce dépôt utilise désormais jQuery `4.0.0` comme cible moderne pour la démo et les tests automatisés. @@ -199,7 +205,7 @@ Les anciennes versions de jQuery faisaient partie du spike de compatibilité, ma Le README d'origine mentionnait Chrome 12, Safari 5, Firefox 10 et IE 9 pour la 3e release historique. -Cette copie maintenue cible les navigateurs modernes, mais la couverture automatisée actuelle se limite aux navigateurs configurés par Playwright et à l'environnement de test local. Safari/WebKit, les appareils mobiles tactiles et le comportement d'accessibilité doivent être considérés comme des validations encore ouvertes. +Cette copie maintenue cible les navigateurs modernes. La couverture automatisée actuelle valide Chromium desktop avec snapshots de référence et Chromium mobile/compact avec des contrôles fonctionnels et géométriques. La validation WebKit est configurée mais conditionnelle : elle a été tentée localement et Playwright n'a pas pu lancer WebKit parce que l'hôte ne possède pas `libgstcodecparsers-1.0.so.0`. Considérer Safari/WebKit comme validé seulement sur les hôtes où ce projet s'exécute, et garder les appareils tactiles mobiles natifs et l'accessibilité comme validations ouvertes. ## Licence diff --git a/playwright.config.mjs b/playwright.config.mjs index 992a58e..21c8581 100644 --- a/playwright.config.mjs +++ b/playwright.config.mjs @@ -2,6 +2,45 @@ import { defineConfig } from '@playwright/test'; import { existsSync } from 'node:fs'; const chromiumExecutable = process.env.CHROMIUM_EXECUTABLE_PATH || '/usr/bin/chromium'; +const chromiumLaunchOptions = existsSync(chromiumExecutable) ? { executablePath: chromiumExecutable } : {}; +const desktopViewport = { width: 1100, height: 760 }; +const webkitSystemDepsAvailable = [ + '/lib/x86_64-linux-gnu/libgstcodecparsers-1.0.so.0', + '/usr/lib/x86_64-linux-gnu/libgstcodecparsers-1.0.so.0' +].some(existsSync); + +const projects = [ + { + use: { + browserName: 'chromium', + viewport: desktopViewport, + deviceScaleFactor: 1, + launchOptions: chromiumLaunchOptions + } + }, + { + name: 'chromium-mobile', + use: { + browserName: 'chromium', + viewport: { width: 390, height: 844 }, + deviceScaleFactor: 2, + isMobile: true, + hasTouch: true, + launchOptions: chromiumLaunchOptions + } + } +]; + +if (webkitSystemDepsAvailable || process.env.TURNJS_ENABLE_WEBKIT === '1') { + projects.push({ + name: 'webkit-desktop', + use: { + browserName: 'webkit', + viewport: desktopViewport, + deviceScaleFactor: 1 + } + }); +} export default defineConfig({ testDir: './tests/visual', @@ -12,10 +51,5 @@ export default defineConfig({ maxDiffPixelRatio: 0.02 } }, - use: { - browserName: 'chromium', - viewport: { width: 1100, height: 760 }, - deviceScaleFactor: 1, - launchOptions: existsSync(chromiumExecutable) ? { executablePath: chromiumExecutable } : {} - } + projects }); diff --git a/readme.md b/readme.md index 80bc5ee..12faa09 100644 --- a/readme.md +++ b/readme.md @@ -10,7 +10,7 @@ French version: [README.fr.md](README.fr.md) This fork has been smoke-tested with jQuery `4.0.0` in the minimal demo and covered by automated unit and visual tests. The core plugin can initialize, navigate, resize, add/remove pages, and destroy itself in modern browser test runs. -Compatibility is not yet guaranteed for every modern browser or device. Safari/WebKit, iOS, Android touch behavior, accessibility, and production visual regressions still need dedicated validation. +Automated visual coverage currently runs on Chromium desktop and a compact Chromium mobile viewport. A WebKit Playwright project is configured when the host has the required WebKit system dependencies; on the current local machine it is not enabled because `libgstcodecparsers-1.0.so.0` is missing. Native iOS/Android devices, accessibility, and production visual regressions still need dedicated validation. ## What Changed @@ -38,6 +38,8 @@ Compatibility is not yet guaranteed for every modern browser or device. Safari/W - Fixed minimal demo layout so turn.js page measurements match the real rendered page size. - Added unit tests with Vitest and JSDOM. - Added Playwright visual tests and reference snapshots for the minimal demo. +- Added Chromium mobile visual validation for the minimal demo and magazine demos. +- Added conditional WebKit Playwright validation for hosts with the required WebKit system dependencies. - Added npm scripts and project configuration for automated tests. - Regenerated `turn.min.js` from the updated source. @@ -185,6 +187,8 @@ The current suite covers: - minimal demo rendering; - page turn rendering; - compact viewport geometry; +- mobile viewport controls and geometry in Chromium; +- magazine and single-page magazine smoke tests in desktop and mobile Chromium; - page measurements during animation. ## Requirements @@ -192,6 +196,8 @@ The current suite covers: - Node.js for development and tests. - jQuery `4.0.0` for the current maintained demo and test setup. - A browser supported by Playwright for visual tests. +- Chromium visual tests use the local Chromium executable when `/usr/bin/chromium` is available. +- WebKit visual tests require Playwright WebKit plus the system library `libgstcodecparsers-1.0.so.0`; set `TURNJS_ENABLE_WEBKIT=1` to force the WebKit project on a prepared host. Older jQuery versions were part of the compatibility spike, but this repository now uses jQuery `4.0.0` as the modern target for its demo and automated tests. @@ -199,7 +205,7 @@ Older jQuery versions were part of the compatibility spike, but this repository The original README listed Chrome 12, Safari 5, Firefox 10, and IE 9 for the historical 3rd release. -This maintained copy targets modern browsers, but the current automated coverage is limited to the configured Playwright browsers and the local test environment. Treat Safari/WebKit, mobile touch devices, and accessibility behavior as open validation work. +This maintained copy targets modern browsers. The current automated coverage validates Chromium desktop with reference screenshots and Chromium mobile/compact behavior with functional and geometry checks. WebKit validation is configured but conditional: it was attempted locally and Playwright could not launch WebKit because the host is missing `libgstcodecparsers-1.0.so.0`. Treat Safari/WebKit as validated only on hosts where that project runs, and treat native mobile touch devices and accessibility behavior as open validation work. ## License diff --git a/tests/visual/minimal.spec.js b/tests/visual/minimal.spec.js index c7d9ec7..169373e 100644 --- a/tests/visual/minimal.spec.js +++ b/tests/visual/minimal.spec.js @@ -64,13 +64,19 @@ test.beforeEach(async ({ page }) => { }); }); -test('minimal demo renders the opening page', async ({ page }) => { +const isScreenshotProject = testInfo => testInfo.project.name === ''; + +test('minimal demo renders the opening page', async ({ page }, testInfo) => { await page.goto(`${baseUrl}/demos/minimal/index.html`); await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function'); - await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-1.png'); + + await expect(page.locator('#status')).toHaveText('Page 1 / 6'); + if (isScreenshotProject(testInfo)) { + await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-1.png'); + } }); -test('minimal demo renders after turning to the next page', async ({ page }) => { +test('minimal demo renders after turning to the next page', async ({ page }, testInfo) => { await page.goto(`${baseUrl}/demos/minimal/index.html`); await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function'); @@ -78,10 +84,12 @@ test('minimal demo renders after turning to the next page', async ({ page }) => await expect(page.locator('#status')).toHaveText('Page 2 / 6'); await page.waitForTimeout(700); - await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-2.png'); + if (isScreenshotProject(testInfo)) { + await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-2.png'); + } }); -test('minimal demo keeps turn geometry aligned in a compact viewport', async ({ page }) => { +test('minimal demo keeps turn geometry aligned in a compact viewport', async ({ page }, testInfo) => { await page.setViewportSize({ width: 600, height: 720 }); await page.goto(`${baseUrl}/demos/minimal/index.html`); await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function'); @@ -101,10 +109,12 @@ test('minimal demo keeps turn geometry aligned in a compact viewport', async ({ expect(metrics.size).toEqual(metrics.book); expect(metrics.wrapper.height).toBe(metrics.book.height); expect(metrics.wrapper.width).toBe(metrics.book.width / 2); - await expect(page.locator('#book')).toHaveScreenshot('minimal-book-compact-page-1.png'); + if (isScreenshotProject(testInfo)) { + await expect(page.locator('#book')).toHaveScreenshot('minimal-book-compact-page-1.png'); + } }); -test('minimal demo keeps page measurements aligned during a page turn', async ({ page }) => { +test('minimal demo keeps page measurements aligned during a page turn', async ({ page }, testInfo) => { await page.goto(`${baseUrl}/demos/minimal/index.html`); await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function'); @@ -163,7 +173,37 @@ test('minimal demo keeps page measurements aligned during a page turn', async ({ } } - await expect(page.locator('#book')).toHaveScreenshot('minimal-book-turning-page-4.png'); + if (isScreenshotProject(testInfo)) { + await expect(page.locator('#book')).toHaveScreenshot('minimal-book-turning-page-4.png'); + } +}); + +test('minimal demo supports page controls in a mobile viewport', async ({ page }, testInfo) => { + test.skip(testInfo.project.name !== 'chromium-mobile', 'Mobile viewport scenario runs in the mobile project.'); + + await page.goto(`${baseUrl}/demos/minimal/index.html`); + await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function'); + + await expect(page.locator('#status')).toHaveText('Page 1 / 6'); + await page.locator('#next').click(); + await expect(page.locator('#status')).toHaveText('Page 2 / 6'); + await page.waitForTimeout(700); + await page.locator('#previous').click(); + await expect(page.locator('#status')).toHaveText('Page 1 / 6'); + + const metrics = await page.evaluate(() => { + const book = document.querySelector('#book').getBoundingClientRect(); + const wrapper = document.querySelector('.turn-page-wrapper').getBoundingClientRect(); + + return { + book: { width: Math.round(book.width), height: Math.round(book.height) }, + wrapper: { width: Math.round(wrapper.width), height: Math.round(wrapper.height) } + }; + }); + + expect(metrics.book.width).toBeLessThanOrEqual(390); + expect(metrics.wrapper.height).toBe(metrics.book.height); + expect(metrics.wrapper.width).toBe(metrics.book.width / 2); }); test('magazine demo loads with jQuery 4 and turns pages', async ({ page }) => {