jeudi 24 septembre 2020

Material CDK Harness Testing Issue

I'm trying to learn testing with component harnesses in Angular Material and am running into pretty basic problems. I am using the Mat Card example with multiple sections from the official Material documentation. This builds without error, but the test fails to get the title text using getTitleText. The failure is: Expected '' to be 'Shiba Inu'. Also, How would I change the value of myTitle during test? something like:

component.myTitle = 'something new';
fixture.detectChanges()

clothing-detail.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ClothingDetailComponent } from './clothing-detail.component';
import {MatCardHarness} from '@angular/material/card/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';

describe('ClothingDetailComponent', () => {
  let fixture: ComponentFixture<ClothingDetailComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [],
      declarations: [ ClothingDetailComponent ],
    }).compileComponents();

    fixture = TestBed.createComponent(ClothingDetailComponent);
    fixture.detectChanges();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should get mat card', async () => {
    component.m
    const card = await loader.getHarness(MatCardHarness);
    const title = await card.getTitleText();
    expect(card).toBeTruthy();
    expect(title).toBe('Shiba Inu');
  });
});

clothing-detail.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-clothing-detail',
  templateUrl: './clothing-detail.component.html',
  styleUrls: ['./clothing-detail.component.css']
})
export class ClothingDetailComponent implements OnInit {
  myTitle:string = 'Shiba Inu';
  constructor() { }
  ngOnInit(): void {
  }
}

clothing-detail.component.html

<mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title></mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
        bred for hunting.
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>

Aucun commentaire:

Enregistrer un commentaire