DISCLAIMER

This post was originally posted on SDN on 08-06-2021. I decided to keep some of my posts here too.

When testing UI5 applications using UI5 MockServer you can generate mock data for you OData service, but they are often not very useful if you have rich frontend with some logic based on specific values. You can also prepare and edit the files manually and keep updating them when you change something in your service – which is super annoying if you are starting from scratch with the application without the data model and backend at the beginning. Please also remember that The Principle Of Unnecessary Manual Work says:

It’s a tedious task to do work, which can be done by computers.

OK, there is no such principle in the real world stated anywhere, but it was exactly the case when some time ago I put more advanced mock data files generation in my Brackets-UI5 extension and now – after tuning and polishing – I ported it to VS Code.

I will explain it on a case.

Using Fiori extensions I generated a sample list-report app for the service SEPMRA*SHOP available in the trial ABAP 1909 Docker system. I added few annotations to expose fields, then run it with default mock data (npm run start-mock):

The list page:

The object page:

Not nice. In the list page I get rather dumb data, in the object page I get nothing.

With start-mock option, no data files are generated. But I can create them with my extension, using the command:

Then I get them in mockdata folder:

Now app is refreshed, the list page looks like before, but finally I get something in the object page:

Still not nice for me. I could manually edit files, but remember about the principle.

Let’s say that for product names and description I would like to have something which more closely mimic the real word products; description should be also longer. For currencies I need only USD and PLN, for dimensions – cm and mm, also I would like to use more standardized metrics set, not such fully random ones. For each product I would like to have more reviews, also with longer texts for rating texts. For testing I’m ok with 10 products, but 100 reviews randomly assigned to each product. Finally for suppliers would be also better to have more real-world style address data.

After creating file .rules.json with my requirements, I can again run the command and regenerate data files. The app will be automatically reloaded thanks to the excellent UI5 tooling which runs under the hood of Fiori extensions.

This time the list page is nicer:

The object page (no, I did not set the kitty image manually….):

and the Supplier section:

Much better.

✔️ I used faker.js to generate values

✔️ I used my own value sets

✔️ I was able to relate the data

✔️ I can experiment and just hit the command to regenerate files

✔️ I did not have to edit metadata (in fact it can be taken via http, not only from a local file)

Needed configuration comes from a special .rules.json file, for the case above it looks like:

{
  "variables": {
    "currencies": ["USD", "PLN"],
    "uom": ["cm", "mm"],
    "measures": [1, 5, 10, 15, 20, 25, 30, 50, 100],
    "productIDs": [
      "Id 1",
      "Id 2",
      "Id 3",
      "Id 4",
      "Id 5",
      "Id 6",
      "Id 7",
      "Id 8",
      "Id 9",
      "Id 10"
    ]
  },
  "predefined": {
    "Product": {
      "CurrencyCode": "$ref:currencies",
      "DimensionUnit": "$ref:uom",
      "DimensionHeight": "$ref:measures",
      "DimensionWidth": "$ref:measures"
    },
    "Review": {
      "ProductId": "$ref:productIDs"
    }
  },
  "faker": {
    "Product": {
      "Name": "commerce.productName",
      "Description": "commerce.productDescription",
      "ImageUrl": "image.image"
    },
    "Review": {
      "UserDisplayName": "internet.userName",
      "Comment": "lorem.paragraph"
    },
    "Supplier": {
      "Name": "company.companyName",
      "Email": "internet.email",
      "ContactPhone1": "phone.phoneNumber",
      "FormattedAddress": "{{address.streetAddress}}, {{address.zipCode}} {{address.city}}, {{address.country}}",
      "WebAddress": "internet.url"
    }
  },
  "lengthOf": {
    "Reviews": 100
  }
}

How to get such data is described on the extension’s page.

PS. You can also check my other extension for UI5 API reference in the side bar.