Testing Your PatternFly Element in Angular

We’ve built PatternFly Elements to work in most frontend frameworks and Angular is one of the frameworks that we formally support. So, we must test our components in Angular.

Prerequisites

You’ll need to have the Angular CLI installed and we’ll need to generate a new application using the cli.

ng new pfe-test-app
cd pfe-test-app
npm run start 

Setup

Before we go any further, we need to make sure Angular is ready to use web components. In src/app/app.module.ts , you need to import CUSTOM_ELEMENTS_SCHEMA from @angular/core and you need to add the CUSTOM_ELEMENTS_SCHEMA to the schemas array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Link your component

Use npm link to reference the component locally. First, all of our components depend on pfelement so we need to make sure we use npm link to bring it into our project. My PatternFly Elements repository is located at ~/Documents/GitHub/patternfly-elements.

From the pfe-test-app directory, I run the following.

npm link ~/Documents/GitHub/patternfly-elements/elements/pfelement

This links a local version of pfelement component into the node_modules directory of my Angular app. Next, I can npm link any of the other components into the project.

For example, if I wanted to test pfe-accordion in my project, from the pfe-test-app directory, I would run the following.

npm link ~/Documents/GitHub/patternfly-elements/elements/pfe-accordion

Add the component

In src/app/app.component.ts import your component.

import { Component } from '@angular/core';
import "@patternfly/pfe-accordion";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-dream-app';
}

Then add your markup to src/app/app.component.html.

<pfe-accordion>
  <pfe-accordion-header>
    <h3>Why do wizards need money if they could just create it?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Why doesn't Harry have a portrait of his parents?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
  </pfe-accordion-panel>
</pfe-accordion>

Then begin testing your component.

Things to look for

Does the component render properly?

Angular is a bit tricky in that when a web component’s connectedCallback runs, Angular will have stripped out any of the light DOM and will put it back later. So if your component is reading the light DOM in the connectedCallback, it will appear that your component has zero children in the light DOM.

To learn a bit more about this issue and how you can get around it, check out this post on how to build “More Resilient Web Components in Angular (or anywhere else) with MutationObserver.”

Can you work with the element’s API if it has one?

For example, would you be able to call the expand API from app.component.ts?

Can you use data binding to update content or attributes?

If I were testing pfe-tabs, I’d want to test that I can use data binding to update the selected-index attribute on pfe-tabs to change the open tab.

Wrap up

That should be enough to get you started. Ultimately, we’d like to automate all of this. But for now, we’re doing our testing manually.