Rapidly create and exercise your Svelte components.
Developing and testing components should be easy! Svelte Gym provides a playground environment to exercise your components and ensure they are responding correctly.
Svelte Gym makes it easy to replicate component state by creating permalinks for a component's state.
For example:
Problematic scenarios can now be easily replicated and shared with team members. It also makes visual regression testing using a tool such as BackstopJS a breeze.
For more complex components it may be necessary to create generators, rather than control the specific content you most likely want to control the number of elements. In those cases best prefix properties with a single underscore to help make intentions clear. Be aware that Svelte-Gym reserves a double underscore prefix.
npm install -D svelte-dev
pnpm install -D svelte-dev
bun install -D svelte-dev
Create a gym route for each component containing the following:
<script>
import { TestHarness, restoreProps, GymCheckbox, GymLog, GymTextbox } from "svelte-gym";
let props = {
//Define your component properties and callbacks
}
// properties are automatically restored from the URL Params
restoreProps(props);
</script>
<TestHarness>
<svelte:fragment slot="componentToTest">
<YourComponent {...props} />
</svelte:fragment>
<svelte:fragment slot="controls">
<!-- Add GymControls to exercise custom properties of your component -->
<!-- Use the hideExtra param to hide options such as null, undefined etc. -->
</svelte:fragment>
</TestHarness>
To allow testing of components with more complex structures a basic form of JSON Path is supported. i.e. root.subA.subB
, this also works with arrays root.myArray.0
If Svelte-Gym saves you time please consider supporting it:
We offer support to startups and enterprise, subscribe here
Tap Here to book training for your team either online or in-person.