Adding page and target methods

In order to add a new method one has to describe the parameter form in ./src/component/Schema/Params/Element/ or ./src/component/Schema/Params/Page/ using JSON-schema described below and include this module in ./src/component/Schema/schema.jsx

JSON Schema

export default {
  template: ( command ) => {}, 
  toLabel: ( command ) => `..`,
  toGherkin: ( command ) => `..`,
  commonly: "...",
  description: `..`,

  validate?: validateFn,
  params: [
    {
      legend?: "Section legend",
      description?: "Section description",
      tooltip?: "Section tooltip",
      span?: {}
      fields: [ FIELD, FIELD ]
    }
  ]
}

Where

• template is callbale that translates the command data into Jest JavaScript

• toLabel - callback to render list labels for Declarative mode

• toGherkin - callback to render list labels for Gherkin mode

• commonly - method description in the select

• description - method description on the top of the form

• validateFn is a function that accepts form values and return either error message or null. e.g.

 validate: ( values ) => {
    if ( values.params.foo === values.params.bar ) {
      return "FOO must not equal BAR";
    }
    return null;
  }

• FIELD is object literal describing form field:

{
  span: { 
        wrapperCol: {
          span: 21,
          offset: 0
        }
      }, // (optional) alternative layout with fractions to span (1-24)
  name: "params.foo", // (required) name prefixed with namespace
  label: "Foo",  // (required) field label 
  control: INPUT, // (required) control type, one of TEXTAREA, RADIO_GROUP, INPUT, INPUT_NUMBER, CHECKBOX, SELECT  
  tooltip: "Foo tooltip", // (optional) appends label with info icon, showing the provided test on hover
  placeholder: "foo placeholder", // (optional) text of the placeholder
  template: false, // set true if field supports template expressions
  rules: [] // (optional) validation rules and transforms as described at https://ant.design/components/alert/#Validation-Rules 
}

Field examples:

INPUT / INPUT_NUMBER

{ 
  name: "params.url",
  control: INPUT,
  label: "URL",
  rules: [{
   type: "string",
   required: true,
   pattern: /^[a-zA-Z0-9_\-]{1,200}$/,
   message: "Hey invalid URL!"
 }]
}

SELECT

{ 
  name: "params.select",
  control: SELECT,
  label: "SELECT",
  options: [
    { value: 1, description: "ONE "},
    { value: 2, description: "TWO "},
    { value: 3, description: "THREE "}
  ]
}

or

{ 
  name: "params.select",
  control: SELECT,
  label: "SELECT",
  options: [ "ONE ", "TWO ", "THREE "  ]
}

CHECKBOX

{
  name: "params.quix",
  control: CHECKBOX,
  label: "Quix"
}

RADIO

{
  name: "params.radio",
  control: RADIO_GROUP,
  label: "Radio",
  options: [ "opt1", "opt2", "opt3" ]
}

TEXTAREA

{
  name: "params.textarea",
  control: TEXTAREA,
  label: "Textarea"
}

FILE

{
   name: "params.bodyPath",
   control: FILE,
   optional: true,   // extends BrowserFile component with reset button
   label: "...or JSON file",
   tooltip: "",
   placeholder: "",
   rules: [{
      message: "Select a file path to seed the body"
   }]
}