Bug/58 recursive add exception

packages/example/package.json

@@ -24,6 +24,30 @@
   "scripts": {
     "validate": "../../node_modules/.bin/tsc --noEmit",
     "build": "echo 'Nothing to do'",
-    "test": "echo 'Nothing to do'"
+    "test": "jest --no-cache"
+  },
+  "devDependencies": {
+    "jest": "^24.9.0",
+    "ts-jest": "^24.2.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@react-spectrum)/)"
+    ],
+    "testMatch": [
+      "**/test/**/*.test.tsx"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ]
   }
-}
+}

packages/example/src/App.tsx

@@ -38,7 +38,7 @@ import {
   ExampleDispatchProps,
 } from './reduxUtil';
 import { TextArea } from './TextArea';
-import { ReactExampleDescription } from './util';
+import { circularReferenceReplacer, ReactExampleDescription } from './util';
 import {
   getExamplesFromLocalStorage,
   setExampleInLocalStorage,
@@ -131,7 +131,7 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
                       value={
                         JSON.stringify(
                           props.selectedExample.uischema,
-                          null,
+                          circularReferenceReplacer(),
                           2
                         ) || ''
                       }
@@ -143,8 +143,11 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
                   <Content margin='size-100'>
                     <TextArea
                       value={
-                        JSON.stringify(props.selectedExample.schema, null, 2) ||
-                        ''
+                        JSON.stringify(
+                          props.selectedExample.schema,
+                          circularReferenceReplacer(),
+                          2
+                        ) || ''
                       }
                       onChange={updateCurrentSchema}
                     />

packages/example/src/util.tsx

@@ -305,3 +305,33 @@ export const enhanceExample: (
         return e;
     }
   });
+
+/**
+ * Replacer to allow circular references in JSON.stringify
+ */
+export function circularReferenceReplacer() {
+  const paths = new Map();
+  const finalPaths = new Map();
+  let root: any = null;
+
+  return function (this: Object, field: string, value: any) {
+    const p = paths.get(this) + '/' + field;
+    const isComplex = value === Object(value);
+
+    if (isComplex) paths.set(value, p);
+
+    const existingPath = finalPaths.get(value) || '';
+    const path = p.replace(/undefined\/\/?/, '');
+    let val = existingPath ? { $ref: `#/${existingPath}` } : value;
+
+    if (!root) {
+      root = value;
+    } else if (val === root) {
+      val = { $ref: '#/' };
+    }
+
+    if (!existingPath && isComplex) finalPaths.set(value, path);
+
+    return val;
+  };
+}

packages/example/test/util.test.tsx

@@ -0,0 +1,145 @@
+import { circularReferenceReplacer } from '../src/util';
+
+const stringify = (obj: Object): any =>
+  JSON.parse(JSON.stringify(obj, circularReferenceReplacer()));
+
+describe('circularReferenceReplacer', () => {
+  test('with emtpy values', () => {
+    // given
+    const undefObj: any = {
+      val: undefined,
+    };
+
+    // when
+    const undefResult = stringify(undefObj);
+
+    // expect
+    expect(undefResult).toEqual({});
+
+    // given
+    const nullObj: any = {
+      val: null,
+    };
+
+    // when
+    const nullResult = stringify(nullObj);
+
+    // expect
+    expect(nullResult).toEqual(nullObj);
+
+    // given
+    const emptyStringObj: any = {
+      val: '',
+    };
+
+    // when
+    const emptyStringRes = stringify(emptyStringObj);
+
+    // expect
+    expect(emptyStringRes).toEqual(emptyStringObj);
+
+    // given
+    const emptyObj: any = {};
+
+    // when
+    const emptyObjRes = stringify(emptyObj);
+
+    // then
+    expect(emptyObjRes).toEqual(emptyObj);
+  });
+
+  test('with non-circular objects', () => {
+    // given
+    const obj: any = {
+      a: 'foo',
+      b: 'bar',
+      nested: {
+        c: 'baz',
+      },
+    };
+
+    // when
+    const result = stringify(obj);
+
+    // then
+    expect(result).toEqual(obj);
+  });
+
+  test('with circular object', () => {
+    // given
+    const obj: any = {
+      a: {
+        prop: 'foo',
+        nested: {
+          prop: 'bar',
+        },
+      },
+    };
+
+    obj.a.prop2 = obj.a;
+
+    obj.b = {
+      foo: obj.a,
+      bar: obj.a.nested,
+    };
+
+    // when
+    const result = stringify(obj);
+
+    // then
+    expect(result.a).toEqual({
+      prop: 'foo',
+      prop2: {
+        $ref: '#/a',
+      },
+      nested: {
+        prop: 'bar',
+      },
+    });
+    expect(result.b).toEqual({
+      foo: {
+        $ref: '#/a',
+      },
+      bar: {
+        $ref: '#/a/nested',
+      },
+    });
+  });
+
+  test('with root reference', () => {
+    // given
+    const obj: any = {
+      a: {
+        prop: 'foo',
+      },
+    };
+    obj.b = obj;
+
+    // when
+    const result = stringify(obj);
+
+    // then
+    expect(result.a).toEqual({
+      prop: 'foo',
+    });
+    expect(result.b).toEqual({
+      $ref: '#/',
+    });
+  });
+
+  test('with equal object', () => {
+    // given
+    const obj: any = {
+      a: {
+        prop: 'foo',
+      },
+    };
+    obj.b = { ...obj.a };
+
+    // when
+    const result = stringify(obj);
+
+    // then
+    expect(result).toEqual(obj);
+  });
+});