Skip to content

Commit

Permalink
updated Appendix03 file
Browse files Browse the repository at this point in the history
  • Loading branch information
@kdchang
kdchang committed Sep 8, 2016
1 parent ebab4a5 commit 07b2b68
Show file tree
Hide file tree
Showing 20 changed files with 243 additions and 0 deletions.
7 changes: 7 additions & 0 deletions Appendix03/react-addons-test-utils-example/.babelrc
View file
@@ -0,0 +1,7 @@
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
10 changes: 10 additions & 0 deletions Appendix03/react-addons-test-utils-example/.eslint
View file
@@ -0,0 +1,10 @@
{
"extends": "airbnb",
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
},
"env" :{
"browser": true,
"es6": true
}
}
37 changes: 37 additions & 0 deletions Appendix03/react-addons-test-utils-example/package.json
View file
@@ -0,0 +1,37 @@
{
"name": "react-redux-example",
"version": "1.0.0",
"description": "react-redux-example",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server --colors --inline --content-base .",
"test": "mocha --compilers js:babel-core/register --require ./test/setup.js --recursive"
},
"author": "kdchang",
"license": "MIT",
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"chai": "^3.5.0",
"enzyme": "^2.4.1",
"eslint": "^3.3.1",
"eslint-config-airbnb": "^10.0.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-import": "^1.13.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-react": "^6.1.1",
"html-webpack-plugin": "^2.22.0",
"jsdom": "^9.5.0",
"mocha": "^3.0.2",
"react-addons-test-utils": "^15.3.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
13 changes: 13 additions & 0 deletions Appendix03/react-addons-test-utils-example/src/components/Main/Main.js
View file
@@ -0,0 +1,13 @@
import React from 'react';
import TodoHeader from '../TodoHeader';
import TodoList from '../TodoList';

const Main = () => (
<div>
<h1>Todos</h1>
<TodoHeader />
<TodoList />
</div>
);

export default Main;
1 change: 1 addition & 0 deletions Appendix03/react-addons-test-utils-example/src/components/Main/index.js
View file
@@ -0,0 +1 @@
export { default } from './Main';
25 changes: 25 additions & 0 deletions Appendix03/react-addons-test-utils-example/src/components/TodoHeader/TodoHeader.js
View file
@@ -0,0 +1,25 @@
import React from 'react';

class TodoHeader extends React.Component {
constructor(props) {
super(props);
this.toggleButton = this.toggleButton.bind(this);
this.state = {
isActivated: false,
};
}
toggleButton() {
this.setState({
isActivated: !this.state.isActivated,
})
}
render() {
return (
<div>
<button disabled={this.state.isActivated} onClick={this.toggleButton}>Add</button>
</div>
);
};
}

export default TodoHeader;
1 change: 1 addition & 0 deletions Appendix03/react-addons-test-utils-example/src/components/TodoHeader/index.js
View file
@@ -0,0 +1 @@
export { default } from './TodoHeader';
15 changes: 15 additions & 0 deletions Appendix03/react-addons-test-utils-example/src/components/TodoList/TodoList.js
View file
@@ -0,0 +1,15 @@
import React from 'react';

const TodoList = (props) => (
<div>
<ul>
{
props.todos.map((todo, index) => (
<li key={index}>{todo.text}</li>
))
}
</ul>
</div>
);

export default TodoList;
1 change: 1 addition & 0 deletions Appendix03/react-addons-test-utils-example/src/components/TodoList/index.js
View file
@@ -0,0 +1 @@
export { default } from './TodoList';
10 changes: 10 additions & 0 deletions Appendix03/react-addons-test-utils-example/src/index.html
View file
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
8 changes: 8 additions & 0 deletions Appendix03/react-addons-test-utils-example/src/index.js
View file
@@ -0,0 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './components/Main';

