New: Add useAsKey option

Author: thomasthiebaud

src/config.ts

@@ -65,6 +65,7 @@ export interface Config {
   dom?: DOMConfig
   overrides?: SelectorsToElement,
   useFragment?: boolean,
+  useAsKey: string[],
 }
 
 /**
@@ -76,6 +77,7 @@ const mandatoryConfig: Config = {
     RETURN_DOM_FRAGMENT: true,
     RETURN_DOM_IMPORT: false,
   },
+  useAsKey: ['key'],
 }
 
 /**
@@ -85,6 +87,7 @@ const defaultConfig: Config = {
   dom: {
     ADD_ATTR: ['key'],
   },
+  useAsKey: ['key'],
   useFragment: false,
 }
 

src/react.ts

@@ -54,7 +54,7 @@ const reactAttributesMap: { [keyof: string]: string } = {
   usemap: 'useMap',
 }
 
-function transformAttributes(attributesMap: NamedNodeMap): Attributes {
+function transformAttributes(attributesMap: NamedNodeMap, options: Config): Attributes {
   const attributes = getAttributes(attributesMap)
   const transformedAttributes: Attributes = {}
   Object.keys(attributes).forEach((key) => {
@@ -63,7 +63,16 @@ function transformAttributes(attributesMap: NamedNodeMap): Attributes {
     } else {
       transformedAttributes[key] = attributes[key]
     }
+
+    if (!transformedAttributes.key) {
+      const isKey = options.useAsKey.some((possibleKey) => possibleKey === key)
+
+      if (isKey) {
+        transformedAttributes.key = attributes[key]
+      }
+    }
   })
+
   return transformedAttributes
 }
 
@@ -72,7 +81,7 @@ function renderTextNode(node: Node & ChildNode) {
 }
 
 function renderElementNode(node: Node & ChildNode, options: Config) {
-  const element = transform(node as EnrichedElement)
+  const element = transform(node as EnrichedElement, options)
 
   if (element.override) {
     return React.cloneElement(element.override(element.attributes, node.textContent))
@@ -84,9 +93,9 @@ function renderElementNode(node: Node & ChildNode, options: Config) {
   return React.createElement(element.nodeName, element.attributes)
 }
 
-function transform(element: EnrichedElement) {
+function transform(element: EnrichedElement, options: Config) {
   return {
-    attributes: transformAttributes(element.attributes),
+    attributes: transformAttributes(element.attributes, options),
     childNodes: element.childNodes,
     nodeName: element.nodeName.toLowerCase(),
     nodeType: element.nodeType,

tests/config.spec.ts

@@ -11,6 +11,7 @@ describe('Options', () => {
           RETURN_DOM_FRAGMENT: true,
           RETURN_DOM_IMPORT: false,
         },
+        useAsKey: ['key'],
         useFragment: false,
       })
     })
@@ -29,6 +30,7 @@ describe('Options', () => {
           RETURN_DOM_FRAGMENT: true,
           RETURN_DOM_IMPORT: false,
         },
+        useAsKey: ['key'],
         useFragment: false,
       })
     })
@@ -46,6 +48,7 @@ describe('Options', () => {
           RETURN_DOM_FRAGMENT: true,
           RETURN_DOM_IMPORT: false,
         },
+        useAsKey: ['key'],
         useFragment: false,
       })
     })

tests/react.spec.ts

@@ -16,7 +16,7 @@ describe('React', () => {
       link.setAttribute('key', 'link')
       div.appendChild(link)
 
-      const wrapper = shallowWrapper(render(div.childNodes, {}))
+      const wrapper = shallowWrapper(render(div.childNodes, { useAsKey: ['key'] }))
       expect(wrapper.find('a').text()).toEqual('Link')
     })
 
@@ -26,7 +26,7 @@ describe('React', () => {
       newLine.setAttribute('key', 'test')
       div.appendChild(newLine)
 
-      const wrapper = shallowWrapper(render(div.childNodes, {}))
+      const wrapper = shallowWrapper(render(div.childNodes, { useAsKey: ['key'] }))
       expect(wrapper.find('br')).toHaveLength(1)
     })
 
@@ -35,7 +35,7 @@ describe('React', () => {
       const text = document.createTextNode('Text')
       div.appendChild(text)
 
-      const wrapper = shallowWrapper(render(div.childNodes, {}))
+      const wrapper = shallowWrapper(render(div.childNodes, { useAsKey: ['key'] }))
       expect(wrapper.text()).toEqual('Text')
     })
 
@@ -44,7 +44,7 @@ describe('React', () => {
       const comment = document.createComment('Comment')
       div.appendChild(comment)
 
-      const wrapper = shallowWrapper(render(div.childNodes, {}))
+      const wrapper = shallowWrapper(render(div.childNodes, { useAsKey: ['key'] }))
       expect(wrapper.children()).toHaveLength(0)
     })
 
@@ -56,7 +56,7 @@ describe('React', () => {
       span.setAttribute('key', 'test')
       div.appendChild(span)
 
-      const wrapper = shallowWrapper(render(div.childNodes, {}))
+      const wrapper = shallowWrapper(render(div.childNodes, { useAsKey: ['key'] }))
       expect(wrapper.find('span')).toHaveLength(1)
       expect(wrapper.find('span').prop('htmlFor')).toEqual('test')
       expect(wrapper.find('span').prop('className')).toEqual('test')
@@ -72,9 +72,43 @@ describe('React', () => {
         link.textContent = 'Link'
         div.appendChild(link)
 
-        const wrapper = shallowWrapper(render(div.childNodes, { useFragment: true }))
+        const wrapper = shallowWrapper(render(div.childNodes, { useFragment: true, useAsKey: ['key'] }))
         expect(wrapper.find('a').text()).toEqual('Link')
       })
     })
+
+    describe('#useAsKey', () => {
+      it('should use key as a default key', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        link.setAttribute('key', 'link')
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { useFragment: true, useAsKey: ['key'] }))
+        expect(wrapper.find('a').key()).toEqual('link')
+      })
+
+      it('should use other element in the list as fallback key', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        link.setAttribute('class', 'fallback key')
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { useFragment: true, useAsKey: ['key', 'id', 'class'] }))
+        expect(wrapper.find('a').key()).toEqual('fallback key')
+      })
+
+      it('should use null if no key match', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { useFragment: true, useAsKey: ['key', 'id'] }))
+        expect(wrapper.find('a').key()).toEqual(null)
+      })
+    })
   })
 })