Generating Basic Data — Transcript

Transcript of the free Vue.js lesson Generating Basic Datawatch the video lesson.

js to generate a fake name for our buyer. js for the other fields as well. js has a strong TypeScript definition, you can see that IntelliSense is incredibly useful here via the autocomplete. If we want to come up with a fake mail, for example, we can make use of the Internet module.

Notice that amongst the options for email, I can determine first name, last name, and provider as well. But let's not worry about this just yet. Let's just stay with the default configurations for now. For the country, let's leave it hard-coded for the US.

We'll be coming back to this in a future episode. js will be using the United States by default for other location values, so we don't have to worry about changing anything location-wise at the moment. state. city, and so on.

js allows us to use the full address. This includes additional information, like apartment number. I want that, so let's have it enabled. In regards to the zip code, notice that it supports state as an argument.

But for this to work, the locale needs to have a corresponding postcode by state definition. The default locale does not have that, so let's not worry about enforcing a zip code that corresponds to a specific state. Lastly, For the additional nodes, let's have a fake paragraph by using the loren module. The loren module is made to generate fake text in general, including words, sentences, and, in our case, paragraphs.

js is successfully generating fake data for our recipient details form. We still need to do something similar for the items list. However, because this list involves date and currency, we'll explore this in a future episode instead. Before we end this episode, there is one more thing I want to do.

As you can see, this project is using TypeScript. Most of the work we have done is related to recipient information. js for this project. I'll just create a regular TypeScript class at the root of the source folder.

This class is going to be responsible for returning the delivery details for us. Let's bring over the work that we have done so far into this class. For the recipient information, we can go to the recipient details view and copy the work that we have done. So we have name, email, country.

state, city, street address, and postal code. The additional notes is just using the paragraph method from the Lauren module. For the items, we can go to the items list. And for the delivery date, we can also go to items list dot fill and just copy what we have so far.

Again, the estimated delivery date and the items list are still hard-coded, but we're going to cover those in a future episode. The delivery details method was created here just for me to explain my thought process, but at the moment we're not going to need it. And I want to expose these methods as public. Okay, now let's make use of our Faker wrapper in our review components and in our tests.

The items list can instantiate the Faker wrapper. The same thing for our recipient details. and in our tests. We should be able to see now that our fake generated values are still working as intended, and the same can be said for our tests.

If I put a breakpoint over here and run our tests in debug mode, we should be able to see that the recipient details are always randomly generated. This feels like a great point to wrap up this episode. js can enhance our tests and applications by generating realistic fake data, such as names and addresses. At the moment, we have kept our country hard-coded to the United States.

But what if we want to support other countries? How can we ensure that the state selections, names, and addresses remain authentic for each region? That's exactly what we'll dive into in the next episode. I'll see you then.