slidev-theme-practicum 0.2.0 → 0.3.0

package/scripts/browser-smoke.mjs

@@ -10,9 +10,28 @@ import {
 
 const PROJECT_ROOT = resolve(import.meta.dirname, '..')
 const DIST_DIR = resolve(PROJECT_ROOT, 'dist')
+const EXPECTED_DOCUMENT_TITLE = 'Яндекс Практикум — справочная галерея - Slidev'
 const REPRESENTATIVE_SLIDES = [1, 9, 15, 20, 38, 46, 47]
 const VISUAL_ONLY_SLIDES = [17, 18]
 const P0_REGRESSION_SLIDES = [23, 24, 25, 26, 27, 28]
+const P0_FRONTMATTER_TEXT = {
+  23: {
+    selector: '.Slide_variant_comparison-before-after',
+    values: ['«Я просто запомнил формулу»', '«Я выбрал формулу по условию»'],
+  },
+  24: {
+    selector: '.Slide_variant_comparison-stable-variable',
+    values: ['Научиться проверять гипотезу', 'Данные и уровень подсказок'],
+  },
+  25: {
+    selector: '.Slide-StepsGrid_linear',
+    values: ['Назвать цель', 'Дать контекст', 'Показать пример', 'Оставить практику', 'Проверить критерий', 'Закрепить вывод'],
+  },
+  26: {
+    selector: '.Slide-StepsGrid_staggered',
+    values: ['Заметить сбой', 'Повторить шаг', 'Найти правило', 'Изменить подход', 'Записать вывод'],
+  },
+}
 const LIFECYCLE_EVENT = 'practicum:slide-lifecycle'
 const LIFECYCLE_STATE_KEY = '__practicumBrowserLifecycle'
 const THEME_MEDIA = [
@@ -40,6 +59,10 @@ function assertNoDiagnostics(label, diagnostics) {
   )
 }
 
+function normalizeVisibleText(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
 async function settleSlide(page) {
   await page.evaluate(async () => {
     await Promise.race([
@@ -251,6 +274,40 @@ async function assertNumberedQuartet(slide, slideNumber) {
   )
 }
 
+async function assertP0FrontmatterText(slide, slideNumber) {
+  const contract = P0_FRONTMATTER_TEXT[slideNumber]
+  if (!contract)
+    return
+
+  assert.equal(
+    await slide.locator(contract.selector).count(),
+    1,
+    `слайд ${slideNumber}: не найден ожидаемый variant/arrangement ${contract.selector}`,
+  )
+
+  const visibleText = await slide.locator('.Text').evaluateAll(elements => elements
+    .filter((element) => {
+      const rect = element.getBoundingClientRect()
+      const style = getComputedStyle(element)
+
+      return rect.width > 0
+        && rect.height > 0
+        && style.display !== 'none'
+        && style.visibility !== 'hidden'
+        && style.opacity !== '0'
+    })
+    .map(element => element.textContent ?? ''))
+  const normalizedVisibleText = visibleText.map(normalizeVisibleText)
+
+  for (const expected of contract.values) {
+    assert.ok(
+      normalizedVisibleText.includes(normalizeVisibleText(expected)),
+      `слайд ${slideNumber}: вложенный текст front matter «${expected}» не виден; `
+      + `видимые Text=${JSON.stringify(normalizedVisibleText)}`,
+    )
+  }
+}
+
 async function inspectSlide(
   page,
   origin,
@@ -315,6 +372,7 @@ async function inspectSlide(
     await assertStaggeredStepsLayout(slide, slideNumber)
   if (slideNumber === 28)
     await assertNumberedQuartet(slide, slideNumber)
+  await assertP0FrontmatterText(slide, slideNumber)
   assertLifecycleTransition(
     beforeLifecycle,
     afterLifecycle,
@@ -474,6 +532,13 @@ export async function runBrowserSmoke() {
         REPRESENTATIVE_SLIDES[index - 1],
         () => inFlightTracker.waitForIdle(),
       )
+      if (index === 0) {
+        assert.equal(
+          await page.title(),
+          EXPECTED_DOCUMENT_TITLE,
+          'первый headmatter title должен задавать служебный HTML title колоды',
+        )
+      }
     }
 
     for (const slideNumber of VISUAL_ONLY_SLIDES) {

package/scripts/check-local-layout-variant-build.mjs

@@ -0,0 +1,189 @@
+import assert from 'node:assert/strict'
+import { spawnSync } from 'node:child_process'
+import {
+  cpSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+} from 'node:fs'
+import { join, resolve } from 'node:path'
+import process from 'node:process'
+import { chromium } from 'playwright-chromium'
+import { createStaticDistServer } from './browser-smoke-runtime.mjs'
+
+const PROJECT_ROOT = resolve(import.meta.dirname, '..')
+const FIXTURE_ROOT = join(PROJECT_ROOT, 'tests/fixtures/local-layout-variant-deck')
+const SLIDEV_CLI = join(PROJECT_ROOT, 'node_modules/@slidev/cli/bin/slidev.mjs')
+const consumerParent = join(PROJECT_ROOT, '.slidev')
+mkdirSync(consumerParent, { recursive: true })
+const consumerRoot = mkdtempSync(join(consumerParent, 'layout-variant-consumer-'))
+const deckRoot = join(consumerRoot, 'deck')
+const outputRoot = join(deckRoot, 'dist')
+
+const FRONTMATTER_SLIDES = [
+  {
+    number: 2,
+    selector: '.Slide-StepsGrid_linear',
+    values: ['Найти нужную версию', 'Восстановить контекст', 'Сгенерировать черновик', 'Проверить', 'Исправить', 'Перенести результат'],
+  },
+  {
+    number: 3,
+    selector: '.Slide-StepsGrid_staggered',
+    values: ['Заметить сбой', 'Повторить шаг', 'Найти правило', 'Изменить подход', 'Записать вывод'],
+  },
+  {
+    number: 4,
+    selector: '.Slide_variant_comparison-before-after',
+    values: ['Решение — за человеком', 'Стадия работает сама'],
+  },
+  {
+    number: 5,
+    selector: '.Slide_variant_comparison-stable-variable',
+    values: ['Научиться проверять гипотезу', 'Данные и уровень подсказок'],
+  },
+]
+
+function normalizeVisibleText(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+function readArtifact(directory) {
+  return readdirSync(directory, { withFileTypes: true })
+    .flatMap((entry) => {
+      const path = join(directory, entry.name)
+      return entry.isDirectory() ? readArtifact(path) : [readFileSync(path)]
+    })
+}
+
+async function inspectRenderedVariant() {
+  const diagnostics = []
+  const server = await createStaticDistServer(outputRoot)
+  const browser = await chromium.launch({ headless: true })
+
+  try {
+    const context = await browser.newContext({ serviceWorkers: 'block' })
+    await context.grantPermissions(['screen-wake-lock'], { origin: server.origin })
+    const page = await context.newPage()
+    page.on('console', (message) => {
+      if (message.type() === 'error')
+        diagnostics.push(message.text())
+    })
+    page.on('pageerror', error => diagnostics.push(error.message))
+
+    await page.goto(`${server.origin}/1`, { waitUntil: 'networkidle' })
+
+    const firstSlide = page.locator('.slidev-page[data-slidev-no="1"]')
+    const badge = firstSlide.locator('.LocalLayoutVariantBadge')
+    await firstSlide.waitFor({ state: 'visible' })
+    await badge.waitFor({ state: 'visible' })
+
+    assert.equal((await badge.textContent())?.trim(), 'Практика')
+    assert.equal((await firstSlide.locator('h1').textContent())?.trim(), 'Что запомнить')
+
+    for (const contract of FRONTMATTER_SLIDES) {
+      await page.goto(`${server.origin}/${contract.number}`, { waitUntil: 'networkidle' })
+      const slide = page.locator(`.slidev-page[data-slidev-no="${contract.number}"]`)
+      await slide.waitFor({ state: 'visible' })
+
+      assert.equal(
+        await slide.locator(contract.selector).count(),
+        1,
+        `слайд ${contract.number}: не найден ${contract.selector}`,
+      )
+
+      const rendered = await slide.locator('.Text').evaluateAll(elements => elements
+        .filter((element) => {
+          const rect = element.getBoundingClientRect()
+          const style = getComputedStyle(element)
+
+          return rect.width > 0
+            && rect.height > 0
+            && style.display !== 'none'
+            && style.visibility !== 'hidden'
+            && style.opacity !== '0'
+        })
+        .map(element => element.textContent ?? ''))
+      const normalized = rendered.map(normalizeVisibleText)
+
+      for (const expected of contract.values) {
+        assert.ok(
+          normalized.includes(normalizeVisibleText(expected)),
+          `слайд ${contract.number}: вложенный текст front matter «${expected}» не виден; `
+          + `видимые Text=${JSON.stringify(normalized)}`,
+        )
+      }
+
+      const overflow = await slide.evaluate(element => ({
+        x: element.scrollWidth - element.clientWidth,
+        y: element.scrollHeight - element.clientHeight,
+      }))
+      assert.ok(overflow.x <= 1, `слайд ${contract.number}: горизонтальное переполнение ${overflow.x}px`)
+      assert.ok(overflow.y <= 1, `слайд ${contract.number}: вертикальное переполнение ${overflow.y}px`)
+    }
+
+    assert.deepEqual(diagnostics, [], diagnostics.join('\n'))
+  }
+  finally {
+    await browser.close()
+    await server.close()
+  }
+}
+
+try {
+  cpSync(FIXTURE_ROOT, deckRoot, { recursive: true })
+  const themeInstallRoot = join(deckRoot, 'node_modules', 'slidev-theme-practicum')
+  const manifest = JSON.parse(readFileSync(join(PROJECT_ROOT, 'package.json'), 'utf8'))
+
+  mkdirSync(themeInstallRoot, { recursive: true })
+  cpSync(join(PROJECT_ROOT, 'package.json'), join(themeInstallRoot, 'package.json'))
+  for (const entry of manifest.files)
+    cpSync(join(PROJECT_ROOT, entry), join(themeInstallRoot, entry), { recursive: true })
+
+  const deckPath = join(deckRoot, 'slides.md')
+  const validation = spawnSync(process.execPath, [
+    join(themeInstallRoot, 'scripts', 'validate-deck.cjs'),
+    deckPath,
+  ], {
+    cwd: deckRoot,
+    encoding: 'utf8',
+  })
+
+  assert.equal(
+    validation.status,
+    0,
+    validation.stderr || validation.stdout || validation.error?.message,
+  )
+
+  const result = spawnSync(process.execPath, [
+    SLIDEV_CLI,
+    'build',
+    deckPath,
+    '--out',
+    outputRoot,
+  ], {
+    cwd: deckRoot,
+    encoding: 'utf8',
+  })
+
+  if (result.error || result.status !== 0) {
+    process.stderr.write(result.stderr || result.stdout || result.error?.message || 'Сборка локального варианта завершилась без диагностики.\n')
+    process.exitCode = result.status || 1
+  }
+  else {
+    const artifact = Buffer.concat(readArtifact(outputRoot)).toString()
+
+    if (!artifact.includes('LocalLayoutVariantBadge')) {
+      console.error('Сборка не содержит локальный компонент, вызванный из варианта презентации.')
+      process.exitCode = 1
+    }
+    else {
+      await inspectRenderedVariant()
+      console.log('Локальный вариант и вложенные поля front matter отрисовались в итоговой сборке установленной темы.')
+    }
+  }
+}
+finally {
+  rmSync(consumerRoot, { recursive: true, force: true })
+}

package/scripts/check-package.mjs

@@ -83,12 +83,28 @@ try {
     if (!files.has('LICENSE'))
       errors.push('package должен содержать LICENSE')
 
-    if (!files.has('skills/slidev-practicum/SKILL.md'))
-      errors.push('package должен содержать skills/slidev-practicum/SKILL.md')
+    for (const skillFile of [
+      'skills/slidev-practicum/SKILL.md',
+      'skills/slidev-practicum/references/deck-project-structure.md',
+      'skills/slidev-practicum/references/contour-illustrations.md',
+      'skills/slidev-practicum/references/photographic-illustrations.md',
+    ]) {
+      if (!files.has(skillFile))
+        errors.push(`package должен содержать ${skillFile}`)
+    }
 
     if (!files.has('example.md'))
       errors.push('package должен содержать example.md как каноническую колоду для авторов')
 
+    for (const runtimeFile of [
+      'composables/local-layout-variant-files.ts',
+      'composables/local-layout-variants.ts',
+      'env.d.ts',
+    ]) {
+      if (!files.has(runtimeFile))
+        errors.push(`package должен содержать контракт локальных вариантов: ${runtimeFile}`)
+    }
+
     const defaultDeckTargets = new Set(
       Object.values(manifest.scripts ?? {})
         .flatMap(script => String(script).match(/\b[\w-]+\.md\b/g) ?? []),

package/scripts/requirements-illustrations.txt

@@ -0,0 +1 @@
+Pillow==12.2.0