Стратегия 4: Configuration Testing

# Установка
drush recipe recipes/ideal_theme_base

# Что тестируем:
- ✅ Главная страница
- ✅ Базовые компоненты (header, footer)
- ✅ Адаптивность (mobile/tablet/desktop)
- ✅ Accessibility (WCAG 2.1 AA)

# Страницы для проверки:
- / (главная)
- /node/1 (контент)
- /user/login (вход)

# Установка
drush recipe recipes/ideal_theme_base
drush recipe recipes/ideal_theme_layouts

# Дополнительно тестируем:
- ✅ Layout Builder работает
- ✅ Paragraphs работают
- ✅ Drag-and-drop страниц

# Страницы для проверки:
- /node/1/layout (редактор)
- /admin/structure/types (настройки)

# Установка
drush recipe recipes/ideal_theme_base
drush recipe recipes/ideal_shop_core
drush recipe recipes/ideal_shop_catalog

# Дополнительно тестируем:
- ✅ Каталог товаров
- ✅ Страница товара
- ✅ Корзина
- ✅ Checkout
- ✅ Фильтры
- ✅ Поиск

# Страницы для проверки:
- /catalog
- /product/1
- /cart
- /checkout

# Установка по порядку зависимостей (из RECIPES.md)
drush recipe recipes/ideal_theme_base
drush recipe recipes/ideal_theme_tokens
drush recipe recipes/ideal_theme_layouts
drush recipe recipes/ideal_shop_core
drush recipe recipes/ideal_shop_catalog
drush recipe recipes/ideal_shop_reviews
drush recipe recipes/ideal_shop_wishlist
drush recipe recipes/ideal_shop_promo

# Тестируем всё:
- ✅ Всё из Lite + Advanced + Shop
- ✅ PWA функционал
- ✅ Отзывы
- ✅ Wishlist
- ✅ Промокоды
- ✅ Многоязычность

# 1. Применить пресет
drush config:set ideal_theme.settings preset minimalist -y
drush cr

# 2. Скриншоты 3 viewport
playwright screenshot --viewport 1440x900 minimalist-desktop.png
playwright screenshot --viewport 768x1024 minimalist-tablet.png
playwright screenshot --viewport 375x812 minimalist-mobile.png

# 3. Проверить цвета
# CSS переменные должны измениться
curl http://localhost/ | grep "var(--color-brand-500)"

# 4. Lighthouse
lighthouse http://localhost/ --output html --output-path=./minimalist-lighthouse.html

# Повторить для всех 8 пресетов

// playwright.config.ts
export default {
  projects: [
    {
      name: 'chrome-latest',
      use: { browserName: 'chromium', channel: 'chrome' }
    },
    {
      name: 'firefox-latest',
      use: { browserName: 'firefox' }
    },
    {
      name: 'safari-latest',
      use: { browserName: 'webkit' }
    },
    {
      name: 'edge-latest',
      use: { browserName: 'chromium', channel: 'msedge' }
    }
  ]
};

// tests/devices.spec.ts
const devices = [
  { name: 'iPhone 13', viewport: { width: 375, height: 812 } },
  { name: 'iPad', viewport: { width: 768, height: 1024 } },
  { name: 'MacBook', viewport: { width: 1440, height: 900 } }
];

for (const device of devices) {
  test(`${device.name}: Homepage renders`, async ({ page }) => {
    await page.setViewportSize(device.viewport);
    await page.goto('/');
    await expect(page).toHaveTitle(/Ideal Shop/);
  });
}

// backstop.config.js
module.exports = {
  scenarios: [
    {
      label: 'Homepage',
      url: 'http://localhost/',
      selectors: ['document'],
      readySelector: 'body'
    },
    {
      label: 'Catalog',
      url: 'http://localhost/catalog',
      selectors: ['document']
    },
    {
      label: 'Product',
      url: 'http://localhost/product/1',
      selectors: ['document']
    }
  ],
  viewports: [
    { name: 'phone', width: 375, height: 812 },
    { name: 'tablet', width: 768, height: 1024 },
    { name: 'desktop', width: 1440, height: 900 }
  ]
};

# 1. Создать эталон
backstop reference

# 2. После изменений
backstop test

# 3. Проверить различия
backstop approve  # если различия ок
# или
backstop reject   # если баг

#!/bin/bash

# Критические комбинации
TESTS=(
  "lite:minimalist:chrome:desktop"
  "shop:modern:chrome:mobile"
  "shop:premium:safari:tablet"
  "max:vibrant:firefox:desktop"
)

for test in "${TESTS[@]}"; do
  IFS=':' read -r variant preset browser device <<< "$test"

  echo "🧪 Testing: $variant | $preset | $browser | $device"

  # Применить вариант
  ./scripts/apply-variant.sh $variant

  # Применить пресет
  drush config:set ideal_theme.settings preset $preset -y
  drush cr

  # Запустить тест
  playwright test \
    --project=$browser \
    --grep="@$device" \
    --reporter=html

  if [ $? -eq 0 ]; then
    echo "✅ Passed"
  else
    echo "❌ Failed"
    exit 1
  fi
done

echo "🎉 All critical combinations passed!"

# Запуск всех тестов
npm run test:configuration

# Генерация HTML отчёта
playwright show-report

# Lighthouse для каждого варианта
lighthouse http://localhost/ --preset=desktop --output=html

# BackstopJS отчёт
backstop test