4 tips for writing Angular unit tests, come and take a look!

Test ideas:

• 1. If unit testing is possible, try to give priority to unit testing.
• 2. If unit testing is not possible, test through a layer of packaging. For example, encapsulating the test into a component, but it is weaker than integration testing.
• 3. Integration testing
• 4. E2E testing

The difficulty of the test also gradually increases, and the more time it takes. If you want to make testing simple, then during development, you should consciously clarify your ideas and write code that is simple and efficient~.

The testing technology stack used in this article: Angular12 + Jasmine. Although the syntax of other testing technologies is different, the overall idea is similar. [Related tutorial recommendation: "angular tutorial"]

Tips: Jasmine test case determination, what are the methods, you can find it here, click on the component in my

unit test

, the default is the instance of the object to be tested created by Angular using the following syntax

beforeEach(() => { 
  fixture = TestBed.createComponent(BannerComponent); 
  component = fixture.componentInstance; 
  fixture.detectChanges(); 
});

Function test

1. Function call with no return value

function test(index:number,fn:Function){
 if(fn){
     fn(index);
 }
}

How to test?

Counter example: Directly testing the return value undefined

const res = component.test(1,() => {}));
  expect(res).tobeUndefined();

Recommended practice:

# Use Jasmine
 it('should get correct data when call test',() =>{
     const param = {
       fn: () => {}
    }
   spyOn(param,'fn')
   component.test(1,param.fn);
   expect(param.fn).toHaveBeenCalled();
 })

Structure instruction HostListener tests

structure instructions. Commonly used words are hiding, displaying, and for loops to display such functions.

# code
 @Directive({ selector: '[ImageURlError]' })
export class ImageUrlErrorDirective implements OnChanges {
  constructor(private el: ElementRef) {}
  
  @HostListener('error')
  public error() { 
      this.el.nativeElement.style.display = 'none';
  } 
}

How to test?

Test idea:

• The image is not triggered until there is an error in loading the image. Then find a way to trigger the error.
• The command is generally attached to the component. On the component image element, just use errorEvent under dispath

. #1. Add a custom component and add Custom directive @Component({
  template: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
class TestHostComponent {

}

#2. Instantiate the custom component view and dispatch errorEvent
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        declarations: [
            TestHostComponent,
            ImageURlError
        ]
    });
}));

beforeEach(() => { 
 fixture = TestBed.createComponent(TestHostComponent); 
 component = fixture.componentInstance; 
 fixture.detectChanges();
});
  
it('should allow numbers only', () => {
    const event = new ErrorEvent('error', {} as any);
    const image = fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //Just dispatch the event, and the error() method will be executed at this time});

Make good use of the public, private, and protected modifiers.

Public modification in angular, spec.ts can Access; but private, protected modifications are not allowed;

knock on the blackboard

• if you plan to do unit testing and test each method, then please use public appropriately --- Difficulty *
• If you do not plan to test each method, then you can pass Organize the data, call the entrance, and pass the integration test-difficulty ***

test

click event. The triggering of the click event can include direct js calling click, or imitating the mouse to trigger the click event.

#xx.component.ts
@Component({
 selecotr: 'dashboard-hero-list'
})
class DashBoardHeroComponent {
    public cards = [{
        click: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [cards]="cards" class="card">
</dashboard-hero-list>`

How to test?

Testing idea:

• test the component directly, do not use
• the collection of objects containing click events returned by the Host, and call click one by one, so that the code coverage will be improved

it('should get correct data when call click',() => {
    const cards = component.cards;
    cards?.forEach(card => {
        if(card.click){
            card.click(new Event('click'));
        }
    });
    expect(cards?.length).toBe(1);
});

Other click reference ideas:

Idea 1:

• Use TestHostComponent to wrap the component that needs to be tested
• and then use fixture.nativeElement.querySelector('.card') to find the click element bound to the component;
• on the element, trigger dispatchEvent, that's it.

Idea 2:

• Test the component directly, without using Host

• and then use fixture.nativeElement.querySelector('.card') to find the bound click element;

• use triggerEventHandler('click');