fix: handle newlines in classnames (#919)

* fix: handle newlines in classnames

* improve comment

* tidy tests

src/__tests__/autocapture-utils.test.ts

@@ -12,6 +12,7 @@ import {
     getNestedSpanText,
     getDirectAndNestedSpanText,
     getElementsChainString,
+    getClassNames,
 } from '../autocapture-utils'
 import { document } from '../utils/globals'
 import { makeMouseEvent } from './autocapture.test'
@@ -397,4 +398,36 @@ describe(`Autocapture utility functions`, () => {
             expect(elementChain).toEqual('div:text="text"nth-child="1"nth-of-type="2"')
         })
     })
+
+    describe('getClassNames', () => {
+        it('should cope when there is no classNames attribute', () => {
+            const el = document!.createElement('div')
+            const classNames = getClassNames(el)
+            expect(classNames).toEqual([])
+        })
+        it('should cope when there is an empty classNames attribute', () => {
+            const el = document!.createElement('div')
+            el.className = ''
+            const classNames = getClassNames(el)
+            expect(classNames).toEqual([])
+        })
+        it('should cope with a normal class list', () => {
+            const el = document!.createElement('div')
+            el.className = 'class1 class2'
+            const classNames = getClassNames(el)
+            expect(classNames).toEqual(['class1', 'class2'])
+        })
+        it('should cope with a class list with empty strings and tabs', () => {
+            const el = document!.createElement('div')
+            el.className = '  class1        class2  '
+            const classNames = getClassNames(el)
+            expect(classNames).toEqual(['class1', 'class2'])
+        })
+        it('should cope with a class list with unexpected new lines', () => {
+            const el = document!.createElement('div')
+            el.className = '  class1\r\n   \r\n     \n     class2  '
+            const classNames = getClassNames(el)
+            expect(classNames).toEqual(['class1', 'class2'])
+        })
+    })
 })

src/autocapture-utils.ts

@@ -1,27 +1,32 @@
-/*
- * Get the className of an element, accounting for edge cases where element.className is an object
- * @param {Element} el - element to get the className of
- * @returns {string} the element's class
- */
-
 import { AutocaptureConfig, Properties } from 'types'
 import { _each, _entries, _includes, _trim } from './utils'
 
 import { _isArray, _isNull, _isString, _isUndefined } from './utils/type-utils'
 import { logger } from './utils/logger'
 import { window } from './utils/globals'
 
-export function getClassName(el: Element): string {
+/*
+ * Get the className of an element, accounting for edge cases where element.className is an object
+ *
+ * Because this is a string it can contain unexpected characters
+ * So, this method safely splits the className and returns that array.
+ */
+export function getClassNames(el: Element): string[] {
+    let className = ''
     switch (typeof el.className) {
         case 'string':
-            return el.className
+            className = el.className
+            break
         // TODO: when is this ever used?
         case 'object': // handle cases where className might be SVGAnimatedString or some other type
-            return ('baseVal' in el.className ? (el.className as any).baseVal : null) || el.getAttribute('class') || ''
+            className =
+                ('baseVal' in el.className ? (el.className as any).baseVal : null) || el.getAttribute('class') || ''
+            break
         default:
-            // future proof
-            return ''
+            className = ''
     }
+
+    return className.length ? _trim(className).split(/\s+/) : []
 }
 
 /*
@@ -203,13 +208,13 @@ export function shouldCaptureDomEvent(
  */
 export function shouldCaptureElement(el: Element): boolean {
     for (let curEl = el; curEl.parentNode && !isTag(curEl, 'body'); curEl = curEl.parentNode as Element) {
-        const classes = getClassName(curEl).split(' ')
+        const classes = getClassNames(curEl)
         if (_includes(classes, 'ph-sensitive') || _includes(classes, 'ph-no-capture')) {
             return false
         }
     }
 
-    if (_includes(getClassName(el).split(' '), 'ph-include')) {
+    if (_includes(getClassNames(el), 'ph-include')) {
         return true
     }
 

src/autocapture.ts

@@ -1,6 +1,6 @@
 import { _bind_instance_methods, _each, _extend, _includes, _register_event, _safewrap_instance_methods } from './utils'
 import {
-    getClassName,
+    getClassNames,
     getSafeText,
     isElementNode,
     isSensitiveElement,
@@ -89,9 +89,9 @@ const autocapture = {
             }
         }
 
-        const classes = getClassName(elem)
+        const classes = getClassNames(elem)
         if (classes.length > 0)
-            props['classes'] = classes.split(' ').filter(function (c) {
+            props['classes'] = classes.filter(function (c) {
                 return c !== ''
             })
 
@@ -219,7 +219,7 @@ const autocapture = {
                 }
 
                 // allow users to programmatically prevent capturing of elements by adding class 'ph-no-capture'
-                const classes = getClassName(el).split(' ')
+                const classes = getClassNames(el)
                 if (_includes(classes, 'ph-no-capture')) {
                     explicitNoCapture = true
                 }