Mocking the Search Functionality

With the new and submit operations in place, we can now mock the search and view functionality. This will allow us to simulate real backend responses for listing and viewing companies.

---

Step 1: Create the search.json and view.json Files

Navigate to the src-mock/data/ folder and create the following two files:

search.json

This file represents a list of company records returned from the backend search endpoint.

src-mock/data/search.json: (truncated for clarity)

search.json

{
  "totalRecords": 1,
  "currentPage": 1,
  "lastPage": 1,
  "pageSize": 100,
  "first": true,
  "last": false,
  "hasNextPage": true,
  "hasPreviousPage": false,
  "sort": [],
  "records": [
    {
      "id": "b6843532-f1f4-4e4e-93d1-8ee2d7be95bf",
      "version": 1,
      "data": {
        "companyName": "Test Company",
        "legalForm": "LLC",
        "establishedDate": "2025-04-26",
        "capital": 12123,
        "employees": 12,
        "type": {
          "code": "IT",
          "description": "Information Technology"
        },
        "phone": "123456789",
        "email": "[email protected]",
        "vatNumber": null,
        "remark": null,
        "address": {
          "street": "67 street",
          "city": "Los Angeles",
          "state": "California",
          "zip": "12345"
        },
        "website": "testcompany.it",
        "shareholders": [
          {
            "id": "f40a683a-96df-43ea-a731-daeba18ef87f",
            "firstName": "Alice",
            "lastName": "Doe",
            "phone": "123456789",
            "email": "[email protected]",
            "shares": 500,
            "percentage": 50,
            "_eid": "f40a683a-96df-43ea-a731-daeba18ef87f"
          },
          {
            "id": "6b2f725e-5355-4899-bd00-df6ac815ed06",
            "firstName": "Bob",
            "lastName": "Doe",
            "phone": "123456789",
            "email": "[email protected]",
            "shares": 500,
            "percentage": 50,
            "_eid": "6b2f725e-5355-4899-bd00-df6ac815ed06"
          }
        ]
      },
      "metadata": {
        "states": [
          "SUBMITTED"
        ],
        "tags": [],
        "created": {
          "startOperation": "NEW",
          "operation": "SUBMIT",
          "state": "SUBMITTED",
          "user": {
            "username": "bob",
            "name": "Bob Doe"
          },
          "date": "2025-04-15",
          "dateTime": "2025-04-15T12:36:09"
        },
        "prev": {
          "startOperation": "",
          "operation": "",
          "state": "",
          "user": {
            "username": "",
            "name": ""
          },
          "date": null,
          "dateTime": null
        },
        "current": {
          "startOperation": "NEW",
          "operation": "SUBMIT",
          "state": "SUBMITTED",
          "user": {
            "username": "bob",
            "name": "Bob Doe"
          },
          "date": "2025-04-15",
          "dateTime": "2025-04-15T12:36:09"
        }
      },
      "startOperations": [
        {
          "id": "REVIEW",
          "type": "UPDATE",
          "ordinal": 2,
          "uri": "/api/v1/registration/company/start-operations/acd8698e-5ae8-4525-8d78-e1a4f76991d7/view",
          "security": {
            "mustAuthenticate": true,
            "mustAuthorize": true,
            "roles": [
              "so:companies:approve",
              "so:companies:reject"
            ],
            "scopes": [],
            "claims": []
          },
          "attributes": {}
        }
      ],
      "operations": [],
      "attributes": {}
    }
  ]
}

view.json

This file simulates the detailed view of a single company.

src-mock/data/view.json:

view.json

{
  "id": "b6843532-f1f4-4e4e-93d1-8ee2d7be95bf",
  "version": 1,
  "data": {
    "companyName": "Test Company",
    "legalForm": "LLC",
    "establishedDate": "2025-04-26",
    "capital": 12123,
    "employees": 12,
    "type": {
      "code": "IT",
      "description": "Information Technology"
    },
    "phone": "123456789",
    "email": "[email protected]",
    "vatNumber": null,
    "remark": null,
    "address": {
      "street": "67 street",
      "city": "Los Angeles",
      "state": "California",
      "zip": "12345"
    },
    "website": "testcompany.it",
    "shareholders": [
      {
        "id": "f40a683a-96df-43ea-a731-daeba18ef87f",
        "firstName": "Alice",
        "lastName": "Doe",
        "phone": "123456789",
        "email": "[email protected]",
        "shares": 500,
        "percentage": 50,
        "_eid": "f40a683a-96df-43ea-a731-daeba18ef87f"
      },
      {
        "id": "6b2f725e-5355-4899-bd00-df6ac815ed06",
        "firstName": "Bob",
        "lastName": "Doe",
        "phone": "123456789",
        "email": "[email protected]",
        "shares": 500,
        "percentage": 50,
        "_eid": "6b2f725e-5355-4899-bd00-df6ac815ed06"
      }
    ]
  },
  "metadata": {
    "states": [
      "SUBMITTED"
    ],
    "tags": [],
    "created": {
      "startOperation": "NEW",
      "operation": "SUBMIT",
      "state": "SUBMITTED",
      "user": {
        "username": "bob",
        "name": "Bob Doe"
      },
      "date": "2025-04-15",
      "dateTime": "2025-04-15T22:50:27"
    },
    "prev": {
      "startOperation": "",
      "operation": "",
      "state": "",
      "user": {
        "username": "",
        "name": ""
      },
      "date": null,
      "dateTime": null
    },
    "current": {
      "startOperation": "NEW",
      "operation": "SUBMIT",
      "state": "SUBMITTED",
      "user": {
        "username": "bob",
        "name": "Bob Doe"
      },
      "date": "2025-04-15",
      "dateTime": "2025-04-15T22:50:27"
    }
  },
  "startOperations": [],
  "operations": [],
  "attributes": {}
}

---

Step 2: Register Mock Endpoints

Open src-mock/index.cjs and add the following mock routes:

// Search companies
app.get('/api/v1/registration/company/search', (req, res) => {
  res.send(require('./data/search.json'));
});

// View a specific company by ID
app.get('/api/v1/registration/company/start-operations/:id/view', (req, res) => {
  res.send(require('./data/view.json'));
});

These endpoints mock the data for both:

• Search list (used in the company table)
• Company view (used when accessing company details)

---

Test the Search & View Pages

1. Go to the Search page.
2. You should now see mock data displayed in the table.

3. Click on a company name to access the View page.
4. Verify that all data renders correctly and that actions such as Approve or Reject (if configured) are visible.

---

Next Steps

Now that the mock backend is complete, your frontend is fully testable—no live backend required.

You can continue testing different flows or expand the mock data to simulate edge cases and permissions.