Perform an integration test on your component definition and component code using App Studio in your Pega Platform™ development environment.

Your standalone component can be tested using two execution modes:
  • UI Authoring Preview

    When your component is added to a view, the UI Authoring Preview in App Studio will render your component using a standard set of mock data. This data is unlikely to be relevant for your specific component, so it is important to check that the data being passed to your component in UI Authoring mode is in the format you expect. If the data is not in the expected format, you must not render your component with that data.

  • Run-time Portal

    After your component has been configured in UI Authoring, you will preview your component in App Studio or a standalone portal. The props passed to your component will now be the actual data.

NOTE: During component run-time, you can determine the execution mode by checking if the name of the current PConnect context contains the term "authoring".
For example, the following code detects if your component is in authoring mode.
   const [inAuthoringMode, setInAuthoringMode] = useState(false);
   if (getPConnect().getContextName()?.includes('authoring')) {
      setInAuthoringMode(true);
   } 

   if(inAuthoringMode){
      ...
   }