Angular Inputs View Displays, Any way to Quickly Swap Test Input Data?

Question

How do I create Mock data to plug in and test displays? Everytime, we want to view an HTML rendering, have to literally copy and paste data into Typescript file. Is there any toolset to conduct this?

Currently testing @Inputs, which are being displayed in HTML

In researching following options,

• It is not an API, so cannot use InMemoryDbService from “angular-in-memory-web-api” https://www.techiediaries.com/angular-inmemory-web-api/
• Also not database, so cannot apply json-server https://medium.com/letsboot/the-perfect-mock-backend-to-start-with-an-angular-application-3d751d16614f

What options exist to quickly swap Inputs? or do people have to copy and paste into each file, is this customary in Angular?

Typescript

export class CustomerView implements OnInit {

  @Input() customer: Customer;
    this.customer.name = "Joe";
    this.customer.address = "123 Maple STreet";
    this.customer.city = "Atlanta";
    this.customer.state = "GA";
    this.customer.zip= "30314";
    this.customer.phone = "555-444-77777";

HTML

    <div class = "row">
        <div> {{customer.name}} </div>
        <div> {{customer.address}} </div>
        <div> {{customer.city}} </div>
        <div> {{customer.state}} </div>
        <div> {{customer.zip}} </div>
        <div> {{customer.phone}} </div>
    </div>

Display example plcture

Answer 1

You can create a json file or Object with the required fields.

  customerDummy = {
    name: "Joe",
    address: "123 Maple STreet",
    city: "Atlanta",
    state: "GA",
    zip: "30314",
    phone: "555-444-77777",
  }

Whenever you are you create a variable just assign the value. For eg

@Input() customer: Customer = customerDummy;