From 309bae0a0b2f584630a2a5db8f39557513a021ba Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Sat, 1 Apr 2017 17:57:47 -0700
Subject: [PATCH] =?UTF-8?q?feat(aio):=20display=20=E2=80=9Ccode=20sample?=
 =?UTF-8?q?=20missing=E2=80=9D=20message=20when=20no=20code=20sample?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Not having code in a `<code-example>` or `<code-tabs>` is presumed to be an error.
Hides the copy button as well.
---
 .../app/embedded/code/code.component.spec.ts   | 18 ++++++++++++++++--
 aio/src/app/embedded/code/code.component.ts    |  9 ++++++---
 aio/src/styles/2-modules/_code.scss            |  6 +++++-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/aio/src/app/embedded/code/code.component.spec.ts b/aio/src/app/embedded/code/code.component.spec.ts
index 99e2b00075..e32c17ca61 100644
--- a/aio/src/app/embedded/code/code.component.spec.ts
+++ b/aio/src/app/embedded/code/code.component.spec.ts
@@ -121,9 +121,23 @@ describe('CodeComponent', () => {
     expect(lis.length).toBe(0, 'should be no linenums');
   });
 
+  it('should display error message when there is no code (after trimming)', () => {
+    hostComponent.code = ' \n ';
+    fixture.detectChanges();
+    const missing = codeComponentDe.nativeElement.querySelector('.code-missing') as HTMLElement;
+    expect(missing).not.toBeNull('should have element with "code-missing" class');
+    expect(missing.innerText).toContain('missing', 'error message');
+  });
+
+  it('should not display "code-missing" class when there is some code', () => {
+    fixture.detectChanges();
+    const missing = codeComponentDe.nativeElement.querySelector('.code-missing');
+    expect(missing).toBeNull('should not have element with "code-missing" class');
+  });
+
   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;
+    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
     expect(copierService.copyText.calls.count()).toBe(0, 'before click');
     button.click();
     expect(copierService.copyText.calls.count()).toBe(1, 'after click');
@@ -131,7 +145,7 @@ describe('CodeComponent', () => {
 
   it('should copy code text when copy button clicked', () => {
     const copierService: TestCopierService = <any> codeComponentDe.injector.get(CopierService) ;
-    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
     button.click();
     expect(copierService.copyText.calls.argsFor(0)[0]).toEqual(oneLineCode, 'after click');
   });
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index c5a77ad21a..5e66947765 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -25,7 +25,7 @@ const copiedLabel = 'Copied!';
   template: `
 
     <pre class="prettyprint lang-{{language}}">
-      <button class="material-icons copy-button" (click)="doCopy()">content_copy</button>
+      <button *ngIf="code" class="material-icons copy-button" (click)="doCopy()">content_copy</button>
       <code class="animated fadeIn" #codeContainer></code>
     </pre>
     `
@@ -70,9 +70,12 @@ export class CodeComponent implements OnChanges {
     private logger: Logger) {}
 
   ngOnChanges() {
-    if (!this.code) { return; }
+    this.code = this.code && this.code.trim();
 
-    this.code = this.code.trim();
+    if (!this.code) {
+      this.setCodeHtml('<p class="code-missing">The code sample is missing.</p>');
+      return;
+    }
 
     const linenums = this.getLinenums();
 
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 83e834cf4a..1a883b0685 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -56,7 +56,7 @@ aio-code pre {
 code ol {
   font-family: $main-font;
   color: $lightgray;
-  
+
   li {
     margin: 0;
     font-family: $code-font;
@@ -64,6 +64,10 @@ code ol {
   }
 }
 
+.code-missing {
+  color: $darkred;
+}
+
 .prettyprint {
   position: relative;
 }