fix: normalize objects before equality checks (#5006)

* fix: fix missing key and undefined checks

* test: add assertions tests

* refactor: normalize objects to use fast-deep-equal logic

* ci: fix "cannot find matching keyid" corepack error

* ci: upgrade node to 22.11

* ci: use sudo for npm install

* chore: added changeset

---------

Co-authored-by: Abdelrahman Awad <logaretm1@gmail.com>

Author: vonBrax

.changeset/tiny-lamps-kneel.md

@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+fix: normalize objects before equality checks closes #5006

.circleci/config.yml

@@ -6,19 +6,26 @@ jobs:
   # Below is the definition of your job to build and test your app, you can rename and customize it as you want.
   test:
     docker:
-      - image: cimg/node:22.10
+      - image: cimg/node:22.11
     steps:
       # Checkout the code as the first step.
       - checkout
       - restore_cache:
           name: Restore pnpm Package Cache
           keys:
             - pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
+      - run:
+          name: Use latest Corepack
+          command: |
+            echo "Before: corepack version => $(corepack --version || echo 'not installed')"
+            sudo npm install -g corepack@latest
+            echo "After : corepack version => $(corepack --version)"
       - run:
           name: Install pnpm package manager
           command: |
             corepack enable --install-directory ~/bin
             corepack prepare pnpm@latest-9 --activate
+            pnpm --version
             pnpm config set store-dir .pnpm-store
       - run:
           name: Install dependencies

packages/vee-validate/src/utils/assertions.ts

@@ -163,39 +163,36 @@ export function isEqual(a: any, b: any) {
     if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
     if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
 
-    keys = Object.keys(a);
-    length = keys.length - countUndefinedValues(a, keys);
+    // Remove undefined values before object comparison
+    a = normalizeObject(a);
+    b = normalizeObject(b);
 
-    if (length !== Object.keys(b).length - countUndefinedValues(b, Object.keys(b))) return false;
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) return false;
 
-    for (i = length; i-- !== 0; ) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-    }
+    for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
 
     for (i = length; i-- !== 0; ) {
       // eslint-disable-next-line no-var
       var key = keys[i];
-
       if (!isEqual(a[key], b[key])) return false;
     }
 
     return true;
   }
 
   // true if both NaN, false otherwise
-
   return a !== a && b !== b;
 }
 
