Merge pull request #1501 from lucasnetau/newtests

Improve test coverage for tinymce, quill, select, and custom controls

package.json

@@ -186,7 +186,8 @@
     "collectCoverage": true,
     "coverageDirectory": ".jest/coverage",
     "coveragePathIgnorePatterns": [
-      "tests/"
+      "tests/",
+      "<rootDir>/src/js/control/index.js"
     ],
     "testEnvironment": "jsdom",
     "testEnvironmentOptions": {

src/js/control/custom.js

@@ -18,8 +18,8 @@ export default class controlCustom extends control {
    */
   build() {
     let custom = this.template
+    /* istanbul ignore next */
     if (!custom) {
-      /* istanbul ignore next */
       return control.error(
         `Invalid custom control type '${this.type}'. Please ensure you have registered it correctly as a template option.`,
       )

src/js/customControls.js

@@ -133,17 +133,17 @@ export default class customControls {
       const value = typeof i18n == 'object' ? i18n[lookupCamel] || i18n[type] : i18n
       if (value) {
         return value
+      } else {
+        // otherwise check the mi18n object - allow for mapping a lookup to a custom mi18n lookup
+        let mapped = def.mi18n
+        if (typeof mapped === 'object') {
+          mapped = mapped[lookupCamel] || mapped[type]
+        }
+        if (!mapped) {
+          mapped = lookupCamel
+        }
+        return mi18n.get(mapped)
       }
-
-      // otherwise check the mi18n object - allow for mapping a lookup to a custom mi18n lookup
-      let mapped = def.mi18n
-      if (typeof mapped === 'object') {
-        mapped = mapped[lookupCamel] || mapped[type]
-      }
-      if (!mapped) {
-        mapped = lookupCamel
-      }
-      return mi18n.get(mapped)
   }
 
   get definition() {

src/js/events.js

@@ -10,6 +10,7 @@
  */
 function createNewEvent(eventName) {
   let event
+  /* istanbul ignore else - historical InternetExplorer only */
   if (typeof Event === 'function') {
     event = new Event(eventName)
   } else {

tests/control/custom.test.js

@@ -366,4 +366,42 @@ describe('Test Custom Control', () => {
     fbWrap.formRender({formData, templates})
     expect(fbWrap.find('span')[0].textContent).toBe('not preview')
   })
+
+  test('test loading js/css from custom template', async () => {
+    const fbWrap = $('<div>')
+    const cbOnRender = jest.fn()
+
+    const formData = [
+      {
+        'type': 'starRating',
+        'required': false,
+        'label': 'Star Rating',
+        'name': 'starRating-1697591966052-0'
+      },
+    ]
+    const templates = {
+      starRating: function(fieldData) {
+        const control = this
+        control.field = `<span id="${fieldData.name}">`
+        return {
+          field: control.field,
+          onRender: () => {
+            $(control.field).rateYo( {rating: 2} )
+            cbOnRender()
+          },
+          js: 'https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js',
+          css: 'https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css'
+        }
+      }
+    }
+
+    fbWrap.formRender({formData, templates})
+
+    await new Promise(resolve => setTimeout(resolve, 2000))
+
+    expect(cbOnRender.mock.calls).toHaveLength(1)
+
+    expect(fbWrap.find('#starRating-1697591966052-0')[0].outerHTML).toBe('<span id="starRating-1697591966052-0"></span>')
+
+  })
 })

tests/control/select.test.js

@@ -78,4 +78,38 @@ describe('Test Text Control', () => {
     element.value = 'option-1'
     expect(element.validity.valid).toBeTruthy()
   })
+
+  test('userData overrides default selections', async () => {
+    const controlInstance = new controlSelect({
+      'type': 'select',
+      'required': true,
+      'label': 'Select',
+      'className': 'form-control',
+      'placeholder': 'Select an option...',
+      'name': 'test-select',
+      'multiple': false,
+      'values': [
+        {
+          'label': 'Option 1',
+          'value': 'option-1',
+          'selected': true
+        },
+        {
+          'label': 'Option 2',
+          'value': 'option-2',
+          'selected': false
+        },
+        {
+          'label': 'Option 3',
+          'value': 'option-3',
+          'selected': false
+        }
+      ],
+      userData: ['option-2']
+    }, false)
+
+    const element = controlInstance.build()
+    controlInstance.onRender()
+    expect(element.value).toBe('option-2')
+  })
 })

tests/control/textarea.test.js

@@ -1,6 +1,21 @@
 import controlTextarea from '../../src/js/control/textarea.js'
 import controlTinymce from '../../src/js/control/textarea.tinymce'
 import controlQuill from '../../src/js/control/textarea.quill'
+import { getScripts, getStyles, isCached } from '../../src/js/utils'
+
+const sleep = milliseconds => {
+  return new Promise(resolve => setTimeout(resolve, milliseconds))
+}
+
+const loadResources = async (js, css) => {
+  if (css) {
+    getStyles(css)
+  }
+  if (js && !isCached(js)) {
+    await getScripts(js)
+  }
+}
+
 describe('Test Text Control', () => {
   test('test building control element', async () => {
     const controlInstance = new controlTextarea({
@@ -35,7 +50,7 @@ describe('Test Text Control', () => {
 })
 
 describe('Test building text variations and subtypes', () => {
-    test('can render TinyMCE', () => {
+    test('can render TinyMCE', async () => {
       const controlInstance = new controlTinymce({
         'type': 'textarea',
         'required': false,
@@ -45,12 +60,22 @@ describe('Test building text variations and subtypes', () => {
         'access': false,
         'subtype': 'tinymce',
       }, false)
+      controlInstance.configure()
       const element = controlInstance.build()
       expect(element.constructor.name).toBe('HTMLTextAreaElement')
       expect(element.type).toBe('textarea')
+
+      window.document.body.appendChild(element) //Element must be attached to dom for tinymce theme to work otherwise exception thrown
+
+      await loadResources(controlInstance.js, controlInstance.css)
+
+      expect(window.tinymce).not.toBeUndefined()
+      controlInstance.onRender()
+      await sleep(2000)
+      expect(window.tinymce.get('tinymce-elem')).not.toBeNull()
     })
 
-    test('can render Quill', () => {
+    test('can render Quill', async () => {
       const controlInstance = new controlQuill({
         'type': 'textarea',
         'required': false,
@@ -60,7 +85,13 @@ describe('Test building text variations and subtypes', () => {
         'access': false,
         'subtype': 'quill',
       }, false)
+      controlInstance.configure()
       const element = controlInstance.build()
       expect(element.constructor.name).toBe('HTMLDivElement')
+
+      window.document.body.appendChild(element) //Element must be attached to dom for quill to work otherwise exception thrown
+
+      await loadResources(controlInstance.js, controlInstance.css)
+      controlInstance.onRender()
     })
 })