热门 Skills
中文
English 简体中文 français

搜索

PythonReactSEOPDF
GitHub Skill

widget-tester

Expert assistant for testing the embeddable Bible widget functionality in the KR92 Bible Voice project. Use when creating widget tests, validating embed API responses, testing reference formats, checking audio integration, or creating regression test cases.

Spectaculous-Code☆ 0 仓库 Stars0 仓库 Forks
查看来源 ↗安装与使用

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

查看来源 ↗使用指南

技能说明

Widget Tester

Capabilities

  • Generate test HTML pages for widget validation
  • Validate embed API responses
  • Test different reference formats
  • Check audio integration
  • Create regression test cases

Widget Overview

The widget (public/widget.js) is an embeddable JavaScript component that displays Bible verses on external websites.

Basic Usage
<script src="https://your-app-url.com/widget.js" defer></script>
<div class="rn-bible" data-ref="Joh.3:16"></div>

Usage Examples

Example 1: Create Comprehensive Test Page

User: "Create a test page for all widget features"

Assistant:

<!DOCTYPE html>
<html lang="fi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Raamattu Widget Test - Comprehensive</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
      background: #f5f5f5;
    }
    section {
      background: white;
      padding: 2rem;
      margin: 2rem 0;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    h1, h2 {
      color: #333;
    }
    .test-case {
      margin: 1.5rem 0;
      padding: 1rem;
      border-left: 3px solid #4CAF50;
      background: #f9f9f9;
    }
    .test-label {
      font-weight: bold;
      color: #666;
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>🧪 Raamattu Widget - Comprehensive Test Suite</h1>

  <!-- Single Verse Tests -->
  <section>
    <h2>1. Single Verse Tests</h2>

    <div class="test-case">
      <div class="test-label">Test 1.1: Basic Finnish reference</div>
      <div class="rn-bible" data-ref="Joh.3:16"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 1.2: English reference</div>
      <div class="rn-bible" data-ref="John 3:16"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 1.3: Period separator</div>
      <div class="rn-bible" data-ref="Joh.3.16"></div>
    </div>
  </section>

  <!-- Verse Range Tests -->
  <section>
    <h2>2. Verse Range Tests</h2>

    <div class="test-case">
      <div class="test-label">Test 2.1: Small range (2 verses)</div>
      <div class="rn-bible" data-ref="Joh.3:16-17"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 2.2: Larger range (Beatitudes)</div>
      <div class="rn-bible" data-ref="Matt.5:3-10"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 2.3: Psalm passage</div>
      <div class="rn-bible" data-ref="Ps.23:1-4"></div>
    </div>
  </section>

  <!-- Numbered Books Tests -->
  <section>
    <h2>3. Numbered Books Tests</h2>

    <div class="test-case">
      <div class="test-label">Test 3.1: With period and space</div>
      <div class="rn-bible" data-ref="1. Joh.4:8"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 3.2: With space only</div>
      <div class="rn-bible" data-ref="1 Joh.4:8"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 3.3: No space</div>
      <div class="rn-bible" data-ref="1Joh.4:8"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 3.4: Moses books</div>
      <div class="rn-bible" data-ref="1. Moos.1:1-3"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 3.5: Corinthians</div>
      <div class="rn-bible" data-ref="1 Kor.13:4-7"></div>
    </div>
  </section>

  <!-- Different Versions Tests -->
  <section>
    <h2>4. Different Version Tests</h2>

    <div class="test-case">
      <div class="test-label">Test 4.1: Default (STLK 2017)</div>
      <div class="rn-bible" data-ref="Joh.3:16"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 4.2: 1933/38 version</div>
      <div class="rn-bible" data-ref="Joh.3:16" data-version="finpr_finn"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 4.3: KJV (English)</div>
      <div class="rn-bible" data-ref="John 3:16" data-version="KJV"></div>
    </div>
  </section>

  <!-- Audio Tests -->
  <section>
    <h2>5. Audio Tests</h2>

    <div class="test-case">
      <div class="test-label">Test 5.1: Single verse with audio</div>
      <div class="rn-bible" data-ref="Joh.1:1"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 5.2: Verse range with audio</div>
      <div class="rn-bible" data-ref="Joh.1:1-5"></div>
    </div>
  </section>

  <!-- Edge Cases -->
  <section>
    <h2>6. Edge Case Tests</h2>

    <div class="test-case">
      <div class="test-label">Test 6.1: Long chapter (Psalm 119:1-8)</div>
      <div class="rn-bible" data-ref="Ps.119:1-8"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 6.2: Last verse of Bible</div>
      <div class="rn-bible" data-ref="Ilm.22:21"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 6.3: First verse of Bible</div>
      <div class="rn-bible" data-ref="1. Moos.1:1"></div>
    </div>
  </section>

  <!-- Error Cases -->
  <section>
    <h2>7. Error Handling Tests</h2>

    <div class="test-case">
      <div class="test-label">Test 7.1: Missing data-ref</div>
      <div class="rn-bible"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 7.2: Invalid reference</div>
      <div class="rn-bible" data-ref="InvalidBook.99:999"></div>
    </div>

    <div class="test-case">
      <div class="test-label">Test 7.3: Invalid version</div>
      <div class="rn-bible" data-ref="Joh.3:16" data-version="INVALID"></div>
    </div>
  </section>

  <!-- Dynamic Loading Test -->
  <section>
    <h2>8. Dynamic Loading Test</h2>
    <button id="addDynamic" style="padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer;">
      Add Dynamic Widget
    </button>
    <div id="dynamicContainer" style="margin-top: 1rem;"></div>
  </section>

  <script>
    // Test dynamic widget loading
    document.getElementById('addDynamic').addEventListener('click', function() {
      const container = document.getElementById('dynamicContainer');
      const widget = document.createElement('div');
      widget.className = 'rn-bible';
      widget.setAttribute('data-ref', 'Rom.8:28');
      container.innerHTML = '';
      container.appendChild(widget);

      // Widget should auto-initialize via MutationObserver
      console.log('Dynamic widget added');
    });
  </script>

  <!-- Widget Script -->
  <script src="https://iryqgmjauybluwnqhxbg.supabase.co/widget.js" defer></script>
</body>
</html>
Example 2: Test API Response Format

User: "Create test to validate embed API response"

Assistant: See full example in skill content...

Example 3: Audio Integration Test

User: "Create test for widget audio functionality"

Assistant: See full example in skill content...

Test Checklist

Widget Loading
  • Script loads without errors
  • Widgets initialize on page load
  • Dynamic widgets auto-initialize
  • Multiple widgets work independently
Reference Format Support
  • Finnish abbreviations (Joh, Matt, Ps)
  • English abbreviations (John, Matt, Ps)
  • Full names (Johannes, Matthew, Psalms)
  • Numbered books (1. Joh, 1 Joh, 1Joh)
  • Moses books (1. Moos, 2 Moos)
  • Colon separator (Joh.3:16)
  • Period separator (Joh.3.16)
  • Verse ranges (Joh.3:16-17)
Version Support
  • Default version (finstlk201)
  • Alternative Finnish (finpr_finn)
  • English KJV
Audio Features
  • Play button visible when audio available
  • Play button disabled when audio unavailable
  • Audio plays correct time range
  • Pause/resume works
  • Auto-stop at end
  • Reset to start after playback
  • Only one audio plays at a time
Error Handling
  • Missing data-ref shows error
  • Invalid reference shows error message
  • Network errors handled gracefully
  • Invalid version handled
Styling
  • Shadow DOM isolates styles
  • Responsive on mobile
  • Readable typography
  • Proper spacing

Related Documentation

  • See Docs/08-WIDGET.md for widget documentation
  • See public/widget.js for implementation
  • See public/widget-test.html for test examples

使用示例

查看来源仓库中的使用示例与配置说明。

查看来源 ↗

来源历史

收录时间
2026-01-20
索引更新时间
2026-01-26
Branch
main

收录与同步日期属于本站记录。源码修改历史请查看来源仓库。

GitHub ↗

chat Comments (0)

chat_bubble_outline

No comments yet. Be the first to share your thoughts!