show fail message in ui

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

src/editor/commands.ts

@@ -3,7 +3,7 @@ import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import createTestRunner from '../services/testRunner'
 import { setupActions } from '../actions/setupActions'
-import createWebView from '../webview'
+import createWebView from '../services/webview'
 import logger from '../services/logger'
 
 export const COMMANDS = {
@@ -62,9 +62,9 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP
           // send test pass message back to client
           webview.send({ type: 'TEST_PASS', payload: { position } })
         },
-        onFail: (position: T.Position, message: string) => {
+        onFail: (position: T.Position, failSummary: T.TestFail): void => {
           // send test fail message back to client with failure message
-          webview.send({ type: 'TEST_FAIL', payload: { position, message } })
+          webview.send({ type: 'TEST_FAIL', payload: { position, fail: failSummary } })
         },
         onError: (position: T.Position) => {
           // TODO: send test error message back to client

src/services/testRunner/formatOutput.ts

@@ -4,7 +4,7 @@ import { ParserOutput, Fail } from './parser'
 // export const formatSuccessOutput = (tap: ParserOutput): string => {}
 
 export const formatFailOutput = (tap: ParserOutput): string => {
-  let output = `FAILED TESTS\n`
+  let output = `FAILED TEST LOG\n`
   tap.failed.forEach((fail: Fail) => {
     const details = fail.details ? `\n${fail.details}\n` : ''
     const logs = fail.logs ? `\n${fail.logs.join('\n')}\n` : ''

src/services/testRunner/index.ts

@@ -10,7 +10,7 @@ import { formatFailOutput } from './formatOutput'
 
 interface Callbacks {
   onSuccess(position: T.Position): void
-  onFail(position: T.Position, message: string): void
+  onFail(position: T.Position, failSummary: T.TestFail): void
   onRun(position: T.Position): void
   onError(position: T.Position): void
 }
@@ -56,8 +56,12 @@ const createTestRunner = (config: TT.TutorialTestRunnerConfig, callbacks: Callba
     if (stderr) {
       // FAIL also trigger stderr
       if (stdout && stdout.length && !tap.ok) {
-        const firstFailMessage = tap.failed[0].message
-        callbacks.onFail(position, firstFailMessage)
+        const firstFail = tap.failed[0]
+        const failSummary = {
+          title: firstFail.message || 'Test Failed',
+          description: firstFail.details || 'Unknown error',
+        }
+        callbacks.onFail(position, failSummary)
         const output = formatFailOutput(tap)
         displayOutput({ channel: failChannelName, text: output, show: true })
         return

src/services/testRunner/output.ts

@@ -18,13 +18,11 @@ interface DisplayOutput {
 export const displayOutput = (params: DisplayOutput) => {
   const channel = getOutputChannel(params.channel)
   channel.clear()
-  channel.show(params.show || false)
   channel.append(params.text)
 }
 
 export const clearOutput = (channelName: string) => {
   const channel = getOutputChannel(channelName)
-  channel.show(false)
   channel.clear()
   channel.hide()
 }

src/webview/index.ts renamed to src/services/webview/index.ts

@@ -1,7 +1,7 @@
 import * as path from 'path'
 import { Action } from 'typings'
 import * as vscode from 'vscode'
-import Channel from '../channel'
+import Channel from '../../channel'
 import render from './render'
 
 interface ReactWebViewProps {

src/webview/render.ts renamed to src/services/webview/render.ts

@@ -1,7 +1,7 @@
 import { JSDOM } from 'jsdom'
 import * as path from 'path'
 import * as vscode from 'vscode'
-import onError from '../services/sentry/onError'
+import onError from '../sentry/onError'
 
 const getNonce = (): string => {
   let text = ''

typings/index.d.ts

@@ -42,6 +42,7 @@ export interface TestStatus {
   type: 'success' | 'warning' | 'error' | 'loading'
   title: string
   content?: string
+  timeout?: number
 }
 
 export interface MachineContext {
@@ -116,3 +117,8 @@ export interface ProcessEvent {
   description: string
   status: 'RUNNING' | 'SUCCESS' | 'FAIL' | 'ERROR'
 }
+
+export type TestFail = {
+  title: string
+  description: string
+}

web-app/src/components/ProcessMessages/TestMessage.tsx

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core'
 
 const durations = {
   success: 1000,
-  warning: 4500,
+  warning: 20000,
   error: 4500,
   loading: 300000,
 }

web-app/src/services/state/actions/testNotify.ts

@@ -20,8 +20,8 @@ const testActions: ActionFunctionMap<CR.MachineContext, CR.MachineEvent> = {
   testFail: assign({
     testStatus: (context, event) => ({
       type: 'warning',
-      title: 'Fail!',
-      content: event.payload.message,
+      title: event.payload.fail.title,
+      content: event.payload.fail.description,
     }),
   }),
   // @ts-ignore