@solution5520/s-visual-test v1.1.0

s-visual-test

Helper component to test if the visual of a specific components look well with different property values, it's also test specified events and methods

Installation

npm i @solution5520/s-visual-test

Importing

Css style

In main.js:

import '@solution5520/s-visual-test/dist/s-visual-test.css'

Locally

Install per component as needed

import VisualTest from "@solution5520/s-visual-test"

export default {
  components: { VisualTest },
  // ... rest of component config
}

import {VisualTest, Section, Test} from "@solution5520/s-visual-test"

export default {
  components: { VisualTest },
  data() {
    return {
      props: [
        new Section('value', 'value section',[
          new Test(),
          new Test('with text', {
            value: 'some text'
          })
        ])
      ]
    }
  }
  // ... rest of component config
}

Usage

With all options

In template:

<template>
  <VisualTest
      :component="component"
      :defaultAttrs="defaultAttrs"
      :props="props"
      :events="events"
      :methods="methods"
      :slots="slots"
    />
</template>

In script:

import {VisualTest, Section, Test} from "@solution5520/s-visual-test"
import CustomInput from "@/components/CustomInput.vue";

export default {
  components: {
    VisualTest
  },
  data() {
    return {
      component: CustomInput,
      defaultAttrs: {
        value: "some text",
        class: "shadow",
        inputClass: "form-control"
      },
      props: [
        new Section("value", "s-test--text"),
        new Section("inputClass", "input class", [
          new Test("color", {
            inputClass: "text-info"
          }),
          new Test("form & color", {
            inputClass: "form-control text-info"
          })
        ]),
        "readonly"
      ]
      events: ["input", "change"],
      methods: ["focus"],
      slots: ["", "error"]
    };
  }
};

Section and Test classes are used to define custom attributes.

Props

Automatic testing

If you define the name, use one of the command as the label and you don't specify custom test, it will generate the tests for you.

Usage

props = {
  "placeholder",
  new Section("value", "s-test--text"),
  {
    label: "s-test--fa_icon",
    name: "icon"
  }
}

Availables commands:

SectionClass

Usage

new Section('readonly')
new Section("value", "s-test--text"),
new Section('prefix', new Test())
new Section('suffix', 'suffix section')
new Section('icon', 'icon tests', [
  new Test(), 
  new Test()
])

Props

Overloads

new Section(name)
new Section(name, label)
new Section(name, command)
new Section(name, test)
new Section(name, tests)
new Section(name, label, command)
new Section(name, label, tests)
new Section(tests)

TestClass

Usage

new Test('disabled')
new Test('disabled', {
  disabled: true
})

Props