setup test notify

typings/index.d.ts

@@ -42,13 +42,20 @@ export interface ErrorMessage {
   description?: string
 }
 
+export interface TestStatus {
+  type: 'success' | 'warning' | 'error' | 'loading'
+  title: string
+  content?: string
+}
+
 export interface MachineContext {
   env: Environment
   error: ErrorMessage | null
   tutorial: G.Tutorial | null
   position: Position
   progress: Progress
   processes: ProcessEvent[]
+  testStatus: TestStatus | null
 }
 
 export interface MachineEvent {

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

@@ -4,6 +4,7 @@ import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 
 interface Props {
+  testStatus: T.TestStatus | null
   processes: T.ProcessEvent[]
 }
 
@@ -15,7 +16,14 @@ const styles = {
 }
 
 // display a list of active processes
-const ProcessMessages = ({ processes }: Props) => {
+const ProcessMessages = ({ processes, testStatus }: Props) => {
+  if (testStatus) {
+    return (
+      <Message key={testStatus.title} type={testStatus.type} title={testStatus.title} size="medium">
+        {testStatus.content}
+      </Message>
+    )
+  }
   if (!processes.length) {
     return null
   }

web-app/src/containers/LoadingPage.tsx

@@ -25,7 +25,9 @@ const LoadingPage = ({ text, context }: Props) => {
   if (error) {
     return (
       <div css={styles.page}>
-        <Message type="error" title={error.title} description={error.description} />
+        <Message type="error" title={error.title}>
+          {error.description}
+        </Message>
       </div>
     )
   }

web-app/src/containers/Tutorial/LevelPage/Level.tsx

@@ -68,11 +68,12 @@ const styles = {
 interface Props {
   level: G.Level & { status: T.ProgressStatus; index: number; steps: Array<G.Step & { status: T.ProgressStatus }> }
   processes: T.ProcessEvent[]
+  testStatus: T.TestStatus | null
   onContinue(): void
   onLoadSolution(): void
 }
 
-const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
+const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Props) => {
   if (!level.steps) {
     throw new Error('No Stage steps found')
   }
@@ -109,7 +110,7 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
 
       {processes.length > 0 && (
         <div css={styles.processes}>
-          <ProcessMessages processes={processes} />
+          <ProcessMessages processes={processes} testStatus={testStatus} />
         </div>
       )}
 

web-app/src/containers/Tutorial/LevelPage/index.tsx

@@ -10,7 +10,7 @@ interface PageProps {
 }
 
 const LevelSummaryPageContainer = (props: PageProps) => {
-  const { position, progress, processes, error } = props.context
+  const { position, progress, processes, testStatus, error } = props.context
 
   const version = selectors.currentVersion(props.context)
   const levelData: G.Level = selectors.currentLevel(props.context)
@@ -48,7 +48,15 @@ const LevelSummaryPageContainer = (props: PageProps) => {
     }),
   }
 
-  return <Level level={level} onContinue={onContinue} onLoadSolution={onLoadSolution} processes={processes} />
+  return (
+    <Level
+      level={level}
+      onContinue={onContinue}
+      onLoadSolution={onLoadSolution}
+      processes={processes}
+      testStatus={testStatus}
+    />
+  )
 }
 
 export default LevelSummaryPageContainer

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

@@ -1,24 +1,29 @@
 import * as CR from 'typings'
-import { ActionFunctionMap } from 'xstate'
-import notify from '../../notify'
+import { assign, ActionFunctionMap } from 'xstate'
 
 const testActions: ActionFunctionMap<CR.MachineContext, CR.MachineEvent> = {
-  testPass() {
-    notify({
-      key: 'test',
+  // @ts-ignore
+  testStart: assign({
+    testStatus: () => ({
+      type: 'loading',
+      title: 'Test running...',
+    }),
+  }),
+  // @ts-ignore
+  testPass: assign({
+    testStatus: () => ({
+      type: 'success',
       title: 'Success!',
-      content: '',
-      duration: 1500,
-    })
-  },
-  testFail(context, event) {
-    notify({
-      key: 'test',
-      title: 'Fail',
-      content: '',
-      duration: 3000,
-    })
-  },
+    }),
+  }),
+  // @ts-ignore
+  testFail: assign({
+    testStatus: () => ({
+      type: 'warning',
+      title: 'Fail!',
+      content: 'Test failed for some reason',
+    }),
+  }),
 }
 
 export default testActions

web-app/src/services/state/machine.ts

@@ -27,6 +27,7 @@ export const createMachine = (options: any) => {
           complete: false,
         },
         processes: [],
+        testStatus: null,
       },
       states: {
         Start: {

web-app/stories/Commands.stories.tsx

@@ -14,6 +14,7 @@ storiesOf('Components', module)
   .addDecorator(SideBarDecorator)
   .add('Processes', () => (
     <ProcessMessages
+      testStatus={null}
       processes={[
         {
           title: 'npm install',
@@ -26,3 +27,31 @@ storiesOf('Components', module)
       ]}
     />
   ))
+  .add('Test Start', () => (
+    <ProcessMessages
+      testStatus={{
+        type: 'loading',
+        title: 'Test running...',
+      }}
+      processes={[]}
+    />
+  ))
+  .add('Test Pass', () => (
+    <ProcessMessages
+      testStatus={{
+        type: 'success',
+        title: 'Success!',
+      }}
+      processes={[]}
+    />
+  ))
+  .add('Test Fail', () => (
+    <ProcessMessages
+      testStatus={{
+        type: 'warning',
+        title: 'Fail!',
+        content: 'Test failed for some reason',
+      }}
+      processes={[]}
+    />
+  ))