kostyl.dev

Тестування компонентів діаграм

Тестування AsciiDiagram та BoxDiagram компонентів

Тестування компонентів діаграм

Цей файл містить тести для двох нових компонентів: AsciiDiagram та BoxDiagram.

1. AsciiDiagram - ASCII діаграми

Компонент для відображення ASCII-діаграм з підтримкою тем, підсвічування та рамок.

Можливості:

  • ✅ Автоматичне перетворення ASCII → SVG через bob-wasm (svgbob)
  • ✅ Fallback до простого текстового рендерингу
  • ✅ 5 тем з автоматичним кольоруванням SVG
  • ✅ Підтримка темної теми
  • ✅ Опціональні рамки (macOS, browser)

Тест 1.1: Базова ASCII діаграма (з svgbob)

Завантаження діаграми...
┌─────────────────────────────┐ │ Один сервер │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ API │ │ DB │ │Redis ││ │ └──────┘ └──────┘ └──────┘│ └─────────────────────────────┘ ↑ Єдина точка відмови

Тест 1.2: ASCII діаграма з темою "danger"

Завантаження діаграми...
┌─────────────────────────────┐ │ Один сервер │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ API │ │ DB │ │Redis ││ │ └──────┘ └──────┘ └──────┘│ └─────────────────────────────┘ ↑ Єдина точка відмови
Небезпечна архітектура

Тест 1.3: ASCII діаграма з підсвічуванням

Завантаження діаграми...
┌─────────────────────────────┐ │ Один сервер │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ API │ │ DB │ │Redis ││ │ └──────┘ └──────┘ └──────┘│ └─────────────────────────────┘
Підсвічені компоненти

Тест 1.4: ASCII діаграма з рамкою macOS

Завантаження діаграми...
┌──────────────────┐ │ Docker Host │ │ │ │ ┌────────────┐ │ │ │ Container │ │ │ │ │ │ │ │ ┌──────┐ │ │ │ │ │ App │ │ │ │ │ └──────┘ │ │ │ └────────────┘ │ └──────────────────┘

Тест 1.5: Складна ASCII діаграма

Завантаження діаграми...
┌─────────────────────────────────────────────────┐ │ Kubernetes Cluster │ │ │ │ ┌──────────────┐ ┌──────────────┐ │ │ │ Node 1 │ │ Node 2 │ │ │ │ │ │ │ │ │ │ ┌────────┐ │ │ ┌────────┐ │ │ │ │ │ Pod │ │ │ │ Pod │ │ │ │ │ │ API │ │ │ │ API │ │ │ │ │ └────────┘ │ │ └────────┘ │ │ │ │ │ │ │ │ │ │ ┌────────┐ │ │ ┌────────┐ │ │ │ │ │ Pod │ │ │ │ Pod │ │ │ │ │ │ DB │ │ │ │ Redis │ │ │ │ │ └────────┘ │ │ └────────┘ │ │ │ └──────────────┘ └──────────────┘ │ └─────────────────────────────────────────────────┘
Kubernetes кластер

Тест 1.6: Без svgbob (простий текст)

Завантаження діаграми...
┌─────────────────────────────┐ │ Простий текстовий режим │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ API │ │ DB │ │Redis ││ │ └──────┘ └──────┘ └──────┘│ └─────────────────────────────┘
Fallback режим

Тест 1.7: Кирилиця (автоматичний fallback)

Важливо: Svgbob не підтримує кирилицю. При виявленні кирилиці компонент автоматично перемикається на текстовий режим (fallback).
Завантаження діаграми...
┌─────────────────────────────┐ │ Український текст │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ АПІ │ │ БД │ │Кеш ││ │ └──────┘ └──────┘ └──────┘│ └─────────────────────────────┘ ↑ Єдина точка відмови
Кирилиця - текстовий режим

Компоненти та повторюваність: @apply, @utility та патерни

Вирішення проблеми повторюваності в Tailwind: @apply для виняткових випадків, @utility для кастомних утиліт v4, @layer components для компонентних класів. Реальні компоненти: Button, Input, Card без JS-фреймворку.