Exercise 2: Custom Mock Data Files - Controlled Testing Data

2.1 Why Custom JSON Data?

This approach is essential for:

• Consistent testing scenarios - Same data every time
• Foreign key relationships between entities
• Specific test cases - Data designed for particular UI testing needs

2.2 Implementing Custom JSON Mock Data

In ex2/ , we've replaced random generation with custom JSON files.

1. Create mock data directory and files defined in the ui5-mock.yaml file:

mkdir -p webapp/localService/mainService/data

2. Create Books.json with book data:

Create webapp/localService/mainService/data/Books.json :

[
  {
    "createdAt": "2025-01-01T00:00:00.000Z",
    "createdBy": "admin",
    "modifiedAt": "2025-01-01T00:00:00.000Z",
    "modifiedBy": "admin",
    "ID": "3afb35fa-e2c9-40d0-8e22-90e96ead9944",
    "title": "The Great Gatsby",
    "author": "F. Scott Fitzgerald",
    "price": 12.99,
    "currency_code": "USD",
    "stock": 50,
    "description": "A classic novel about the American Dream",
    "coverUrl": "https://upload.wikimedia.org/wikipedia/commons/7/7a/The_Great_Gatsby_Cover_1925_Retouched.jpg",
    "HasActiveEntity": false,
    "HasDraftEntity": false,
    "IsActiveEntity": true
  },
  {
    "createdAt": "2025-01-01T00:00:00.000Z",
    "createdBy": "admin",
    "modifiedAt": "2025-01-01T00:00:00.000Z",
    "modifiedBy": "admin",
    "ID": "7c8f2a1b-d4e5-4c6a-9b7e-1f3a5c8d2e4b",
    "title": "To Kill a Mockingbird",
    "author": "Harper Lee",
    "price": 14.5,
    "currency_code": "USD",
    "stock": 35,
    "description": "A gripping tale of racial injustice and childhood innocence",
    "coverUrl": "https://upload.wikimedia.org/wikipedia/commons/4/4f/To_Kill_a_Mockingbird_%28first_edition_cover%29.jpg",
    "HasActiveEntity": false,
    "HasDraftEntity": false,
    "IsActiveEntity": true
  }
]

3. Create Currencies.json :

Create webapp/localService/mainService/data/Currencies.json :

[
  {
    "code": "EUR",
    "symbol": "€",
    "name": "Euro"
  },
  {
    "code": "USD",
    "symbol": "$",
    "name": "US Dollar"
  }
]

4. Update UI5 configuration to disable generated data:

In ui5-mock.yaml , change generateMockData: true to generateMockData: false :

services:
  - urlPath: /bookshop
    metadataPath: ./webapp/localService/mainService/metadata.xml
    mockdataPath: ./webapp/localService/mainService/data
    generateMockData: false

5. Start the application:

# from folder ex2
npm run start-mock
# or from root folder
npm run start:ex2

The app shows data from the JSON files; related chapters and reviews appear on the object page.

2.3 Key Benefits

• Predictable Data : Same content every application restart
• Relationship Testing : Create proper foreign key relationships between entities
• Scenario-Specific : Design data for specific UI test cases
• Version Control : JSON files can be committed and shared with team
• Simple Maintenance : Easy to update and modify test scenarios

2.4 Best Practices for JSON Mock Data

Entity Relationships

• Use consistent ID formats (UUIDs)
• Ensure foreign keys match between related entities
• Include all required CAP/OData system fields ( IsActiveEntity , HasActiveEntity , etc.)

Data Variety

• Include different data types to test UI rendering
• Add edge cases (very long strings, special characters, null values)
• Create both draft and active entity states

File Organization

• One JSON file per entity set
• Use entity set names exactly as they appear in metadata
• Keep files in the mockdataPath directory specified in ui5-mock.yaml

Next Steps

Exercise 3 will show how to use JavaScript files for dynamic data generation and custom action implementations that can handle business logic.