-function countUndefinedValues(a: any, keys: string[]) {
-  let result = 0;
-  for (let i = keys.length; i-- !== 0; ) {
-    // eslint-disable-next-line no-var
-    var key = keys[i];
-
-    if (a[key] === undefined) result++;
-  }
-  return result;
+/**
+ * Returns a new object where keys with an `undefined` value are removed.
+ *
+ * @param a object to normalize
+ */
+function normalizeObject(a: Record<PropertyKey, unknown>) {
+  return Object.fromEntries(Object.entries(a).filter(([, value]) => value !== undefined));
 }
 
 export function isFile(a: unknown): a is File {

packages/vee-validate/tests/utils/assertions.spec.ts

@@ -0,0 +1,231 @@
+import { isEqual } from 'packages/vee-validate/src/utils';
+
+describe('assertions', () => {
+  test('equal objects are equal', () => {
+    const a1 = { field1: undefined, field2: 'value2', field3: 'value3' };
+    const a2 = { field1: undefined, field3: 'value3', field2: 'value2' };
+    const a3 = { field2: 'value2', field3: 'value3', field1: undefined };
+    const a4 = { field2: 'value2', field1: undefined, field3: 'value3' };
+    const a5 = { field3: 'value3', field1: undefined, field2: 'value2' };
+    const a6 = { field3: 'value3', field2: 'value2', field1: undefined };
+
+    const b1 = { field1: undefined, field2: 'value2', field3: 'value3' };
+    const b2 = { field1: undefined, field3: 'value3', field2: 'value2' };
+    const b3 = { field2: 'value2', field3: 'value3', field1: undefined };
+    const b4 = { field2: 'value2', field1: undefined, field3: 'value3' };
+    const b5 = { field3: 'value3', field1: undefined, field2: 'value2' };
+    const b6 = { field3: 'value3', field2: 'value2', field1: undefined };
+
+    expect(isEqual(a1, b1)).toBe(true);
+    expect(isEqual(a1, b2)).toBe(true);
+    expect(isEqual(a1, b3)).toBe(true);
+    expect(isEqual(a1, b4)).toBe(true);
+    expect(isEqual(a1, b5)).toBe(true);
+    expect(isEqual(a1, b6)).toBe(true);
+
+    expect(isEqual(a2, b1)).toBe(true);
+    expect(isEqual(a2, b2)).toBe(true);
+    expect(isEqual(a2, b3)).toBe(true);
+    expect(isEqual(a2, b4)).toBe(true);
+    expect(isEqual(a2, b5)).toBe(true);
+    expect(isEqual(a2, b6)).toBe(true);
+
+    expect(isEqual(a3, b1)).toBe(true);
+    expect(isEqual(a3, b2)).toBe(true);
+    expect(isEqual(a3, b3)).toBe(true);
+    expect(isEqual(a3, b4)).toBe(true);
+    expect(isEqual(a3, b5)).toBe(true);
+    expect(isEqual(a3, b6)).toBe(true);
+
+    expect(isEqual(a4, b1)).toBe(true);
+    expect(isEqual(a4, b2)).toBe(true);
+    expect(isEqual(a4, b3)).toBe(true);
+    expect(isEqual(a4, b4)).toBe(true);
+    expect(isEqual(a4, b5)).toBe(true);
+    expect(isEqual(a4, b6)).toBe(true);
+
+    expect(isEqual(a5, b1)).toBe(true);
+    expect(isEqual(a5, b2)).toBe(true);
+    expect(isEqual(a5, b3)).toBe(true);
+    expect(isEqual(a5, b4)).toBe(true);
+    expect(isEqual(a5, b5)).toBe(true);
+    expect(isEqual(a5, b6)).toBe(true);
+
+    expect(isEqual(a6, b1)).toBe(true);
+    expect(isEqual(a6, b2)).toBe(true);
+    expect(isEqual(a6, b3)).toBe(true);
+    expect(isEqual(a6, b4)).toBe(true);
+    expect(isEqual(a6, b5)).toBe(true);
+    expect(isEqual(a6, b6)).toBe(true);
+  });
+
+  test('equal objects where A has missing keys are equal', () => {
+    const a1 = { field2: 'value2', field3: 'value3' };
+    const a2 = { field3: 'value3', field2: 'value2' };
+
+    const b1 = { field1: undefined, field2: 'value2', field3: 'value3' };
+    const b2 = { field1: undefined, field3: 'value3', field2: 'value2' };
+    const b3 = { field2: 'value2', field3: 'value3', field1: undefined };
+    const b4 = { field2: 'value2', field1: undefined, field3: 'value3' };
+    const b5 = { field3: 'value3', field1: undefined, field2: 'value2' };
+    const b6 = { field3: 'value3', field2: 'value2', field1: undefined };
+
+    expect(isEqual(a1, b1)).toBe(true);
+    expect(isEqual(a1, b2)).toBe(true);
+    expect(isEqual(a1, b3)).toBe(true);
+    expect(isEqual(a1, b4)).toBe(true);
+    expect(isEqual(a1, b5)).toBe(true);
+    expect(isEqual(a1, b6)).toBe(true);
+
+    expect(isEqual(a2, b1)).toBe(true);
+    expect(isEqual(a2, b2)).toBe(true);
+    expect(isEqual(a2, b3)).toBe(true);
+    expect(isEqual(a2, b4)).toBe(true);
+    expect(isEqual(a2, b5)).toBe(true);
+    expect(isEqual(a2, b6)).toBe(true);
+  });
+
+  test('equal objects where B has missing keys are equal', () => {
+    const a1 = { field1: undefined, field2: 'value2', field3: 'value3' };
+    const a2 = { field1: undefined, field3: 'value3', field2: 'value2' };
+    const a3 = { field2: 'value2', field3: 'value3', field1: undefined };
+    const a4 = { field2: 'value2', field1: undefined, field3: 'value3' };
+    const a5 = { field3: 'value3', field1: undefined, field2: 'value2' };
+    const a6 = { field3: 'value3', field2: 'value2', field1: undefined };
+
+    const b1 = { field2: 'value2', field3: 'value3' };
+    const b2 = { field3: 'value3', field2: 'value2' };
+
+    expect(isEqual(a1, b1)).toBe(true);
+    expect(isEqual(a1, b2)).toBe(true);
+
+    expect(isEqual(a2, b1)).toBe(true);
+    expect(isEqual(a2, b2)).toBe(true);
+
+    expect(isEqual(a3, b1)).toBe(true);
+    expect(isEqual(a3, b2)).toBe(true);
+
+    expect(isEqual(a4, b1)).toBe(true);
+    expect(isEqual(a4, b2)).toBe(true);
+
+    expect(isEqual(a5, b1)).toBe(true);
+    expect(isEqual(a5, b2)).toBe(true);
+
+    expect(isEqual(a6, b1)).toBe(true);
+    expect(isEqual(a6, b2)).toBe(true);
+  });
+
+  test('different objects are not equal', () => {
+    const a1 = { field1: undefined, field2: 'value2', field3: 'value3' };
+    const a2 = { field1: undefined, field3: 'value3', field2: 'value2' };
+    const a3 = { field2: 'value2', field3: 'value3', field1: undefined };
+    const a4 = { field2: 'value2', field1: undefined, field3: 'value3' };
+    const a5 = { field3: 'value3', field1: undefined, field2: 'value2' };
+    const a6 = { field3: 'value3', field2: 'value2', field1: undefined };
+
+    const b1 = { field1: undefined, field2: 'value2', field3: 'DIFF' };
+    const b2 = { field1: undefined, field3: 'DIFF', field2: 'value2' };
+    const b3 = { field2: 'value2', field3: 'DIFF', field1: undefined };
+    const b4 = { field2: 'value2', field1: undefined, field3: 'DIFF' };
+    const b5 = { field3: 'DIFF', field1: undefined, field2: 'value2' };
+    const b6 = { field3: 'DIFF', field2: 'value2', field1: undefined };
+
+    expect(isEqual(a1, b1)).toBe(false);
+    expect(isEqual(a1, b2)).toBe(false);
+    expect(isEqual(a1, b3)).toBe(false);
+    expect(isEqual(a1, b4)).toBe(false);
+    expect(isEqual(a1, b5)).toBe(false);
+    expect(isEqual(a1, b6)).toBe(false);
+
+    expect(isEqual(a2, b1)).toBe(false);
+    expect(isEqual(a2, b2)).toBe(false);
+    expect(isEqual(a2, b3)).toBe(false);
+    expect(isEqual(a2, b4)).toBe(false);
+    expect(isEqual(a2, b5)).toBe(false);
+    expect(isEqual(a2, b6)).toBe(false);
+
+    expect(isEqual(a3, b1)).toBe(false);
+    expect(isEqual(a3, b2)).toBe(false);
+    expect(isEqual(a3, b3)).toBe(false);
+    expect(isEqual(a3, b4)).toBe(false);
+    expect(isEqual(a3, b5)).toBe(false);
+    expect(isEqual(a3, b6)).toBe(false);
+
+    expect(isEqual(a4, b1)).toBe(false);
+    expect(isEqual(a4, b2)).toBe(false);
+    expect(isEqual(a4, b3)).toBe(false);
+    expect(isEqual(a4, b4)).toBe(false);
+    expect(isEqual(a4, b5)).toBe(false);
+    expect(isEqual(a4, b6)).toBe(false);
+
+    expect(isEqual(a5, b1)).toBe(false);
+    expect(isEqual(a5, b2)).toBe(false);
+    expect(isEqual(a5, b3)).toBe(false);
+    expect(isEqual(a5, b4)).toBe(false);
+    expect(isEqual(a5, b5)).toBe(false);
+    expect(isEqual(a5, b6)).toBe(false);
+
+    expect(isEqual(a6, b1)).toBe(false);
+    expect(isEqual(a6, b2)).toBe(false);
+    expect(isEqual(a6, b3)).toBe(false);
+    expect(isEqual(a6, b4)).toBe(false);
+    expect(isEqual(a6, b5)).toBe(false);
+    expect(isEqual(a6, b6)).toBe(false);
+  });
+
+  test('different objects where A has missing keys are not equal', () => {
+    const a1 = { field2: 'value2', field3: 'value3' };
+    const a2 = { field3: 'value3', field2: 'value2' };
+
+    const b1 = { field1: undefined, field2: 'value2', field3: 'DIFF' };
+    const b2 = { field1: undefined, field3: 'DIFF', field2: 'value2' };
+    const b3 = { field2: 'value2', field3: 'DIFF', field1: undefined };
+    const b4 = { field2: 'value2', field1: undefined, field3: 'DIFF' };
+    const b5 = { field3: 'DIFF', field1: undefined, field2: 'value2' };
+    const b6 = { field3: 'DIFF', field2: 'value2', field1: undefined };
+
+    expect(isEqual(a1, b1)).toBe(false);
+    expect(isEqual(a1, b2)).toBe(false);
+    expect(isEqual(a1, b3)).toBe(false);
+    expect(isEqual(a1, b4)).toBe(false);
+    expect(isEqual(a1, b5)).toBe(false);
+    expect(isEqual(a1, b6)).toBe(false);
+
+    expect(isEqual(a2, b1)).toBe(false);
+    expect(isEqual(a2, b2)).toBe(false);
+    expect(isEqual(a2, b3)).toBe(false);
+    expect(isEqual(a2, b4)).toBe(false);
+    expect(isEqual(a2, b5)).toBe(false);
+    expect(isEqual(a2, b6)).toBe(false);
+  });
+
+  test('different objects where B has missing keys not equal', () => {
+    const a1 = { field1: undefined, field2: 'value2', field3: 'value3' };
+    const a2 = { field1: undefined, field3: 'value3', field2: 'value2' };
+    const a3 = { field2: 'value2', field3: 'value3', field1: undefined };
+    const a4 = { field2: 'value2', field1: undefined, field3: 'value3' };
+    const a5 = { field3: 'value3', field1: undefined, field2: 'value2' };
+    const a6 = { field3: 'value3', field2: 'value2', field1: undefined };
+
+    const b1 = { field2: 'value2', field3: 'DIFF' };
+    const b2 = { field3: 'DIFF', field2: 'value2' };
+
+    expect(isEqual(a1, b1)).toBe(false);
+    expect(isEqual(a1, b2)).toBe(false);
+
+    expect(isEqual(a2, b1)).toBe(false);
+    expect(isEqual(a2, b2)).toBe(false);
+
+    expect(isEqual(a3, b1)).toBe(false);
+    expect(isEqual(a3, b2)).toBe(false);
+
+    expect(isEqual(a4, b1)).toBe(false);
+    expect(isEqual(a4, b2)).toBe(false);
+
+    expect(isEqual(a5, b1)).toBe(false);
+    expect(isEqual(a5, b2)).toBe(false);
+
+    expect(isEqual(a6, b1)).toBe(false);
+    expect(isEqual(a6, b2)).toBe(false);
+  });
+});