feat: remote schema support for json form

documentation/docs/mock-apps/components/json-form.md

@@ -11,6 +11,8 @@ import Disclaimer from '../.././\_disclaimer.mdx';
 
 The JsonForm component renders a dynamic form based on a provided JSON schema. It allows for flexible form creation and data entry, supporting various field types and structures defined in the schema. The component can be initialised with default data and customised with CSS classes and styles. It also supports advanced features like data construction rules and external schema references, making it suitable for complex form scenarios.
 
+As a developer using the mock app system, you can now provide a remote schema URI to the JsonForm component or manually specify a local schema. This allows for the dynamic rendering of forms based on externally hosted schemas or custom local schemas, making the system more flexible and adaptable.
+
 ## Definitions
 
 | Property | Required | Description | Type |
@@ -23,14 +25,16 @@ The JsonForm component renders a dynamic form based on a provided JSON schema. I
 
 | Property | Required | Description | Type |
 |----------|----------|-------------|------|
-| schema | Yes | The JSON schema that defines the structure of the form | Object or `{ url: string }` |
+| schema | Yes | The JSON schema that defines the structure of the form. It can either be a local object or an object with a URL property pointing to an external schema. | Object or `{ url: string }` |
 | constructData | No | Defines the schema for constructing event data, including field mappings, default values, and data generation rules. | [ConstructData](/docs/mock-apps/common/construct-data) |
 | data | No | The initial data for the form | Object |
 | className | No | CSS class name for styling the form | String |
 | style | No | CSS styles to apply to the form | Object |
 
 ## Example
 
+### Manual schema input:
+
 ```json
 {
     "name": "JsonForm",
@@ -438,3 +442,18 @@ The JsonForm component renders a dynamic form based on a provided JSON schema. I
     }
 }
 ```
+
+### Remote schema URL
+
+```json
+{
+        "name": "JsonForm",
+        "type": "EntryData",
+        "props": {
+            "schema": {
+                "url": "https://jargon.sh/user/unece/DigitalProductPassport/v/0.0.1/artefacts/jsonSchemas/render.json?class=ProductPassport"
+            }
+        }
+        ...
+}
+```

jest.config.mjs

@@ -1,4 +1,6 @@
 import { defaults } from 'jest-config';
+import ComponentPkg from './packages/components/package.json' assert { type: 'json' };
+import MockAppPkg from './packages/mock-app/package.json' assert { type: 'json' };
 
 export default {
   rootDir: './',
@@ -10,25 +12,76 @@ export default {
     '!**/types/**',
     '!**/build/**',
     '!**/node_modules/**',
+    '!packages/services/src/identityProviders/GS1Provider.ts' // This file call a function that is not exported
   ],
   coverageReporters: ['text', 'lcov', 'json'],
   coverageProvider: 'v8',
   coverageDirectory: './coverage',
   extensionsToTreatAsEsm: ['.ts'],
   testMatch: ['**/__tests__/**/*.test.*'],
-  testPathIgnorePatterns: ['<rootDir>/node_modules/'],
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/', 
+  ],
   testEnvironment: 'node',
   automock: false,
