Simplifying LWC Development with Mock Data generated by ChatGPT

When working on a Lightning Web Component (LWC) project, I encountered a common challenge during development: needing test data to evaluate the functionality of a carousel component. However, my Salesforce organization lacked the number of products required for comprehensive testing.

I also wanted to streamline my development and testing process without republishing the entire site after every minor change; one of the drawbacks of LWR sites. Since this component is only available to a logged-in user, I had to republish the site after every minor change and re-login as the user.

To overcome these challenges, I decided to create mock data to simulate a substantial number of products. The first step was to analyze my component structure and identify the minimum fields necessary for rendering. Armed with this insight, I turned to ChatGPT for assistance.

ChatGPT Prompt

let's say we have a JSON object which is array of products named productList

productList is an array of products with this attributes

productId

index (is equal to the position in the productList array)

productName

partNumber

salesPrice

sku

salesPack

also each product object has a child object named inventory and inventory has an attribute named primaryQuantity which in our case for all objects is equal to 100

product also has another attribute named imageUrl

ok now you know the structure, write me a javascript function that creates that data, the input is an integer and output is the array of products.

The number of products equal to the input number. for the partNumber and salesPrice randomly generate some data, for SKU choose randomly from this pool [1308Q, 10QRED]

for productId choose from [01t54000004C97zAAC, 01t54000004C97vAAC] and for imageUrl choose from [https://www.myimagerepo.com/imagesns/PLPD/1-Webb.jpg, https://www. myimagerepo.com/imagesns/PLPD/2-Webb.jpg]"

You can modify the instructions above anyway you need to.

ChatGPT Generated Code

Note: Remove the word "function" after the first code snippet in LWC.

function generateProductList(numProducts) {
  const skuPool = ["1308Q", "10QRED"];
  const productIdPool = ["01t54000004C97zAAC", "01t54000004C97vAAC"];
  const imageUrlPool = [
    "https://www.myimagerepo.com/imagesns/PLPD/1-Webb.jpg",
    "https://www.myimagerepo.com/imagesns/PLPD/2-Webb.jpg"
  ];

  const productList = [];

  for (let i = 0; i < numProducts; i++) {
    const partNumber = "PART-" + (i + 1);
    const salesPrice = (Math.random() * 1000).toFixed(2);
    const randomSku = skuPool[Math.floor(Math.random() * skuPool.length)];
    const randomProductId = productIdPool[Math.floor(Math.random() * productIdPool.length)];
    const randomImageUrl = imageUrlPool[Math.floor(Math.random() * imageUrlPool.length)];

    const product = {
      productId: randomProductId,
      index: i,
      productName: "Product " + (i + 1),
      partNumber: partNumber,
      salesPrice: salesPrice,
      sku: randomSku,
      salesPack: "Pack " + (i + 1),
      imageUrl: randomImageUrl,
      inventory: {
        primaryQuantity: 100
      }
    };

    productList.push(product);
  }
  return productList;
}

To use this function, I created a TestCarousel component that would generate the data in its connectedCallback() and then passed the data to my carousel component:

import { LightningElement } from 'lwc';

export default class TestCarousel extends LightningElement {

    prodList = [];
    hasProducts = false;

    connectedCallback() {
        this.prodList = this.generateProductList(23);
        this.hasProducts = this.prodList.length > 0;
    }
}

And the html to render my carousel with the test data passed to it through product-list attribute and prodList as value:

<template>
    <div>Testing carousel</div>
    <c-product-carousel product-list={prodList}></c-product-carousel>
</template>

In this way, I had a constant supply of test data that I could use to evaluate my carousel component's performance. The advantage of this approach was twofold:

1. Streamlined Development: I no longer needed to republish the entire site and log in as a test user to verify my changes. A simple save and deployment of the LWC component, while placing the TestCarousel component on the home page, followed by a quick refresh in the Builder , allowed me to preview my updates instantly.

2. Abundant Test Data: I had a substantial amount of test data at my disposal which enabled me to thoroughly assess the carousel component's behavior under various conditions.

By generating mock data in this manner, I simplified my LWC development process and improved the efficiency of my testing.