Skip to content

Minimal example integration and end-to-end component tests #48

Description

@patoperpetua

Parent: #5
Depends on: #46, #47

Goal

Deliver a minimal, executable example integration of @singleton-sd/post-kit-editor plus end-to-end component tests that exercise the full editing flow. This proves the epic's acceptance criteria — a consumer can install the package, load existing template sources, edit them visually, preview, validate, and save through consumer-supplied callbacks — without building a demo application.

Scope

Minimal example

  • Path: packages/post-kit-editor/examples/minimal/
  • Content: a single small React entry file plus a short README showing the complete integration:
<EmailTemplateEditor
  template={template}
  availableVariables={variables}
  onSave={async (files) => {
    // Consumer commits files.templateJson / metadataJson / previewJson
    // to its own repository (e.g. via its own server endpoint).
  }}
  onSendTest={async (files, recipient) => {
    // Consumer POSTs to its own trusted server endpoint,
    // which uses @singleton-sd/post-kit-client server-side.
  }}
/>
  • Include a sample template directory (template.json, metadata.json, preview.json) with synthetic values that the example loads.
  • The example is documentation-grade: readable in under a minute, no routing, no application shell, no styling framework, no build pipeline of its own beyond what the package already has.
  • Exclude examples/ from the published files array and from the package build output.

End-to-end component tests

Add src/e2e.spec.tsx (or an equivalently named suite) driving EmailTemplateEditor through the full flow with the same fixtures:

  • Load a template source triple and assert the canvas, metadata, variables, and preview panels render populated.
  • Edit metadata and preview data; assert changes reach the working state.
  • Introduce an undeclared variable; assert the validation summary reports it and Save becomes disabled.
  • Fix the issue; assert Save re-enables.
  • Click Save; assert onSave receives serialised file contents that round-trip back to the edited state without information loss.
  • Provide onSendTest; assert the control appears, validates the recipient, and invokes the callback.
  • Assert no network request and no filesystem access occurs during the entire flow.

Documentation

  • Update packages/post-kit-editor/README.md with the complete usage example, the props table for the finalised public API, and a "what this package does not do" section (no persistence, no sending, no credentials).
  • Link the example directory from the README.

Constraints

  • Build an example, not a demo application — no dashboard, no multi-page shell, no mock backend server.
  • The example must not include any credential, token, endpoint, or customer-identifying value; sample data must be synthetic and generic.
  • examples/ must not be published to npm and must not be part of the package's dist output.
  • Do not add a browser-based test runner (Playwright, Cypress, jsdom-heavy stacks) — use the node --test setup established by the scaffold.
  • Do not change the public API in this issue except to correct genuine defects found while writing the example; substantive API changes belong in the issue that introduced the surface.

Acceptance criteria

  • packages/post-kit-editor/examples/minimal/ contains a runnable single-file integration plus a synthetic sample template directory and a short README.
  • examples/ is excluded from the published package files and from build output.
  • An end-to-end component suite drives load → edit → validate → save with the package's public API only.
  • The suite asserts onSave receives serialised contents that round-trip losslessly to the edited state.
  • The suite asserts validation errors disable Save and that fixing them re-enables it.
  • The suite asserts the send-test control appears only with onSendTest, validates the recipient, and invokes the callback.
  • The suite asserts no network or filesystem access occurs.
  • README documents the full usage example, the props table, and the package's non-responsibilities.
  • No secrets, endpoints, or customer-identifying values appear anywhere in the example or fixtures.
  • pnpm -r --if-present run test, pnpm build, pnpm lint, and pnpm format:check all pass.

Agent implementation notes

Read the finalised prop surface from #46 (save/send-test) and #47 (validation, loading/error states) before writing the example — the example must use the shipped API verbatim, not an idealised one. Reuse the fixtures added in the canvas/serialization issue rather than creating new ones. Read AGENTS.md "Public-repo safety" before adding any sample values. Branch: feat/<issue-number>-editor-example-and-e2e-tests.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    blockedHas an unresolved Depends on: line (docs/github-source-of-truth.md, section 5) — do not claimenhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions