Local PCF Development and Testing

1. The Local Development Workflow

The foundation of local PCF development is a command that starts a local web server, runs your component in a "sandbox" called the test harness, and automatically recompiles your code when you make changes.

You start this process from the terminal in Visual Studio Code, within your PCF project's root directory, using this command:

npm start watch

• npm start compiles your code and launches the test harness in a browser.
• The watch flag keeps the process running, watching for any changes to your project files (like index.ts or your CSS). When you save a change, it automatically rebuilds the component and refreshes the test harness. This gives you near-instant feedback.

This video provides a great overview of the initial project creation, build, and test cycle.

2. Navigating the Test Harness

When you run npm start watch, a browser tab will open showing the PCF test harness. It's your local sandbox for component development.

Let's break down the key areas of the test harness. The official Microsoft documentation provides the definitive guide to its features.

As you read, you'll find the harness is divided into a few key areas:

• Component Pane (Left): This is where your PCF component is rendered.
• Context Inputs: This section allows you to simulate different environments:
  • Form Factor: Test how your component looks on Web, Tablet, and Phone layouts.
  • Container Width & Height: As we saw in the last lesson, you can enter pixel values here to test your responsive design at specific container sizes.
• Data Inputs: This is where you provide mock data to your component's properties. This is essential for testing your component's logic.
• Outputs: This area shows the data that your component passes back to the host application via the getOutputs method. It's how you verify that your component correctly returns updated values.

3. Testing with Mock Data

A component is useless without data. The test harness allows you to simulate the data that would normally come from Dataverse. The method depends on whether you're building a field component or a dataset component.

Testing Field-Bound Components:
For components bound to a single field (like a text input or a number slider), the "Data Inputs" pane will show a simple input box for each property defined in your ControlManifest.Input.xml. You can type values directly into these boxes, and the harness will pass them to your component, triggering the updateView method.

Testing Dataset-Bound Components:
For components that display a grid or list of records, you need to provide a set of mock records. The test harness supports this using a .csv file.

The process is:

1. Create a CSV file: In a text editor or spreadsheet program, create a file with column headers that match the data you want to display (e.g., name,email,phone). Add a few rows of sample data.
2. Load the CSV: In the "Data Inputs" section of the harness, find your dataset property and click the "Select a file" button to load your CSV.
3. Map Properties: After loading, the harness will ask you to map the <property> elements from your manifest's <data-set> node to the columns in your CSV file. This tells the harness, for example, that the name column from the CSV should be passed to the property you've named contactName in your manifest.
4. Apply: Click "Apply" to load the data into your component.

4. Debugging Your TypeScript Code in the Browser

Seeing your component render is one thing; stepping through your code to fix bugs is another. Thanks to a technology called source maps, you can debug your original TypeScript code directly in your browser's developer tools, even though the browser is actually running the compiled JavaScript bundle.

This is a powerful feature that leverages your existing development skills. Given your background, you'll be familiar with setting breakpoints and inspecting variables, and you can do all of that here.

Let's walk through how to do this.

Here is the condensed debugging workflow:

1. With the test harness running in your browser, open the developer tools (press F12 or Ctrl+Shift+I).
2. Go to the Sources tab.
3. Use the "open file" shortcut (Ctrl+P) and start typing the name of your component's TypeScript file (e.g., index.ts). You should see a result under a webpack:// path. Select it.
4. You are now viewing your original TypeScript code. Find the method you want to debug, such as updateView.
5. Click in the gutter to the left of a line number to set a breakpoint. A blue marker will appear.
6. Go back to the test harness UI and change a value in the "Data Inputs" pane.
7. This action will trigger your component's updateView method, and the code execution will pause at your breakpoint. You can now inspect the values of variables (like context), check the call stack, and step through your code line by line.

5. Knowing the Limitations of the Test Harness

The local test harness is fantastic for UI development and testing component logic with mock data. However, it is a sandbox and not a fully functional Power Apps environment. It's crucial to know what it cannot do.

In summary, the most common limitations are:

• No context.webAPI calls: Any attempt to call the Dataverse Web API will fail. You'll need to mock the data you expect to receive from these calls.
• No live dataset operations: Paging, sorting, and filtering on datasets do not work. The harness simply displays the static data from your CSV.
• Simplified metadata: Advanced properties of columns, like the full set of options for a Choice/Optionset field, are not available.
• No model-driven app specifics: Features like command bar integration, navigation APIs, and field-level security cannot be tested locally.

To test these scenarios, you must deploy your component to a Dataverse environment.

Conclusion

You have now mastered the local development cycle for PCF components. This is the workflow you will use for the majority of your development time, enabling you to build and iterate rapidly.

Key Takeaways:

• Use npm start watch to launch a local development server that automatically rebuilds your component on any change.
• The local test harness is your sandbox for testing UI, responsiveness, and component logic.
• Use the Data Inputs pane to provide mock data, either through simple inputs or by loading CSV files for datasets.
• Leverage your browser's developer tools and source maps to set breakpoints and debug your original TypeScript code directly.
• Be aware of the limitations of the test harness, especially regarding Web API calls and other live data operations.

What's Next?

You've built, styled, and now thoroughly tested a component on your local machine. The next logical step is to get it into a real Power Platform environment. In our next lesson, we will cover how to package and deploy a PCF component as part of a Dataverse solution, making it available for use in your Model-driven and Canvas apps.