Menu
I have following angular documentation in official site. but in documentation testing part is outdated and not working with the current angular 2 beta versions. I need to write a basic test for check the if condition are working correctly. how can i do that using jasmine in angular 2.
722
Setup jasmine to run typescript unit tests with angular2 (beta.7):
Setup an Angular-Project
(see description 5 Min Quickstart
https://angular.io/guide/quickstart )
Rootdir is myproject
install jasmine with mpm
npm install jasmine-core --save-dev --save-exact
Install live-server
https://www.npmjs.com/package/live-server
Get syntax/intellisense support:
in myproject/typings make a new file jasmine.d.ts
/// <reference path="jasmine\jasmine.d.ts" />
Get the jasmine.d.ts from
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jasmine/jasmine.d.ts
and save it in myproject\typings\jasmine as file jasmine.d.ts
Save unit-test.html in myproject
<html>
<head>
<title>Angular2: Jasmine Tests</title>
<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>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script>
// #2. Configure SystemJS to use the .js extension
// for imports from the app folder
System.config({
packages: {
'app': {defaultExtension: 'js'}
}
});
// #3. Import the spec file explicitly
System.import('app/app.spec')
// #4. wait for all imports to load ...
// then re-execute `window.onload` which
// triggers the Jasmine test-runner start
// or explain what went wrong
.then(window.onload)
.catch(console.error.bind(console));
</script>
</body>
</html>
.then (window.onload) is important to start testexecution.
see here Wait for a module to be loaded to execute the tests it contains
Create new file app.spec.ts in dir myproject\app
import {AppComponent} from './app.component';
// Jasmin Test App title property
describe('AppComponent', () => {
var app: AppComponent = null
beforeEach(() => {
app = new AppComponent();
app.title = "App in Test";
});
it('should have an title property', () => {
expect(app.title).toBeDefined();
});
it('should have the title App in Test', () => {
expect(app.title).toBe("App in Test");
})
});
// Jasmin Test without Angular
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
From the cmdline start
live-server --open=unit-test.html
This is my working setup for running Unit-Tests with Jasmine written in typescript with Angular 2.
If you have any errors please post what you tried and where you failed like Günther proposed in his comment.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
