Component Logic - Stencil

component.tsx

//instance.tsx

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-instance'
})
export class MyInstance {
  /**
   * The first name
   */
  @Prop() first: string;

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  format () {
    return [this.first, this.middle, this.last].filter (e => !!e).join(' ');
  }
}

// instance.spec.ts
import { MyInstance } from './instance';

it ('Should format the name', () => {
  let cmp = new MyInstance();
  cmp.first = 'Donald';
  cmp.last = 'Duck';
  expect(cmp.format()).toEqual('Donald Duck');
});