🚀  Astro — Testbed 👩🏻‍🔬🧫


Complete toolbox for Astro / JSX component testing and analysis. For design systems, storybooks, local dev. isolation, documentation…

Keywords:

  • astro
  • astro-component
  • testing
  • storybook
  • documentation
  • design-system
  • attributions
  • typescript
  • jsx
  • react
  • playground
  • demonstration
  • interactions
  • component

🚀  Astro — Testbed 👩🏻‍🔬🧫

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

Component testing and analysis.
For design systems, storybooks, local dev. isolation, documentation…
Works with Astro / React JSX.

Note
Current state is: usable, need more tests, features and refinements.

See demo / playground on astro-content.dev/__content.
Then, go to 📍  Storybooks > Testbeds



📦  Installation

pnpm i ts-morph astro-testbed

🛠  Usage

In Astro template / MDX file.

Astro component testbed

import { Testbed } from 'astro-testbed';

<Testbed
  component="/src/components-demo/Crab.astro"
  props={{
    character: 'friendly',
    shellColor: 'salmon',
  }}
>
  🏵 I'm a default slotted content 🤹🏻‍♂️
</Testbed>;

Testbed, headless

Bring your own styles!

<details>
  <summary>Click to see the unstyled component</summary>
  <Testbed
    headless
    component="/src/components-demo/Crab.astro"
    props={{ character: 'aggressive', shellColor: 'seagreen' }}
  >
    oh no
  </Testbed>
</details>

Testbed, with controls settings as props.

<Testbed
  component="/src/components-demo/ThreeJuggler.tsx"
  schema={{
    properties: {
      count: {
        title: 'Object count',
        type: 'number',
        minimum: 1,
        maximum: 20,
      },
      mode: {
        title: 'Scene mode',
        type: 'string',
        enum: ['juggler', 'lsd', 'sharkTeeth'],
      },
      hue: {
        title: 'Color hue',
        type: 'string',
      },
    },
  }}
  ui={{
    count: {
      'ui:widget': 'range',
    },
    hue: {
      'ui:widget': 'color',
    },
  }}
  props={{
    count: 7,
  }}
/>

Embed controls in React JSX component

React component testbed — with embedded settings

<Testbed
  component="/src/components-demo/ThreeJuggler.tsx"
  props={{
    count: 7,
  }}
>
  <!-- This renders to the default `<ThreeJuggler />` slot. -->

  With embedded testbed control schema
</Testbed>

Reference for form generation

// MyReactComponent.<tsx,jsx>

export default function MyReactComponent({
  return <div>{/* … */}</div>
});

MyReactComponent.testbed = {
  schema: {
    properties: {
      count: {
        title: 'Object count',
        type: 'number',
        minimum: 1,
        maximum: 20,
      },
      mode: {
        title: 'Scene mode',
        type: 'string',
        enum: ['juggler', 'lsd', 'sharkTeeth'],
      },
      hue: {
        title: 'Color hue',
        type: 'string',
      },
    },
  },
  ui: {
    count: {
      'ui:widget': 'range',
    },
    hue: {
      'ui:widget': 'color',
    },
  },
};

🎉  Result

TypeScript API

Extends: astroHTML.JSX.HTMLAttributes


name
type
required
default
component
string
true
''
props
Record<string, unknown>
false
{}
headless
boolean
false
false
schema
JSONSchema7
false
{}
ui
UiSchema
false
{}

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.2.4 (2022-10-17)

Note: Version bump only for package astro-testbed

0.2.3 (2022-10-17)

Bug Fixes

  • install deps., update configs, docs (1ddf5a1)

0.2.2 (2022-10-13)

Bug Fixes

  • add missing props export (894fd7a)
  • raw astro import breaking on ci only (d3cbfef)

0.2.1 (2022-10-12)

Bug Fixes

  • has controls for embedded schema (dd70c8d)

0.2.0 (2022-10-12)

Features

  • copyright, sitemap, favicon, generator… (b6baec4)

Bug Fixes

  • client only controls, slot name (cdf834f)

0.1.2 (2022-10-10)

Bug Fixes

0.1.1 (2022-10-10)

Bug Fixes

  • docs syntaxes and headings (81773f2)

0.1.0 (2022-10-10)

Features

...

Licenses

Package
Author
License
URL
@rjsf/core
Nicolas Perriault <nperriault@mozilla.com>
Apache-2.0
@rjsf/utils
Heath Chiavettone <heath.chiavettone@freenome.com
Apache-2.0
@rjsf/validator-ajv6
Heath Chiavettone <heath.chiavettone@freenome.com
Apache-2.0
clsx
Luke Edwards
MIT
marked
Christopher Jeffrey
MIT
uid
Luke Edwards
MIT

⚠️  Having an issue? / 🗣   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.