本文へ移動
cccskills
無料GitHub で公開

appbuilder-testing

Generate and run tests for Adobe App Builder actions and UI components. Scaffolds Jest unit tests, integration tests against deployed actions, contract tests for Adobe API interactions, and React component tests using Testing Library. Provides mock helpers for State, Files, Events SDKs, @adobe/aio-lib-* clients, ExC Shell context (@adobe/exc-app), and UIX Guest SDK (@adobe/uix-guest). Use this skill whenever the user mentions testing App Builder actions, writing unit tests for Runtime actions, creating integration tests, mocking Adobe SDKs, setting up test fixtures, running aio app test, or wants to verify action behavior before deployment. Also trigger when users mention Jest configuration for App Builder, test coverage, CI test setup, React component test, Testing Library, UI test, Provider wrapper, test my page, test my form, test my table, test my component, mock shell context, mock extension context, debug test failures, or fix Jest errors.

インストール方法を見る

含まれるファイル(17)

  • SKILL.md10.8 KB
  • assets/component-test-template.js3.1 KB
  • assets/integration-test-template.js2.8 KB
  • assets/mock-database-sdk.js2.1 KB
  • assets/mock-events-sdk.js1.3 KB
  • assets/mock-files-sdk.js1.2 KB
  • assets/mock-state-sdk.js1.4 KB
  • assets/shell-mock-helper.js1.3 KB
  • assets/uix-guest-mock-helper.js1.9 KB
  • assets/unit-test-template.js3.2 KB
  • evals/evals.json7.1 KB
  • evals/scaffolds/aem-extension-component.jsx609 B
  • references/checklist.md6.2 KB
  • references/component-testing-patterns.md7.1 KB
  • references/debugging.md5.8 KB
  • references/mock-catalog.md8.9 KB
  • references/testing-patterns.md5.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

App Builder Testing

Generate and run Jest tests for Adobe App Builder actions and React Spectrum UI components. Scaffolds unit tests, integration tests, component tests, and mock helpers for Adobe SDKs.

Pattern Quick-Reference

Pick the template or reference that matches the user's intent. Default to assets/unit-test-template.js for generic test requests.

User wantsReferenceTemplate / Asset
Unit test for an existing actionreferences/testing-patterns.mdassets/unit-test-template.js
Integration test against deployed actionreferences/testing-patterns.mdassets/integration-test-template.js
Component test for React Spectrum UIreferences/component-testing-patterns.mdassets/component-test-template.js
Mock ExC Shell context in testsreferences/component-testing-patterns.mdassets/shell-mock-helper.js
Mock AEM extension context in testsreferences/component-testing-patterns.mdassets/uix-guest-mock-helper.js
Mock State SDK in testsreferences/mock-catalog.mdassets/mock-state-sdk.js
Mock Files SDK in testsreferences/mock-catalog.mdassets/mock-files-sdk.js
Mock Events SDK in testsreferences/mock-catalog.mdassets/mock-events-sdk.js
Mock Database SDK in testsreferences/mock-catalog.mdassets/mock-database-sdk.js
Full mock catalog (all SDKs)references/mock-catalog.md—
Contract test for API interactionsreferences/testing-patterns.md—
Pre-deployment verificationreferences/checklist.md—
Debug test failuresreferences/debugging.md—

Fast Path (for clear requests)

When the user's request maps unambiguously to a single pattern above — they name a specific test type, reference a template, or describe a use case that clearly matches one entry — skip straight to generation. Use the matched template and proceed directly.

Examples of fast-path triggers:

  • "Write tests for my action" → Read the action source, use assets/unit-test-template.js, generate immediately
  • "Help me mock State SDK" → Use assets/mock-state-sdk.js, inject into test file
  • "Add integration tests" → Use assets/integration-test-template.js, configure for deployed action
  • "Run tests with coverage" → Execute npx jest --coverage or aio app test
  • "Test my component/page/form/table" → Read the component source, use assets/component-test-template.js, wrap in Provider
  • "Mock shell context" → Use assets/shell-mock-helper.js, inject into test file
  • "Test my AEM extension component" → Use assets/uix-guest-mock-helper.js + assets/component-test-template.js

If there is any ambiguity — multiple test types needed, project structure unclear, or the user hasn't specified enough — fall through to the full workflow below.

