Updates to style and functionality

Author: bryanforbes

src/app/app.component.router.spec.ts

@@ -77,8 +77,8 @@ describe('AppComponent & RouterTestingModule', () => {
 	});
 
 	// Can't navigate to lazy loaded modules with this technique
-	it('should navigate to "Heroes" on click', async function () {
-		this.skip('lazy loaded navigation doesn\'t work');
+	it('should navigate to "Heroes" on click', async (test) => {
+		test.skip(`lazy loaded navigation doesn't work`);
 
 		await createComponent();
 		click(page.heroesLinkDe);

src/app/bag/bag.spec.ts

@@ -115,7 +115,7 @@ describe('TestBed Component Tests', () => {
 	beforeEach(async () => {
 		await TestBed
 			.configureTestingModule({
-				imports: [BagModule],
+				imports: [BagModule]
 			})
 			// Compile everything in BagModule
 			.compileComponents()
@@ -323,7 +323,7 @@ describe('TestBed Component Tests', () => {
 		expect(el.classes['open'], 'open class').to.be.false;
 
 		expect(el.styles['color']).to.equal(comp.color, 'color style');
-		expect(el.styles['width']).to.equal(comp.width + 'px', 'width style');
+		expect(el.styles['width']).to.equal(`${comp.width}px`, 'width style');
 
 		// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
 		// expect(el.properties['customProperty'], 'customProperty').to.be.true;
@@ -338,7 +338,7 @@ describe('TestBed Component Overrides:', () => {
 	it('should override ChildComp\'s template', () => {
 
 		const fixture = TestBed.configureTestingModule({
-				declarations: [Child1Component],
+				declarations: [Child1Component]
 			})
 			.overrideComponent(Child1Component, {
 				set: { template: '<span>Fake</span>' }
@@ -352,11 +352,11 @@ describe('TestBed Component Overrides:', () => {
 
 	it('should override TestProvidersComp\'s FancyService provider', () => {
 		const fixture = TestBed.configureTestingModule({
-				declarations: [TestProvidersComponent],
+				declarations: [TestProvidersComponent]
 			})
 			.overrideComponent(TestProvidersComponent, {
 				remove: { providers: [FancyService]},
-				add:    { providers: [{ provide: FancyService, useClass: FakeFancyService }] },
+				add:    { providers: [{ provide: FancyService, useClass: FakeFancyService }] }
 
 				// Or replace them all (this component has only one provider)
 				// set:    { providers: [{ provide: FancyService, useClass: FakeFancyService }] },
@@ -376,7 +376,7 @@ describe('TestBed Component Overrides:', () => {
 
 	it('should override TestViewProvidersComp\'s FancyService viewProvider', () => {
 		const fixture = TestBed.configureTestingModule({
-				declarations: [TestViewProvidersComponent],
+				declarations: [TestViewProvidersComponent]
 			})
 			.overrideComponent(TestViewProvidersComponent, {
 				// remove: { viewProviders: [FancyService]},
@@ -430,7 +430,10 @@ describe('TestBed Component Overrides:', () => {
 
 	it('can access template local variables as references', () => {
 		const fixture = TestBed.configureTestingModule({
-				declarations: [ShellComponent, NeedsContentComponent, Child1Component, Child2Component, Child3Component],
+				declarations: [
+					ShellComponent, NeedsContentComponent, Child1Component,
+					Child2Component, Child3Component
+				]
 			})
 			.overrideComponent(ShellComponent, {
 				set: {

src/app/components/banner-inline.component.spec.ts

@@ -16,7 +16,7 @@ describe('BannerComponent (inline template)', () => {
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			declarations: [ BannerComponent ], // declare the test component
+			declarations: [ BannerComponent ] // declare the test component
 		});
 
 		fixture = TestBed.createComponent(BannerComponent);

src/app/components/banner.component.spec.ts

@@ -15,7 +15,7 @@ describe('BannerComponent (templateUrl)', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-				declarations: [ BannerComponent ], // declare the test component
+				declarations: [ BannerComponent ] // declare the test component
 			})
 			.compileComponents()  // compile template and css
 		;

src/app/components/dashboard/dashboard-hero.component.spec.ts

@@ -20,7 +20,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-				declarations: [ DashboardHeroComponent ],
+				declarations: [ DashboardHeroComponent ]
 			})
 			.compileComponents() // compile template and css
 		;
@@ -58,7 +58,7 @@ describe('DashboardHeroComponent when inside a test host', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			declarations: [ DashboardHeroComponent, TestHostComponent ], // declare both
+			declarations: [ DashboardHeroComponent, TestHostComponent ] // declare both
 		}).compileComponents();
 
 		// create TestHostComponent instead of DashboardHeroComponent

src/app/components/dashboard/dashboard.module.ts

@@ -7,7 +7,7 @@ import { DashboardComponent }     from './dashboard.component';
 import { DashboardHeroComponent } from './dashboard-hero.component';
 
 const routes: Routes =  [
-	{ path: 'dashboard',  component: DashboardComponent },
+	{ path: 'dashboard',  component: DashboardComponent }
 ];
 
 @NgModule({

src/app/components/hero/hero-detail.component.spec.ts

@@ -134,7 +134,7 @@ function heroModuleSetup() {
 				providers: [
 					{ provide: ActivatedRoute, useValue: activatedRoute },
 					{ provide: HeroService,    useClass: FakeHeroService },
-					{ provide: Router,         useClass: RouterStub},
+					{ provide: Router,         useClass: RouterStub}
 				]
 			})
 			.compileComponents()
@@ -252,7 +252,7 @@ function formsModuleSetup() {
 				providers: [
 					{ provide: ActivatedRoute, useValue: activatedRoute },
 					{ provide: HeroService,    useClass: FakeHeroService },
-					{ provide: Router,         useClass: RouterStub},
+					{ provide: Router,         useClass: RouterStub}
 				]
 			})
 			.compileComponents()
@@ -278,7 +278,7 @@ function sharedModuleSetup() {
 				providers: [
 					{ provide: ActivatedRoute, useValue: activatedRoute },
 					{ provide: HeroService,    useClass: FakeHeroService },
-					{ provide: Router,         useClass: RouterStub},
+					{ provide: Router,         useClass: RouterStub}
 				]
 			})
 			.compileComponents()

src/app/components/welcome.component.ts

@@ -11,7 +11,7 @@ export class WelcomeComponent implements OnInit {
 
 	ngOnInit(): void {
 		this.welcome = this.userService.isLoggedIn ?
-			'Welcome, ' + this.userService.user.name :
+			`Welcome, ${this.userService.user.name}` :
 			'Please log in.';
 	}
 }

src/app/services/http-hero.service.ts

@@ -53,7 +53,7 @@ export class HttpHeroService {
 
 	private extractData(res: Response) {
 		if (res.status < 200 || res.status >= 300) {
-			throw new Error('Bad response status: ' + res.status);
+			throw new Error(`Bad response status: ${res.status}`);
 		}
 		let body = res.json();
 		return body.data || { };

src/app/services/twain.service.ts

@@ -10,7 +10,7 @@ const quotes = [
 	'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
 	'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
 	'The man who does not read good books has no advantage over the man who cannot read them.',
-	'Get your facts first, and then you can distort them as much as you please.',
+	'Get your facts first, and then you can distort them as much as you please.'
 ];
 
 @Injectable()

src/app/shared/twain.component.spec.ts

@@ -24,7 +24,7 @@ describe('TwainComponent', () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [ TwainComponent ],
-			providers:    [ TwainService ],
+			providers:    [ TwainService ]
 		});
 
 		fixture = TestBed.createComponent(TwainComponent);

src/systemjs-angular-loader.ts

@@ -28,17 +28,17 @@ export function translate(load: { source: string; address: string; }) {
 				resolvedUrl = basePath + resolvedUrl.substr(1);
 			}
 
-			return 'templateUrl: "' + resolvedUrl + '"';
+			return `templateUrl: "${resolvedUrl}"`;
 		})
 		.replace(stylesRegex, function(_, relativeUrls) {
 			const urls = [];
 			let match: RegExpExecArray;
 
 			while ((match = stringRegex.exec(relativeUrls)) !== null) {
 				if (match[2].startsWith('.')) {
-					urls.push('"' + basePath + match[2].substr(1) + '"');
+					urls.push(`"${basePath}${match[2].substr(1)}"`);
 				} else {
-					urls.push('"' + match[2] + '"');
+					urls.push(`"${match[2]}"`);
 				}
 			}
 

src/systemjs.config.ts

@@ -1,6 +1,6 @@
 SystemJS.config({
 	paths: {
-		'npm:': SystemJS.baseURL + '../node_modules/'
+		'npm:': `${SystemJS.baseURL}../node_modules/`
 	},
 
 	map: {

src/testing/chai-addons.ts

@@ -1,6 +1,3 @@
-const chai = intern.getPlugin('chai');
-import 'sinon';
-
 function elementText(element: any): string {
 	if (Array.isArray(element)) {
 		return element.map(elementText).join('');
@@ -21,14 +18,16 @@ function elementText(element: any): string {
 	return element.textContent;
 }
 
-chai.use(({ Assertion }, utils: any) => {
+export function addNodeText({ Assertion }: any, utils: any) {
 	Assertion.addMethod('nodeText', function (str: string) {
 		const obj = utils.flag(this, 'object');
 		const text = elementText(obj);
 
 		new Assertion(text).to.contain(str);
 	});
-});
+}
+
+intern.getPlugin('chai').use(addNodeText);
 
 declare global {
 	namespace Chai {

src/testing/utils.ts

@@ -20,7 +20,7 @@ export function click(element: DebugElement, eventObj: any = ButtonClickEvents.l
 
 export async function tick() {
 	await new Promise(resolve => {
-		setTimeout(resolve);
+		setTimeout(resolve, 50);
 	});
 }
 

tslint.json

@@ -52,6 +52,7 @@
       "check-else",
       "check-whitespace"
     ],
+    "prefer-template": true,
     "quotemark": [
       true,
       "single"
@@ -60,6 +61,10 @@
     "semicolon": [
       "always"
     ],
+    "trailing-comma": [true, {
+      "multiline": "never",
+      "singleline": "never"
+    }],
     "triple-equals": [
       true,
       "allow-null-check"