test: setup unit test for playground package

.github/workflows/build_test.yml

@@ -49,6 +49,7 @@ jobs:
             Services, ./packages/services/coverage/coverage-summary.json
             UNTP test suite, ./packages/untp-test-suite/coverage/coverage-summary.json
             VC test suite, ./packages/vc-test-suite/coverage/coverage-summary.json
+            UNTP Playground, ./packages/untp-playground/coverage/coverage-summary.json
 
   build_docs:
     runs-on: ubuntu-latest

package.json

@@ -21,6 +21,7 @@
     "test:mock-app": "cd packages/mock-app && yarn run test",
     "test:untp-test-suite": "cd packages/untp-test-suite && yarn run test",
     "test:vc-test-suite": "cd packages/vc-test-suite && yarn run test",
+    "test:untp-playground": "cd packages/untp-playground && yarn run test",
     "test:integration:untp-test-suite": "cd packages/untp-test-suite && yarn run test:integration",
     "storybook:components": "cd packages/components && yarn run storybook",
     "storybook:mock-app": "cd packages/mock-app && yarn run storybook",

packages/untp-playground/README.md

@@ -11,6 +11,7 @@ Open [http://localhost:3000/](http://localhost:3000/) with your browser to see t
 ## Deployment
 
 We use Pulumi and GitHub actions to deploy the app. The following env variables needs to be set to define basePath in order to it work with the existing CloudFront Distribution:
+
 ```
 NEXT_PUBLIC_BASE_PATH: /untp-playground
 NEXT_PUBLIC_ASSET_PREFIX: /untp-playground
@@ -19,7 +20,7 @@ NEXT_PUBLIC_IMAGE_PATH: /untp-playground/_next/image
 
 GitHub OIDC is configured in AWS account for GitHub Actions workflow to assume and run the deployment using Pulumi. The role to assume is set as a repository secret `UNCEFACT_AWS_ROLE_TO_ASSUME`.
 Pulume security prodiver for config is set to awskms.
-The same backend state bucket and kms key are used for both test and prod Pulumi stacks.  
+The same backend state bucket and kms key are used for both test and prod Pulumi stacks.
 
 End-points:
 
@@ -30,3 +31,25 @@ End-points:
 In future production enddpoint will be replaced with a production url, and current endpoint will become test.
 
 The production build is configured using Docker image https://nextjs.org/docs/pages/building-your-application/deploying#docker-image
+
+## Testing
+
+We use Jest for testing.
+
+To run tests:
+
+```bash
+yarn test
+```
+
+To run tests in watch mode:
+
+```bash
+yarn test:watch
+```
+
+To generate coverage report:
+
+```bash
+yarn test:coverage
+```

packages/untp-playground/__tests__/app/page.test.tsx

@@ -0,0 +1,155 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { toast } from 'sonner';
+import { decodeEnvelopedCredential, isEnvelopedProof } from '@/lib/credentialService';
+import { CredentialUploader } from '@/components/CredentialUploader';
+import Home from '../../src/app/page';
+import { mockCredential } from '../mocks/vc';
+
+// Mock the dependencies
+jest.mock('sonner', () => ({
+  toast: {
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@/lib/credentialService', () => ({
+  isEnvelopedProof: jest.fn(),
+  decodeEnvelopedCredential: jest.fn(),
+}));
+
+// Mock child components
+jest.mock('@/components/Header', () => ({
+  Header: () => <div data-testid='mock-header'>Header</div>,
+}));
+
+jest.mock('@/components/Footer', () => ({
+  Footer: () => <div data-testid='mock-footer'>Footer</div>,
+}));
+
+jest.mock('@/components/TestResults', () => ({
+  TestResults: () => <div data-testid='mock-test-results'>Test Results</div>,
+}));
+
+jest.mock('@/components/CredentialUploader', () => ({
+  CredentialUploader: jest.fn(({ onCredentialUpload }: { onCredentialUpload: (credential: any) => void }) => (
+    <button
+      data-testid='mock-uploader'
+      onClick={() =>
+        onCredentialUpload({
+          verifiableCredential: {
+            type: ['VerifiableCredential', 'DigitalProductPassport'],
+          },
+        })
+      }
+    >
+      Upload
+    </button>
+  )),
+}));
+
+jest.mock('@/components/DownloadCredential', () => ({
+  DownloadCredential: () => <div data-testid='mock-download'>Download</div>,
+}));
+
+describe('Home Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all components correctly', () => {
+    render(<Home />);
+
+    expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-footer')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-test-results')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-uploader')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-download')).toBeInTheDocument();
+  });
+
+  it('handles valid credential upload', async () => {
+    (isEnvelopedProof as jest.Mock).mockReturnValue(false);
+
+    render(<Home />);
+
+    const uploader = screen.getByTestId('mock-uploader');
+    fireEvent.click(uploader);
+
+    await waitFor(() => {
+      expect(toast.error).not.toHaveBeenCalled();
+    });
+  });
+
+  it('handles invalid credential format', async () => {
+    (CredentialUploader as jest.Mock).mockImplementation(
+      ({ onCredentialUpload }: { onCredentialUpload: (credential: { verifiableCredential: any }) => void }) => (
+        <button data-testid='mock-uploader' onClick={() => onCredentialUpload('' as any)}>
+          Upload
+        </button>
+      ),
+    );
+
+    render(<Home />);
+
+    const uploader = screen.getByTestId('mock-uploader');
+    fireEvent.click(uploader);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Invalid credential format');
+    });
+  });
+
+  it('handles unknown credential type', async () => {
+    (CredentialUploader as jest.Mock).mockImplementation(
+      ({ onCredentialUpload }: { onCredentialUpload: (credential: { verifiableCredential: any }) => void }) => (
+        <button data-testid='mock-uploader' onClick={() => onCredentialUpload(mockCredential)}>
+          Upload
+        </button>
+      ),
+    );
+
+    (isEnvelopedProof as jest.Mock).mockReturnValue(false);
+
+    render(<Home />);
+
+    const uploader = screen.getByTestId('mock-uploader');
+    fireEvent.click(uploader);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Unknown credential type');
+    });
+  });
+
+  it('handles enveloped credential correctly', async () => {
+    const mockEnvelopedCredential = {
+      type: ['VerifiableCredential', 'DigitalProductPassport'],
+    };
+
+    (isEnvelopedProof as jest.Mock).mockReturnValue(true);
+    (decodeEnvelopedCredential as jest.Mock).mockReturnValue(mockEnvelopedCredential);
+
+    render(<Home />);
+
+    const uploader = screen.getByTestId('mock-uploader');
+    fireEvent.click(uploader);
+
+    await waitFor(() => {
+      expect(decodeEnvelopedCredential).toHaveBeenCalled();
+      expect(toast.error).not.toHaveBeenCalled();
+    });
+  });
+
+  it('handles error decoding credential', async () => {
+    (isEnvelopedProof as jest.Mock).mockImplementationOnce(() => {
+      throw new Error('Error decoding credential');
+    });
+
+    render(<Home />);
+
+    const uploader = screen.getByTestId('mock-uploader');
+    fireEvent.click(uploader);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Failed to process credential');
+    });
+  });
+});