Skip to content

Commit

Permalink
Merge pull request #111 from ineedsubstance/feature/add-required-text
Browse files Browse the repository at this point in the history 
Nice Job Nick!
  • Loading branch information
@scottnath
scottnath authored Sep 29, 2016
2 parents e977434 + 1b45e60 commit ee6c9c2
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 27 deletions.
21 changes: 8 additions & 13 deletions lib/form/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,8 @@ const addRequired = (html, input, index) => {
}

if (input.required === 'save' || inp.required === 'save' || input.required === 'publish' || inp.required === 'publish') {
let level = '';
if (inp.required !== undefined) {
level += `required--${inp.required}`;
}
else {
level += `required--${input.required}`;
}
const required = inp.required || input.required;
const level = `required--${required}`;

// pre-regex strings
const stringClass = 'class=["\'][\\w\\W\\s]+?["\']';
Expand Down Expand Up @@ -137,6 +132,10 @@ const addRequired = (html, input, index) => {
// add required to input
const reName = new RegExp(`name=['"]\\s*${inp.name}\\s*['"]`);
render = render.replace(reName, `name="${inp.name}" aria-required="true" required`);

// Add required text to label
const reLabel = new RegExp('</label>');
render = render.replace(reLabel, `<mark class="${level}">required to ${required}</mark></label>`);
}
});

Expand Down Expand Up @@ -164,14 +163,10 @@ const renderer = (type, errors) => {
const context = input.inputs;
let html = nunjucks.renderString(input.html, context);
let render = '';
let required = '';
if (input.hasOwnProperty('required')) {
required = `required--${input.required}`;
}

// Set opening tags based on number of inputs
if (inputs > 1) {
render += `<fieldset id="${input.id}" class="form--fieldset ${required}">`;
render += `<fieldset id="${input.id}" class="form--fieldset">`;
render += `<legend class="form--legend">${input.name}</legend>`;

// Add Description
Expand All @@ -180,7 +175,7 @@ const renderer = (type, errors) => {
}
}
else {
render += `<div id="${input.id}" class="form--field ${required}">`;
render += `<div id="${input.id}" class="form--field">`;
}

// Wraps repeatable attributes around div
Expand Down
18 changes: 8 additions & 10 deletions tests/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ test('Form Generation, with required attributes and inputs', t => {
t.is(typeof rendered.scripts, 'string', 'Scripts is a string');
t.is(typeof rendered.html, 'string', 'HTML is a string');

t.true(includes(rendered.html, 'class="required--save">Input required save', 'label gets save required classes'));
t.true(includes(rendered.html, 'name="input-required-save--text" aria-required="true" required', 'input gets required--save'));
t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'mark gets added after label text'));
});
});

Expand All @@ -75,16 +75,16 @@ test('Form Generation, with identifier automatically required', t => {
t.is(typeof rendered.scripts, 'string', 'Scripts is a string');
t.is(typeof rendered.html, 'string', 'HTML is a string');

t.true(includes(rendered.html, 'class="required--save">SOme New THING', 'label gets save required classes'));
t.true(includes(rendered.html, 'name="new-text-thing--text" aria-required="true" required', 'input gets required--save'));
t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'mark gets added after label text'));
});
});

test('Form Generation, with required, with classes on a label', t => {
return types.only('baz', {}, '', config).then(rslt => {
const result = rslt;
result.attributes[0].html = '<label for="{{text.id}}" class="I-am-a-test this-must__still_be123-here">{{text.label}}</label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
result.attributes[2].html = '<label class="I-am-a-test this-must__still_be123-here" for="{{text.id}}">{{text.label}}</label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
result.attributes[0].html = '<label for="{{text.id}}" class="I-am-a-test this-must__still_be123-here">{{text.label}} <mark class="required--{{text.required}}">required to {{text.required}}</mark></label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
result.attributes[2].html = '<label class="I-am-a-test this-must__still_be123-here" for="{{text.id}}">{{text.label}} <mark class="required--{{text.required}}">required to {{text.required}}</mark></label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';

return form(result);
}).then(rendered => {
Expand All @@ -94,15 +94,14 @@ test('Form Generation, with required, with classes on a label', t => {
t.is(typeof rendered.scripts, 'string', 'Scripts is a string');
t.is(typeof rendered.html, 'string', 'HTML is a string');

t.true(includes(rendered.html, 'class="I-am-a-test this-must__still_be123-here required--save">Plugin required save', 'label gets save required classes if class after for'));
t.true(includes(rendered.html, 'class="I-am-a-test this-must__still_be123-here required--publish" for="', 'label gets save required classes if class before for'));
t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'mark gets added after label text'));
});
});

