camjackson

import React from 'react';
import { shallow } from 'enzyme';
import UserProfile from '../UserProfile';
import LoadingSpinner from '../LoadingSpinner';

describe('UserProfile', () => {
  it('shows the spinner when loading', () => {
    const userProfile = shallow(<UserProfile isLoading />);
    expect(userProfile.containsMatchingElement(<LoadingSpinner />)).toBe(true);
  });

camjackson

/*
I think this is a better example of interaction testing, because the component has its own
internal function, which a) does more than one thing, and b) has a small amount of logic
where it plucks the new value out of the DOM event. Those we can test in isolation.
*/
const MyInput = props => {
  const handleChange = event => {
    props.updateTheValue(event.target.value);
    props.fetchSomeDataThatDependsUponTheValue();
  };

camjackson

/*
This is obviously a very basic example. It takes props to render the inputs with their values, and 
to render any error state. It also takes props to update the state, or submit the form.
*/

const LoginForm = props => (
  <form onSubmit={props.onSubmit}>
    <input type="text" name="username" onChange={props.onChangeUsername} value={props.username}/>
    { props.userNameError && <span class="error">{ props.usernameError }</span> }
    <input type="password" name="password" onChange={props.onChangePassword} value={props.password}/>