@thinkpixellab-public/px-vue-tester

px-vue-tester

This package exposes two components that provide very simple "workbench" for testing and developing Vue components. They are intentionally very limited in their scope and functionality. The idea is that they can be included in a project during development and then hidden in production.

Install

• Install with npm:

  npm install @thinkpixellab/px-vue-tester --save-dev

Note that this is a private package so you may need to follow these instructions to setup a repo to access this package.

Import the components:

import { PxTester, PxTest } from '@thinkpixellab/px-vue-tester';

export default {
    name: 'my-page',
    components: { PxTester, PxTest },
});

Party:

<px-tester>
    <px-test test-id="my-test">...</px-test>
</px-tester>

Basic Usage

Here's some basic markup:

<px-tester>

    <px-test

        // required id for the test
        test-id="test"

        // (optional) name of the test (displayed in the  UI)
        name="MyComponent"

        // (optional) description of the test
        description="Test MyComponent doing the thing that it does best."

        // (optional) default size (both values are optional, an empty object will set to auto)
        :size="{w: 900, w: 400}"

        // (optional) size presets (if you have common sizes that you want to cycle through)
        :preset-sizes="[{}, {w: 1000}, {w: 800, h:200}]"

        // (optional) resizing is enabled by default but you can control what's enabled,
        // valid values are 'none', 'x', 'y', 'xy'
        allow-resize="none"
    >


    <template #notes>
        <pre>

        # Notes

        You can include inline markdown notes, including code samples:

        ```javascript
        console.log('see what I mean!');
        ```

        Note that they need to inlcuded in a pre tag and HTML needs to be entity encoded.
        Here's a toole: https://mothereff.in/html-entities

        </pre>
    </template>
</px-tester>