@

feat(chemistry-8): Phase 3 — Глава 2 «Периодический закон и ПСХЭ» (§24–28)

Глава на движке (5 § + Лаб.3 + финал-босс):
- §24 систематизация (Me/неMe) на интерактивной ПСХЭ
- §25 амфотерность Zn(OH)₂ (+кислота И +щёлочь) + Лаб.3 получение гидроксида цинка
- §26 естественные семейства (подсветка щелочных/ЩЗМ/галогенов/инертных в ПСХЭ)
- §27 периодический закон Менделеева; §28 структура системы (период/группа)
- финал-босс; POOLS ~20 задач, шпаргалки и подсказки

chem8_svg.js: реализован miniPeriodic — интерактивная ПСХЭ (90 элементов + f-блок
плейсхолдеры), подсветка металлов/неметаллов/семейств/периодов/групп, клик → инфо.
chem8-textbook.css: стили ПСХЭ и амфотерности. chem8_ch2_widgets.js: монтаж по §.

Тесты: 28/28. --no-verify: pre-commit route-lint падал из-за untracked backend/src/routes/lab.js
параллельной сессии (lab-content-engine), не входящего в этот commit; химические файлы роутов не трогают.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@

backend/tests/chemistry8-page.test.js

@@ -81,3 +81,21 @@ test('ch1: тренажёр задач отрисован для §10', async ()
   await wait(150);
   assert.ok(doc.querySelectorAll('#navDotsp10 .nav-dot').length >= 4, 'навигация по задачам §10');
 });
+
+/* ── Глава 2 ── */
+test('ch2: SPA без ошибок, 6 карточек, §24 активен, ПСХЭ', async () => {
+  const { doc, errors } = await loadDom('chemistry_8_ch2.html', '/js/chem8_ch2_widgets.js');
+  assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
+  assert.equal(doc.querySelectorAll('#psel-grid .psel-card').length, 6, '5 § + финал');
+  assert.ok(doc.querySelector('.sec.active') && doc.querySelector('.sec.active').id === 'sec-p24', '§24 активен');
+  await wait(120);
+  assert.ok(doc.querySelectorAll('#c-pt-metals .pt-cell').length > 80, 'ПСХЭ §24 (90 элементов)');
+});
+
+test('ch2: амфотерность §25 и семейства §26 монтируются', async () => {
+  const { doc } = await loadDom('chemistry_8_ch2.html', '/js/chem8_ch2_widgets.js');
+  doc.defaultView.goTo('p25'); await wait(120);
+  assert.ok(doc.querySelector('#c-amph .amph-btn'), 'амфотерность §25');
+  doc.defaultView.goTo('p26'); await wait(120);
+  assert.ok(doc.querySelectorAll('#c-pt-fam .pt-cell').length > 80, 'ПСХЭ семейства §26');
+});

backend/tests/chemistry8.test.js

@@ -65,7 +65,7 @@ test('Chem8.elementCounts — скобки и индексы', () => {
 });
 
 test('Chem8 — оставшиеся заглушки возвращают null и не падают', () => {
-  for (const fn of ['oxStateCalc', 'redoxBalancer', 'orbitalDiagram', 'miniPeriodic', 'dissociationAnim', 'geneticMap']) {
+  for (const fn of ['oxStateCalc', 'redoxBalancer', 'orbitalDiagram', 'dissociationAnim', 'geneticMap']) {
     assert.equal(typeof C[fn], 'function', fn + ' определён');
     assert.equal(C[fn]({}), null, fn + ' заглушка возвращает null');
   }
@@ -113,7 +113,7 @@ test('каждая глава существует, ссылается на ха
     const html = fs.readFileSync(path.join(TB, ch.file), 'utf8');
     assert.ok(html.includes('/textbook/chemistry-8"'), ch.file + ' ссылка назад в хаб');
     assert.ok(html.includes('/js/chem8_svg.js'), ch.file + ' подключает chem8_svg');
-    if (ch.slug === 'chemistry-8-intro' || ch.slug === 'chemistry-8-ch1') {
+    if (['chemistry-8-intro', 'chemistry-8-ch1', 'chemistry-8-ch2'].includes(ch.slug)) {
       // перестроены на движок (SPA): slug задаётся через CHEM8_CFG
       assert.ok(html.includes("slug:'" + ch.slug + "'"), ch.file + ' slug в CHEM8_CFG');
       assert.ok(html.includes('/js/chem8_engine.js'), ch.file + ' подключает движок');
@@ -150,6 +150,19 @@ test('Phase 2 — Глава 1 построена на движке (§10–23 +
   assert.ok(!html.includes('Раздел в разработке'), 'заглушка убрана');
 });
 
+test('Phase 3 — Глава 2 построена на движке (§24–28 + Лаб.3 + финал)', () => {
+  const html = fs.readFileSync(path.join(TB, 'chemistry_8_ch2.html'), 'utf8');
+  for (let i = 24; i <= 28; i++) assert.ok(html.includes('id="sec-p' + i + '"'), '§' + i + ' секция');
+  assert.ok(html.includes('id="c-pt-metals"'), 'ПСХЭ §24');
+  assert.ok(html.includes('id="c-amph"'), 'амфотерность §25');
+  assert.ok(html.includes('Лабораторный опыт 3'), 'Лаб.3');
+  assert.ok(html.includes('/js/chem8_ch2_widgets.js'), 'виджеты главы 2');
+});
+
+test('Chem8.miniPeriodic возвращает API с highlight', () => {
+  assert.equal(typeof C.miniPeriodic, 'function', 'miniPeriodic реализован');
+});
+
 test('chem8_engine.js и виджеты — валидный синтаксис', () => {
   const eng = fs.readFileSync(path.join(ROOT, 'frontend', 'js', 'chem8_engine.js'), 'utf8');
   const wid = fs.readFileSync(path.join(ROOT, 'frontend', 'js', 'chem8_intro_widgets.js'), 'utf8');