static: append all event messages to playground output

A response from the playground server contains a list of events. Each
event contains a message. The final playground output should be the
concatenation of all event messages. The existing playground
implementation sets the output text to each event message, so the final
output would be only the last event message. Fix this by appending event
messages to the output text. The existing tests do not test the
playground with a mock response containing multiple events. Change a
mock response to contain two events. All changes are automatic except
for playground.ts and playground.test.ts.

Fixes golang/go#58476

Change-Id: Ib9779e0a85619b7b7a7f87ffe0142d091818a815
GitHub-Last-Rev: d98f9e6
GitHub-Pull-Request: #57
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/467575
Reviewed-by: Dmitri Shuralyov <[email protected]>
Reviewed-by: Jamal Carvalho <[email protected]>
TryBot-Result: kokoro <[email protected]>
Run-TryBot: Jamal Carvalho <[email protected]>

Author: soroushj

static/frontend/unit/main/main.js

@@ -8,7 +8,7 @@
 import { PlaygroundExampleController } from './playground';
 import { mocked } from 'ts-jest/utils';
 
-const flushPromises = () => new Promise(fn => setTimeout(fn, 0));
+const flushPromises = (ms = 0) => new Promise(fn => setTimeout(fn, ms));
 const el = <T extends HTMLElement>(selector: string) => document.querySelector<T>(selector);
 const codeSnippet = `package main
 
@@ -154,18 +154,23 @@ require example v1
     mocked(window.fetch).mockResolvedValue({
       json: () =>
         Promise.resolve({
-          Events: [{ Message: '// mocked response', Kind: 'stdout', Delay: 0 }],
+          Events: [
+            { Message: '// mocked message 1 ', Kind: 'stdout', Delay: 0 },
+            { Message: '// mocked message 2', Kind: 'stdout', Delay: 1 },
+          ],
           Errors: null,
         }),
     } as Response);
     el('[aria-label="Run Code"]').click();
-    await flushPromises();
+    await flushPromises(10);
 
     expect(window.fetch).toHaveBeenCalledWith('/play/compile', {
       body: JSON.stringify({ body: snippetWithModeFile, version: 2 }),
       method: 'POST',
     });
-    expect(el('.Documentation-exampleOutput').textContent).toContain('// mocked response');
+    expect(el('.Documentation-exampleOutput').textContent).toContain(
+      '// mocked message 1 // mocked message 2'
+    );
   });
 
   it('displays error message after pressing run with invalid code', async () => {

static/frontend/unit/main/main.js.map

@@ -169,6 +169,15 @@ export class PlaygroundExampleController {
     }
   }
 
+  /**
+   * Appends to the text of the example's output box.
+   */
+  private appendToOutputText(output: string) {
+    if (this.outputEl) {
+      this.outputEl.textContent += output;
+    }
+  }
+
   private setOutputHTML(output: string) {
     if (this.outputEl) {
       this.outputEl.innerHTML = output;
@@ -264,7 +273,7 @@ require ${moduleVars.modulepath} ${moduleVars.version}
       .then(async ({ Events, Errors }) => {
         this.setOutputText(Errors || '');
         for (const e of Events || []) {
-          this.setOutputText(e.Message);
+          this.appendToOutputText(e.Message);
           await new Promise(resolve => setTimeout(resolve, e.Delay / 1000000));
         }
       })

static/shared/playground/playground.test.ts

@@ -78,6 +78,7 @@ See the [command](https://pkg.go.dev/golang.org/x/website/cmd/screentest) and
 more information.
 
 ### Running the tests
+
 In order to run the tests, run this command from the root of the repository:
 
 ```