Organise utilities

src/components/commons/controlButton.tsx

@@ -0,0 +1,19 @@
+import { Button, IconName, Intent } from '@blueprintjs/core'
+import * as React from 'react'
+
+export const controlButton = (
+  label: string,
+  icon: IconName,
+  handleClick = () => {},
+  intent = Intent.NONE,
+  minimal = true
+) => (
+  <Button
+    onClick={handleClick}
+    className={(minimal ? 'pt-minimal' : '') + ' col-xs-12'}
+    intent={intent}
+    icon={icon}
+  >
+    {label}
+  </Button>
+)

src/components/commons/index.tsx

@@ -0,0 +1 @@
+export * from './controlButton'

src/components/workspace/Editor.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
-
 import AceEditor from 'react-ace'
 
-import { Button, IconName, Intent } from '@blueprintjs/core'
+import { controlButton } from '../commons'
 
 import 'brace/mode/javascript'
 import 'brace/theme/cobalt'
@@ -24,27 +23,11 @@ export interface IEditorProps {
 
 class Editor extends React.Component<IEditorProps, {}> {
   public render() {
-    const genericButton = (
-      label: string,
-      icon: IconName,
-      handleClick = () => {},
-      intent = Intent.NONE,
-      notMinimal = false
-    ) => (
-      <Button
-        onClick={handleClick}
-        className={(notMinimal ? '' : 'pt-minimal') + ' col-xs-12'}
-        intent={intent}
-        icon={icon}
-      >
-        {label}
-      </Button>
-    )
     const runButton = this.props.isRunning
       ? null
-      : genericButton('', 'play', this.props.handleEditorEval)
+      : controlButton('', 'play', this.props.handleEditorEval)
     const stopButton = this.props.isRunning
-      ? genericButton('', 'stop', this.props.handleInterruptEval)
+      ? controlButton('', 'stop', this.props.handleInterruptEval)
       : null
     return (
       <div className="Editor">

src/components/workspace/ReplControl.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
 
-import { Button, IconName, Intent } from '@blueprintjs/core'
-
 import { sourceChapters } from '../../reducers/states'
+import { controlButton } from '../commons'
 
 /**
  * @property handleEvalEditor  - A callback function for evaluation
@@ -14,48 +13,30 @@ export interface IReplControlProps {
   handleChapterSelect: (e: React.ChangeEvent<HTMLSelectElement>) => void
 }
 
-const chapterSelect = (handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {}) => (
-  <div className="pt-select pt-select">
-    <select defaultValue={sourceChapters.slice(-1)[0].toString()} onChange={handleSelect}>
-      {sourceChapters.map(chap => (
-        <option key={chap} value={chap}>
-          {`Source \xa7${chap}`}
-        </option>
-      ))}
-    </select>
-  </div>
-)
-
 class ReplControl extends React.Component<IReplControlProps, {}> {
   public render() {
-    const genericButton = (
-      label: string,
-      icon: IconName,
-      handleClick = () => {},
-      intent = Intent.NONE,
-      notMinimal = false
-    ) => (
-      <Button
-        onClick={handleClick}
-        className={(notMinimal ? '' : 'pt-minimal') + ' col-xs-12'}
-        intent={intent}
-        icon={icon}
-      >
-        {label}
-      </Button>
-    )
-    const evalButton = genericButton('', 'code', this.props.handleReplEval)
-    const clearButton = genericButton('', 'remove', this.props.handleReplOutputClear)
     return (
       <div className="row end-xs">
         <div className="pt-control-group pt-fill">
           {chapterSelect(this.props.handleChapterSelect)}
-          {evalButton}
-          {clearButton}
+          {controlButton('', 'code', this.props.handleReplEval)}
+          {controlButton('', 'remove', this.props.handleReplOutputClear)}
         </div>
       </div>
     )
   }
 }
 
+const chapterSelect = (handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {}) => (
+  <div className="pt-select pt-select">
+    <select defaultValue={sourceChapters.slice(-1)[0].toString()} onChange={handleSelect}>
+      {sourceChapters.map(chap => (
+        <option key={chap} value={chap}>
+          {`Source \xa7${chap}`}
+        </option>
+      ))}
+    </select>
+  </div>
+)
+
 export default ReplControl

src/components/workspace/__tests__/Repl.tsx

@@ -1,12 +1,41 @@
 import { shallow } from 'enzyme'
 import * as React from 'react'
 
-import { ResultOutput } from '../../../reducers/states'
+import { mockTypeError } from '../../../mocks/context'
+import {
+  CodeOutput,
+  ErrorOutput,
+  InterpreterOutput,
+  ResultOutput,
+  RunningOutput
+} from '../../../reducers/states'
 import Repl, { Output } from '../Repl'
 
+const mockRunningOutput: RunningOutput = {
+  type: 'running',
+  consoleLogs: ['a', 'bb', 'cccccccccccccccccccccccccccccccc', 'd']
+}
+
+const mockCodeOutput: CodeOutput = {
+  type: 'code',
+  value: "display('');"
+}
+
+const mockResultOutput: ResultOutput = {
+  type: 'result',
+  value: 42,
+  consoleLogs: []
+}
+
+const mockErrorOutput: ErrorOutput = {
+  type: 'errors',
+  errors: [mockTypeError()],
+  consoleLogs: []
+}
+
 test('Repl renders correctly', () => {
   const props = {
-    output: [{ type: 'result', value: 'abc', consoleLogs: [] } as ResultOutput],
+    output: [mockResultOutput, mockCodeOutput, mockErrorOutput, mockRunningOutput],
     replValue: '',
     handleReplValueChange: (newCode: string) => {},
     handleReplEval: () => {},
@@ -18,9 +47,52 @@ test('Repl renders correctly', () => {
   expect(tree.debug()).toMatchSnapshot()
 })
 
-test("Output renders correctly for InterpreterOutput.type === 'result'", () => {
-  const props: ResultOutput = { type: 'result', value: 'def', consoleLogs: [] }
+test('Code output renders correctly', () => {
+  const app = <Output {...{ output: mockCodeOutput }} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
+test('Running output renders correctly', () => {
+  const app = <Output {...{ output: mockRunningOutput }} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
+test('Result output (no consoleLogs) renders correctly', () => {
+  const app = <Output {...{ output: mockResultOutput }} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
+test('Result output (with consoleLogs) renders correctly', () => {
+  const props = {
+    ...mockResultOutput,
+    consoleLogs: mockRunningOutput.consoleLogs
+  }
+  const app = <Output {...{ output: props }} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
+test('Error output (no consoleLogs) renders correctly', () => {
+  const app = <Output {...{ output: mockErrorOutput }} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
+test('Error output (with consoleLogs) renders correctly', () => {
+  const props = {
+    ...mockErrorOutput,
+    consoleLogs: mockRunningOutput.consoleLogs
+  }
   const app = <Output {...{ output: props }} />
   const tree = shallow(app)
   expect(tree.debug()).toMatchSnapshot()
 })
+
+test('Empty output renders an empty card', () => {
+  const app = <Output {...{ output: {} as InterpreterOutput }} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})

src/components/workspace/__tests__/__snapshots__/Repl.tsx.snap

@@ -1,9 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Output renders correctly for InterpreterOutput.type === 'result' 1`] = `
+exports[`Code output renders correctly 1`] = `
 "<Blueprint2.Card elevation={0} interactive={false}>
-  <pre className=\\"resultOutput\\">
-    &quot;def&quot;
+  <pre className=\\"codeOutput\\">
+    display(&#39;&#39;);
+  </pre>
+</Blueprint2.Card>"
+`;
+
+exports[`Empty output renders an empty card 1`] = `
+"<Blueprint2.Card elevation={0} interactive={false}>
+  &#39;&#39;
+</Blueprint2.Card>"
+`;
+
+exports[`Error output (no consoleLogs) renders correctly 1`] = `
+"<Blueprint2.Card elevation={0} interactive={false}>
+  <pre className=\\"errorOutput\\">
+    Line &lt;unknown&gt;: Expected , got .
+  </pre>
+</Blueprint2.Card>"
+`;
+
+exports[`Error output (with consoleLogs) renders correctly 1`] = `
+"<Blueprint2.Card elevation={0} interactive={false}>
+  <pre className=\\"logOutput\\">
+    a
+    bb
+    cccccccccccccccccccccccccccccccc
+    d
+  </pre>
+  <br />
+  <pre className=\\"errorOutput\\">
+    Line &lt;unknown&gt;: Expected , got .
   </pre>
 </Blueprint2.Card>"
 `;
@@ -14,6 +43,9 @@ exports[`Repl renders correctly 1`] = `
     <ReplControl output={{...}} replValue=\\"\\" handleReplValueChange={[Function: handleReplValueChange]} handleReplEval={[Function: handleReplEval]} handleReplOutputClear={[Function: handleReplOutputClear]} handleChapterSelect={[Function: handleChapterSelect]} />
   </div>
   <div className=\\"repl-output-parent\\">
+    <Component output={{...}} />
+    <Component output={{...}} />
+    <Component output={{...}} />
     <Component output={{...}} />
     <div className=\\"repl-input-parent row pt-card pt-elevation-0\\">
       <ReplInput output={{...}} replValue=\\"\\" handleReplValueChange={[Function: handleReplValueChange]} handleReplEval={[Function: handleReplEval]} handleReplOutputClear={[Function: handleReplOutputClear]} handleChapterSelect={[Function: handleChapterSelect]} />
@@ -22,3 +54,36 @@ exports[`Repl renders correctly 1`] = `
   </div>
 </div>"
 `;
+
+exports[`Result output (no consoleLogs) renders correctly 1`] = `
+"<Blueprint2.Card elevation={0} interactive={false}>
+  <pre className=\\"resultOutput\\">
+    42
+  </pre>
+</Blueprint2.Card>"
+`;
+
+exports[`Result output (with consoleLogs) renders correctly 1`] = `
+"<Blueprint2.Card elevation={0} interactive={false}>
+  <pre className=\\"logOutput\\">
+    a
+    bb
+    cccccccccccccccccccccccccccccccc
+    d
+  </pre>
+  <pre className=\\"resultOutput\\">
+    42
+  </pre>
+</Blueprint2.Card>"
+`;
+
+exports[`Running output renders correctly 1`] = `
+"<Blueprint2.Card elevation={0} interactive={false}>
+  <pre className=\\"logOutput\\">
+    a
+    bb
+    cccccccccccccccccccccccccccccccc
+    d
+  </pre>
+</Blueprint2.Card>"
+`;

src/index.tsx

@@ -9,7 +9,7 @@ import { Store } from 'redux'
 import ApplicationContainer from './containers/ApplicationContainer'
 import createStore from './createStore'
 import { IState } from './reducers/states'
-import registerServiceWorker from './registerServiceWorker'
+import registerServiceWorker from './utils/registerServiceWorker'
 
 import './styles/index.css'
 

src/mocks/context.ts

@@ -1,7 +1,9 @@
+import { parse } from 'acorn'
 import * as es from 'estree'
 
 import { createContext } from '../slang'
 import { Closure, Context, Frame } from '../slang/types'
+import { TypeError } from '../slang/utils/rttc'
 
 export function mockContext(chapter = 1): Context {
   return createContext(chapter)
@@ -31,3 +33,7 @@ export function mockRuntimeContext(): Context {
 export function mockClosure(): Closure {
   return new Closure({} as es.FunctionExpression, {} as Frame, {} as Context)
 }
+
+export function mockTypeError(): TypeError {
+  return new TypeError(parse(''), '', '', '')
+}

src/sagas/index.ts

@@ -6,7 +6,7 @@ import { Context, interrupt, runInContext } from '../slang'
 
 import * as actions from '../actions'
 import * as actionTypes from '../actions/actionTypes'
-import { showSuccessMessage, showWarningMessage } from '../notification'
+import { showSuccessMessage, showWarningMessage } from '../utils/notification'
 
 function* evalCode(code: string, context: Context) {
   const { result, interrupted } = yield race({
@@ -53,8 +53,6 @@ function* interpreterSaga(): SagaIterator {
       yield put(actions.clearContext())
       yield put(actions.clearReplOutput())
       yield call(showSuccessMessage, `Switched to Source \xa7${newChapter}`)
-    } else {
-      yield undefined
     }
   })
 }