test: add JSON-LD expansion and validation e2e tests

e2e/cypress/e2e/untp-playground/jsonld-expansion-validation.cy.ts

@@ -0,0 +1,96 @@
+import { VCDM_CONTEXT_URLS } from '../../../../packages/untp-playground/constants';
+
+describe('JSON-LD Expansion and Validation', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:4000');
+  });
+
+  const validCredential = {
+    '@context': ['https://www.w3.org/ns/credentials/v2', 'https://test.uncefact.org/vocabulary/untp/dpp/0.5.0/'],
+    type: ['VerifiableCredential', 'DigitalProductPassport'],
+    issuer: {
+      id: 'did:example:123',
+      name: 'dev',
+    },
+    credentialSubject: {
+      name: 'John Doe',
+      id: 'did:example:123',
+      type: ['Product'],
+    },
+  };
+
+  const invalidJsonldSyntaxCredential = {
+    ...validCredential,
+    '@context': [
+      'https://www.w3.org/ns/credentials/v2',
+      'https://test.uncefact.org/vocabulary/untp/dpp/0.5.0/',
+      {
+        '': '',
+      },
+    ],
+  };
+
+  const unresolvableContextCredential = {
+    ...validCredential,
+    '@context': ['https://www.invalid.com'],
+  };
+
+  const invalidPropertiesCredential = {
+    ...validCredential,
+    credentialSubject: {
+      ...validCredential.credentialSubject,
+      invalid: 'invalid-value',
+    },
+  };
+
+  it('should validate context expansion and validation successfully', () => {
+    cy.uploadCredential(validCredential);
+    cy.expandGroup();
+    cy.checkValidationStatus('JSON-LD Document Expansion and Context Validation', 'success');
+  });
+
+  it('should show error for invalid JSON-LD syntax', () => {
+    cy.uploadCredential(invalidJsonldSyntaxCredential);
+    cy.expandGroup();
+    cy.checkValidationStatus('JSON-LD Document Expansion and Context Validation', 'failure');
+
+    cy.openErrorDetailsByStepName('JSON-LD Document Expansion and Context Validation');
+    cy.openValidationDetails('Fix validation error');
+
+    cy.checkValidationErrorMessages([
+      'Conflicting field: unknown',
+      'Failed to validate JSON-LD syntax.',
+      'Resolve the conflict by removing the conflicting field or updating it to a unique one.',
+    ]);
+  });
+
+  it('should show error for unresolvable context', () => {
+    cy.uploadCredential(unresolvableContextCredential);
+    cy.expandGroup();
+    cy.checkValidationStatus('JSON-LD Document Expansion and Context Validation', 'failure');
+
+    cy.openErrorDetailsByStepName('JSON-LD Document Expansion and Context Validation');
+    cy.openValidationDetails('Use the correct value');
+
+    cy.checkValidationErrorMessages([
+      'Incorrect value: @context',
+      'Invalid URL: "https://www.invalid.com". Failed to resolve context url.',
+      'Update the value(s) to the correct one(s) or remove the field(s).',
+    ]);
+  });
+
+  it('should show error for invalid properties', () => {
+    cy.uploadCredential(invalidPropertiesCredential);
+    cy.expandGroup();
+    cy.checkValidationStatus('JSON-LD Document Expansion and Context Validation', 'failure');
+
+    cy.openErrorDetailsByStepName('JSON-LD Document Expansion and Context Validation');
+    cy.openValidationDetails('Use the correct value');
+
+    cy.checkValidationErrorMessages([
+      'Incorrect value: credentialSubject/invalid',
+      'Properties "credentialSubject/invalid" are defined in the credential but missing from the context.',
+      'Update the value(s) to the correct one(s) or remove the field(s).',
+    ]);
+  });
+});

e2e/cypress/support/commands/untp-playground.ts

@@ -33,6 +33,11 @@ Cypress.Commands.add('openErrorDetails', () => {
   cy.contains('View Details').click();
 });
 
+// Command to open error details for a specific step
+Cypress.Commands.add('openErrorDetailsByStepName', (stepName: string) => {
+  cy.contains(stepName).parent().parent().contains('View Details').click();
+});
+
 // Command to validate that the confetti is visible
 Cypress.Commands.add('validateConfetti', () => {
   cy.get('canvas')
@@ -53,3 +58,15 @@ Cypress.Commands.add('checkVCDMVersionColor', (credentialType: string, expectedC
     .should('have.class', colorClasses[expectedColor][0])
     .and('have.class', colorClasses[expectedColor][1]);
 });
+
+// Command to open validation details
+Cypress.Commands.add('openValidationDetails', (validationTitle: string = 'Fix validation error') => {
+  cy.contains(validationTitle).click();
+});
+
+// Command to check the error messages displayed on the validation errors tab
+Cypress.Commands.add('checkValidationErrorMessages', (errorMessages: string[]) => {
+  errorMessages.forEach((message) => {
+    cy.contains(message).should('be.visible');
+  });
+});

e2e/cypress/support/index.d.ts

@@ -24,6 +24,11 @@ interface PlaygroundChainable {
    */
   openErrorDetails(): Cypress.Chainable<void>;
 
+  /**
+   * Opens the error details for a specific step.
+   */
+  openErrorDetailsByStepName(stepName: string): Cypress.Chainable<void>;
+
   /**
    * Validates that the confetti is visible.
    */
@@ -33,6 +38,16 @@ interface PlaygroundChainable {
    * Checks the color of the VCDM version badge.
    */
   checkVCDMVersionColor(credentialType: string, expectedColor: 'green' | 'red'): Cypress.Chainable<void>;
+
+  /**
+   * Opens the validation details.
+   */
+  openValidationDetails(validationTitle: string): Cypress.Chainable<void>;
+
+  /**
+   * Checks the error messages displayed on validation errors tab.
+   */
+  checkValidationErrorMessages(errorMessages: string[]): Cypress.Chainable<void>;
 }
 
 interface IssueChainable {