Testing

A first example

                    describe('the pizza service', () => {
    it('should have getPizze', () => {
        let pizzaService = new PizzaService();

        expect(service.getPizze).toBeDefined();
    });
    describe('getPizze should return salami pizza', () => {
        it('should return some pizza', () => {
            let pizzaService = new PizzaService();
            let salami = new Pizza('Salami');

            let pizze: Pizza[] = service.getPizze();

            expect(pizze).toContain(salami);
        });
    });
});
                

Jasmine vs JUnit

• @Test => it('should ...')
• @Ignore => xdescribe, xit
• Execute one test => fdescribe, fit
• Assert => expect
• @BeforeClass => beforeAll
• @AfterClass => afterAll
• @Before => beforeEach
• @After => afterEach

Matchers and Docs

• Documentation with examples
• Matcher Syntax: expect(object).toBe(expected) => object === expected
• toBeDefined(), toBeTruthy(), toBeUndefined(), toEqual(object), toBeNull(), toMatch(regex)

Spys

• spyOn(object, methodName) => Spy
• let pizzaSpy = spyOn(pizzaService, 'getPizze');
• pizzaSpy.and.returnValue(pizzaArr);
• pizzaSpy.callFake(() => pizzaArr);
• expect(pizzaSpy).toHaveBeenCalled();

Elaborate Example

• can be found on branch Testing_Intro

Angular Testing Utils: TestBed

• TestBed creates it's own Angular Module, just for this test
• the method configureTestingModule expects a module configuration with declarations, providers etc.
• In this test the component isn't attached to the AppModule of the application, but to the test module instead
• At least the component and the test have to be declared

Angular Testing Utils: createComponent

• TestBed.createComponent instantiates the component that should be tested
• After creating the component, the TestBed configuration may not be changed anymore
• the method returns a ComponentFixture
• the fixture allows you to access the component instance, fixture.componentInstance
• as well as the DebugElement: fixture.debugElement

Angular Testing Utils: DebugElement

• Using DebugElement the DOM can be accessed
• using debugElement.nativeElement the component's HTMLElement can be accessed
• on a HTMLElement it's possible to retrieve its text using textContent
• using debugElement.query(predicate) => DebugElement and queryAll(predicate) => DebugElement[] the DOM of the element can be searched for further HTMLElements.

ComponentFixture.detectChanges()

trigger change detection in a test

• The initialization of bindings is triggered initially with fixture.detectChanges()
• all changes to a component require a new call of fixture.detectChanges()

A first example

                    describe('MyComp', () => {
    let component: MyComp;
    let fixture: ComponentFixture<MyComp>;
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [MyComp]
        });
        fixture = TestBed.createComponent(MyComp);
        component = fixture.componentInstance;
    });
    it('should work', () => {
        let de: DebugElement = fixture.debugElement.query(
            By.css('h3'));
        let el: HTMLElement = de.nativeElement;
        component.title = 'my title';
        fixture.detectChanges();
        expect(el.textContent).toEqual('my title');
    });
});
                

Task 12.1 - Component Testing

• Branch: 11_Forms_3
• Extract the h1 title into its own component
• write a test that asserts, that the title contains the correct text

Task 12.1 - Possible Solution

• Branch: 12_Testing_1
• if you want to throw your local changes away and you want to see the solution: git reset --hard && git checkout 12_Testing_1

Using Test Host Components

• if you're using @Input() and @Output() it's very easy to test the component with a dummy parent
• create an inline component inside of the test
• this component mounts the component that is to be tested
• both have to be present in the declarations array
• queries as usual via CSS
• the dummy host component has to be created

Using Test Host Components

                    describe('Header Component with a host component', () => {

    @Component({
        template: `<comp [prop]="'dummy value'"></comp>`
    })
    class HostComponent {
    }

    let fixture: ComponentFixture<HostComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [HostComponent, MyComponent],
        });
        fixture = TestBed.createComponent(HostComponent);
    });
    // ....
    // actual Test Code
});
                

Task 12.2 - Host Component Testing

• Branch: 12_Testing_1
• Pass the title via @Input() to the header component
• write a test that uses a dummy host component and passes a title to the header component via [propertyBinding]

Task 12.2 - Possible Solution

• Branch: 12_Testing_2
• if you want to throw your local changes away and you want to see the solution: git reset --hard && git checkout 12_Testing_2

Task 12.3 - Testing Pipes

• Branch: 12_Testing_2
• you are guessing it ;-)
• write a test for the phonenumber pipe
• use the number 0564410808 once without CountryCode and once with CountryCode and assert the results with an expectation

Task 12.3 - Possible Solution

• Branch: 12_Testing_3
• if you want to throw your local changes away and you want to see the solution: git reset --hard && git checkout 12_Testing_3

Dependency Injection in Tests

• can be done in a beforeEach block
• using the async function
• it expects as parameter an Array of dependencies and a function to which the instances are passed
• They have to be registered as providers in the testing module

                    beforeEach(inject([myService, MockBackend],
    (myService, mockBackend) => {
    service = myService;
    backend = mockBackend;
}));
                

Usage of the MockBackend

• we instantiate the Http provider using the MockBackend and the BaseRequestOptions
• with useFactory we signal, that we provide a factory method to instantiate the provider
• Important here is the MockBackend: It allows us to check connections and reply with mocked replies

                    beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [HttpModule],
        providers: [VisitorService, MockBackend,
            BaseRequestOptions,
            {
                provide: Http,
                useFactory: (backend, defaultOptions) =>
                    new Http(backend, defaultOptions),
                deps: [MockBackend, BaseRequestOptions]
            }
        ]
    });
});
                

HTTP Method and URL Assertion

                    backend.connections.subscribe(connection => {
    expect(connection.request.url).toBe('api/visitors');
    expect(connection.request.method)
        .toEqual(RequestMethod.Get);
});
                

Defining a Mock Reply

                    backend.connections.subscribe(connection => {
    let responseOptions = new ResponseOptions(
        {
            body: mockResponse
        }
    );
    connection.mockRespond(new Response(responseOptions));
});
                

calling the service and checking the result

                    it('should get the Visitors as an Observable', () => {
    service.getAllVisitors().subscribe(visitors => {
        expect(visitors.length).toBe(1);
        expect(visitors[0].firstName).toEqual('Petra');
    });
});
                

Everything in Action

• See branch 12_Testing_4
• in the file src/app/cinema/visitors/visitor.service.spec.ts
• Important: Most of the testing API's have the status @Experimental
• From my point of view, there's still much room for improvement regarding the testing API's
• many common use cases could be covered in a simpler way

Simplification Example

                    const mockedHttpProvider: FactoryProvider = {
    provide: Http,
    deps: [MockBackend, BaseRequestOptions],
    useFactory: (backend: MockBackend,
        defaultOptions: BaseRequestOptions) => {
        return new Http(backend, defaultOptions);
    }
};
beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [HttpModule],
        providers: [
            VisitorService,
            MockBackend,
            BaseRequestOptions,
            mockedHttpProvider
        ]
    });
});