Finish porting examples

Author: gaearon

examples/async/favicon.ico

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.4.0",
+    "react-scripts": "^0.4.0",
     "redux-logger": "^2.6.1"
   },
   "dependencies": {
@@ -16,8 +16,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "eject": "react-scripts eject",
-    "test": "react-scripts test"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "./node_modules/react-scripts/config/eslint.js"

examples/async/package.json

@@ -10,20 +10,27 @@ var exampleDirs = fs.readdirSync(__dirname).filter((file) => {
   return fs.statSync(path.join(__dirname, file)).isDirectory()
 })
 
-for (const dir of exampleDirs) {
-  // declare opts in this scope to avoid https://github.com/joyent/node/issues/9158
-  const opts = {
-    cwd: path.join(__dirname, dir),
-    stdio: 'inherit'
-  }
+// Ordering is important here. `npm install` must come first.
+var cmdArgs = [
+  { cmd: 'npm', args: [ 'install' ] },
+  { cmd: 'webpack', args: [ 'index.js' ] }
+]
 
-  let result = {}
-  if (process.platform === 'win32') {
-    result = spawnSync('npm.cmd', [ 'install' ], opts)
-  } else {
-    result = spawnSync('npm', [ 'install' ], opts)
-  }
-  if (result.status !== 0) {
-    throw new Error('Building examples exited with non-zero')
+for (const dir of exampleDirs) {
+  for (const cmdArg of cmdArgs) {
+    // declare opts in this scope to avoid https://github.com/joyent/node/issues/9158
+    const opts = {
+      cwd: path.join(__dirname, dir),
+      stdio: 'inherit'
+    }
+    let result = {}
+    if (process.platform === 'win32') {
+      result = spawnSync(cmdArg.cmd + '.cmd', cmdArg.args, opts)
+    } else {
+      result = spawnSync(cmdArg.cmd, cmdArg.args, opts)
+    }
+    if (result.status !== 0) {
+      throw new Error('Building examples exited with non-zero')
+    }
   }
 }

examples/buildAll.js

@@ -5,7 +5,7 @@
   "devDependencies": {
     "enzyme": "^2.4.1",
     "react-addons-test-utils": "^15.3.0",
-    "react-scripts": "0.4.0"
+    "react-scripts": "^0.4.0"
   },
   "dependencies": {
     "react": "^15.3.0",

examples/counter/favicon.ico

@@ -1,12 +1,11 @@
-import expect from 'expect'
 import React from 'react'
 import { shallow } from 'enzyme'
 import Counter from './Counter'
 
 function setup(value = 0) {
   const actions = {
-    onIncrement: expect.createSpy(),
-    onDecrement: expect.createSpy()
+    onIncrement: jest.fn(),
+    onDecrement: jest.fn()
   }
   const component = shallow(
     <Counter value={value} {...actions} />
@@ -29,38 +28,38 @@ describe('Counter component', () => {
   it('first button should call onIncrement', () => {
     const { buttons, actions } = setup()
     buttons.at(0).simulate('click')
-    expect(actions.onIncrement).toHaveBeenCalled()
+    expect(actions.onIncrement).toBeCalled()
   })
 
   it('second button should call onDecrement', () => {
     const { buttons, actions } = setup()
     buttons.at(1).simulate('click')
-    expect(actions.onDecrement).toHaveBeenCalled()
+    expect(actions.onDecrement).toBeCalled()
   })
 
   it('third button should not call onIncrement if the counter is even', () => {
     const { buttons, actions } = setup(42)
     buttons.at(2).simulate('click')
-    expect(actions.onIncrement).toNotHaveBeenCalled()
+    expect(actions.onIncrement).not.toBeCalled()
   })
 
   it('third button should call onIncrement if the counter is odd', () => {
     const { buttons, actions } = setup(43)
     buttons.at(2).simulate('click')
-    expect(actions.onIncrement).toHaveBeenCalled()
+    expect(actions.onIncrement).toBeCalled()
   })
 
   it('third button should call onIncrement if the counter is odd and negative', () => {
     const { buttons, actions } = setup(-43)
     buttons.at(2).simulate('click')
-    expect(actions.onIncrement).toHaveBeenCalled()
+    expect(actions.onIncrement).toBeCalled()
   })
 
   it('fourth button should call onIncrement in a second', (done) => {
     const { buttons, actions } = setup()
     buttons.at(3).simulate('click')
     setTimeout(() => {
-      expect(actions.onIncrement).toHaveBeenCalled()
+      expect(actions.onIncrement).toBeCalled()
       done()
     }, 1000)
   })

examples/counter/package.json

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import counter from './index'
 
 describe('reducers', () => {

examples/counter/src/components/Counter.spec.js

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.4.0",
+    "react-scripts": "^0.4.0",
     "redux-devtools": "^3.3.1",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.0.11",
@@ -23,8 +23,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "eject": "react-scripts eject",
-    "test": "react-scripts test"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "./node_modules/react-scripts/config/eslint.js"

examples/counter/src/reducers/index.spec.js

@@ -5,7 +5,7 @@
   "devDependencies": {
     "enzyme": "^2.4.1",
     "react-addons-test-utils": "^15.3.0",
-    "react-scripts": "0.4.0"
+    "react-scripts": "^0.4.0"
   },
   "dependencies": {
     "react": "^15.3.0",

examples/real-world/favicon.ico

@@ -1,12 +1,11 @@
-import expect from 'expect'
 import React from 'react'
 import { shallow } from 'enzyme'
 import Cart from './Cart'
 import Product from './Product'
 
 function setup(total, products = []) {
   const actions = {
-    onCheckoutClicked: expect.createSpy()
+    onCheckoutClicked: jest.fn()
   }
 
   const component = shallow(
@@ -68,7 +67,7 @@ describe('Cart component', () => {
     it('should call action on button click', () => {
       const { button, actions } = setup('9.99', product)
       button.simulate('click')
-      expect(actions.onCheckoutClicked).toHaveBeenCalled()
+      expect(actions.onCheckoutClicked).toBeCalled()
     })
   })
 })

examples/real-world/package.json

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import React from 'react'
 import { shallow } from 'enzyme'
 import Product from './Product'

examples/shopping-cart/favicon.ico

@@ -1,12 +1,11 @@
-import expect from 'expect'
 import React from 'react'
 import { shallow } from 'enzyme'
 import Product from './Product'
 import ProductItem from './ProductItem'
 
 function setup(product) {
   const actions = {
-    onAddToCartClicked: expect.createSpy()
+    onAddToCartClicked: jest.fn()
   }
 
   const component = shallow(
@@ -50,7 +49,7 @@ describe('ProductItem component', () => {
   it('should call action on button click', () => {
     const { button, actions } = setup(productProps)
     button.simulate('click')
-    expect(actions.onAddToCartClicked).toHaveBeenCalled()
+    expect(actions.onAddToCartClicked).toBeCalled()
   })
 
   describe('when product inventory is 0', () => {

examples/shopping-cart/package.json

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import React from 'react'
 import { shallow } from 'enzyme'
 import ProductsList from './ProductsList'

examples/shopping-cart/src/components/Cart.spec.js

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import cart from './cart'
 
 describe('reducers', () => {

examples/shopping-cart/src/components/Product.spec.js

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import { getTotal, getCartProducts } from './index'
 
 describe('selectors', () => {

examples/shopping-cart/src/components/ProductItem.spec.js

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import products from './products'
 
 describe('reducers', () => {

examples/shopping-cart/src/components/ProductsList.spec.js

@@ -5,7 +5,7 @@
   "devDependencies": {
     "enzyme": "^2.4.1",
     "react-addons-test-utils": "^15.3.0",
-    "react-scripts": "0.4.0"
+    "react-scripts": "^0.4.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",

examples/shopping-cart/src/reducers/cart.spec.js

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import * as types from '../constants/ActionTypes'
 import * as actions from './index'
 

examples/shopping-cart/src/reducers/index.spec.js

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import React from 'react'
 import TestUtils from 'react-addons-test-utils'
 import Footer from './Footer'
@@ -9,8 +8,8 @@ function setup(propOverrides) {
     completedCount: 0,
     activeCount: 0,
     filter: SHOW_ALL,
-    onClearCompleted: expect.createSpy(),
-    onShow: expect.createSpy()
+    onClearCompleted: jest.fn(),
+    onShow: jest.fn()
   }, propOverrides)
 
   const renderer = TestUtils.createRenderer()
@@ -76,7 +75,7 @@ describe('components', () => {
       const [ , filters ] = output.props.children
       const filterLink = filters.props.children[1].props.children
       filterLink.props.onClick({})
-      expect(props.onShow).toHaveBeenCalledWith(SHOW_ACTIVE)
+      expect(props.onShow).toBeCalledWith(SHOW_ACTIVE)
     })
 
     it('shouldnt show clear button when no completed todos', () => {
@@ -96,7 +95,7 @@ describe('components', () => {
       const { output, props } = setup({ completedCount: 1 })
       const [ , , clear ] = output.props.children
       clear.props.onClick({})
-      expect(props.onClearCompleted).toHaveBeenCalled()
+      expect(props.onClearCompleted).toBeCalled()
     })
   })
 })

examples/shopping-cart/src/reducers/products.spec.js

@@ -1,12 +1,11 @@
-import expect from 'expect'
 import React from 'react'
 import TestUtils from 'react-addons-test-utils'
 import Header from './Header'
 import TodoTextInput from './TodoTextInput'
 
 function setup() {
   const props = {
-    addTodo: expect.createSpy()
+    addTodo: jest.fn()
   }
 
   const renderer = TestUtils.createRenderer()
@@ -42,9 +41,9 @@ describe('components', () => {
       const { output, props } = setup()
       const input = output.props.children[1]
       input.props.onSave('')
-      expect(props.addTodo.calls.length).toBe(0)
+      expect(props.addTodo).not.toBeCalled()
       input.props.onSave('Use Redux')
-      expect(props.addTodo.calls.length).toBe(1)
+      expect(props.addTodo).toBeCalled()
     })
   })
 })

examples/todomvc/favicon.ico

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import React from 'react'
 import TestUtils from 'react-addons-test-utils'
 import MainSection from './MainSection'
@@ -20,11 +19,11 @@ function setup(propOverrides) {
       }
     ],
     actions: {
-      editTodo: expect.createSpy(),
-      deleteTodo: expect.createSpy(),
-      completeTodo: expect.createSpy(),
-      completeAll: expect.createSpy(),
-      clearCompleted: expect.createSpy()
+      editTodo: jest.fn(),
+      deleteTodo: jest.fn(),
+      completeTodo: jest.fn(),
+      completeAll: jest.fn(),
+      clearCompleted: jest.fn()
     }
   }, propOverrides)
 
@@ -73,7 +72,7 @@ describe('components', () => {
         const { output, props } = setup()
         const [ toggle ] = output.props.children
         toggle.props.onChange({})
-        expect(props.actions.completeAll).toHaveBeenCalled()
+        expect(props.actions.completeAll).toBeCalled()
       })
     })
 
@@ -100,7 +99,7 @@ describe('components', () => {
         const { output, props } = setup()
         const [ , , footer ] = output.props.children
         footer.props.onClearCompleted()
-        expect(props.actions.clearCompleted).toHaveBeenCalled()
+        expect(props.actions.clearCompleted).toBeCalled()
       })
     })
 

examples/todomvc/package.json

@@ -1,4 +1,3 @@
-import expect from 'expect'
 import React from 'react'
 import TestUtils from 'react-addons-test-utils'
 import TodoItem from './TodoItem'
@@ -11,9 +10,9 @@ function setup( editing = false ) {
       text: 'Use Redux',
       completed: false
     },
-    editTodo: expect.createSpy(),
-    deleteTodo: expect.createSpy(),
-    completeTodo: expect.createSpy()
+    editTodo: jest.fn(),
+    deleteTodo: jest.fn(),
+    completeTodo: jest.fn()
   }
 
   const renderer = TestUtils.createRenderer()
@@ -66,14 +65,14 @@ describe('components', () => {
       const { output, props } = setup()
       const input = output.props.children.props.children[0]
       input.props.onChange({})
-      expect(props.completeTodo).toHaveBeenCalledWith(0)
+      expect(props.completeTodo).toBeCalledWith(0)
     })
 
     it('button onClick should call deleteTodo', () => {
       const { output, props } = setup()
       const button = output.props.children.props.children[2]
       button.props.onClick({})
-      expect(props.deleteTodo).toHaveBeenCalledWith(0)
+      expect(props.deleteTodo).toBeCalledWith(0)
     })
 
     it('label onDoubleClick should put component in edit state', () => {
@@ -100,13 +99,13 @@ describe('components', () => {
     it('TodoTextInput onSave should call editTodo', () => {
       const { output, props } = setup(true)
       output.props.children.props.onSave('Use Redux')
-      expect(props.editTodo).toHaveBeenCalledWith(0, 'Use Redux')
+      expect(props.editTodo).toBeCalledWith(0, 'Use Redux')
     })
 
     it('TodoTextInput onSave should call deleteTodo if text is empty', () => {
       const { output, props } = setup(true)
       output.props.children.props.onSave('')
-      expect(props.deleteTodo).toHaveBeenCalledWith(0)
+      expect(props.deleteTodo).toBeCalledWith(0)
     })
 
     it('TodoTextInput onSave should exit component from edit state', () => {