mhamel06

import { TransactionItem } from '@ng9-comp-harness/ui';

export const MOCK_ACTIVITY: TransactionItem[] = [
    {
        amount: 50,
        description: 'Legend of Zelda',
        date: new Date('2/10/2020'),
    },
    {
        amount: 39.99,

mhamel06

import { Component } from '@angular/core';
import { TransactionItem } from '@ng9-comp-harness/ui';
import { MOCK_ACTIVITY } from '../models/mocks/activity.mock';

@Component({
  templateUrl: './list-activity.component.html',
})
export class ListActivityComponent {

  activityItems: TransactionItem[] = [...MOCK_ACTIVITY];

mhamel06

<div class="item-container">
    <div class="row">
        <div class="date">{{item?.date | date}}</div>
        <div class="amount">{{item?.amount | currency}}</div>
    </div>
    <div class="row">
        <div class="key">Description</div>
        <div class="value description">{{item?.description}} <span *ngIf='item?.pending'>(Pending)</span></div>
    </div>
    <div class="row button">

mhamel06

import { Component, Input, Output } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { TransactionItem } from '../models/transaction-item.model';

@Component({
  selector: 'ng9-comp-harness-transaction-item',
  templateUrl: './transaction-item.component.html',
  styleUrls: ['./transaction-item.component.scss']
})
export class TransactionItemComponent {

mhamel06

it('should call click transaction with amount of $59.99', async()=>{
    fixture.detectChanges();
    spyOn(component, 'viewTransaction');

    const transactionItemHarness = await loader.getHarness(
        TransactionItemHarness.with({
            itemAmount: '$59.99'
        })
    );

mhamel06

import { ComponentHarness, BaseHarnessFilters, HarnessPredicate } from '@angular/cdk/testing';

interface TransactionItemHarnessFilters extends BaseHarnessFilters{
    itemAmount?: string;
    transactionPending?: boolean;
}

export class TransactionItemHarness extends ComponentHarness{
    static hostSelector = 'ng9-comp-harness-transaction-item';
    protected getViewTransactionButton =  this.locatorFor('button');

mhamel06

it('should not call viewTransaction on first pending transaction: with harness', async()=>{
    fixture.detectChanges();
    spyOn(component, 'viewTransaction');

    /*
    * Find the first transactionItem that is marked as pending
    * */
    const transactionItemHarness = await loader.getHarness(TransactionItemHarness.with({
      transactionPending: true
    }));

mhamel06

 it('should not call viewTransaction on the first pending transaction', async()=>{
    fixture.detectChanges();
    spyOn(component, 'viewTransaction');

    /*
    * Find all the transaction item elements and only return the elements
    * that have a disabled button.
    * */
    const transactionItemEls = fixture.debugElement.queryAll(By.css('ng9-comp-harness-transaction-item'))
      .filter(el => !!el.query(By.css('button[disabled]')));

mhamel06

it('should not call viewTransaction on pending transactions: with harness', async()=>{
    fixture.detectChanges();
    spyOn(component, 'viewTransaction');

    const transactionItemHarness = await loader.getHarness(TransactionItemHarness.with({
      transactionPending: true
    }));

    await transactionItemHarness.clickViewTransactionButton();
    expect(component.viewTransaction).not.toHaveBeenCalled();

mhamel06

it('should not call viewTransaction on the first pending transaction', async()=>{
    fixture.detectChanges();
    spyOn(component, 'viewTransaction');

    /*
    * Find all the transaction item elements and only return the elements
    * that have a disabled button.
    * */
    const transactionItemEls = fixture.debugElement.queryAll(By.css('ng9-comp-harness-transaction-item'))
      .filter(el => !!el.query(By.css('button[disabled]')));