├── .clang-format ├── .editorconfig ├── .gitignore ├── README.md ├── angular-cli-build.js ├── angular-cli.json ├── config ├── environment.dev.ts ├── environment.js ├── environment.prod.ts ├── karma-test-shim.js ├── karma.conf.js └── protractor.conf.js ├── e2e ├── app.e2e.ts ├── app.po.ts ├── tsconfig.json └── typings.d.ts ├── package.json ├── public └── .npmignore ├── src ├── app │ ├── angular2-unittest-samples.component.css │ ├── angular2-unittest-samples.component.html │ ├── angular2-unittest-samples.component.spec.ts │ ├── angular2-unittest-samples.component.ts │ ├── app-shell │ │ ├── app-shell.spec.ts │ │ └── app-shell.ts │ ├── app.e2e.ts │ ├── blog-roll │ │ ├── blog-roll-unit.spec.ts │ │ ├── blog-roll.spec.ts │ │ └── blog-roll.ts │ ├── domain │ │ ├── blog-entry.spec.ts │ │ └── blog-entry.ts │ ├── environment.ts │ ├── index.ts │ ├── services │ │ ├── blog-service.spec.ts │ │ ├── blog-service.ts │ │ ├── markdown-service.spec.ts │ │ └── markdown-service.ts │ └── shared │ │ └── index.ts ├── favicon.ico ├── index.html ├── main.ts ├── system-config.ts ├── tsconfig.json ├── typings.d.ts └── typings │ └── index.d.ts ├── tslint.json └── typings.json /.clang-format: -------------------------------------------------------------------------------- 1 | Language: JavaScript 2 | BasedOnStyle: Google 3 | ColumnLimit: 100 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | max_line_length = 0 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | 11 | # IDEs and editors 12 | /.idea 13 | 14 | # misc 15 | /.sass-cache 16 | /connect.lock 17 | /coverage/* 18 | /libpeerconnection.log 19 | npm-debug.log 20 | testem.log 21 | /typings 22 | 23 | # e2e 24 | /e2e/*.js 25 | /e2e/*.map 26 | 27 | #System Files 28 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular2-unittest-samples-rc 2 | The Unit Test samples from http://chariotsolutions.com/blog/post/testing-angular-2-components-unit-tests-testcomponentbuilder/ and http://chariotsolutions.com/blog/post/testing-http-services-angular-2-jasmine/ - upgraded 3 | to use Angular 2 RC instead of the earlier alpha and beta releases. Uses the Angular CLI. 4 | 5 | ## Prerequisites 6 | 7 | Setup: 8 | 9 | ```bash 10 | npm install -g angular-cli karma-cli 11 | # this next one do if you want to administer typings until a fix 12 | # to https://github.com/angular/angular-cli/issues/816 is in 13 | npm install -g typings@0.8.1 14 | 15 | # now download repo and set up 16 | git clone https://github.com/krimple/angular2-unittest-samples-rc.git 17 | cd angular2-unittest-samples-rc 18 | npm install 19 | ``` 20 | 21 | ## To run tests 22 | 23 | ```bash 24 | ng test 25 | ``` 26 | 27 | I am using PhantomJS for my testing - if you have trouble with that, edit `config/karma.conf.js` and change the runner to Chrome. 28 | 29 | -------------------------------------------------------------------------------- /angular-cli-build.js: -------------------------------------------------------------------------------- 1 | /* global require, module */ 2 | 3 | var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 4 | 5 | module.exports = function(defaults) { 6 | return new Angular2App(defaults, { 7 | vendorNpmFiles: [ 8 | 'systemjs/dist/system-polyfills.js', 9 | 'systemjs/dist/system.src.js', 10 | 'zone.js/dist/*.js', 11 | 'es6-shim/es6-shim.js', 12 | 'reflect-metadata/*.js', 13 | 'rxjs/**/*.js', 14 | '@angular/**/*.js', 15 | 'marked/marked.min.js' 16 | ] 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "project": { 3 | "version": "1.0.0-beta.1", 4 | "name": "angular2-unittest-samples" 5 | }, 6 | "apps": [ 7 | {"main": "src/main.ts", "tsconfig": "src/tsconfig.json"} 8 | ], 9 | "addons": [], 10 | "packages": [], 11 | "e2e": { 12 | "protractor": { 13 | "config": "config/protractor.conf.js" 14 | } 15 | }, 16 | "test": { 17 | "karma": { 18 | "config": "config/karma.conf.js" 19 | } 20 | }, 21 | "defaults": { 22 | "prefix": "app", 23 | "sourceDir": "src" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /config/environment.dev.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; 4 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | 3 | module.exports = function(environment) { 4 | return { 5 | environment: environment, 6 | baseURL: '/', 7 | locationType: 'auto' 8 | }; 9 | }; 10 | 11 | -------------------------------------------------------------------------------- /config/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /config/karma-test-shim.js: -------------------------------------------------------------------------------- 1 | /*global jasmine, __karma__, window*/ 2 | Error.stackTraceLimit = Infinity; 3 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 4 | 5 | __karma__.loaded = function () { 6 | }; 7 | 8 | var distPath = '/base/dist/'; 9 | var appPath = distPath + 'app/'; 10 | 11 | function isJsFile(path) { 12 | return path.slice(-3) == '.js'; 13 | } 14 | 15 | function isSpecFile(path) { 16 | return path.slice(-8) == '.spec.js'; 17 | } 18 | 19 | function isAppFile(path) { 20 | return isJsFile(path) && (path.substr(0, appPath.length) == appPath); 21 | } 22 | 23 | var allSpecFiles = Object.keys(window.__karma__.files) 24 | .filter(isSpecFile) 25 | .filter(isAppFile); 26 | 27 | // Load our SystemJS configuration. 28 | System.config({ 29 | baseURL: distPath 30 | }); 31 | 32 | System.import('system-config.js').then(function() { 33 | // Load and configure the TestComponentBuilder. 34 | return Promise.all([ 35 | System.import('@angular/core/testing'), 36 | System.import('@angular/platform-browser-dynamic/testing') 37 | ]).then(function (providers) { 38 | var testing = providers[0]; 39 | var testingBrowser = providers[1]; 40 | 41 | testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, 42 | testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); 43 | }); 44 | }).then(function() { 45 | // Finally, load all spec files. 46 | // This will run the tests directly. 47 | return Promise.all( 48 | allSpecFiles.map(function (moduleName) { 49 | return System.import(moduleName); 50 | })); 51 | }).then(__karma__.start, __karma__.error); -------------------------------------------------------------------------------- /config/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | config.set({ 3 | basePath: '..', 4 | frameworks: ['jasmine'], 5 | plugins: [ 6 | require('karma-jasmine'), 7 | require('karma-chrome-launcher'), 8 | require('karma-phantomjs-launcher') 9 | ], 10 | customLaunchers: { 11 | // chrome setup for travis CI using chromium 12 | Chrome_travis_ci: { 13 | base: 'Chrome', 14 | flags: ['--no-sandbox'] 15 | } 16 | }, 17 | files: [ 18 | { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false }, 19 | { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false }, 20 | { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false }, 21 | { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false }, 22 | { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false }, 23 | { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false }, 24 | { pattern: 'dist/vendor/marked/marked.min.js', included: true, watched: false }, 25 | { pattern: 'config/karma-test-shim.js', included: true, watched: true }, 26 | 27 | // Distribution folder. 28 | { pattern: 'dist/**/*', included: false, watched: true } 29 | ], 30 | exclude: [ 31 | // Vendor packages might include spec files. We don't want to use those. 32 | 'dist/vendor/**/*.spec.js' 33 | ], 34 | preprocessors: {}, 35 | reporters: ['progress'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['PhantomJS'], 41 | singleRun: false 42 | }); 43 | }; 44 | -------------------------------------------------------------------------------- /config/protractor.conf.js: -------------------------------------------------------------------------------- 1 | /*global jasmine */ 2 | var SpecReporter = require('jasmine-spec-reporter'); 3 | 4 | exports.config = { 5 | allScriptsTimeout: 11000, 6 | specs: [ 7 | '../e2e/**/*.e2e.ts' 8 | ], 9 | capabilities: { 10 | 'browserName': 'chrome' 11 | }, 12 | directConnect: true, 13 | baseUrl: 'http://localhost:4200/', 14 | framework: 'jasmine', 15 | jasmineNodeOpts: { 16 | showColors: true, 17 | defaultTimeoutInterval: 30000, 18 | print: function() {} 19 | }, 20 | useAllAngular2AppRoots: true, 21 | beforeLaunch: function() { 22 | require('ts-node').register({ 23 | project: 'e2e' 24 | }); 25 | }, 26 | onPrepare: function() { 27 | jasmine.getEnv().addReporter(new SpecReporter()); 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /e2e/app.e2e.ts: -------------------------------------------------------------------------------- 1 | import { Angular2UnittestSamplesPage } from './app.po'; 2 | 3 | describe('angular2-unittest-samples App', function() { 4 | let page: Angular2UnittestSamplesPage; 5 | 6 | beforeEach(() => { 7 | page = new Angular2UnittestSamplesPage(); 8 | }) 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('angular2-unittest-samples works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | export class Angular2UnittestSamplesPage { 2 | navigateTo() { 3 | return browser.get('/'); 4 | } 5 | 6 | getParagraphText() { 7 | return element(by.css('angular2-unittest-samples-app h1')).getText(); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "mapRoot": "", 8 | "module": "commonjs", 9 | "moduleResolution": "node", 10 | "noEmitOnError": true, 11 | "noImplicitAny": false, 12 | "rootDir": ".", 13 | "sourceMap": true, 14 | "sourceRoot": "/", 15 | "target": "es5" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /e2e/typings.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-unittest-samples", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "angular-cli": {}, 6 | "scripts": { 7 | "start": "ng server", 8 | "postinstall": "typings install", 9 | "lint": "tslint \"src/**/*.ts\"", 10 | "format": "clang-format -i -style=file --glob=src/**/*.ts", 11 | "pree2e": "webdriver-manager update", 12 | "e2e": "protractor" 13 | }, 14 | "private": true, 15 | "dependencies": { 16 | "@angular/common": "2.0.0-rc.3", 17 | "@angular/compiler": "2.0.0-rc.3", 18 | "@angular/core": "2.0.0-rc.3", 19 | "@angular/http": "^2.0.0-rc.3", 20 | "@angular/platform-browser": "2.0.0-rc.3", 21 | "@angular/platform-browser-dynamic": "2.0.0-rc.3", 22 | "@angular/router": "2.0.0-rc.2", 23 | "es6-shim": "^0.35.0", 24 | "exists-sync": "0.0.3", 25 | "marked": "^0.3.5", 26 | "minimatch": "^3.0.2", 27 | "object-assign": "^4.1.0", 28 | "reflect-metadata": "0.1.3", 29 | "rxjs": "5.0.0-beta.6", 30 | "systemjs": "0.19.26", 31 | "through": "^2.3.8", 32 | "walk-sync": "^0.2.6", 33 | "zone.js": "^0.6.12" 34 | }, 35 | "devDependencies": { 36 | "angular-cli": "^1.0.0-beta.0", 37 | "clang-format": "^1.0.35", 38 | "codelyzer": "0.0.14", 39 | "ember-cli-inject-live-reload": "^1.4.0", 40 | "jasmine-core": "^2.4.1", 41 | "jasmine-spec-reporter": "^2.4.0", 42 | "karma": "^0.13.15", 43 | "karma-chrome-launcher": "^0.2.3", 44 | "karma-jasmine": "^0.3.8", 45 | "karma-phantomjs-launcher": "^1.0.0", 46 | "phantomjs-prebuilt": "^2.1.7", 47 | "protractor": "^3.3.0", 48 | "ts-node": "^0.5.5", 49 | "tslint": "^3.6.0", 50 | "typescript": "^1.8.10", 51 | "typings": "^0.8.1" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /public/.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krimple/angular2-unittest-samples-rc/1b65d6fd0110ef5c080694d9a9d2f1b8b8405f71/public/.npmignore -------------------------------------------------------------------------------- /src/app/angular2-unittest-samples.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krimple/angular2-unittest-samples-rc/1b65d6fd0110ef5c080694d9a9d2f1b8b8405f71/src/app/angular2-unittest-samples.component.css -------------------------------------------------------------------------------- /src/app/angular2-unittest-samples.component.html: -------------------------------------------------------------------------------- 1 |

