The work in its own time
{art.context}
Look closely
{art.looking}
Reading it with the text
Interpretation
{art.reading}
A question to sit with
{art.question}
{art.rights.credit} {art.rights.label}.
;} + +export function CulturePreview({data}:{data:CultureData}){ + const art=data.artworks.find(a=>a.id===data.featured)!; + return{art.relationship==='episode'?'The story in images':'Material culture'}
{art.artist} · {art.date}
{art.context}
{art.looking}
Interpretation
{art.reading}
{art.question}
{data.description}
{p}
)}{filtered.length} {filtered.length===1?'work':'works'}{book!=='all'?' connected to this book':''}
+ {filtered.length?
{a.artist} · {a.date}
No works match this combination. The book-by-book guide still offers cultural context for every chapter.
Cultural themes that travel through the story, connecting everyday practices, images, and ideas to the text.
{p}
)}Sources: {theme.sources.map((s,i)=>{i>0?' · ':''}{s.label})}
A cultural thread through the whole work. Links lead back to the complete text; the connections below are reading prompts, not claims that every object illustrates the text.
{c.text}
{connected.length>0&&Artwork facts follow the linked collection records. Close-looking and literary connections are this edition’s interpretations. The objects and images belong to different historical worlds. The collection includes full-story spoilers.
+The link may be wrong, or your connection may have dropped.
Return to contentsOpening the book…
{mode==='text'?workName:label(chapter)}
{mode==='notes'?`${chapter.minutes} minute commentary · ${chapter.quoteCount?`${chapter.quoteCount} selected passages`:'A reading companion'}`:activeWork.sourceLabel??activeWork.author}
{mode==='text'?workName:label(chapter)}
{mode==='notes'?`${chapter.minutes} minute commentary · ${chapter.quoteCount?`${chapter.quoteCount} selected passages`:'A reading companion'}`:activeWork.sourceLabel??activeWork.author}
{edition.culture?.chapters.some(c=>c.chapterId===chapter.id)&&Art & cultural context)}:<> Text marks what happens; Interpretation marks an argued reading. Other labels identify context, comparisons and open questions. Full reading keyText, sources & reading key
{selectedSection.title}
}}
diff --git a/test/unit/culture.test.mjs b/test/unit/culture.test.mjs
new file mode 100644
index 0000000..e6e717f
--- /dev/null
+++ b/test/unit/culture.test.mjs
@@ -0,0 +1,23 @@
+import test from 'node:test';import assert from 'node:assert/strict';import fs from 'node:fs';import path from 'node:path';import { createHash } from 'node:crypto';
+import { compileEdition } from '../../scripts/content.mjs';import { validateCulture } from '../../scripts/culture.mjs';
+const root=path.resolve(import.meta.dirname,'../..');
+const edition=compileEdition(path.join(root,'editions/odyssey/edition.json'));
+test('culture has twelve credited images, eight themes and all 24 Odyssey books',()=>{
+ const c=edition.metadata.culture;assert.equal(c.artworks.length,12);assert.equal(c.themes.length,8);
+ assert.deepEqual(c.chapters.map(e=>e.chapterId),Array.from({length:24},(_,i)=>`odyssey-${i+1}`));
+ const records=JSON.parse(fs.readFileSync(path.join(root,'editions/odyssey/culture-sources.json'))).records;
+ for(const art of c.artworks){const record=records.find(r=>r.id===art.id);assert.ok(record);for(const src of [art.image.src,art.image.thumbnail]){const f=record.files.find(f=>f.path===`public${src}`);assert.ok(f);const bytes=fs.readFileSync(path.join(root,f.path));assert.equal(createHash('sha256').update(bytes).digest('hex'),f.sha256);}}
+});
+test('culture rejects broken references and missing provenance before publishing',()=>{
+ for(const [mutate,error] of [
+ [c=>c.artworks[0].chapterIds=['missing'],/chapter references/],
+ [c=>delete c.artworks[0].rights,/missing label/],
+ [c=>delete c.artworks[0].id,/invalid ID/],
+ [c=>c.artworks[0].image.src='https://external.test/art.jpg',/local/],
+ [c=>c.artworks[0].sources[0].url='javascript:alert(1)',/HTTPS/],
+ [c=>c.featured='missing',/featured/],
+ [c=>c.chapters[0].themeIds=['missing'],/Unknown culture theme/],
+ [c=>c.chapters.push(c.chapters[0]),/Duplicate culture chapter/],
+ ]){const c=structuredClone(edition.metadata.culture);mutate(c);assert.throws(()=>validateCulture(c,edition.library),error);}
+});
+test('the standalone starter does not require or inherit Odyssey culture',()=>{assert.equal(compileEdition(path.join(root,'editions/starter/edition.json')).metadata.culture,undefined);});
diff --git a/tests/culture.spec.ts b/tests/culture.spec.ts
new file mode 100644
index 0000000..8cdf13e
--- /dev/null
+++ b/tests/culture.spec.ts
@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import fs from 'node:fs';
+import type { Culture } from '../src/culture-types';
+const culture=JSON.parse(fs.readFileSync(new URL('../editions/odyssey/culture.json',import.meta.url),'utf8')) as Culture;
+
+test('gallery filters, empty state, cultural essays and whole-book guide',async({page})=>{
+ await page.goto('/');await page.getByRole('link',{name:'Art & culture',exact:true}).click();
+ await expect(page.locator('.gallery-work')).toHaveCount(12);
+ await page.getByRole('button',{name:'Paintings & prints',exact:true}).click();await expect(page.locator('.gallery-work')).toHaveCount(6);
+ await page.getByRole('button',{name:'Objects & manuscripts',exact:true}).click();await expect(page.locator('.gallery-work')).toHaveCount(6);
+ await page.getByRole('combobox',{name:'Filter artworks by book'}).selectOption('odyssey-20');await expect(page.locator('.gallery-work')).toHaveCount(1);
+ await page.getByRole('button',{name:'Paintings & prints',exact:true}).click();await expect(page.locator('.gallery-empty')).toBeVisible();
+ await page.getByRole('button',{name:'Show all works'}).click();await expect(page.locator('.gallery-work')).toHaveCount(12);
+ await expect(page.locator('.culture-book-grid>article')).toHaveCount(24);
+ for(const theme of culture.themes){const details=page.locator(`#theme-${theme.id}`);await details.locator('summary').focus();await page.keyboard.press('Enter');await expect(details).toHaveAttribute('open','');await expect(details.locator('.theme-body')).toBeVisible();await page.keyboard.press('Enter');await expect(details).not.toHaveAttribute('open','');}
+ await page.locator('.culture-navigation a[href$="#books"]').click();await expect(page.locator('#books')).toBeFocused();
+ await page.locator('#culture-odyssey-24 .culture-book-title').click();await expect(page.locator('#original-0')).toBeVisible();
+ await page.getByRole('link',{name:'Art & cultural context'}).click();await expect(page.locator('#culture-odyssey-24')).toBeFocused();
+});
+
+test('every artwork has a working image, credits, chapter links and enlargement',async({page})=>{
+ const errors:string[]=[];page.on('pageerror',e=>errors.push(e.message));
+ for(const art of culture.artworks){
+ await page.goto(`/culture/${art.id}`);await expect(page.locator('main h1')).toHaveText(art.title);await expect(page).toHaveTitle(`${art.title} · Art & culture`);
+ const image=page.locator('.art-plate img');await expect.poll(()=>image.evaluate((e:HTMLImageElement)=>e.complete&&e.naturalWidth>0)).toBeTruthy();
+ await expect(page.locator('.art-plate .art-credit a')).toHaveAttribute('href',art.rights.url);
+ await expect(page.locator('.art-facts .culture-chapter-links a')).toHaveCount(art.chapterIds.length);
+ const trigger=page.locator('.art-enlarge');await trigger.click();await expect(page.locator('.art-lightbox')).toBeVisible();
+ await expect(page.getByRole('button',{name:'Close enlarged artwork',exact:true})).toBeFocused();
+ await page.getByRole('button',{name:'Zoom in',exact:true}).click();await expect(page.getByRole('region',{name:'Scrollable artwork detail'})).toBeVisible();
+ expect(await page.locator('.art-zoom-stage').evaluate(e=>e.scrollWidth>e.clientWidth)).toBeTruthy();
+ await page.getByRole('button',{name:'Fit to screen',exact:true}).click();
+ await page.keyboard.press('Escape');await expect(page.locator('.art-lightbox')).not.toBeVisible();await expect(trigger).toBeFocused();
+ }
+ expect(errors).toEqual([]);
+});
+
+test('art remains accessible on a phone, in night mode and with large text',async({page})=>{
+ await page.goto('/culture/circe-calyx-krater');
+ await page.getByRole('button',{name:'Reading appearance',exact:true}).click();await page.getByRole('button',{name:'Largest text',exact:true}).click();await page.locator('.font-clear').click();await page.locator('.night-option').click();await page.keyboard.press('Escape');
+ for(const width of [320,390,768,1440]){await page.setViewportSize({width,height:900});expect(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth)).toBeTruthy();}
+ expect((await new AxeBuilder({page}).withTags(['wcag2a','wcag2aa','wcag21aa']).analyze()).violations).toEqual([]);
+ await page.emulateMedia({reducedMotion:'reduce'});await page.locator('.art-enlarge').click();await expect(page.locator('.art-lightbox')).toHaveCSS('animation-name','none');
+ expect((await new AxeBuilder({page}).withTags(['wcag2a','wcag2aa','wcag21aa']).analyze()).violations).toEqual([]);
+ await page.getByRole('button',{name:'Close enlarged artwork'}).click();await page.locator('.back-link').click();
+ await page.setViewportSize({width:320,height:900});expect(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth)).toBeTruthy();
+ await page.locator('#theme-hospitality summary').click();
+ expect((await new AxeBuilder({page}).withTags(['wcag2a','wcag2aa','wcag21aa']).analyze()).violations).toEqual([]);
+});
+
+test('unknown artwork route gives a working way back',async({page})=>{await page.goto('/culture/absent-work');await page.getByRole('link',{name:'Return to art & culture'}).click();await expect(page.locator('.gallery-work')).toHaveCount(12);});