diff --git a/lib/form/html.js b/lib/form/html.js index 55c7c51..411058a 100644 --- a/lib/form/html.js +++ b/lib/form/html.js @@ -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]+?["\']'; @@ -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(''); + render = render.replace(reLabel, `required to ${required}`); } }); @@ -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 += `
`; + render += `
`; render += `${input.name}`; // Add Description @@ -180,7 +175,7 @@ const renderer = (type, errors) => { } } else { - render += `
`; + render += `
`; } // Wraps repeatable attributes around div diff --git a/package.json b/package.json index f39863e..0e2d3e4 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "license": "Apache-2.0", "dependencies": { "browserify": "^13.0.1", - "deepmerge": "^0.2.10", + "deepmerge": "^1.1.0", "js-yaml": "^3.5.3", "lodash": "^4.14.1", "node-dir": "^0.1.11", @@ -51,7 +51,7 @@ "input-plugin-checkbox": "^0.3.1", "input-plugin-datetime": "^0.2.2", "input-plugin-email": "^0.2.0", - "input-plugin-quote": "0.0.1", + "input-plugin-quote": "0.2.1", "input-plugin-select": "^0.3.0", "input-plugin-selects-related": "0.1.3", "input-plugin-text": "^0.1.0", diff --git a/tests/form.js b/tests/form.js index d946a8b..4c918da 100644 --- a/tests/form.js +++ b/tests/form.js @@ -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, 'required to save', 'mark gets added after label text')); }); }); @@ -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, 'required to save', '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 = ''; - result.attributes[2].html = ''; + result.attributes[0].html = ''; + result.attributes[2].html = ''; return form(result); }).then(rendered => { @@ -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, 'required to save', '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 = ''; + result.attributes[5].html = ''; return form(result); }).then(rendered => { @@ -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, '
', 'determines save for plugin')); - t.true(includes(rendered.html, '
', 'determines publish for plugin')); + t.true(includes(rendered.html, 'required to save', 'determines save for plugin')); + t.true(includes(rendered.html, 'required to publish', 'determines publish for plugin')); }); }); @@ -174,4 +173,3 @@ test('Form Generation, with repeatables', t => { t.true(includes(rendered.html, ''), 'Indexing for input text of second instance'); }); }); - diff --git a/tests/html.js b/tests/html.js index 955e8b6..e52937c 100644 --- a/tests/html.js +++ b/tests/html.js @@ -10,7 +10,7 @@ test('Add Errors - Pass', t => { }, input: { description: 'I am the Bar Content Type Config textarea description', - html: '', + html: '', id: 'my-textarea', inputs: { textarea: { @@ -41,7 +41,7 @@ test('Add Errors Repeatable - Pass', t => { }, input: { description: 'An email input with domain validation', - html: '', + html: '', id: 'my-email', inputs: [ { @@ -81,10 +81,10 @@ test('Add Errors Repeatable - Pass', t => { test('Add Required - Pass', t => { const param = { - html: '""', + html: '""', input: { description: 'I am the Bar Content Type Config textarea description', - html: '', + html: '', id: 'my-textarea', inputs: { textarea: { @@ -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: '"
"', + input: { + description: 'I am the Bar Content Type Config text description', + html: '
', + 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: '""', + input: { + name: 'Object', + description: 'I am the Foo Object text description', + html: '
{{input.name}}

{{input.description}}

', + 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)); +});