Quick Reference

  • Test directory: Place test files in test/ mirroring the action path, e.g., test/actions/<action-name>/index.test.js.
  • Jest configuration: App Builder projects use Jest by default. Config lives in package.json or jest.config.js.
  • Test command: aio app test (wrapper) or npx jest --coverage (direct).
  • Mock pattern: Use jest.mock() at the top of test files to mock Adobe SDK dependencies before importing the action.
  • Response shape: All actions return { statusCode, body } — assert both in every test.
  • Error paths: Always test 200 (success), 400 (bad input), and 500 (SDK failure) scenarios.
  • CommonJS: Action test files use require() and module.exports (not ES imports).
  • Component test directory: test/web-src/components/<ComponentName>.test.js (or test/components/).
  • Provider wrapper: Always wrap in <Provider theme={defaultTheme}> — Spectrum renders nothing without it.
  • ARIA selectors: Use getByRole(), not CSS classes — see references/component-testing-patterns.md selector table.
  • Async testing: Use findBy* for data that appears async, queryBy* for absence, waitFor for state changes.

Full Workflow (for ambiguous or complex requests)

  1. Scan project structure — Check for existing test/ directory, jest.config.js, and test scripts in package.json. Scan both src/ for actions AND web-src/ for UI components.
  2. Identify targets to test — Parse ext.config.yaml (or app.config.yaml) for declared actions and their source paths. Check web-src/src/components/ for React components.
  3. Determine test types needed — Unit tests for logic, integration tests for deployed actions, contract tests for API interactions.
  4. **For each action:**a. Read the action source to identify SDK dependencies (State, Files, Events, Logger, etc.).b. Generate unit test using assets/unit-test-template.js as the base.c. Inject appropriate mocks from references/mock-catalog.md based on detected dependencies.d. Add error scenario tests (missing params, auth failures, SDK errors).
  5. **For each UI component:**a. Read the component source to identify dependencies (shell context, UIX guest, action calls).b. Generate component test using assets/component-test-template.js as the base.c. Wrap all renders in <Provider theme={defaultTheme}> — Spectrum renders nothing without it.d. Inject shell mock (assets/shell-mock-helper.js) or UIX guest mock (assets/uix-guest-mock-helper.js) as needed.e. Add loading, success, and error state tests for async data using findBy* and waitFor.
  6. Run tests — Execute aio app test or npx jest --coverage and report results.
  7. Validate — Check against references/checklist.md before marking done.

Example User Prompts

  • "Write unit tests for my generic action"
  • "Add integration tests for my deployed action"
  • "My action uses State SDK — help me mock it in tests"
  • "Run tests and show me coverage"
  • "Set up Jest for my App Builder project"
  • "Test my action handles errors properly"
  • "Write component tests for my data table page"
  • "Test my AEM extension panel component"
  • "Help me mock shell context in my tests"
  • "Add tests for my React Spectrum form"

Inputs To Request

  • Current repository path and action file locations
  • Which actions need tests (or test all declared actions)
  • Target test types: unit, integration, contract, or all
  • Whether action is deployed (needed for integration tests)

Deliverables

  • Test files in test/ matching the action directory structure
  • Component test files in test/web-src/components/ for UI components
  • Mock helpers for detected Adobe SDK dependencies
  • Shell or UIX Guest mock helpers when components depend on context SDKs
  • Jest configuration if not already present (including jsdom environment for component tests)
  • Coverage report from test execution

Quality Bar

  • Every action test covers at minimum: success (200), bad input (400), and SDK failure (500) paths
  • Mocks are isolated per test via beforeEach(() => jest.clearAllMocks())
  • No real SDK calls in unit tests — all external dependencies are mocked
  • Tests are deterministic and can run offline (no network dependencies in unit tests)
  • Coverage reporting is enabled (--coverage flag)
  • All component tests wrap in <Provider theme={defaultTheme}> — Spectrum renders nothing without it

References

  • Use references/testing-patterns.md for unit, integration, and contract test patterns with annotated examples.
  • Use references/component-testing-patterns.md for React Spectrum component testing with Provider wrapping, ARIA selectors, and async patterns.
  • Use references/mock-catalog.md for mock helpers covering all Adobe SDKs (State, Files, Events, Logger, Database, Shell, UIX Guest).
  • Use references/checklist.md for pre-deployment test verification.
  • Use assets/unit-test-template.js for Jest unit test boilerplate (CommonJS).
  • Use assets/integration-test-template.js for integration test against deployed actions.
  • Use assets/component-test-template.js for React Spectrum component test boilerplate with renderWithSpectrum() helper.
  • Use assets/shell-mock-helper.js for ExC Shell context mock (@adobe/exc-app).
  • Use assets/uix-guest-mock-helper.js for AEM UIX Guest mock (@adobe/uix-guest).
  • Use assets/mock-state-sdk.js, assets/mock-files-sdk.js, assets/mock-events-sdk.js, and assets/mock-database-sdk.js for ready-to-use SDK mock setups.

