qswitcher

test('entering a todo in form adds a todo', async () => {
	// enter todo text in textbox
	wrapper.find('.TodoForm-input').instance().value = 'My new todo';

	// click Add
	wrapper.find('.TodoForm-button').simulate('click');

	// wait for Todo to show up
	await wait(wrapper, w =>
		w

qswitcher

test('entering a todo in form adds a todo', async () => {
	const { getByText, getByPlaceholderText, getByTestId, container } = render(<App />);

	// enter todo text in textbox
	getByPlaceholderText('Enter todo text').value = 'My new todo';

	// click Add
	Simulate.click(getByText('Add'));

	// wait for Todo to show up

qswitcher

const wait = (wrapper, predicate, timeout = 10) => {
	return new Promise((resolve, reject) => {
		if (predicate(wrapper)) {
			return resolve(true);
		}
		setTimeout(() => {
			wrapper.update();
			return predicate(wrapper) ? resolve(true) : reject(new Error('Timeout expired'));
		}, timeout);
	});

qswitcher

import React, { Component } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import logo from './logo.svg';
import './App.css';

class App extends Component {
	constructor(props) {
		super(props);

qswitcher

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [
        { text: 'Walk the Dog', priority: 'High' },
        { text: 'Ride bike', priority: 'Low' },
        { text: 'Get a haircut', priority: 'Med' }
      ]

qswitcher

const priorities = ['High', 'Med', 'Low'];

class TodoForm extends Component {
  constructor(props) {
    super(props);
    this.state = { priority: priorities[2] };
  }

  onSelect = event => {
    this.setState({ priority: event.value });

qswitcher

class TodoItem extends Component {
  render() {
    const { deleteTodo, todo } = this.props;

    return (
      <div className="TodoItem" data-testid="TodoItem">
        <div data-testid="TodoItem-priority" className={`TodoItem-priority TodoItem--${todo.priority.toLowerCase()}`} />
        <div data-testid="TodoItem-text" className={`TodoItem-text`}>
          {todo.text}
        </div>

qswitcher

class TodoList extends Component {
  render() {
    const { todos, deleteTodo } = this.props;
    return todos.map((todo, i) => <TodoItem deleteTodo={deleteTodo} key={i} todo={todo} />);
  }
}

qswitcher

import React from 'react';
import { mount } from 'enzyme';
import App from '../../App';

test('entering a todo in form adds a todo', async () => {
  wrapper = mount(<App />);

  // enter todo text in textbox
  wrapper.find('.TodoForm-input').instance().value = 'My new todo';

qswitcher

const wait = (wrapper, predicate, timeout = 10) => {
  return new Promise((resolve, reject) => {
    if (predicate(wrapper)) {
      return resolve(true);
    }
    setTimeout(() => {
      wrapper.update();
      return predicate(wrapper) ? resolve(true) : reject(new Error('Timeout expired'));
    }, timeout);
  });