ReactDOM.render(
<Main />,
document.getElementById('app')
);
16 changes: 16 additions & 0 deletions Appendix03/react-addons-test-utils-example/test/renderIntoDocument.test.js
View file
@@ -0,0 +1,16 @@
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import { expect } from 'chai';
import { findDOMNode } from 'react-dom';
import TodoHeader from '../src/components/TodoHeader';

describe('Simulate Event', function () {
it('When click the button, it will be toggle', function () {
const TodoHeaderApp = TestUtils.renderIntoDocument(<TodoHeader />);
const TodoHeaderDOM = findDOMNode(TodoHeaderApp);
const button = TodoHeaderDOM.querySelector('button');
TestUtils.Simulate.click(button);
let todoHeaderButtonAfterClick = TodoHeaderDOM.querySelector('button').disabled;
expect(todoHeaderButtonAfterClick).to.equal(true);
});
});
7 changes: 7 additions & 0 deletions Appendix03/react-addons-test-utils-example/test/setup.js
View file
@@ -0,0 +1,7 @@
import jsdom from 'jsdom';

if (typeof document === 'undefined') {
global.document = jsdom.jsdom('<!doctype html><html><head></head><body></body></html>');
global.window = document.defaultView;
global.navigator = global.window.navigator;
}
18 changes: 18 additions & 0 deletions Appendix03/react-addons-test-utils-example/test/shallowRender.test.js
View file
@@ -0,0 +1,18 @@
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import { expect } from 'chai';
import Main from '../src/components/Main';

function shallowRender(Component) {
const renderer = TestUtils.createRenderer();
renderer.render(<Component/>);
return renderer.getRenderOutput();
}

describe('Shallow Rendering', function () {
it('Main title should be h1', function () {
const todoItem = shallowRender(Main);
expect(todoItem.props.children[0].type).to.equal('h1');
expect(todoItem.props.children[0].props.children).to.equal('Todos');
});
});
20 changes: 20 additions & 0 deletions Appendix03/react-addons-test-utils-example/test/shallowRenderProps.test.js
View file
@@ -0,0 +1,20 @@
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import { expect } from 'chai';
import TodoList from '../src/components/TodoList';

const shallowRender = (Component, props) => {
const renderer = TestUtils.createRenderer();
renderer.render(<Component {...props}/>);
return renderer.getRenderOutput();
}

describe('Shallow Props Rendering', () => {
it('TodoList props check', () => {
const todos = [{ id: 0, text: 'reading'}, { id: 1, text: 'coding'}];
const todoList = shallowRender(TodoList, {todos: todos});
expect(todoList.props.children.type).to.equal('ul');
expect(todoList.props.children.props.children[0].props.children).to.equal('reading');
expect(todoList.props.children.props.children[1].props.children).to.equal('coding');
});
});
40 changes: 40 additions & 0 deletions Appendix03/react-addons-test-utils-example/webpack.config.js
View file
@@ -0,0 +1,40 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/src/index.html`,
filename: 'index.html',
inject: 'body',
});

module.exports = {
entry: [
'./src/index.js',
],
output: {
path: `${__dirname}/dist`,
filename: 'index_bundle.js',
},
module: {
preLoaders: [
{
test: /\.jsx$\\.js$/,
loader: 'eslint-loader',
include: `${__dirname}/src`,
exclude: /bundle\.js$/
}
],
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
}],
},
devServer: {
inline: true,
port: 8008,
},
plugins: [HTMLWebpackPluginConfig],
}
7 changes: 7 additions & 0 deletions Appendix03/react-redux-test-example/.babelrc
View file
@@ -0,0 +1,7 @@
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
Empty file added Appendix03/react-redux-test-example/test/actionTest.js
View file
Empty file.
Empty file added Appendix03/react-redux-test-example/test/reducerTest.test.js
View file
Empty file.
7 changes: 7 additions & 0 deletions Ch07/react-redux-example/.babelrc
View file
@@ -0,0 +1,7 @@
{
"presets": [
"es2015",
"react",
],
"plugins": []
}

0 comments on commit 07b2b68

Please sign in to comment.