typescript coverage for statless components

ShMcK · ShMcK · commit 37787a2da009 · 2016-04-15T11:09:44.000+08:00
diff --git a/lib/components/_components.js b/lib/components/_components.js
@@ -5,12 +5,8 @@ var routes_1 = require('./routes/routes');
 exports.Routes = routes_1.default;
 var page_1 = require('./page/page');
 exports.Page = page_1.default;
-var chapter_1 = require('./page/chapter/chapter');
-exports.Chapter = chapter_1.default;
 var menu_1 = require('./menu/menu');
 exports.Menu = menu_1.default;
-var progress_1 = require('./progress/progress');
-exports.Progress = progress_1.default;
 var start_1 = require('./start/start');
 exports.Start = start_1.Start;
 var tutorials_1 = require('./tutorials/tutorials');
diff --git a/lib/components/page/chapter/chapter.js b/lib/components/page/chapter/chapter.js
@@ -1,8 +1,7 @@
 'use strict';
 var React = require('react');
 var _components_1 = require('../../_components');
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = function (_a) {
+exports.Chapter = function (_a) {
     var chapter = _a.chapter;
     return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(_components_1.Markdown, null, chapter.title)));
 };
diff --git a/lib/components/page/content.js b/lib/components/page/content.js
@@ -4,9 +4,7 @@ var _components_1 = require('../_components');
 var card_1 = require('material-ui/lib/card/card');
 var card_header_1 = require('material-ui/lib/card/card-header');
 var card_text_1 = require('material-ui/lib/card/card-text');
