Fix diff logger. Fixes #2

src/EventLogger.ts

@@ -1,7 +1,19 @@
+type ArrayDiff = { additions?: unknown[]; subtractions?: unknown[] };
 type Entry = {
   args: unknown[];
   fn: string;
 };
+type ObjectDiff =
+  | {
+      additions: UnknownObject;
+      changes?: UnknownObject;
+      subtractions?: UnknownObject;
+    }
+  | {
+      additions?: UnknownObject;
+      changes?: UnknownObject;
+      subtractions: UnknownObject;
+    };
 type UnknownObject = { [key: string]: unknown };
 
 // keep track of the order that the logs come in
@@ -13,19 +25,52 @@ let order = 0;
 const getArrayDiff = (
   from: unknown[],
   to: unknown[],
-): unknown[] | undefined => {
-  const result: unknown[] = [];
-  for (const index in to) {
-    if (to.hasOwnProperty(index)) {
-      const diff = getDiff(from[index], to[index]);
-      if (diff !== undefined) {
-        result.push(diff);
+): ArrayDiff | unknown[] | undefined => {
+  const result: ArrayDiff = {
+    additions: [],
+    subtractions: [],
+  };
+
+  if (from.length > to.length) {
+    for (const index in from) {
+      if (from.hasOwnProperty(index)) {
+        if (to.hasOwnProperty(index)) {
+          const diff = getDiff(from[index], to[index]);
+          if (diff !== undefined) {
+            result.additions!.push(to[index]);
+            result.subtractions!.push(from[index]);
+          }
+        } else {
+          result.subtractions!.push(from[index]);
+        }
+      }
+    }
+  } else {
+    for (const index in to) {
+      if (to.hasOwnProperty(index)) {
+        if (from.hasOwnProperty(index)) {
+          const diff = getDiff(from[index], to[index]);
+          if (diff !== undefined) {
+            result.additions!.push(to[index]);
+            result.subtractions!.push(from[index]);
+          }
+        } else {
+          result.additions!.push(to[index]);
+        }
       }
     }
   }
 
-  if (result.length === 0) {
-    return undefined;
+  if (result.additions!.length === 0) {
+    delete result.additions;
+  }
+
+  if (result.subtractions!.length === 0) {
+    if (result.additions) {
+      return result.additions;
+    } else {
+      return undefined;
+    }
   }
 
   return result;
@@ -52,17 +97,48 @@ const getDiff = (from: any, to: any): any => {
 const getObjectDiff = (
   from: UnknownObject,
   to: UnknownObject,
-): UnknownObject | undefined => {
-  const result: UnknownObject = {};
-  for (const key in to) {
-    if (to.hasOwnProperty(key)) {
-      const diff = getDiff(from[key], to[key]);
-      if (diff !== undefined) {
-        result[key] = diff;
+): ObjectDiff | UnknownObject | undefined => {
+  const result: ObjectDiff = {
+    additions: {},
+    changes: {},
+    subtractions: {},
+  };
+
+  for (const key in from) {
+    if (from.hasOwnProperty(key)) {
+      if (to.hasOwnProperty(key)) {
+        const diff = getDiff(from[key], to[key]);
+        if (diff !== undefined) {
+          result.changes![key] = diff;
+        }
+      } else {
+        result.subtractions![key] = from[key];
       }
     }
   }
 
+  for (const key in to) {
+    if (to.hasOwnProperty(key) && !from.hasOwnProperty(key)) {
+      result.additions![key] = to[key];
+    }
+  }
+
+  if (Object.keys(result.additions!).length === 0) {
+    delete result.additions;
+  }
+
+  if (Object.keys(result.changes!).length === 0) {
+    delete result.changes;
+  }
+
+  if (Object.keys(result.subtractions!).length === 0) {
+    if (result.changes && !result.additions) {
+      return result.changes;
+    } else {
+      delete result.subtractions;
+    }
+  }
+
   if (Object.keys(result).length === 0) {
     return undefined;
   }
@@ -211,15 +287,11 @@ export default class EventLogger {
    */
   logDiff(namespace: string, from?: object, to?: object): void {
     const diff = getDiff(from, to);
-    if (diff === undefined || !Object.keys(diff).length) {
+    if (diff === undefined) {
       return this.logNoChanges(namespace, from);
     }
 
-    this.addEntry(
-      'groupCollapsed',
-      `Changes for ${namespace}`,
-      getDiff(from, to),
-    );
+    this.addEntry('groupCollapsed', `Changes for ${namespace}`, diff);
     this.addEntry('log', 'Old State', from);
     this.addEntry('log', 'New State', to);
     this.addEntry('groupEnd');

tests/events.ts

@@ -14,6 +14,7 @@ declare global {
 }
 
 const TIMEOUT_BUILD_BARRACKS = 400;
+const TIMEOUT_DESTROY_BARRACKS = 100;
 const TIMEOUT_FEED_SOLDIERS = 100;
 const TIMEOUT_FIGHT_FOR_GEMHEART = 300;
 const TIMEOUT_RECRUIT_SOLDIERS = 200;
@@ -60,6 +61,18 @@ beforeAll(() => {
     dispatch('warcamp/paySoldiers');
   });
 
+  warcampStore.register('warcamp/destroyBarracks', async () => {
+    await new Promise((resolve) =>
+      setTimeout(resolve, TIMEOUT_DESTROY_BARRACKS),
+    );
+
+    return (state) => ({
+      ...state,
+      barracksBuilt: false,
+      buildings: state.buildings.filter((building) => building !== 'barracks'),
+    });
+  });
+
   warcampStore.register('warcamp/feedSoldiers', async () => {
     await new Promise((resolve) => setTimeout(resolve, TIMEOUT_FEED_SOLDIERS));
     return (state) => ({ ...state, soldiersFed: true });
@@ -198,16 +211,39 @@ describe('events', () => {
         (window.console.groupCollapsed as jest.Mock).mock.calls[1][0],
       ).toBe('warcamp/buildBarracks');
       expect(
-        (window.console.groupCollapsed as jest.Mock).mock.calls[2][1],
+        (window.console.groupCollapsed as jest.Mock).mock.calls[2][0],
+      ).toBe('Changes for warcamp');
+      expect(
+        (window.console.groupCollapsed as jest.Mock).mock.calls[3][0],
+      ).toBe('Changes for warcamp');
+    });
+
+    test('logs the diffs between state changes', async () => {
+      await new Promise((resolve) =>
+        setTimeout(resolve, TIMEOUT_FEED_SOLDIERS * 4),
+      );
+      await new Promise((resolve) =>
+        setTimeout(resolve, TIMEOUT_RECRUIT_SOLDIERS),
+      );
+      await new Promise((resolve) =>
+        setTimeout(resolve, TIMEOUT_BUILD_BARRACKS),
+      );
+
+      await flux.dispatch('warcamp/destroyBarracks');
+      await flux.dispatch('warcamp/buildBarracks');
+
+      expect(
+        (window.console.groupCollapsed as jest.Mock).mock.calls[1][1],
       ).toEqual({
-        barracksBuilt: true,
-        buildings: ['barracks'],
+        barracksBuilt: false,
+        buildings: { subtractions: ['barracks', 'barracks'] },
       });
+
       expect(
         (window.console.groupCollapsed as jest.Mock).mock.calls[3][1],
       ).toEqual({
-        barracksBuilt: false,
-        soldiers: 11800,
+        barracksBuilt: true,
+        buildings: ['barracks'],
       });
     });
   });