test: json field e2e and int

src/fields/hooks/beforeChange/promise.ts

@@ -104,6 +104,14 @@ export const promise = async ({
         valueToValidate = siblingData[field.name];
       }
 
+      if (field.type === 'json' && typeof siblingData[field.name] === 'string') {
+        try {
+          JSON.parse(siblingData[field.name] as string);
+        } catch (e) {
+          field.jsonError = e;
+        }
+      }
+
       const validationResult = await field.validate(valueToValidate, {
         ...field,
         data: merge(doc, data, { arrayMerge: (_, source) => source }),

test/fields/e2e.spec.ts

@@ -9,6 +9,7 @@ import { pointFieldsSlug } from './collections/Point';
 import { tabsSlug } from './collections/Tabs';
 import { collapsibleFieldsSlug } from './collections/Collapsible';
 import wait from '../../src/utilities/wait';
+import { jsonDoc } from './collections/JSON';
 
 const { beforeAll, describe } = test;
 
@@ -64,6 +65,31 @@ describe('fields', () => {
     });
   });
 
+  describe('json', () => {
+    let url: AdminUrlUtil;
+    beforeAll(() => {
+      url = new AdminUrlUtil(serverURL, 'json-fields');
+    });
+
+    test('should display field in list view', async () => {
+      await page.goto(url.list);
+      const jsonCell = page.locator('.row-1 .cell-json');
+      await expect(jsonCell)
+        .toHaveText(JSON.stringify(jsonDoc.json));
+    });
+
+    test('should create', async () => {
+      const input = '{"foo": "bar"}';
+
+      await page.goto(url.create);
+      const json = page.locator('.json-field .inputarea');
+      await json.fill(input);
+
+      await saveDocAndAssert(page);
+      await expect(page.locator('.json-field')).toContainText('"foo": "bar"');
+    });
+  });
+
   describe('radio', () => {
     let url: AdminUrlUtil;
     beforeAll(() => {

test/fields/int.spec.ts

@@ -505,6 +505,29 @@ describe('Fields', () => {
     });
   });
 
+  describe('json', () => {
+    it('should save json data', async () => {
+      const json = { foo: 'bar' };
+      const doc = await payload.create({
+        collection: 'json-fields',
+        data: {
+          json,
+        },
+      });
+
+      expect(doc.json).toStrictEqual({ foo: 'bar' });
+    });
+
+    it('should validate json', async () => {
+      await expect(async () => payload.create({
+        collection: 'json-fields',
+        data: {
+          json: '{ bad input: true }',
+        },
+      })).rejects.toThrow('The following field is invalid: json');
+    });
+  });
+
   describe('richText', () => {
     it('should allow querying on rich text content', async () => {
       const emptyRichTextQuery = await payload.find({