Import initial group of tests.

package.json

@@ -128,6 +128,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.1",
     "colors": "^1.4.0",
+    "dompurify": "^3.0.6",
     "eslint": "^7.7.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-loader": "^4.0.2",

src/js/config.js

@@ -1,5 +1,6 @@
 import mi18n from 'mi18n'
 
+/* istanbul ignore next */
 const noop = () => null
 
 // eslint-disable-next-line
@@ -41,19 +42,19 @@ export const defaultOptions = {
   fieldEditContainer: null, // DOM node or selector
   inputSets: [], // add groups of fields at a time
   notify: {
-    error: error => {
+    error: /* istanbul ignore next */ error => {
       console.log(error)
     },
-    success: success => {
+    success:  /* istanbul ignore next */ success => {
       console.log(success)
     },
-    warning: warning => {
+    warning: /* istanbul ignore next */ warning => {
       console.warn(warning)
     },
   },
-  onAddField: (fieldId, fieldData) => fieldData,
-  onAddFieldAfter: (fieldId, fieldData) => fieldData,
-  onAddOption: obj => obj,
+  onAddField: /* istanbul ignore next */ (fieldId, fieldData) => fieldData,
+  onAddFieldAfter: /* istanbul ignore next */ (fieldId, fieldData) => fieldData,
+  onAddOption: /* istanbul ignore next */ obj => obj,
   onClearAll: noop,
   onCloseFieldEdit: noop,
   onOpenFieldEdit: noop,

src/js/control/autocomplete.js

@@ -3,6 +3,7 @@ import { filter } from '../dom'
 /**
  * Autocomplete class
  * Output an autocomplete form element
+ * @extends control
  */
 export default class controlAutocomplete extends control {
   /**

src/js/control/button.js

@@ -3,11 +3,12 @@ import control from '../control'
 /**
  * Button class
  * Output a <button>Label</button> form element
+ * @extends control
  */
 export default class controlButton extends control {
   /**
    * build a text DOM element, supporting other jquery text form-control's
-   * @return {Object} DOM Element to be injected into the form.
+   * @return {{field: HTMLElement, layout: string}} DOM Element to be injected into the form.
    */
   build() {
     return {

src/js/control/custom.js

@@ -4,6 +4,7 @@ import mi18n from 'mi18n'
 /**
  * Support for custom controls
  * Implementing support for custom templates being passed as options to formBuilder/Render
+ * @extends control
  */
 export default class controlCustom extends control {
   /**
@@ -79,7 +80,7 @@ export default class controlCustom extends control {
 
   /**
    * Returns any custom fields that map to an existing type/subtype combination
-   * @param  {String} type optional type of control we want to look up
+   * @param  {string|false} type optional type of control we want to look up
    * subtypes of. If not specified will return all types
    * @return {Array} registered custom lookup keys
    */
@@ -92,7 +93,7 @@ export default class controlCustom extends control {
 
   /**
    * Retrieve the class for a specified control type
-   * @param {String} lookup - custom control lookup to check for
+   * @param {string} lookup - custom control lookup to check for
    * @return {Class} control subclass as defined in the call to register
    */
   static lookup(lookup) {
@@ -101,15 +102,15 @@ export default class controlCustom extends control {
 
   /**
    * Class configuration - return the icons & label translations defined in register
-   * @return {Class} definition object
+   * @return {object} definition object
    */
   static get definition() {
     return controlCustom.def
   }
 
   /**
    * build a custom control defined in the templates option
-   * @return {Object} DOM Element to be injected into the form.
+   * @return {{field: any, layout: any}} DOM Element to be injected into the form.
    */
   build() {
     let custom = controlCustom.templates[this.type]
@@ -149,7 +150,7 @@ export default class controlCustom extends control {
       this.css = custom.css
     }
 
-    // handle onrender events & return
+    // handle onRender events & return
     this.onRender = custom.onRender
     return {
       field: custom.field,

src/js/control/file.fineuploader.js

@@ -30,6 +30,8 @@ import controlText from './text'
  *
  * If you wish to define a custom uploader handler URL, define controlConfig.file.handler in the formbuilder options. Defaults to /upload
  * If you wish to define a custom template for the interface, this can be defined in controlConfig.file.template. It defaults to the gallery template provided by the Fineuploader project
+ *
+ * @extends control
  */
 export default class controlFineUploader extends controlText {
   /**

src/js/control/hidden.js

@@ -3,6 +3,7 @@ import control from '../control'
 /**
  * Hidden input class
  * Output a <input type="hidden" ... /> form element
+ * @extends control
  */
 export default class controlHidden extends control {
   /**

src/js/control/paragraph.js

@@ -3,6 +3,7 @@ import utils from '../utils'
 /**
  * Text input class
  * Output a <input type="text" ... /> form element
+ * @extends control
  */
 export default class controlParagraph extends control {
   /**

src/js/control/select.js

@@ -4,6 +4,7 @@ import { trimObj } from '../utils'
 /**
  * Text input class
  * Output a <input type="text" ... /> form element
+ * @extends control
  */
 export default class controlSelect extends control {
   /**

src/js/control/text.js

@@ -3,6 +3,7 @@ import control from '../control'
 /**
  * Text input class
  * Output a <input type="text" ... /> form element
+ * @extends control
  */
 export default class controlText extends control {
   /**

src/js/control/textarea.js

@@ -3,6 +3,7 @@ import control from '../control'
 /**
  * Text input class
  * Output a <input type="text" ... /> form element
+ * @extends control
  */
 export default class controlTextarea extends control {
   /**
@@ -41,7 +42,7 @@ export default class controlTextarea extends control {
 
   /**
    * extend the default events to add a prerender for textareas
-   * @param {String} eventType
+   * @param {string} eventType
    * @return {Function} prerender function
    */
   on(eventType) {

src/js/control/textarea.quill.js

@@ -4,6 +4,7 @@ import utils from '../utils'
 /**
  * Quill rich text editor element
  * See https://quilljs.com/ for more info
+ * @extends controlTextarea
  */
 export default class controlQuill extends controlTextarea {
   /**

src/js/control/textarea.tinymce.js

@@ -15,6 +15,7 @@ import controlTextarea from './textarea'
  *    }
  * };
  * ```
+ * @extends controlTextarea
  */
 export default class controlTinymce extends controlTextarea {
   /**

src/js/form-builder.js

@@ -398,7 +398,7 @@ function FormBuilder(opts, element, $) {
    * Add data for field with options [select, checkbox-group, radio-group]
    *
    * @param  {Object} fieldData
-   * @return {String} field options markup
+   * @return {string} field options markup
    */
   const fieldOptions = function (fieldData) {
     const { type, values } = fieldData
@@ -509,8 +509,8 @@ function FormBuilder(opts, element, $) {
 
   /**
    * Build the editable properties for the field
-   * @param  {object} values configuration object for advanced fields
-   * @return {String}        markup for advanced fields
+   * @param  {Object} values configuration object for advanced fields
+   * @return {string}        markup for advanced fields
    */
   const advFields = values => {
     const { type } = values
@@ -655,7 +655,7 @@ function FormBuilder(opts, element, $) {
   /**
    * Detects the type of user defined attribute
    * @param {Object} attrData attribute config
-   * @return {String} type of user attr
+   * @return {string} type of user attr
    */
   function userAttrType(attrData) {
     return (
@@ -670,8 +670,8 @@ function FormBuilder(opts, element, $) {
   /**
    *
    * @param {Object} values    field attributes
-   * @param {String} subType   subType
-   * @return {Boolean}         indicates whether or not the field has a subtype
+   * @param {string} subType   subType
+   * @return {boolean}         indicates whether or not the field has a subtype
    */
   function hasSubType(values, subType) {
     return values.subtype && values.subtype === subType
@@ -681,7 +681,7 @@ function FormBuilder(opts, element, $) {
    * Processes typeUserAttrs
    * @param  {Object} typeUserAttr option
    * @param  {Object} values       field attributes
-   * @return {String}              markup for custom user attributes
+   * @return {string}              markup for custom user attributes
    */
   function processTypeUserAttrs(typeUserAttr, values) {
     const advField = []
@@ -736,9 +736,9 @@ function FormBuilder(opts, element, $) {
 
   /**
    * Text input value for attribute
-   * @param  {String} name
+   * @param  {string} name
    * @param  {Object} inputAttrs also known as values
-   * @return {String}       input markup
+   * @return {string}       input markup
    */
   function inputUserAttrs(name, inputAttrs) {
     const { class: classname, className, ...attrs } = inputAttrs
@@ -776,9 +776,9 @@ function FormBuilder(opts, element, $) {
   /**
    * Select input for multiple choice user attributes
    * @todo  replace with selectAttr
-   * @param  {String} name
+   * @param  {string} name
    * @param  {Object} fieldData
-   * @return {String}         select markup
+   * @return {string}         select markup
    */
   function selectUserAttrs(name, fieldData) {
     const { multiple, options, label: labelText, value, class: classname, className, ...restData } = fieldData
@@ -891,9 +891,9 @@ function FormBuilder(opts, element, $) {
 
   /**
    * Add a number attribute to a field.
-   * @param  {String} attribute
+   * @param  {string} attribute
    * @param  {Object} values
-   * @return {String} markup for number attribute
+   * @return {string} markup for number attribute
    */
   const numberAttribute = (attribute, values) => {
     const { class: classname, className, ...attrs } = values
@@ -920,10 +920,10 @@ function FormBuilder(opts, element, $) {
 
   /**
    * selectAttribute
-   * @param  {String} attribute  attribute name
+   * @param  {string} attribute  attribute name
    * @param  {Object} values     aka attrs
    * @param  {Array} optionData  select field option data
-   * @return {String}            select input makrup
+   * @return {string}            select input makrup
    */
   const selectAttribute = (attribute, values, optionData) => {
     const selectOptions = optionData.map((option, i) => {
@@ -958,10 +958,10 @@ function FormBuilder(opts, element, $) {
 
   /**
    * Generate some text inputs for field attributes, **will be replaced**
-   * @param  {String} attribute
+   * @param  {string} attribute
    * @param  {Object} values
-   * @param  {Boolean} isHidden
-   * @return {String}
+   * @param  {boolean} isHidden
+   * @return {string}
    */
   const textAttribute = (attribute, values, isHidden = false) => {
     const textArea = ['paragraph']
@@ -1776,7 +1776,7 @@ function FormBuilder(opts, element, $) {
   /**
    * Toggle multiple select options
    * @param  {Object} e click event
-   * @return {String} newType
+   * @return {string} newType
    */
   $stage.on('change', '.fld-multiple', e => {
     const newType = e.target.checked ? 'checkbox' : 'radio'
@@ -2296,15 +2296,16 @@ function FormBuilder(opts, element, $) {
     rowWrapper.children(`div${colWrapperClassSelector}`).each((i, elem) => {
       const colWrapper = $(`#${elem.id}`)
       const fieldID = colWrapper.find('li').attr('id')
-      const fieldType = $(`#${fieldID}`).attr('type')
+      const field = $(`#${fieldID}`)
+      const fieldType = field.attr('type')
 
-      let label = $(`#label-${fieldID}`).html()
-      if (fieldType == 'hidden' || fieldType == 'paragraph') {
-        label = $(`#name-${fieldID}`).val()
+      let label = field.html()
+      if (fieldType === 'hidden' || fieldType === 'paragraph') {
+        label = field.val()
       }
 
       if (!label) {
-        label = $(`#${fieldID}`).attr('id')
+        label = field.attr('id')
       }
 
       //Highlight the current field being worked on