vjwilson

Preparing for TDD with React

If you want to follow along with the live coding examples, it's best to have the following already installed before you come to this talk.

• Node (version 6, use nvm if you need to keep multiple versions Node)
• npm (comes with Node), or yarn, if you prefer that
• create-react-app CLI npm install -g create-react-app
• Your favorite text editor
• git, if you want to pull the sample repo, and check out the starting code for each part of the talk

vjwilson

# same packages

# same world.js

# same hooks.js

# new .feature file

# new browser_steps.js

vjwilson

# add libraries
npm install --save-dev chromedriver cucumber selenium-webdriver

# add support file
touch features/support/world.js

# add hooks file
touch features/step_definitions/hooks.js

# add feature file

vjwilson

# add Redux-specific files and tests

# Actions
touch src/actions/actionTypes.js
touch src/actions/linkActions.test.js
touch src/actions/linkActions.js

# Reducers
touch src/reducers/index.js
touch src/reducers/linkReducer.test.js

vjwilson

# edit App component tests
touch src/components/App/App.test.js

# edit App component
touch src/components/App/App.js

# edit LinkItem component tests
touch src/components/LinkItem/LinkItem.test.js

# edit LinkItem component

vjwilson

# add test
touch src/components/LinkList/LinkList.test.js

# add component
touch src/components/LinkList/LinkList.js

# add style
src/components/LinkList/LinkList.css

# edit App.js to include a LinkList

vjwilson

# add test
touch src/components/LinkItem/LinkItem.test.js

# add component
touch src/components/LinkItem/LinkItem.js

# add style
touch src/components/LinkItem/LinkItem.css

# edit App.js to include a static LinkItem

vjwilson

# 1. fork the repo into your own GitHub account
# then,

git clone <URL of your fork>


# 2. checkout the first tag

git checkout 1-start-with-create-react-app

vjwilson

// Option 1, more like HTML button
class PrimaryButton extends React.Component {
    render() {
        return (
          <button onClick={this.props.action}>{this.props.children}</button>
        );
    }
}

// Option 1 usage

vjwilson

Components

Recipe Component

The Recipe component takes a recipe object, and if it is in a list, also a key prop.

lang: jsx
---