Fix bug in detecting props change - if the new props have an inner object/array with additional/less keys this was still considered equal

Author: brafdlog

src/__tests__/ChartTests.js

@@ -14,6 +14,62 @@ describe('Chart re-rendering', () => {
         expect(updateRequired).toBeTruthy();
     });
 
+    it('required when data is changed in an inner object/array of the data', () => {
+        const originalData = {
+            "data": {
+                "labels": [
+                    1
+                ],
+                "datasets": [
+                    {
+                        "label": "a",
+                        "backgroundColor": "#36A2EB",
+                        "data": [
+                          122968
+                        ]
+                    },
+                    {
+                        "label": "b",
+                        "backgroundColor": "#FF6384",
+                        "data": [
+                          14738
+                        ]
+                    }
+                ]
+            },
+            "type": "bar",
+            "legend": {
+                "display": true,
+                "position": "bottom"
+            }
+        }
+        // The new data has only one data set instead of two
+        const newData = {
+            "data": {
+                "labels": [
+                    1
+                ],
+                "datasets": [
+                    {
+                        "label": "a",
+                        "backgroundColor": "#36A2EB",
+                        "data": [
+                          122968
+                        ]
+                    }
+                ]
+            },
+            "type": "bar",
+            "legend": {
+                "display": true,
+                "position": "bottom"
+            }
+        }
+        const chart = new ChartComponent(originalData);
+        const updateRequired = chart.shouldComponentUpdate(newData);
+        expect(updateRequired).toBeTruthy();
+    });
+
     it('required when chart options change', () => {
         const chart = new ChartComponent({type: 'bar', options: {hover: {mode: 'single'}}});
         const updateRequired = chart.shouldComponentUpdate({type: 'bar', options: {hover: {mode: 'label'}}});

src/utils/deepEqual.js

@@ -22,10 +22,15 @@ const deepEqual = (objA, objB) => {
 	}
 
 	let keysA = Object.keys(objA);
+	let keysB = Object.keys(objB);
+	let allKeys = keysA.concat(keysB);
 
-	// Test for A's keys different from B.
-	for (let i = 0; i < keysA.length; i++) {
-		if (!hasOwnProperty.call(objB, keysA[i])) {
+	// Verify both objects have all the keys
+	for (let i = 0; i < allKeys.length; i++) {
+		if (!hasOwnProperty.call(objB, allKeys[i])) {
+			return false;
+		}
+		if (!hasOwnProperty.call(objA, allKeys[i])) {
 			return false;
 		}
 	}