-  moduleNameMapper: {
-    '^(\\.{1,2}/.*)\\.js$': '$1',
-  },
-  transform: {
-    '^.+\\.m?tsx?$': [
-      'ts-jest',
-      {
-        useESM: true,
-        tsconfig: './packages/tsconfig.settings.json',
+  extensionsToTreatAsEsm: ['.ts'],
+  projects: [
+    {
+      preset: 'ts-jest',
+      testEnvironment: 'jsdom',
+      setupFilesAfterEnv: ['<rootDir>/packages/components/src/setupTests.ts'],
+      displayName: ComponentPkg.name,
+      testMatch: ['<rootDir>/packages/components/**/?(*.)+(spec|test).[jt]s?(x)'],
+      transform: {
+        '^.+\\.m?tsx?$': [
+          'ts-jest',
+          {
+            useESM: true,
+            tsconfig: '<rootDir>/packages/components/tsconfig.json',
+          },
+        ],
       },
-    ],
-  },
+    },
+    {
+      preset: 'ts-jest',
+      testEnvironment: 'jsdom',
+      setupFilesAfterEnv: ['<rootDir>/packages/mock-app/jest.config.js'],
+      displayName: MockAppPkg.name,
+      testMatch: ['<rootDir>/packages/mock-app/jest.config.js'],
+      transform: {
+      '^.+\\.m?tsx?$': [
+        'ts-jest',
+        {
+          useESM: true,
+          tsconfig: '<rootDir>/packages/mock-app/tsconfig.json',
+        },
+      ],
+    },
+    },
+     {
+      // Default Node.js environment tests for all other packages
+      preset: 'ts-jest',
+      displayName: 'Node.js environment',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/packages/**/src/**/?(*.)+(spec|test).[jt]s?(x)'],
+      testPathIgnorePatterns: [
+        '<rootDir>/node_modules/', 
+        '<rootDir>/packages/components', 
+        '<rootDir>/packages/mock-app', 
+        '<rootDir>/packages/services/src/__tests__/gs1.test.ts' // This file call a library that is not exported, so it is ignored
+      ],
+      transform: {
+        '^.+\\.m?tsx?$': [
+          'ts-jest',
+          {
+            useESM: true,
+            tsconfig: '<rootDir>/packages/tsconfig.settings.json',
+          },
+        ],
+      },
+      moduleNameMapper: {
+        '^(\\.{1,2}/.*)\\.js$': '$1',
+      }
+    },
+  ],
 };

packages/components/package.json

@@ -50,6 +50,7 @@
     "ajv": "^8.16.0",
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",
+    "jest-fetch-mock": "^3.0.3",
     "jsonpointer": "^5.0.1",
     "react": "18.2.0",
     "react-barcode": "^1.5.3",

packages/components/src/__tests__/JsonForm.test.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, act } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
 import { JsonForms } from '@jsonforms/react';
 
 import { schema, initialData, uiSchema } from './mocks/JsonForm.mock';
 import { JsonForm } from '../components/JsonForm/JsonForm';
 
