scavold 0.2.0-rc.9 → 0.2.0

package/scripts/check-fixture.js

@@ -154,7 +154,7 @@ expect( manifest.adapter?.version === version, "reports this package's version a
 expect( manifest.sections?.video?.props?.src?.type === "media-file", "declares video.src as a media file" );
 expect( manifest.sections?.pagelist?.props?.sort?.values?.join() === "order,date,date-asc,title",
 	"declares the page list's ordering options" );
-expect( manifest.sections?.video?.props?.overlay?.type === "boolean", "declares video.overlay as a boolean" );
+expect( manifest.sections?.video?.props?.overlay === undefined, "offers no background mode for a video; that is a cover's" );
 expect( manifest.sections?.teaser?.props?.background?.type === "media-file",
 	"carries the site's own container with its typed props" );
 expect( manifest.sections?.teaser?.props?.variant?.values?.join() === "plain,boxed",
@@ -271,18 +271,67 @@ expect( built( "index.html" ).includes( 'href="/containers.html"' ), "leaves a l
 console.log( "\nvideo" );
 
 const videos = tags( media, "video" );
-const overlays = media.match( /<div class="scavold-video scavold-video--overlay"/g ) ?? [];
 
 expect( videos.every( t => /src="\/media\/clip\.mp4"/.test( t ) ), "rewrites the video source to its published URL" );
 expect( videos.some( t => /poster="\/media\/wide--\d+w-[0-9a-f]+\.jpg"/.test( t ) ),
 	"resolves a poster to a single generated variant rather than a srcset" );
-expect( overlays.length === 2, "renders background mode for both spellings of its arguments",
-	`found ${overlays.length} overlay blocks, expected 2` );
 
-const backgrounds = videos.filter( t => !t.includes( "controls" ) );
-
-expect( backgrounds.length === 2 && backgrounds.every( t => /autoplay/.test( t ) && /loop/.test( t ) && /muted/.test( t ) ),
-	"gives both spellings the same autoplay, loop and muted attributes" );
+// Autoplay implies muted, which is how it shows in the markup: the playing itself is
+// started by script, once reduced motion has been ruled out.
+const looping = videos.filter( t => /\bloop\b/.test( t ) );
+
+expect( looping.length === 2 && looping.every( t => /\bmuted\b/.test( t ) ),
+	"gives both spellings of autoplay and loop the same attributes",
+	`found ${looping.length} looping video(s), expected 2` );
+expect( videos.every( t => !/\bautoplay\b/.test( t ) ), "leaves starting an autoplay video to the script" );
+expect( videos.every( t => /\bcontrols\b/.test( t ) ), "gives every video its playback controls" );
+
+// ── cover ────────────────────────────────────────────────────────────────────
+
+console.log( "\ncover" );
+
+expect( manifest.sections?.cover?.props?.src?.type === "media-file", "declares cover.src as a media file" );
+
+const cover = built( "cover.html" );
+const covers = cover.split( /<div class="scavold-cover[ "]/ ).slice( 1 );
+const [ coverImage = "", coverVideo = "" ] = covers;
+
+expect( covers.length === 2, "renders both covers of the page", `found ${covers.length}` );
+expect( /<div class="scavold-cover[ "][^>]*\sdata-leading[\s=>]/.test( cover ) && cover.match( /\sdata-leading[\s=>]/g )?.length === 1,
+	"marks the cover opening the page, and only that one" );
+expect( cover.includes( '<main data-leading-container="cover">' ),
+	"tells the layout before the content renders that the page opens with a cover" );
+expect( !/<main[^>]*data-leading-container/.test( built( "media.html" ) ),
+	"tells it nothing on a page that opens with anything else" );
+// The variants, not just the widest one: a cover is the largest image of a page and
+// must not cost a phone the full 1920px file.
+expect( /<source type="image\/webp" srcset="[^"]*wide--320w-[0-9a-f]+\.webp 320w[^"]*wide--1920w-[0-9a-f]+\.webp 1920w"/.test( coverImage ),
+	"renders a cover image from all its variants" );
+// A 16:9 source cropped to an upright window is drawn wider than the window.
+expect( coverImage.includes( 'sizes="(min-aspect-ratio: 2400/1350) 100vw, 177.78vh"' ),
+	"tells the browser how wide a cropped cover image is drawn" );
+expect( /<img[^>]*loading="eager"/.test( coverImage ) && /<img[^>]*fetchpriority="high"/.test( coverImage ),
+	"loads a cover image at once rather than lazily" );
+expect( /<img[^>]*alt="A wide blue field"/.test( coverImage ), "uses the label as the image's alternative text" );
+expect( coverImage.includes( "--scavold-cover-focus:center top" ) || coverImage.includes( "--scavold-cover-focus: center top" ),
+	"passes the focal point on to the stylesheet" );
+expect( /class="scavold-cover__overlay"[^>]*>\s*(?:<!--\[-->)?\s*<h1[^>]*>Over the cover image/.test( coverImage ),
+	"lays the section's content on top of the image" );
+
+const coverVideoTag = tags( coverVideo, "video" )[0] ?? "";
+
+expect( coverVideo.startsWith( "scavold-cover--video" ), "tells a video cover by its file type" );
+// A mark for the theme to style, nothing more.
+expect( /^scavold-cover--light"/.test( coverImage ), "marks the tone asked for the content on top" );
+expect( !/scavold-cover--(light|dark)/.test( coverVideo ), "marks no tone where none is asked for" );
+expect( !cover.includes( "data-poster-srcset" ), "keeps the variants of a still image out of the markup" );
+expect( /src="\/media\/clip\.mp4"/.test( coverVideoTag ) && /poster="\/media\/wide--\d+w-[0-9a-f]+\.jpg"/.test( coverVideoTag ),
+	"resolves a cover video and its still image to their published URLs" );
+// Started by script once reduced motion has been ruled out, never by the markup.
+expect( /muted/.test( coverVideoTag ) && /loop/.test( coverVideoTag ) && !/autoplay/.test( coverVideoTag ),
+	"renders a cover video muted and looping, without autoplay in the markup" );
+expect( /<button type="button" class="scavold-cover__toggle" aria-label="[^"]+"/.test( coverVideo ),
+	"offers a labelled button to pause a cover video" );
 
 // ── page list ────────────────────────────────────────────────────────────────
 
@@ -303,6 +352,36 @@ expect( menu.includes( '<a href="/containers.html">' ),
 expect( crumbs.includes( '<a href="/blog/index.html"' ) && crumbs.includes( 'aria-current="page"' ),
 	"marks the page the breadcrumb ends on" );
 
+console.log( "\nnamed menus" );
+
+const footer = ( blogPage.match( /<nav aria-label="Footer"[\s\S]*?<\/nav>/ ) ?? [""] )[0];
+const footerTree = ( blogPage.match( /<nav aria-label="Footer tree"[\s\S]*?<\/nav>/ ) ?? [""] )[0];
+
+/**
+ * @param {string} nav one rendered menu
+ * @param {string} label link text of one entry
+ * @returns {number} how often the menu links that entry
+ */
+function linked( nav, label ) {
+	return nav.split( `>${label}</a>` ).length - 1;
+}
+
+expect( linked( footer, "Imprint" ) === 1 && linked( footer, "Contact" ) === 1,
+	"lists in a named menu the pages choosing it" );
+expect( linked( menu, "Imprint" ) === 0 && linked( menu, "About" ) === 0,
+	"leaves a page choosing only a named menu out of the page tree's menus" );
+expect( linked( menu, "Contact" ) === 1,
+	"keeps a page in the page tree's menus when it chooses them along with a named one" );
+expect( linked( footer, "Team" ) === 1 && footer.split( "<ul" ).length === 2,
+	"keeps a menu without sub-pages flat, listing a page chosen along with its parent beside it" );
+expect( linked( footerTree, "Team" ) === 1 &&
+	/>About<\/a><ul>(?:<!--\[-->)?<li[^>]*><a [^>]*>Team<\/a>/.test( footerTree ),
+"lists a page chosen along with its parent below that parent where the menu shows sub-pages, not twice" );
+expect( linked( footer, "Secret" ) === 0 && linked( menu, "Secret" ) === 0,
+	"lets hiding from menus rule over choosing one" );
+expect( /chooses menu 'sidebar', which \.cratly\.config\.yaml does not declare/.test( log ),
+	"warns about a menu name the site does not declare" );
+
 const sitemap = built( "sitemap.xml" );
 
 expect( sitemap.includes( "<loc>https://fixture.example.com/index.html</loc>" ) &&