Testing Guide

January 1, 1 7 min read Anki Testing

SCSS Styling System - Complete Testing Guide

This script shows you exactly how to test the styling integration

cat « ‘EOF’

╔═══════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ SCSS STYLING SYSTEM - COMPLETE TESTING GUIDE ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════╝

📋 TESTING LEVELS ═══════════════════════════════════════════════════════════════════════════════

Level 1: Unit Testing (Automated) ✓ Verify CSS files exist and compile ✓ Test CSS caching mechanism ✓ Test course detection from metadata ✓ Run: npm run test:anki

Level 2: Integration Testing (Automated + Manual) ✓ Generate test APKGs with CSS ✓ Verify CSS embedded in APKG ✓ Test course-specific vs default CSS ✓ Run: npm run test:anki:verbose

Level 3: Visual Testing (Manual) ✓ Import APKG into Anki Desktop ✓ Inspect rendered cards ✓ Verify colors, fonts, spacing ✓ Check mobile Anki compatibility

Level 4: Production Testing (Real Data) ✓ Generate psychology APKG from real data ✓ Test with actual flashcard content ✓ Verify HTML rendering + CSS styling

═══════════════════════════════════════════════════════════════════════════════ STEP 1: RUN AUTOMATED TESTS ═══════════════════════════════════════════════════════════════════════════════

Command 1a: Run all Anki tests (including CSS integration) npm run test:anki

Expected Output: ✅ 51 tests passing ✅ test_css_integration.py included ✅ Psychology CSS loading: PASSED ✅ DevOps CSS loading: PASSED ✅ Default CSS fallback: PASSED

What’s being tested: • CSS file compilation • CSS loading from disk • CSS injection into models • Course metadata detection • CSS caching mechanism • Backward compatibility (no course metadata)

Command 1b: Run tests with verbose output npm run test:anki:verbose

This shows: • Detailed test execution • CSS loading messages • File size verification • APKG generation details

Command 1c: Run tests with coverage report npm run test:anki:coverage

This shows: • Code coverage metrics • Which functions are tested • Areas needing more testing

═══════════════════════════════════════════════════════════════════════════════ STEP 2: VERIFY COMPILED CSS FILES ═══════════════════════════════════════════════════════════════════════════════

Command 2a: List compiled CSS files npm run anki:styles:list

Expected Output: psychology.css (16 KB) devops.css (17 KB)

If no CSS files exist: npm run anki:styles:compile

This will: ✓ Compile psychology.scss → psychology.css ✓ Compile devops.scss → devops.css ✓ Inject all variables and base components ✓ Include course-specific overrides

Command 2b: Inspect CSS content head -100 scripts/anki/styles/psychology.css

Look for: • Global variables (colors, spacing, etc.) • Base components (skill-card, code-block, etc.) • Psychology-specific overrides (empathy colors, etc.)

═══════════════════════════════════════════════════════════════════════════════ STEP 3: GENERATE TEST APKG FILES ═══════════════════════════════════════════════════════════════════════════════

Option A: Generate psychology APKG with styling

conda activate ags-anki

python3 « ‘PYTHON’ import json import tempfile from pathlib import Path from scripts.anki.apkg_generator import APKGGenerator

Create sample psychology data with course metadata

data = { “metadata”: { “course”: “psychology”, # THIS TRIGGERS CSS LOADING “deck_name”: “Psychology-Styling-Test”, “unit”: “Unit-1”, “module”: “Module-1” }, “flashcards”: [ { “id”: “test-001”, “question”: “What are the core counselling skills?”, “answer”: “

Core Skills

Empathy
Active Listening
Reflection

”, “tags”: [“counselling”, “skills”], “difficulty”: 2, “html_enabled”: True } ] }

Generate APKG

generator = APKGGenerator(verbose=True) with tempfile.TemporaryDirectory() as tmpdir: apkg_path = generator.generate_from_data(data, tmpdir, “Psychology-Test”) print(f"\n✅ APKG generated: {apkg_path}") print(f" File size: {apkg_path.stat().st_size / 1024:.1f} KB")