2 | {{title}} 3 |

4 | -------------------------------------------------------------------------------- /src/app/angular2-unittest-samples.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | beforeEachProviders, 3 | describe, 4 | expect, 5 | it, 6 | inject 7 | } from '@angular/core/testing'; 8 | import { Angular2UnittestSamplesAppComponent } from '../app/angular2-unittest-samples.component'; 9 | 10 | beforeEachProviders(() => [Angular2UnittestSamplesAppComponent]); 11 | 12 | describe('App: Angular2UnittestSamples', () => { 13 | it('should create the app', 14 | inject([Angular2UnittestSamplesAppComponent], (app: Angular2UnittestSamplesAppComponent) => { 15 | expect(app).toBeTruthy(); 16 | })); 17 | 18 | it('should have as title \'angular2-unittest-samples works!\'', 19 | inject([Angular2UnittestSamplesAppComponent], (app: Angular2UnittestSamplesAppComponent) => { 20 | expect(app.title).toEqual('angular2-unittest-samples works!'); 21 | })); 22 | }); 23 | -------------------------------------------------------------------------------- /src/app/angular2-unittest-samples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'angular2-unittest-samples-app', 6 | templateUrl: 'angular2-unittest-samples.component.html', 7 | styleUrls: ['angular2-unittest-samples.component.css'] 8 | }) 9 | export class Angular2UnittestSamplesAppComponent { 10 | title = 'angular2-unittest-samples works!'; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app-shell/app-shell.spec.ts: -------------------------------------------------------------------------------- 1 | import {Component, provide} from '@angular/core'; 2 | import {AppShellComponent} from '../app-shell/app-shell'; 3 | import { 4 | it, 5 | xit, 6 | inject, 7 | injectAsync, 8 | beforeEachProviders 9 | } from '@angular/core/testing'; 10 | import { 11 | TestComponentBuilder 12 | } from '@angular/compiler/testing'; 13 | import {BlogRoll} from '../blog-roll/blog-roll'; 14 | import {BlogEntry} from '../domain/blog-entry'; 15 | import {BlogService} from '../services/blog-service'; 16 | 17 | describe('Application Shell', () => { 18 | var shell: AppShellComponent; 19 | 20 | beforeEachProviders(() => { 21 | return [ 22 | BlogService, 23 | provide(BlogRoll, { useValue: { }}) 24 | ]; 25 | }); 26 | 27 | xit('Can be created', injectAsync([TestComponentBuilder], (tcb) => { 28 | return tcb.createAsync(AppShellComponent) 29 | .then((fixture) => { 30 | fixture.detectChanges(); 31 | let blogRoll = fixture.nativeElement.getElementsByTagName(''); 32 | expect(blogRoll).toBeDefined(); 33 | }); 34 | })); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app-shell/app-shell.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {CORE_DIRECTIVES} from '@angular/common'; 3 | import {BlogRoll} from '../blog-roll/blog-roll'; 4 | 5 | @Component({ 6 | selector: 'app-shell', 7 | template: ` 8 |
9 | 10 |
11 | `, 12 | directives: [CORE_DIRECTIVES, BlogRoll] 13 | }) 14 | export class AppShellComponent { 15 | constructor() {} 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/app.e2e.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * TODO: ES5 for now until I make a webpack plugin for protractor 3 | */ 4 | describe('App', () => { 5 | 6 | beforeEach(() => { 7 | browser.get('/'); 8 | }); 9 | 10 | 11 | it('should have a title', () => { 12 | let subject = browser.getTitle(); 13 | let result = 'Angular2 Webpack Starter by @gdi2990 from @AngularClass'; 14 | expect(subject).toEqual(result); 15 | }); 16 | 17 | it('should have
', () => { 18 | let subject = element(by.css('app header')).isPresent(); 19 | let result = true; 20 | expect(subject).toEqual(result); 21 | }); 22 | 23 | it('should have
', () => { 24 | let subject = element(by.css('app main')).isPresent(); 25 | let result = true; 26 | expect(subject).toEqual(result); 27 | }); 28 | 29 | it('should have