Skip to content
griffincox edited this page Feb 14, 2019 · 41 revisions

Create a file named peteshow.*.js, such as peteshow.custom.js and include it after the main Peteshow library.

NOTE: If you are using Rails, create the file in your vendor/assets/javascripts folder. This avoids issues with the asset pipeline.
Add //= stub 'peteshow.custom.js' to your manifest if you see Peteshow is being included.

To see an example of what a custom plugin might look like, click here.

Basic plugin

The default options are listed below. None are necessary for your custom plugin.

var options = {
  emailPrefix : 'test-',
  emailDomain : 'example.com',
  form        : '',
  blur        : false,
  cookies     : false,
  rules       : {},
  ignore      : [],
  filter      : [],
  force       : {},
  reuse       : {},
  commands    : '',
  special     : function(){},
  events      : function(){},
}

$(function() {
  Peteshow.init(options)
})

Options

Name Description
emailPrefix Prefix for your generated email addresses. Random numbers are added to the end
emailDomain The domain for your generated email addresses
form The jQuery selector of the form/forms you want to be filled out
blur Triggers blur() event after filling out an input.
cookies Store saved fields (from reuse) in cookies rather than localStorage

To override them, add them to the options hash of your plugin:

options = {
  emailDomain : 'google.com',
  emailPrefix : 'customer-',
  form        : '#login, .new_customer, .test_form'
}

Features

Name Description
rules A hash of selectors to values that you want to be used when filling out forms. It ignores hidden inputs
special Called after the rules are applied and can include custom javascript
ignore An array of selectors you wish to have fill out forms ignore
force Similar to rules, but can be used for hidden inputs
filters Filters out options from select boxes
reuse Define input selectors to be saved and reused on certain URLs
events Used in the off chance you need to add extra javascript on Peteshow's init

Rules

To add or override support for specific inputs, you add a rules hash to the options.

NOTE: By default this ignores hidden inputs. Use force to fill out hidden inputs.

function ssn() {
  var x = Peteshow.randomNumber(9)(); // because its a lambda
  return function() {
    return x.substr(0, 3) + '01' + x.substr(5)
  }
}

var options = {
  rules : {
    'input[class=selector]' : 'value',
    'input[name*=ssn]'      : ssn(),
    'input[name^=selector]' : Faker.Name.firstName(),
    'select[id="dob"]'      : Peteshow.randomDate()
    '#name_of_input'        : Peteshow.randomNumber(5), 
    '#name_of_input'        : Peteshow.randomNumber(6, '0123'),
    '#name_of_input'        : Peteshow.randomLetters(5),
    '#name_of_input'        : Peteshow.randomChars(5, 'asdf'),
    '#name_of_input'        : Peteshow.randomEmail(),
  }
}

As you can see, the value can either be a function or string, and you also have access to the Faker.js library that is included in the Peteshow core, as well as several helpers.

NOTE: When using a custom function, it is wise to wrap the return in a lambda (return function() { ... }) like above, so that it is randomly generated value every time you fill out forms

Special rules

You can add special rules which may not fit the convention above, but will also be called when filling out forms. You can put any javascript in here.

special: function() {
  if ($('.extra_div').length) {
    $('input[name*=first_name]').val($('input[name*=last_name]').val())
  }
}

Ignoring fields

If you want to have Peteshow ignore a specific field, add the following to your plugin:

ignore : [
  'input[name*="name"]',
  '#first_name'
]

Notice it is an array of selector strings. Read more about jQuery selectors.

Force values of certain inputs

Useful for situations where you need to force a value that may be hidden

force : {
  'input[type=hidden]' : 'asdf'
}

Filtering select values

By default When filling out forms, select and other are ignored for selects. If you want to add more to the list, you can do so by:

filter: ['value']

Reusing saved values

There are some cases when you need to reuse a value on another page instead of randomly generating a new one. Use the reuse option for this functionality.

reuse: {
  'input[name=first_name]' : '/login',
}

By default, this will store the value into localStorage and reuse it on /login (it greps the URL). If for some reason you need to use cookies instead of localStorage, add cookies: true to your init options hash (this is useful for cross-domain functionality).

Init events

In the off chance you need to perform some additional javascript on init, add it to the events hash.

To bind events to the commands you add in the commands option, add them here.

events : function() {
  console.log('loaded');
  $('#test-command').on('click', function(){ 
    alert(1) 
  })
}

Clone this wiki locally