govuk-insert-dummy-data-test

govuk-insert-dummy-data

JavaScript function for inserting dummy data in the GOV.UK Prototype Kit.

Table of contents

• Why was this made?
• Made with
• Features
• Requirements
• How to use
• Examples

Why was this made?

This function has been in use in some form or another since 2016. After copying and pasting from one project to another I decided to make something more configurable so there would be less code to change on each use.

This function makes it quick and easy to navigate a prototype that requires a value or a valid value to continue to next page.

Made with

JavaScript

Features

• insert single values

• insert multiple values

• use any visible element as trigger

Requirements

None

How to use

Include the script

<script src="/public/javascripts/insert-dummy-data.js"></script>

Inserting dummy data

Single value

Add the insertDummyData() function at the bottom of your page.

insertDummyData(id, value);

Multiple values

Add the dummyData array and sendDummyData() function at the bottom of your page.

let dummyData = [
    { id: id, value: value },
    { id: id, value: value }
];
sendDummyData(dummyData);

Check one checkbox or radio

Similar to inserting a single value, add the insertDummyData() function at the bottom of the page.

insertDummyData(id);

Check multiple checkboxes

Similar to inserting multiple values, add the dummyData array and sendDummyData() function at the bottom of the page.

let dummyData = [
    { id: id },
    { id: id }
];
sendDummyData(dummyData);

Examples

Inserting dummy data

Single value

Add the id attribute of the input and the value to be inserted.

<script>
    insertDummyData('email-address', '[e-mail]');
</script>

Multiple values

For each input you want to fill add the id attribute of the input and the value to be inserted.

<script>
    let dummyData = [
        { id: 'address-line-1',   value: 'DVLA Longview Road' },
        { id: 'address-line-2',   value: 'Morriston' },
        { id: 'address-town',     value: 'Swansea' },
        { id: 'address-county',   value: 'Swansea' },
        { id: 'address-postcode', value: 'SA6 7JL' }
    ];
    sendDummyData(dummyData);
</script>

Check one checkbox or radio

Add the id attribute of the checkbox or radio to be checked.

<script>
    insertDummyData('nationality-2');
</script>

Check multiple checkboxes

Add the id attributes of the checkboxes to be checked.

<script>
    let dummyData = [
        { id: 'nationality-2' },
        { id: 'nationality-3' }
    ];
    sendDummyData(dummyData);
</script>