feat(aio): display “code sample missing” message when no code sample

Not having code in a `<code-example>` or `<code-tabs>` is presumed to be an error.
Hides the copy button as well.

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');
   });

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();
 

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;
 }