# Copy to desktop for import
import shutil
desktop_path = Path.home() / "Desktop" / "psychology-styling-test.apkg"
shutil.copy(apkg_path, desktop_path)
print(f"   Copied to: {desktop_path}")

PYTHON

Expected Output: ✅ APKG generated ✅ Psychology CSS loaded (logs show “Loaded course-specific CSS”) ✅ File size ~68 KB (includes psychology CSS) ✅ File copied to ~/Desktop/psychology-styling-test.apkg

Option B: Generate DevOps APKG with styling

python3 « ‘PYTHON’ import json import tempfile from pathlib import Path from scripts.anki.apkg_generator import APKGGenerator

data = { “metadata”: { “course”: “devops”, # LOADS DEVOPS CSS “deck_name”: “DevOps-Styling-Test”, “unit”: “Unit-1”, “module”: “Module-1” }, “flashcards”: [ { “id”: “test-001”, “question”: “Deploy to production”, “answer”: “

Deploy:

kubectl apply -f deployment.yaml

deployment.apps/my-app created

”, “tags”: [“kubernetes”, “deployment”], “difficulty”: 2, “html_enabled”: True } ] }

generator = APKGGenerator(verbose=True) with tempfile.TemporaryDirectory() as tmpdir: apkg_path = generator.generate_from_data(data, tmpdir, “DevOps-Test”) print(f"\n✅ APKG generated: {apkg_path}") print(f" File size: {apkg_path.stat().st_size / 1024:.1f} KB")

import shutil
desktop_path = Path.home() / "Desktop" / "devops-styling-test.apkg"
shutil.copy(apkg_path, desktop_path)
print(f"   Copied to: {desktop_path}")

PYTHON

Expected Output: ✅ DevOps CSS loaded and injected ✅ File size ~72 KB

Option C: Generate default APKG (no styling)

python3 « ‘PYTHON’

Same as above but WITHOUT course metadata