Common Issues

  • Tests fail with "Cannot find module": Ensure the action path in require() matches the actual file location. App Builder actions are typically at src/dx-excshell-1/actions/<name>/index.js.
  • Mocks not working: jest.mock() calls must appear before require() of the module under test. Jest hoists mock declarations but order still matters for manual mocks.
  • State/Files SDK tests fail: These SDKs require Runtime environment for real calls. Always mock them in unit tests. Use aio app run (not aio app dev) for integration tests that need real SDK access.
  • Coverage too low: Add tests for error branches — missing params, invalid auth headers, SDK init() failures, and timeout scenarios.
  • aio app test** vs npx jest:** aio app test is a thin wrapper around Jest. Use npx jest --coverage directly for more control over flags and reporters.
  • Spectrum components render blank in tests: Missing <Provider theme={defaultTheme}> wrapper. Use renderWithSpectrum() helper from assets/component-test-template.js.
  • ARIA role queries return null: Spectrum components use ARIA roles, not CSS classes. See references/component-testing-patterns.md section g for the role reference table.

Chaining

  • Chains FROM appbuilder-action-scaffolder (test actions after implementation)
  • Chains FROM appbuilder-ui-scaffolder (test UI components after scaffolding)
  • Chains TO appbuilder-cicd-pipeline (automated test execution in CI)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Analyzes a multi-step conversion funnel to find where visitors drop off and which steps have the worst leakage. Use this skill when someone describes a journey and asks about conversion rates, drop-off, fallout, or step completion. Trigger for "analyze our checkout funnel," "where are visitors dropping off," "what's our add-to-cart to purchase conversion rate," "funnel analysis," "show me fallout between steps," or "which step loses the most visitors."

日本語の概要は準備中です。原文の説明を表示しています。

aemgdc/aemdev22026年10月10日 更新

Generates a concise, executive-ready performance summary covering key metrics, trends, and what's driving movement. Use this skill when someone needs to produce a briefing, executive summary, performance narrative, or stakeholder readout — for example, "write an exec summary of last week's performance," "create a performance briefing for our leadership team," "produce a monthly business review summary," "what should I tell executives about our metrics," or "generate a performance narrative." Also trigger for "QBR summary," "weekly business review," or "stakeholder briefing."

日本語の概要は準備中です。原文の説明を表示しています。

aemgdc/aemdev22026年10月10日 更新

Produces a compact KPI digest showing how key metrics changed over a period and what's driving the movement. Use this skill when someone asks for a performance summary, a weekly recap, a morning briefing, a KPI update, or any variation of "how did we do this week/month." Also trigger for "give me a performance overview," "what moved in the last 7 days," "pull our AA KPI report," or "summarize our metrics."

日本語の概要は準備中です。原文の説明を表示しています。

aemgdc/aemdev22026年10月10日 更新

Compares the performance of two or more audience segments across key metrics side by side. Use this skill when someone wants to compare audiences or visitor groups — for example, "how do mobile visitors compare to desktop on conversion," "compare new vs. returning visitors," "show me the difference between these two segments," "compare these audiences on our KPIs," or "which segment performs better." Also trigger for "segment comparison" or "audience comparison."

日本語の概要は準備中です。原文の説明を表示しています。

aemgdc/aemdev22026年10月10日 更新

Identifies which items (pages, campaigns, products, channels, regions) had the biggest increases or decreases for a key metric between two time periods. Use this skill when someone asks "what's up and what's down," "which campaigns moved the most," "top gainers and losers," "what pages are trending," "show me what changed by channel," or any variation of identifying the biggest movers and decliners for a metric.

日本語の概要は準備中です。原文の説明を表示しています。

aemgdc/aemdev22026年10月10日 更新

Scan an AEM Edge Delivery Services page for WCAG 2.1 AA accessibility violations and generate specific fixes. Identifies missing alt text, heading hierarchy issues, link text problems, color contrast concerns, and EDS-specific accessibility patterns. Use when fixing accessibility issues, preparing for compliance audits, or remediating WCAG violations.

日本語の概要は準備中です。原文の説明を表示しています。

aemgdc/aemdev22026年10月10日 更新

aemgdc のスキルをすべて見る

このスキルの問題を報告する