-function default_1(_a) {
+exports.PageContent = function (_a) {
     var page = _a.page;
     return (React.createElement(card_1.default, null, React.createElement(card_header_1.default, {title: page.title}), React.createElement(card_text_1.default, null, React.createElement(_components_1.Markdown, null, page.description))));
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
+};
diff --git a/lib/components/page/edit.js b/lib/components/page/edit.js
@@ -3,8 +3,8 @@ var React = require('react');
 var path = require('path');
 var mode_edit_1 = require('material-ui/lib/svg-icons/editor/mode-edit');
 var editStyle = { position: 'absolute', top: '10px', right: '10px' };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = function (editPath) {
+exports.Edit = function (_a) {
+    var editPath = _a.editPath;
     if (editPath && window.coderoad.edit) {
         var repoPath = path.join(window.coderoad.repo, 'edit', 'master', editPath);
         return React.createElement("a", {href: repoPath}, React.createElement(mode_edit_1.default, {style: editStyle}));
diff --git a/lib/components/page/page.js b/lib/components/page/page.js
@@ -29,7 +29,7 @@ var default_1 = (function (_super) {
         var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, runTests = _a.runTests;
         var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
         var allComplete = taskPosition >= tasks.length;
-        return (React.createElement(paper_1.default, {style: pageStyle, zDepth: 1, className: 'cr-page', ref: 'page'}, React.createElement(content_1.default, {page: page}), React.createElement(divider_1.default, null), React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(hint_1.default, {task: currentTask, hintPosition: hintPosition}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(toolbar_1.default, {tasks: tasks, taskPosition: taskPosition})));
+        return (React.createElement(paper_1.default, {style: pageStyle, zDepth: 1, className: 'cr-page', ref: 'page'}, React.createElement(content_1.PageContent, {page: page}), React.createElement(divider_1.default, null), React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(hint_1.default, {task: currentTask, hintPosition: hintPosition}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(toolbar_1.default, {tasks: tasks, taskPosition: taskPosition})));
     };
     return default_1;
 }(React.Component));
diff --git a/lib/components/progress/progress.js b/lib/components/progress/progress.js
@@ -81,8 +81,7 @@ var style = {
     width: '100%',
     margin: 0
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = function (_a) {
+exports.Progress = function (_a) {
     var progress = _a.progress, position = _a.position;
     return (React.createElement(paper_1.default, {style: style, zDepth: 1, className: 'cr-progress'}, React.createElement(list_1.default, null, React.createElement(Subheader_1.default, null, "Progress"), progress.chapters.map(function (chapter, chapterIndex) {
         var isActive = chapterIndex === position.chapter;
diff --git a/lib/components/start/checks/checks.js b/lib/components/start/checks/checks.js
@@ -14,6 +14,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var React = require('react');
+var paper_1 = require('material-ui/lib/paper');
 var setup_checker_1 = require('./setup-checker');
 var VerticalStep_1 = require('material-ui/lib/Stepper/VerticalStep');
 var flat_button_1 = require('material-ui/lib/flat-button');
@@ -38,7 +39,7 @@ var Checks = (function (_super) {
     };
     Checks.prototype.render = function () {
         var _a = this.props, checks = _a.checks, verify = _a.verify;
-        return React.createElement("div", {className: 'cr-checks'}, React.createElement("p", {className: 'tagline'}, "Setup"), checks.system.passed ? null : React.createElement(setup_checker_1.default, {title: 'Dependency Checks', status: this.getSystemChecks(checks)}, React.createElement(VerticalStep_1.default, {orderStepLabel: fail, stepLabel: 'Node >= 0.10', actions: [
+        return React.createElement(paper_1.default, {className: 'cr-checks'}, React.createElement("p", {className: 'tagline'}, "Setup"), checks.system.passed ? null : React.createElement(setup_checker_1.default, {title: 'Dependency Checks', status: this.getSystemChecks(checks)}, React.createElement(VerticalStep_1.default, {orderStepLabel: fail, stepLabel: 'Node >= 0.10', actions: [
             React.createElement(flat_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: verify})
         ]}, React.createElement("div", null, "Install a newer version of ", React.createElement("a", {href: 'https://nodejs.org'}, "Node"))), React.createElement(VerticalStep_1.default, {orderStepLabel: fail, stepLabel: 'NPM >= 3', actions: [
             React.createElement(flat_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: verify}),
diff --git a/src/components/final-page/final-page.tsx b/src/components/final-page/final-page.tsx
@@ -8,7 +8,7 @@ import CardText from 'material-ui/lib/card/card-text';
 import CardActions from 'material-ui/lib/card/card-actions';
 import FlatButton from 'material-ui/lib/flat-button';
 
-export const FinalPage = () => (
+export const FinalPage: React.StatelessComponent<{}> = () => (
   <Paper>
     <Card>
       <CardTitle title='Congratulations!'
diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx
@@ -33,7 +33,7 @@ function formatText(text: string): string {
  * Markdown Text
  * 	MD -> HTML
  */
-export const Markdown: React.StatelessComponent<any> = ({children}) => {
+export const Markdown: React.StatelessComponent<{children?: string}> = ({children}) => {
   let text = formatText(children);
   return <span className='cr-markdown' dangerouslySetInnerHTML={
     {__html: text}
diff --git a/src/components/page/chapter/chapter.tsx b/src/components/page/chapter/chapter.tsx
@@ -5,7 +5,7 @@ import {Markdown} from '../../_components';
  * Chapters Component
  * 	basic chapter info
  */
-export default ({chapter}) => (
+export const Chapter: React.StatelessComponent<{chapter}> = ({chapter}) => (
   <section className='cr-chapter'>
     <Markdown>{chapter.title}</Markdown>
   </section>
diff --git a/src/components/page/complete/page-complete.tsx b/src/components/page/complete/page-complete.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import ListItem from 'material-ui/lib/lists/list-item';
 import {Markdown} from '../../_components';
 
-export const PageCompleteMessage = ({page}) => (
+export const PageCompleteMessage: React.StatelessComponent<{page: CR.Page}> = ({page}) => (
   <div className='cr-page-onComplete'>
     {page.completed && page.onPageComplete ?
       <ListItem key='page-complete'>
diff --git a/src/components/page/content.tsx b/src/components/page/content.tsx
@@ -4,13 +4,13 @@ import Card from 'material-ui/lib/card/card';
 import CardHeader from 'material-ui/lib/card/card-header';
 import CardText from 'material-ui/lib/card/card-text';
 
-export default function ({page}) {
-  return (
-    <Card>
-      <CardHeader title={page.title} />
-      <CardText>
-        <Markdown>{page.description}</Markdown>
-      </CardText>
-    </Card>
-  );
-}
+export const PageContent: React.StatelessComponent<{
+  page: CR.Page
+}> = ({page}) => (
+  <Card>
+    <CardHeader title={page.title} />
+    <CardText>
+      <Markdown>{page.description}</Markdown>
+    </CardText>
+  </Card>
+);
diff --git a/src/components/page/edit.tsx b/src/components/page/edit.tsx
@@ -4,11 +4,13 @@ import NavigationClose from 'material-ui/lib/svg-icons/navigation/close';
 import ModeEdit from 'material-ui/lib/svg-icons/editor/mode-edit';
 const editStyle = {position: 'absolute', top: '10px', right: '10px'};
 
-export default (editPath: string) => {
+export const Edit: React.StatelessComponent<{
+  editPath: string
+}> = ({editPath}) => {
   if (editPath && window.coderoad.edit) {
     let repoPath = path.join(window.coderoad.repo, 'edit', 'master', editPath);
     return <a href={repoPath}>
       <ModeEdit style={editStyle}/>
       </a>;
   }
-}
+};
diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import Paper from 'material-ui/lib/paper';
 import Divider from 'material-ui/lib/divider';
-import PageContent from './content';
+import {PageContent} from './content';
 import {Tasks} from './task/task';
 import Hints from './hint/hint';
 import {PageCompleteMessage} from './complete/page-complete';
diff --git a/src/components/page/task/task.tsx b/src/components/page/task/task.tsx
@@ -12,7 +12,9 @@ function visibleTasks(tasks: CR.Task[], taskPosition: number) {
   return tasks.slice(0, taskPosition + 1);
 }
 
-const TaskCheckbox = ({index, taskPosition, runTests}) => {
+const TaskCheckbox: React.StatelessComponent<{
+  index: number, taskPosition: number, runTests: boolean
+}> = ({index, taskPosition, runTests}) => {
   let icon = null;
   if (index < taskPosition) {
     icon = <CheckBox color={green500} />;
@@ -25,17 +27,23 @@ const TaskCheckbox = ({index, taskPosition, runTests}) => {
   return <span className='cr-task-checkbox'>{icon}</span>;
 };
 
-const TaskIndex = ({index}) => (
+const TaskIndex: React.StatelessComponent<{
+  index: number
+}> = ({index}) => (
   <span className='cr-task-index'>{index + 1}.</span>
 );
 
-const TaskContent = ({task}) => (
+const TaskContent: React.StatelessComponent<{
+  task: CR.Task
+}> = ({task}) => (
   <div className='cr-task-description'>
     <Markdown>{task.description}</Markdown>
   </div>
 );
 
-export const Task = ({task, taskPosition, index, runTests}) => {
+export const Task: React.StatelessComponent<{
+  task: CR.Task, taskPosition: number, index: number, runTests: boolean
+}> = ({task, taskPosition, index, runTests}) => {
   const isCompleted = index < taskPosition;
   return (
     <ListItem key={index} className='cr-task' style={{backgroundColor: isCompleted ? '#c8e6c9' : 'inherit'}}>
@@ -46,9 +54,10 @@ export const Task = ({task, taskPosition, index, runTests}) => {
     );
 };
 
-export const Tasks = ({tasks, taskPosition, runTests}) => {
+export const Tasks: React.StatelessComponent<{
+  tasks: CR.Task[], taskPosition: number, runTests: boolean
+}> = ({tasks, taskPosition, runTests}) => {
   const visTasks = visibleTasks(tasks, taskPosition);
-
   return <List className='cr-tasks'>
       <Subheader>Tasks</Subheader>
       {visTasks.map((task, index) => <Task
diff --git a/src/components/page/toolbar/toolbar.tsx b/src/components/page/toolbar/toolbar.tsx
@@ -11,7 +11,9 @@ import {toggleDevTools} from '../../../atom/actions';
 import {store} from '../../../store/store';
 import Code from 'material-ui/lib/svg-icons/action/code';
 
-const ProgressBar = ({progress}) => <LinearProgress mode='determinate'
+const ProgressBar: React.StatelessComponent<{
+  progress: number
+}> = ({progress}) => <LinearProgress mode='determinate'
  value={progress} style={{height: '10px'}}/>;
 
 function taskProgress(current: number, max: number) {
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
@@ -68,7 +68,9 @@ const style = {
  * Progress Component
  * 	display page data
  */
-export default ({progress, position}) => (
+export const Progress: React.StatelessComponent<{
+  progress: CR.Progress, position: CR.Position
+}> = ({progress, position}) => (
   <Paper style={style} zDepth={1} className='cr-progress'>
     {/*}<ProjectDescription project={project} />*/}
     <List>
diff --git a/src/components/start/checks/checks.tsx b/src/components/start/checks/checks.tsx
@@ -31,7 +31,7 @@ export default class Checks extends React.Component<{
   }
   render() {
     const {checks, verify} = this.props;
-    return <div className='cr-checks'>
+    return <Paper className='cr-checks'>
         {/* System Checks */}
 
         <p className='tagline'>Setup</p>
@@ -116,6 +116,6 @@ export default class Checks extends React.Component<{
       <a href='https://coderoad.github.io/docs#install'> <strong>Install Guide</strong></a></span>
     </div>}
 
-    </div>;
+    </Paper>;
   }
 }