+// Enable fetch mocks
+fetchMock.enableMocks();
+
 describe('render json schema component', () => {
   beforeEach(() => {
     /*
@@ -100,4 +104,46 @@ describe('render json schema component', () => {
     fireEvent.click(button);
     expect(onChange).toHaveBeenCalledWith({ data: { name: 'Dwight D. Terry' }, errors: [] });
   });
+
+  it('should fetch and render schema from url', async () => {
+    const schemaUrl = 'https://example.io/schema.json';
+    // Mock the fetch response
+    fetchMock.mockResponseOnce(JSON.stringify(schema));
+
+    // Wrap the rendering inside act(...)
+    await act(async () => {
+      render(
+        <JsonForm
+          schema={{ url: schemaUrl }}
+          data={initialData}
+          onChange={onChangeJsonSchemaForm}
+          className='json-form'
+        />,
+      );
+    });
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(schemaUrl);
+
+    const getStringField = screen.getByLabelText('Name');
+    expect(getStringField).toHaveValue(initialData.name);
+
+    const getBooleanField = screen.getByLabelText('Vegetarian');
+    expect(getBooleanField).toBeChecked();
+  });
+
+  it('should show error message when fetch schema failed', async () => {
+    const schemaUrl = 'https://example.io/schema.json';
+    fetchMock.mockReject(new Error('Failed to fetch schema'));
+
+    await act(async () => {
+      render(<JsonForm schema={{ url: schemaUrl }} onChange={onChangeJsonSchemaForm} className='json-form' />);
+    });
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(schemaUrl);
+
+    const errorElement = screen.getByText('Error setup schema');
+    expect(errorElement).toBeInTheDocument();
+  });
 });

packages/services/src/__tests__/aggregationEvent.test.ts

@@ -1,25 +1,30 @@
 import * as vckitService from '../vckit.service';
 import { getStorageServiceLink } from '../storage.service';
 import * as linkResolverService from '../linkResolver.service';
 import { IAggregationEventContext } from '../epcisEvents/types';
 import { Result } from '../types/validateContext';
 import * as validateContext from '../epcisEvents/validateContext';
 import * as helpers from '../epcisEvents/helpers';
 import { processAggregationEvent } from '../epcisEvents';
 import { publicAPI } from '../utils/httpService';
 import { aggregationEventMock } from './mocks/constants';
 
 jest.mock('../vckit.service', () => ({
   issueVC: jest.fn(),
 }));
 jest.mock('../storage.service', () => ({
   getStorageServiceLink: jest.fn(),
 }));
 jest.mock('../linkResolver.service', () => ({
   registerLinkResolver: jest.fn(),
   createLinkResolver: jest.fn(),
   IdentificationKeyType: jest.fn(),
   getLinkResolverIdentifier: jest.fn(),
+  LinkType: {
+    verificationLinkType : 'gs1:verificationService',
+    certificationLinkType : 'gs1:certificationInfo',
+    epcisLinkType : 'gs1:epcis',
+  }
 }));
 
 describe('processAggregationEvent', () => {
@@ -88,7 +93,7 @@
     try {
       const invalidIdentifierContent = {
         ...context,
-        identifierKeyPath: 'invalid',
+        identifierKeyPath: '/invalid',
       };
       jest
         .spyOn(validateContext, 'validateAggregationEventContext')

packages/services/src/__tests__/gs1.test.ts

@@ -1,28 +1,32 @@
 import { GS1Provider, GS1ServiceEnum } from '../identityProviders/GS1Provider';
 import { publicAPI } from '../utils/httpService';
 
 jest.mock('../types/types', () => ({
   SupportedProviderTypesEnum: {
     gs1: 'gs1',
   },
 }));
 
 describe('Gs1Provider', () => {
   const gtinAI = 'gtin';
   const mockCode = '0109359502000010';
   const providerUrl = 'https://example.com';
 
   let gs1Provider: GS1Provider;
 
   beforeEach(() => {
     // Set up a new instance of GS1Provider with the specified provider type and URL
     gs1Provider = new GS1Provider();
   });
 
   describe('getDlrUrl', () => {
     it('should return null if code is not set', async () => {
-      const dlrUrl = await gs1Provider.getDlrUrl('', providerUrl);
+      const code = '';
+      jest.spyOn(publicAPI, 'post').mockResolvedValueOnce([]);
+      // Act
+      const dlrUrl = await gs1Provider.getDlrUrl(code, providerUrl);
 
+      // Assert
       expect(dlrUrl).toBeNull();
     });
 

packages/services/src/__tests__/mocks/constants.ts

@@ -1,4 +1,22 @@
 export const contextTransformationEvent = {
+  transformationEventCredential: {
+    mappingFields: [
+      {
+        "sourcePath": "/",
+        "destinationPath": "/"
+      }
+    ]
+  },
+  dppCredentials: [
+    {
+      "mappingFields": [
+        {
+          "sourcePath": "/",
+          "destinationPath": "/"
+        }
+      ]
+    }
+  ],
   epcisTransformationEvent: {
     context: ['https://dpp-json-ld.s3.ap-southeast-2.amazonaws.com/transformation-event-ld.json'],
     renderTemplate: [{ template: '<p>Render epcis template</p>', '@type': 'WebRenderingTemplate2022' }],

packages/services/src/__tests__/processDPP.test.ts

@@ -1,7 +1,7 @@
 import { processDPP } from '../processDPP.service';
 import { issueVC, contextDefault } from '../vckit.service';
 import { getStorageServiceLink } from '../storage.service';
-import { registerLinkResolver, IdentificationKeyType } from '../linkResolver.service';
+import { registerLinkResolver, IdentificationKeyType, LinkType } from '../linkResolver.service';
 import { contextDPP, dataDPP } from './mocks/constants';
 
 jest.mock('../vckit.service', () => ({
@@ -20,8 +20,14 @@
     nlisid: 'nlisid',
   },
   getLinkResolverIdentifier: jest.fn(() => ({ identifier: '9359502000010', qualifierPath: '/10/ABC123' })),
+  LinkType: {
+    verificationLinkType: 'gs1:verificationService',
+    certificationLinkType: 'gs1:certificationInfo',
+    epcisLinkType: 'gs1:epcis',
+  }
 }));
 
+
 describe('processDPP', () => {
   describe('successful case', () => {
     afterEach(() => {
@@ -51,7 +57,7 @@
 
     it('should call process DPP', async () => {
       (getStorageServiceLink as jest.Mock).mockImplementation(({ url, _data, path }) => {
-        return `${url}/${path}`;
+        return `${url}/${dataDPP.data.herd.identifier}`;
       });
 
       (registerLinkResolver as jest.Mock).mockImplementation(
@@ -69,14 +75,17 @@
             linkTitle,
             verificationPage,
             dlrAPIKey,
-            identificationKey,
+            identificationKey
           });
           return `${dlrAPIUrl}/${identificationKeyType}/${identificationKey}?linkType=all`;
         },
       );
 
       const vc = await processDPP(dataDPP, contextDPP);
-      expect(vc).toEqual(expectVCResult);
+      expect(vc).toEqual({
+        vc: expectVCResult,
+        linkResolver: contextDPP.dpp.dlrVerificationPage + '/' + contextDPP.dpp.dlrIdentificationKeyType + '/' + dataDPP.data.herd.identifier + '?linkType=all',
+      });
       expect(getStorageServiceLink).toHaveBeenCalled();
       expect(registerLinkResolver).toHaveBeenCalled();
 
@@ -87,10 +96,12 @@
         dppContext.dlrIdentificationKeyType,
         dataDPP.data.herd.identifier,
         dppContext.dlrLinkTitle,
+        LinkType.certificationLinkType,
         dppContext.dlrVerificationPage,
         dlrContext.dlrAPIUrl,
         dlrContext.dlrAPIKey,
         dataDPP.qualifierPath,
+        LinkType.certificationLinkType,
       );
     });
   });

packages/services/src/__tests__/transactionEvent.test.ts

@@ -1,27 +1,37 @@
 import * as vckitService from '../vckit.service';
 import * as linkResolverService from '../linkResolver.service';
 import * as helpers from '../epcisEvents/helpers';
 import * as validateContext from '../epcisEvents/validateContext';
 import { processTransactionEvent } from '../epcisEvents/transactionEvent';
 import { getStorageServiceLink } from '../storage.service';
 import { Result } from '../types/validateContext';
 import { ITransactionEventContext } from '../epcisEvents/types';
 import { publicAPI } from '../utils/httpService';
 import { transactionEventMock } from './mocks/constants';
 
 jest.mock('../vckit.service', () => ({
   issueVC: jest.fn(),
 }));
 jest.mock('../storage.service', () => ({
   getStorageServiceLink: jest.fn(),
 }));
 jest.mock('../linkResolver.service', () => ({
   registerLinkResolver: jest.fn(),
   createLinkResolver: jest.fn(),
   IdentificationKeyType: jest.fn(),
   getLinkResolverIdentifier: jest.fn(() => ({ identifier: '9359502000010', qualifierPath: '/10/ABC123' })),
+  LinkType: {
+    verificationLinkType : 'gs1:verificationService',
+    certificationLinkType : 'gs1:certificationInfo',
+    epcisLinkType : 'gs1:epcis',
+  }
 }));
 
+jest.mock('../epcisEvents/helpers', () => ({
+  deleteValuesFromLocalStorageByKeyPath: jest.fn(),
+}));
+
+
 describe('processTransactionEvent', () => {
   const { nlisidMock, transactionEventDLRMock, transactionVCMock } = transactionEventMock;
   const transactionEvent = {
@@ -54,6 +64,7 @@
       },
     },
     identifierKeyPath: '/transaction/identifier',
+    localStorageParams: { "storageKey": "transaction", "keyPath": "/transaction/type" }
   };
 
   it('should process transaction event', async () => {
@@ -67,8 +78,11 @@
     jest.spyOn(linkResolverService, 'registerLinkResolver').mockResolvedValueOnce(transactionEventDLRMock);
 
     const transactionVC = await processTransactionEvent(transactionEvent, context);
-
-    expect(transactionVC).toBe(transactionVCMock);
+
+    expect(transactionVC).toEqual({
+      vc: transactionVCMock,
+      linkResolver: transactionEventDLRMock,
+    });
     expect(getStorageServiceLink).toHaveBeenCalled();
     expect(validateContext.validateTransactionEventContext).toHaveBeenCalled();
     expect(linkResolverService.registerLinkResolver).toHaveBeenCalled();
@@ -95,7 +109,7 @@
     try {
       const invalidIdentifierContext = {
         ...context,
-        identifierKeyPath: 'invalid-key',
+        identifierKeyPath: '/invalid-key',
       };
       jest
         .spyOn(validateContext, 'validateTransactionEventContext')