content/static: print message on playground error

Error messages were being overwritten with an
empty string. This change ensures error messages
print to the playground console.

Change-Id: Ia47626fd675e2347bbbe8040a62babec28d600b4
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/299250
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>

content/static/js/playground.js

@@ -138,10 +138,7 @@ export class PlaygroundExampleController {
     })
       .then(res => res.json())
       .then(async ({ Events, Errors }) => {
-        if (Errors) {
-          this.setOutputText(Errors);
-        }
-        this.setOutputText('');
+        this.setOutputText(Errors || '');
         for (const e of Events || []) {
           this.setOutputText(e.Message);
           await new Promise(resolve => setTimeout(resolve, e.Delay / 1000000));

content/static/js/playground.test.ts

@@ -105,12 +105,33 @@ describe('PlaygroundExampleController', () => {
     expect(el<HTMLTextAreaElement>('.Documentation-exampleCode').value).toBe('// mocked response');
   });
 
+  it('displays error message after pressing format with invalid code', async () => {
+    mocked(window.fetch).mockResolvedValue({
+      json: () =>
+        Promise.resolve({
+          Body: '',
+          Error: '// mocked error',
+        }),
+    } as Response);
+    el('[aria-label="Format Code"]').click();
+    const body = new FormData();
+    body.append('body', codeSnippet);
+    await flushPromises();
+
+    expect(window.fetch).toHaveBeenCalledWith('/play/fmt', {
+      body: body,
+      method: 'POST',
+    });
+    expect(el<HTMLTextAreaElement>('.Documentation-exampleCode').value).toBe(codeSnippet);
+    expect(el('.Documentation-exampleOutput').textContent).toContain('// mocked error');
+  });
+
   it('displays code output after pressing run', async () => {
     mocked(window.fetch).mockResolvedValue({
       json: () =>
         Promise.resolve({
           Events: [{ Message: '// mocked response', Kind: 'stdout', Delay: 0 }],
-          Error: '',
+          Errors: null,
         }),
     } as Response);
     el('[aria-label="Run Code"]').click();
@@ -122,4 +143,22 @@ describe('PlaygroundExampleController', () => {
     });
     expect(el('.Documentation-exampleOutput').textContent).toContain('// mocked response');
   });
+
+  it('displays error message after pressing run with invalid code', async () => {
+    mocked(window.fetch).mockResolvedValue({
+      json: () =>
+        Promise.resolve({
+          Events: null,
+          Errors: '// mocked error',
+        }),
+    } as Response);
+    el('[aria-label="Run Code"]').click();
+    await flushPromises();
+
+    expect(window.fetch).toHaveBeenCalledWith('/play/compile', {
+      body: JSON.stringify({ body: codeSnippet, version: 2 }),
+      method: 'POST',
+    });
+    expect(el('.Documentation-exampleOutput').textContent).toContain('// mocked error');
+  });
 });

content/static/js/playground.ts

@@ -228,10 +228,7 @@ export class PlaygroundExampleController {
     })
       .then(res => res.json())
       .then(async ({ Events, Errors }) => {
-        if (Errors) {
-          this.setOutputText(Errors);
-        }
-        this.setOutputText('');
+        this.setOutputText(Errors || '');
         for (const e of Events || []) {
           this.setOutputText(e.Message);
           await new Promise(resolve => setTimeout(resolve, e.Delay / 1000000));