data = { “metadata”: { “deck_name”: “Default-Styling-Test”, # NO course field “unit”: “Unit-1”, “module”: “Module-1” }, # … flashcards … }

This uses default CSS, not course-specific

PYTHON

Expected Output: ✅ Default CSS used (logs show no course-specific CSS) ✅ File size ~56 KB (no course CSS overhead)

═══════════════════════════════════════════════════════════════════════════════ STEP 4: VISUAL TESTING IN ANKI DESKTOP ═══════════════════════════════════════════════════════════════════════════════

4a: Import APKG into Anki Desktop

Open Anki Desktop
File → Import…
Select: ~/Desktop/psychology-styling-test.apkg
Click Import

4b: Inspect Psychology Card Styling

Visual elements to verify:

✓ Background Color Should be: Light blue (#f0f7ff)

✓ Left Border Should be: Blue (#0066cc), 4px thick

✓ Heading Color Should be: Blue (#0066cc)

✓ List Styling Should be: Vertically stacked with bullets

✓ Skill Item Font Should be: Bold text (B tags rendered)

✓ Spacing Should be: Padding on all sides (16px) Should be: Margin between items (12px)

4c: Inspect DevOps Card Styling

Visual elements to verify:

✓ Command Box Background Should be: Dark (#2d2d2d)

✓ Command Text Color Should be: Green (#0f0)

✓ Command Output Should be: Gray text on dark background

✓ Code Font Should be: Monospace (Monaco, Courier)

✓ Borders Should be: Blue left border (#0275d8)

═══════════════════════════════════════════════════════════════════════════════ STEP 5: VERIFY CSS IS EMBEDDED IN APKG ═══════════════════════════════════════════════════════════════════════════════

APKGs are ZIP files, so you can inspect them:

Command: Inspect APKG structure unzip -l ~/Desktop/psychology-styling-test.apkg

Expected output: Archive: ~/Desktop/psychology-styling-test.apkg Length Date Time Name

 69632  01-01-2026 00:00   collection.anki2
     2  01-01-2026 00:00   media

Note: CSS is embedded in the collection.anki2 SQLite database, not as a separate file in the ZIP. This is how Anki stores CSS in the model templates.

Command: Verify CSS in database (advanced)

sqlite3 ~/Desktop/psychology-styling-test.apkg

SELECT id, name, css FROM models;

You’ll see:

Model ID (1, 2, or 3)
Model name (Basic, Cloze, Hints)
CSS (very long string - your psychology.css or devops.css)

═══════════════════════════════════════════════════════════════════════════════ STEP 6: CHECK FILE SIZES (VERIFICATION) ═══════════════════════════════════════════════════════════════════════════════

Psychology APKG: ~68 KB (includes psychology CSS: 16 KB) DevOps APKG: ~72 KB (includes devops CSS: 17 KB) Default APKG: ~56 KB (no course CSS)

Size difference (psychology vs default) = ~12 KB This matches our CSS file size (16 KB minus compression)

If your sizes are significantly different: • Check if CSS files compiled correctly • Verify course metadata in JSON • Check for file corruption

═══════════════════════════════════════════════════════════════════════════════ STEP 7: TROUBLESHOOTING ═══════════════════════════════════════════════════════════════════════════════

Issue 1: Styling doesn’t appear in Anki

Check:

Was CSS file compiled? npm run anki:styles:list
Does APKG have the course metadata? Check that metadata[‘course’] = ‘psychology’
Is the CSS file readable? cat scripts/anki/styles/psychology.css | head -20
Did APKGGenerator log CSS loading? Look for: “Loaded course-specific CSS”

Issue 2: CSS compiles but APKG doesn’t change size

Check:

Did you recompile CSS? npm run anki:styles:compile
Did you generate new APKG after compilation? Old APKG may be cached

Issue 3: Default styling used instead of course-specific

Check:

Is course field in metadata? metadata = {“course”: “psychology”}
Is course name exactly correct? “psychology” (lowercase) NOT “Psychology” (uppercase) NOT “psych” (abbreviated)

Issue 4: Test fails with CSS file not found

Solution:

Compile CSS: npm run anki:styles:compile
Verify files exist: npm run anki:styles:list
Re-run test: npm run test:anki

═══════════════════════════════════════════════════════════════════════════════ QUICK TEST CHECKLIST ═══════════════════════════════════════════════════════════════════════════════

□ 1. Run npm run test:anki (Should: 51 tests pass) □ 2. Run npm run anki:styles:list (Should: See 2 CSS files) □ 3. Check scripts/anki/styles/*.css exist (Should: 16 KB + 17 KB) □ 4. Generate psychology APKG with metadata (Should: ~68 KB) □ 5. Import into Anki Desktop (Should: Cards appear) □ 6. Inspect card styling visually (Should: Blue colors, etc.) □ 7. Check APKG file size vs default (Should: ~12 KB larger) □ 8. Verify CSS in database with sqlite3 (Should: CSS present) □ 9. Test DevOps APKG styling (Should: Dark theme) □ 10. Test default APKG (no course metadata) (Should: ~56 KB, minimal CSS)

═══════════════════════════════════════════════════════════════════════════════ COMMANDS SUMMARY ═══════════════════════════════════════════════════════════════════════════════

Automated Testing: npm run test:anki # Quick test npm run test:anki:verbose # Detailed output npm run test:anki:coverage # Coverage report

CSS Compilation: npm run anki:styles:compile # Compile all SCSS npm run anki:styles:compile:psychology # Psychology only npm run anki:styles:compile:devops # DevOps only npm run anki:styles:watch # Watch mode (dev) npm run anki:styles:list # List compiled files

Visual Testing: conda activate ags-anki python3 tests/anki/test_css_integration.py

Production Testing: npm run anki:rebuild # Rebuild all APKGs npm run anki:rebuild:verbose # With details npm run anki:rebuild:unit # Unit APKGs only

═══════════════════════════════════════════════════════════════════════════════

Now run the tests and let me know what you find! 🚀

EOF

SCSS Styling System - Implementation Complete

Testing Quick Reference

Browse Docs

Testing Guide

SCSS Styling System - Complete Testing Guide

This script shows you exactly how to test the styling integration

Create sample psychology data with course metadata

Core Skills

Generate APKG

Same as above but WITHOUT course metadata

This uses default CSS, not course-specific