- Notifications
You must be signed in to change notification settings - Fork6
🛠️Interactive sandox playground for vue components
License
David-Desmaisons/ComponentFixture
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
https://david-desmaisons.github.io/ComponentFixture/
Interactive test fixture for vue component.
Component is designed to receive any component you want to test as a default slot
<sandbox><!-- Use the default slot to create the component under test --><component-under-test/></sandbox>
- Mirror all the props of the tested component
- Bind this data to the component under-test
- Display all the props in a form so that it is possible to edit them
- Respect props type and use custom input for each type
- Provide input for objects and function
- Create
v-model
binding if needed - Support of two-way data binding using the
.sync
modifier pattern - Custom props validation when available
- Support component with slots
- Display of all events emitted by the component
- Display of component
data
andcomputed
information - Exposition of component method as buttons that can be called with display of the produced result
- Compatible with hot-reload: automatic update on changes happening on the tested component
Example usingvue-slider-component:
Why would you need such a component?
ComponentFixture
is intended to be used only in a test/dev context with two main applications.
- Explore Interactively a component you are willing to use in your application.
- Understand by example what the props role.
- Quickly identify bugs and limitation on the component.
- Create an example usage of your component that will update automatically
- Interact with the component while you create it.
- Easily identify bugs
- Provide a way to default component props
- Monkey testing: use randomly generated updates on component props.
This will be provided on next major version.
<sandbox:defaults="{value: 23}"><!-- Use the default slot to for the component under test --><component-under-test></component-under-test></sandbox>
import{Sandbox}from'component-fixture'import"component-fixture/dist/ComponentFixture.css"import{componentUnderTest}from'componentUnderTest'exportdefault{components:{ componentUnderTest, Sandbox}}
default
Slot for the component under test
defaults
Object (optional)Value:
{[propName]: defaultValue}
Object sets to default the component under-test props. For example if you want to default the props value with 46, use:
:defaults="{value: 46}"
possibleValues
Object (optional)Value:
{[propName]: [...values]}
Object used to predefined the possible values for a given props.The values defined by
possibleValues
will be used to create a select from the provided values for the given props.For example if you want to limit the props value to 1,2, 3 or 4, use::possibleValues="{value: [1,2,3,4]}"
componentHeight
String (optional)Style to be applied to the component under-test height. Default to null.
componentWidth
String (optional)Style to be applied to the component under-test width. Default to null.
useStore
Boolean (default: false)If true and vuex is being used, a store module is automatically created and its state is bound to component props.
npm install ComponentFixture
npm install
npm run serve
npm run build
npm run lint
npm run test:unit
npm run doc:build
npm run styleguide
npm run styleguide:build
About
🛠️Interactive sandox playground for vue components
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.