From 34a1990c5781a3f75058eda655c2ccead3d01c2d Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Sat, 1 Apr 2017 21:16:22 +0100
Subject: [PATCH] fix(aio): trim code blocks before rendering

---
 aio/src/app/embedded/code/code.component.spec.ts | 16 ++++++++++++++++
 aio/src/app/embedded/code/code.component.ts      |  4 +++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/aio/src/app/embedded/code/code.component.spec.ts b/aio/src/app/embedded/code/code.component.spec.ts
index 145c583280..99e2b00075 100644
--- a/aio/src/app/embedded/code/code.component.spec.ts
+++ b/aio/src/app/embedded/code/code.component.spec.ts
@@ -105,6 +105,22 @@ describe('CodeComponent', () => {
     expect(lis.length).toBe(0, 'should be no linenums');
   });
 
+  it('should trim whitespace from the code before rendering', () => {
+    hostComponent.linenums = false;
+    hostComponent.code = '\n\n\n' + multiLineCode + '\n\n\n';
+    fixture.detectChanges();
+    const codeContent = codeComponentDe.nativeElement.querySelector('code').innerText;
+    expect(codeContent).toEqual(codeContent.trim());
+  });
+
+  it('should trim whitespace from code before computing whether to format linenums', () => {
+    hostComponent.code = '\n\n\n' + hostComponent.code + '\n\n\n';
+    fixture.detectChanges();
+    // `<li>`s are a tell-tale for line numbers
+    const lis = codeComponentDe.nativeElement.querySelectorAll('li');
+    expect(lis.length).toBe(0, 'should be no linenums');
+  });
+
   it('should call copier service when copy button clicked', () => {
     const copierService: TestCopierService = <any> codeComponentDe.injector.get(CopierService) ;
     const button = fixture.debugElement.query(By.css('button')).nativeElement;
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index 8b27869ad5..c5a77ad21a 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -23,7 +23,7 @@ const copiedLabel = 'Copied!';
 @Component({
   selector: 'aio-code',
   template: `
-    
+
     <pre class="prettyprint lang-{{language}}">
       <button class="material-icons copy-button" (click)="doCopy()">content_copy</button>
       <code class="animated fadeIn" #codeContainer></code>
@@ -72,6 +72,8 @@ export class CodeComponent implements OnChanges {
   ngOnChanges() {
     if (!this.code) { return; }
 
+    this.code = this.code.trim();
+
     const linenums = this.getLinenums();
 
     this.setCodeHtml(this.code); // start with unformatted code