diff options
Diffstat (limited to 'spec/frontend/lib/utils/forms_spec.js')
| -rw-r--r-- | spec/frontend/lib/utils/forms_spec.js | 163 |
1 files changed, 162 insertions, 1 deletions
diff --git a/spec/frontend/lib/utils/forms_spec.js b/spec/frontend/lib/utils/forms_spec.js index f65bd8ffe0c..123d36ac5d5 100644 --- a/spec/frontend/lib/utils/forms_spec.js +++ b/spec/frontend/lib/utils/forms_spec.js @@ -1,4 +1,9 @@ -import { serializeForm, serializeFormObject, isEmptyValue } from '~/lib/utils/forms'; +import { + serializeForm, + serializeFormObject, + isEmptyValue, + parseRailsFormFields, +} from '~/lib/utils/forms'; describe('lib/utils/forms', () => { const createDummyForm = (inputs) => { @@ -135,4 +140,160 @@ describe('lib/utils/forms', () => { }); }); }); + + describe('parseRailsFormFields', () => { + let mountEl; + + beforeEach(() => { + mountEl = document.createElement('div'); + mountEl.classList.add('js-foo-bar'); + }); + + afterEach(() => { + mountEl = null; + }); + + it('parses fields generated by Rails and returns object with HTML attributes', () => { + mountEl.innerHTML = ` + <input type="text" placeholder="Name" value="Administrator" name="user[name]" id="user_name" data-js-name="name"> + <input type="text" placeholder="Email" value="foo@bar.com" name="user[contact_info][email]" id="user_contact_info_email" data-js-name="contactInfoEmail"> + <input type="text" placeholder="Phone" value="(123) 456-7890" name="user[contact_info][phone]" id="user_contact_info_phone" data-js-name="contact_info_phone"> + <input type="hidden" placeholder="Job title" value="" name="user[job_title]" id="user_job_title" data-js-name="jobTitle"> + <textarea name="user[bio]" id="user_bio" data-js-name="bio">Foo bar</textarea> + <select name="user[timezone]" id="user_timezone" data-js-name="timezone"> + <option value="utc+12">[UTC - 12] International Date Line West</option> + <option value="utc+11" selected>[UTC - 11] American Samoa</option> + </select> + <input type="checkbox" name="user[interests][]" id="user_interests_vue" value="Vue" checked data-js-name="interests"> + <input type="checkbox" name="user[interests][]" id="user_interests_graphql" value="GraphQL" data-js-name="interests"> + <input type="radio" name="user[access_level]" value="regular" id="user_access_level_regular" data-js-name="accessLevel"> + <input type="radio" name="user[access_level]" value="admin" id="user_access_level_admin" checked data-js-name="access_level"> + <input name="user[private_profile]" type="hidden" value="0"> + <input type="radio" name="user[private_profile]" id="user_private_profile" value="1" checked data-js-name="privateProfile"> + <input name="user[email_notifications]" type="hidden" value="0"> + <input type="radio" name="user[email_notifications]" id="user_email_notifications" value="1" data-js-name="emailNotifications"> + `; + + expect(parseRailsFormFields(mountEl)).toEqual({ + name: { + name: 'user[name]', + id: 'user_name', + value: 'Administrator', + placeholder: 'Name', + }, + contactInfoEmail: { + name: 'user[contact_info][email]', + id: 'user_contact_info_email', + value: 'foo@bar.com', + placeholder: 'Email', + }, + contactInfoPhone: { + name: 'user[contact_info][phone]', + id: 'user_contact_info_phone', + value: '(123) 456-7890', + placeholder: 'Phone', + }, + jobTitle: { + name: 'user[job_title]', + id: 'user_job_title', + value: '', + placeholder: 'Job title', + }, + bio: { + name: 'user[bio]', + id: 'user_bio', + value: 'Foo bar', + }, + timezone: { + name: 'user[timezone]', + id: 'user_timezone', + value: 'utc+11', + }, + interests: [ + { + name: 'user[interests][]', + id: 'user_interests_vue', + value: 'Vue', + checked: true, + }, + { + name: 'user[interests][]', + id: 'user_interests_graphql', + value: 'GraphQL', + checked: false, + }, + ], + accessLevel: [ + { + name: 'user[access_level]', + id: 'user_access_level_regular', + value: 'regular', + checked: false, + }, + { + name: 'user[access_level]', + id: 'user_access_level_admin', + value: 'admin', + checked: true, + }, + ], + privateProfile: [ + { + name: 'user[private_profile]', + id: 'user_private_profile', + value: '1', + checked: true, + }, + ], + emailNotifications: [ + { + name: 'user[email_notifications]', + id: 'user_email_notifications', + value: '1', + checked: false, + }, + ], + }); + }); + + it('returns an empty object if there are no inputs', () => { + expect(parseRailsFormFields(mountEl)).toEqual({}); + }); + + it('returns an empty object if inputs do not have `name` attributes', () => { + mountEl.innerHTML = ` + <input type="text" placeholder="Name" value="Administrator" id="user_name"> + <input type="text" placeholder="Email" value="foo@bar.com" id="user_contact_info_email"> + <input type="text" placeholder="Phone" value="(123) 456-7890" id="user_contact_info_phone"> + `; + + expect(parseRailsFormFields(mountEl)).toEqual({}); + }); + + it('does not include field if `data-js-name` attribute is missing', () => { + mountEl.innerHTML = ` + <input type="text" placeholder="Name" value="Administrator" name="user[name]" id="user_name" data-js-name="name"> + <input type="text" placeholder="Email" value="foo@bar.com" name="user[email]" id="email"> + `; + + expect(parseRailsFormFields(mountEl)).toEqual({ + name: { + name: 'user[name]', + id: 'user_name', + value: 'Administrator', + placeholder: 'Name', + }, + }); + }); + + it('throws error if `mountEl` argument is not passed', () => { + expect(() => parseRailsFormFields()).toThrow(new TypeError('`mountEl` argument is required')); + }); + + it('throws error if `mountEl` argument is `null`', () => { + expect(() => parseRailsFormFields(null)).toThrow( + new TypeError('`mountEl` argument is required'), + ); + }); + }); }); |