From a67535c3ea7369e7eb14480dc63bffa5c68976a8 Mon Sep 17 00:00:00 2001
From: azu <azuciao@gmail.com>
Date: Wed, 1 Jun 2016 01:43:35 +0900
Subject: [PATCH] fix(component): fix unexpected match case

check parent and child key before matching value
---
 src/utils/match-props.js     |  6 ++++++
 test/ToggleOrPattern-test.js | 22 +++++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/utils/match-props.js b/src/utils/match-props.js
index e81e096..79b5526 100644
--- a/src/utils/match-props.js
+++ b/src/utils/match-props.js
@@ -5,6 +5,9 @@ export function matchAnd(keys, parentProps, childProps) {
     // all match
     return keys.every(parentKey => {
         return childKeys.some(childKey => {
+            if (parentKey !== childKey) {
+                return false;
+            }
             const parentValue = parentProps[parentKey];
             const childValue = childProps[childKey];
             if (childValue === parentValue) {
@@ -22,6 +25,9 @@ export function matchOr(keys, parentProps, childProps) {
     // some match
     return keys.some(parentKey => {
         return childKeys.some(childKey => {
+            if (parentKey !== childKey) {
+                return false;
+            }
             const parentValue = parentProps[parentKey];
             const childValue = childProps[childKey];
             if (childValue === parentValue) {
diff --git a/test/ToggleOrPattern-test.js b/test/ToggleOrPattern-test.js
index a428610..d2b4b23 100644
--- a/test/ToggleOrPattern-test.js
+++ b/test/ToggleOrPattern-test.js
@@ -83,6 +83,26 @@ describe('<ToggleOrPattern />', () => {
         const y = wrapper.find(ComponentX);
         assert(y.length === 1);
         assert.equal(wrapper.html(), `<div class="TogglePattern ToggleOrPattern"><div>Visible</div><div>Hidden</div></div>`)
-
+    });
+    it('render match Or pattern', () => {
+        class FixedBar extends React.Component {
+            render() {
+                return <div>{this.props.children}</div>
+            }
+        }
+        const Order = {
+            High: true,
+            Middle: true,
+            Low: false
+        };
+        const wrapper = shallow(<ToggleOrPattern High={Order.High} Middle={Order.Middle} Low={Order.Low}>
+            <FixedBar High={true}>High</FixedBar>
+            <FixedBar Middle={true}>Middle</FixedBar>
+            <FixedBar Low={true}>Low</FixedBar>
+            <FixedBar Middle={true}>Middle</FixedBar>
+        </ToggleOrPattern>);
+        // remove `Low`
+        assert.equal(wrapper.html(), `<div class="TogglePattern ToggleOrPattern"><div>High</div><div>Middle</div><div>Middle</div></div>`)
     });
 });
+