Introduction

Angular Playground is similar to React StoryBook which allows us to test UI of components, directives and pipes.

Add sandboxes for a component

Angular Playground searches sandbox.ts files for sandboxes. For a component, we need to add different sandboxes for different presentations of a component

export default sandboxOf(AddWidgetComponent, {
  imports: [
    AddWidgetModule
  ],
  declareComponent: false
}).add('display form', {
  template: `<app-add-widget>`
});

• sandboxOf: component class
• import: module of the component so that Playground can load required module
• declareComponent: ignore declaration from the imported modules
• add: sand box name and template for displaying the component.

Add method create a component (host-component) which has the template declared. It means that the created component will contain the testing component. We can add properties or methods into this host-component using context and bind them to the testing component.

export default sandboxOf(EditBarWidgetFormComponent, {
  imports: [
    WidgetsModule
  ],
  declareComponent: false
}).add('normal appearance', {
  template: `
    <app-edit-bar-widget-form
      [barWidget]="barWidget"
      [chartTypes]="chartTypes"
      [xAxisColumns]="xAxisColumns"
      [yAxisColumns]="yAxisColumns"
    ></app-edit-bar-widget-form>
  `,
  context: {
    barWidget: mockBarWidget(),
    chartTypes: mockBarChartTypes(),
    xAxisColumns: mockXAxisColumns(),
    yAxisColumns: mockYAxisColumns(),
  }
});

• context: declare host-component properties and methods
• template: bind host-component's properties and methods to testing component.

For more information on the API, please refer API

Run Angular Playground:

npm run playground

Search for Sandbox:

Press F1 or Ctrl+O and search for the component name.