test('Form Generation, with required attributes and inputs that have wrong levels', t => {
return types.only('baz', {}, '', config).then(rslt => {
const result = rslt;
result.attributes[5].html = '<label for="{{text.id}}" class="I-am-a-test-of-bad-level">{{text.label}}</label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';
result.attributes[5].html = '<label for="{{text.id}}" class="I-am-a-test-of-bad-level">{{text.label}} <mark class="required--{{text.required}}">required to {{text.required}}</mark></label><input type="{{text.type}}" id="{{text.id}}" name="{{text.name}}" value="{{text.value}}" placeholder="{{text.placeholder}}" />';

return form(result);
}).then(rendered => {
Expand All @@ -115,8 +114,8 @@ test('Form Generation, required knows publish vs save', t => {
return types.only('baz', {}, '', config).then(result => {
return form(result);
}).then(rendered => {
t.true(includes(rendered.html, '<div id="plugin-required-save" class="form--field required--save">', 'determines save for plugin'));
t.true(includes(rendered.html, '<div id="plugin-required-publish" class="form--field required--publish">', 'determines publish for plugin'));
t.true(includes(rendered.html, '<mark class="required--save">required to save</mark>', 'determines save for plugin'));
t.true(includes(rendered.html, '<mark class="required--publish">required to publish</mark>', 'determines publish for plugin'));
});
});

Expand Down Expand Up @@ -174,4 +173,3 @@ test('Form Generation, with repeatables', t => {
t.true(includes(rendered.html, '<input type="text" id="c4087332-edda-432d-8464-cc9679742e4e--1" name="my-quote--quote--1" value="foo1" placeholder="Source Material" />'), 'Indexing for input text of second instance');
});
});

69 changes: 65 additions & 4 deletions tests/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ test('Add Errors - Pass', t => {
},
input: {
description: 'I am the Bar Content Type Config textarea description',
html: '<label for=\'{{textarea.id}}\'>{{textarea.label}}</label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
html: '<label for=\'{{textarea.id}}\'>{{textarea.label}} <mark class=\'required--{{textarea.required}}\'>required to {{textarea.required}}</mark></label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
id: 'my-textarea',
inputs: {
textarea: {
Expand Down Expand Up @@ -41,7 +41,7 @@ test('Add Errors Repeatable - Pass', t => {
},
input: {
description: 'An email input with domain validation',
html: '<label for=\'{{email.id}}\'>{{email.label}}</label><input type=\'{{email.type}}\' id=\'{{email.id}}\' name=\'{{email.name}}\' value=\'{{email.value}}\' placeholder=\'{{email.placeholder}}\' />',
html: '<label for=\'{{email.id}}\'>{{email.label}} <mark class=\'required--{{textarea.required}}\'>required to {{textarea.required}}</mark></label><input type=\'{{email.type}}\' id=\'{{email.id}}\' name=\'{{email.name}}\' value=\'{{email.value}}\' placeholder=\'{{email.placeholder}}\' />',
id: 'my-email',
inputs: [
{
Expand Down Expand Up @@ -81,10 +81,10 @@ test('Add Errors Repeatable - Pass', t => {

test('Add Required - Pass', t => {
const param = {
html: '"<label for="91f79620-ba21-4a4a-a4c7-02f456129b0f">My Awesome Text Area</label><textarea id="91f79620-ba21-4a4a-a4c7-02f456129b0f" name="my-textarea--textarea" placeholder="Type something..." />test</textarea>"',
html: '"<label for="91f79620-ba21-4a4a-a4c7-02f456129b0f">My Awesome Text Area <mark class="required--save">required to save</mark></label><textarea id="91f79620-ba21-4a4a-a4c7-02f456129b0f" name="my-textarea--textarea" placeholder="Type something..." />test</textarea>"',
input: {
description: 'I am the Bar Content Type Config textarea description',
html: '<label for=\'{{textarea.id}}\'>{{textarea.label}}</label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
html: '<label for=\'{{textarea.id}}\'>{{textarea.label}} <mark class=\'required--{{textarea.required}}\'>required to {{textarea.required}}</mark></label><textarea id=\'{{textarea.id}}\' name=\'{{textarea.name}}\' placeholder=\'{{textarea.placeholder}}\' />{{textarea.value}}</textarea>',
id: 'my-textarea',
inputs: {
textarea: {
Expand Down Expand Up @@ -132,3 +132,64 @@ test('Add Required Checkbox - Pass', t => {
t.false(includes(result, expected));
});

test('Add Required and Repeatable - Pass', t => {
const param = {
html: '"<div class="form--repeatable"><label for="91f79620-ba21-4a4a-a4c7-02f456129b0f">Add Your Text <mark class="required--publish">required to publish</mark></label><input type="text" id="91f79620-ba21-4a4a-a4c7-02f456129b0f" name="name--text" placeholder="Text goes here" /></div>"',
input: {
description: 'I am the Bar Content Type Config text description',
html: '<div class=\'form--repeatable\'><label for=\'{{text.id}}\'>{{text.label}} <mark class=\'required--{{text.required}}\'>required to {{text.required}}</mark></label><input type=\'{{text.type}}\' id=\'{{text.id}}\' name=\'{{text.name}}\' placeholder=\'{{text.placeholder}}\' /></div>',
id: 'text-required',
inputs: {
text: {
id: '91f79620-ba21-4a4a-a4c7-02f456129b0f--1',
label: 'Add Your Text',
name: 'name--text',
placeholder: 'Text goes here',
type: 'text',
},
},
name: 'Add Your Text',
required: 'publish',
repeatable: 'true',
type: 'text',
},
index: undefined,
};
const expected = 'aria-required="true" required';
const result = html.required(param.html, param.input, param.index);
t.false(includes(result, expected));
});

test('Add Object Required - Pass', t => {
const param = {
html: '"<fieldset id="community-links" class="form--fieldset required--publish"><legend class="form--legend">Object</legend><p class="form--description">I am the Foo Object text description</p><div class="form--field"><label for="91f79620-ba21-4a4a-a4c7-02f456129b0f--1" class="required--publish">Add Your Text <mark class="required--publish">required to publish</mark></label><input type="text" id="91f79620-ba21-4a4a-a4c7-02f456129b0f--1" name="name--text" placeholder="Text goes here"></div><div class="form--field"><label for="91f79620-ba21-4a4a-a4c7-02f456129b0f--2">Add Your URL <mark class="required--publish">required to publish</mark></label><input type="url" id="91f79620-ba21-4a4a-a4c7-02f456129b0f--2" name="name--url" placeholder="http://"></div></fieldset>"',
input: {
name: 'Object',
description: 'I am the Foo Object text description',
html: '<fieldset id=\'community-links\' class=\'form--fieldset required--{{text.required}}\'><legend class=\'form--legend\'>{{input.name}}</legend><p class=\'form--description\'>{{input.description}}</p><div class=\'form--field\'><label for=\'{{text.id}}\' class=\'required--{{text.required}}\'>{{text.label}} <mark class=\'required--{{text.required}}\'>required to {{text.required}}</mark></label><input type=\'{{text.type}}\' id=\'{{text.id}}\' name=\'{{text.name}}\' placeholder=\'{{text.placeholder1}}\'></div><div class=\'form--field\'><label for=\'{{url.id}}\'>{{url.label}} <mark class=\'required--{{url.required}}\'>required to {{url.required}}</mark></label><input type=\'{{url.type}}\' id=\'{{url.id}}\' name=\'{{url.name}}\' placeholder=\'{{url.placeholder}}\'></div></fieldset>',
id: 'object-required',
inputs: {
text: {
id: '91f79620-ba21-4a4a-a4c7-02f456129b0f--1',
label: 'Add Your Text',
name: 'name--text',
placeholder: 'Text goes here',
type: 'text',
required: 'publish',
},
url: {
id: '91f79620-ba21-4a4a-a4c7-02f456129b0f--2',
label: 'Add Your URL',
name: 'name--url',
placeholder: 'http://',
type: 'url',
required: 'publish',
},
},
},
index: undefined,
};
const expected = 'aria-required="true" required';
const result = html.required(param.html, param.input, param.index);
t.false(includes(result, expected));
});

0 comments on commit ee6c9c2

Please sign in to comment.