CODEWITHSUNDEEP
angular
Ben Dilts
Ben Dilts

Reputation: 10745

Test Angular 2 component in ES5?

I'm starting a new Angular 2 application. I have a simple component that is essentially a dropdown select box. The component takes a few objects as properties (in the app, through attributes on the component's DOM element in the containing templates).

The official docs for Angular 2 don't have examples of testing components yet. How would I test the actual view of the component--check that appropriate DOM elements are created based on data being set on the component?

I can create one of my components by doing ng.core.Injector.resolveAndCreate([...dependencies...]).get(MyClassName). But that doesn't actually construct the view, or let me pass in data to be set as the properties of the component I just created.

Upvotes: 2

Views: 783

Answers (1)

Eric Martinez
Eric Martinez

Reputation: 31787

Following what you see in the docs and the repo source code is not that difficult. Here's the setup I made and it works.

First from the docs I took jasmine example setup

<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>

Then angular2's setup. You may already know that when you write in ES5 you must use UMD bundles

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-all-testing.umd.dev.js"></script>

Now the important part, the testing. The main task here is create a Test Component

var TestComponent = ng.core.
    Component({
        selector: 'cmp',
        template : '' // Left it blank, we override it when testing
    }).Class({
        constructor: function() {
            this.someProperty = 'Initial value';
        }
    });

After creating the component, you can test it by using TestComponentBuilder

ng.testing.describe('Component building', function() {

    ng.testing.it('should detect when a property changes', 
        ng.testing.inject([ng.testing.TestComponentBuilder], function(tcb) {
            tcb
                .overrideTemplate(TestComponent, '<div>{{someProperty}}</div>')
                .createAsync(TestComponent)
                .then(function(fixture) {

                    // Triggers change detection so 
                    // the div actually contains the property value
                    fixture.detectChanges();

                    // Check if the div contains the correct value
                    expect(fixture.nativeElement.innerText).toEqual('Initial value');

                    // Change property's value
                    fixture.componentInstance.someProperty = 'New value';

                    // Triggers change detection again
                    fixture.detectChanges();

                    // Check, again, if the div contains the new value
                    expect(fixture.nativeElement.innerText).toEqual('New value');
                });
        }));
});

Note that I'm using ng.testing.(describe/it/etc) because those functions from jasmine were patched to work with angular2.

From this point it will be super easy to continue. You already have the entire repo to see their specs. An interesting one is for NgFor. You can follow the TS/ES6 examples, they are the same.

Here's a plnkr with a repro working.

Reference

You can check as well Julie Ralph's repo (ng2-test-seed) and her talk at AngularConnect 2015

I hope it helps.

Upvotes: 4

Related Questions