Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

🛠️Interactive sandox playground for vue components

License

NotificationsYou must be signed in to change notification settings

David-Desmaisons/ComponentFixture

Repository files navigation

Component Fixture

CircleCICoveragecodebeat badgeGitHub open issuesNpm versionMIT License

Demo

https://david-desmaisons.github.io/ComponentFixture/

Description

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>

Component-fixture will automatically:

  • 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

Features:

  • Respect props type and use custom input for each type
  • Provide input for objects and function
  • Createv-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 componentdata 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:

demo

Uses cases

Why would you need such a component?

ComponentFixture is intended to be used only in a test/dev context with two main applications.

Discovering third party component

  • 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.

Testing a component you creates

  • Create an example usage of your component that will update automatically
  • Interact with the component while you create it.
  • Easily identify bugs

Next steps

  • Provide a way to default component props
  • Monkey testing: use randomly generated updates on component props.

This will be provided on next major version.

Example usage

<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}}

API

slots

  • default Slot for the component under test

props

  • defaultsObject (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}"

  • possibleValuesObject (optional)

    Value:{[propName]: [...values]}

    Object used to predefined the possible values for a given props.The values defined bypossibleValues 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]}"

  • componentHeightString (optional)

    Style to be applied to the component under-test height. Default to null.

  • componentWidthString (optional)

    Style to be applied to the component under-test width. Default to null.

  • useStoreBoolean (default: false)

    If true and vuex is being used, a store module is automatically created and its state is bound to component props.

Installation

npm install ComponentFixture

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Update the API section of README.md with generated documentation

npm run doc:build

Run style guide dev server

npm run styleguide

Generate a static HTML style guide

npm run styleguide:build

About

🛠️Interactive sandox playground for vue components

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors2

  •  
  •  

[8]ページ先頭

©2009-2025 Movatter.jp