fix(system): allow wrapping selectors in chain (#7304)

Refs #7157

src/core/system.js

@@ -392,10 +392,14 @@ function systemExtend(dest={}, src={}) {
   if(isObject(statePlugins)) {
     for(let namespace in statePlugins) {
       const namespaceObj = statePlugins[namespace]
-      if(!isObject(namespaceObj) || !isObject(namespaceObj.wrapActions)) {
+      if(!isObject(namespaceObj)) {
         continue
       }
-      const { wrapActions } = namespaceObj
+
+      const { wrapActions, wrapSelectors } = namespaceObj
+
+      // process action wrapping
+      if (isObject(wrapActions)) {
         for(let actionName in wrapActions) {
           let action = wrapActions[actionName]
 
@@ -411,6 +415,25 @@ function systemExtend(dest={}, src={}) {
 
         }
       }
+
+      // process selector wrapping
+      if (isObject(wrapSelectors)) {
+        for(let selectorName in wrapSelectors) {
+          let selector = wrapSelectors[selectorName]
+
+          // This should only happen if dest is the first plugin, since invocations after that will ensure its an array
+          if(!Array.isArray(selector)) {
+            selector = [selector]
+            wrapSelectors[selectorName] = selector // Put the value inside an array
+          }
+
+          if(src && src.statePlugins && src.statePlugins[namespace] && src.statePlugins[namespace].wrapSelectors && src.statePlugins[namespace].wrapSelectors[selectorName]) {
+            src.statePlugins[namespace].wrapSelectors[selectorName] = wrapSelectors[selectorName].concat(src.statePlugins[namespace].wrapSelectors[selectorName])
+          }
+
+        }
+      }
+    }
   }
 
   return deepExtend(dest, src)

test/unit/core/system/wrapSelectors.js

@@ -0,0 +1,45 @@
+import System from "core/system"
+
+describe("wrapSelectors", () => {
+  it("should wrap correctly when registering multiple plugins targeting the same selector", function() {
+    const probeBase = {
+      statePlugins: {
+        probe: {
+          selectors: {
+            selectProbe: () => {
+              return "base"
+            }
+          }
+        }
+      }
+    }
+    const probeWrap1 = {
+      statePlugins: {
+        probe: {
+          wrapSelectors: {
+            selectProbe: (oriSelector) => (state, ...args) => {
+              const selectedValue = oriSelector(state, ...args)
+              return `${selectedValue}wrap1`
+            }
+          }
+        }
+      }
+    }
+    const probeWrap2 = {
+      statePlugins: {
+        probe: {
+          wrapSelectors: {
+            selectProbe: (oriSelector) => (state, ...args) => {
+              const selectedValue = oriSelector(state, ...args)
+              return `${selectedValue}wrap2`
+            }
+          }
+        }
+      }
+    }
+
+    const system = new System({ plugins: [probeBase, probeWrap1, probeWrap2] })
+
+    expect(system.getSystem().probeSelectors.selectProbe()).toEqual("basewrap1wrap2")
+  })
+})