POST14

enzyme_config.js

// enzyme.adapter.tsx
import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });


// package.json
  "jest": {
    // ...
    "setupFiles": [ "./enzyme.adapter.tsx" ]
  }

Modulos_index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import TodoApp from "./components/TodoApp";

ReactDOM.render(
  <TodoApp />,
  document.getElementById("example")
);

Modulos_TodoApp.tsx

import * as React from "react";
import TodoList from "./TodoList";

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

export default TodoApp;

Modulos_TodoList.tsx

import * as React from "react";

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

export default TodoList;

package_test.json

// vamos alterar a chave "test" para:
"test": "./node_modules/.bin/jest",

React_TodoApp.js

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<TodoApp />, mountNode);

Reset_TodoApp.tsx

  constructor(props: {}) {
    // ...
    this.handleReset = this.handleReset.bind(this);
  }

  render() {
      // ...
          <button type="button" onClick={this.handleReset}>
            Reset list
          </button>
        </form>
      // ...
  }

  handleReset() {
    this.setState(TodoApp.defaultState);
  }

Teste_TodoApp.tsx

import * as React from "react";
import { render, shallow } from "enzyme";

import TodoApp from "../../src/components/TodoApp";

describe("Testando <TodoApp />", () => {
  it("deve renderizar o componente", () => {
    const wrapper = render(<TodoApp />);
    expect(wrapper.length).toEqual(1);
  });

  describe("tentando handlers", () => {
    it("deve chamar handleChange e alterar state.text quando mudar o valor do input", () => {
      const handle = jest.spyOn(TodoApp.prototype, "handleChange");
      const wrapper = shallow(<TodoApp />);
      const input = wrapper.find("form input");
      expect(wrapper.state("text")).toBe("");
      input.simulate("change", { target: { value: "Assistir Star Wars" } });
      expect(handle).toHaveBeenCalled();
      expect(wrapper.state("text")).toBe("Assistir Star Wars");
    });

    it("deve chamar handleSubmit e atualzar state.items quando submeter o form", () => {
      const handle = jest.spyOn(TodoApp.prototype, "handleSubmit");
      const wrapper = shallow(<TodoApp />);
      const instance = wrapper.instance() as TodoApp;
      const form = wrapper.find("form");
      instance.setState({ text: "Assistir Star Wars" });
      expect(wrapper.state("items").length).toEqual(0);
      form.simulate("submit", { preventDefault: () => { } });
      expect(handle).toHaveBeenCalled();
      expect(wrapper.state("items").length).toEqual(1);
      expect(wrapper.state("items")[0].text).toBe("Assistir Star Wars");
    });

    it("deve chamar handleReset e atualizar o state quando clicar no botão reset", () => {
      const handle = jest.spyOn(TodoApp.prototype, "handleReset");
      const wrapper = shallow(<TodoApp />);
      const instance = wrapper.instance() as TodoApp;
      const button = wrapper.find("form button[type='button']");
      instance.setState({ text: "Assistir The Clone Wars" });
      instance.setState({ items: [{ id: 0, text: "Assistir Rogue One" }] });
      expect(wrapper.state("text")).toBe("Assistir The Clone Wars");
      expect(wrapper.state("items").length).toEqual(1);
      button.simulate("click");
      expect(handle).toHaveBeenCalled();
      expect(wrapper.state("text")).toBe("");
      expect(wrapper.state("items").length).toEqual(0);
    });
  });
});

Teste_TodoList.tsx

import * as React from "react";
import { render } from "enzyme";

import TodoList, { ItemType } from "../../src/components/TodoList";

const mock: Array<ItemType> = [
  { id: 0, text: "Assistir Tarzan" },
  { id: 1, text: "Assistir Toy Story" },
  { id: 2, text: "Assistir O Rei Leão" },
];

describe("Testando <TodoList />", () => {

  it("deve renderizar uma <ul> com 1 item", () => {
    const movie = mock.slice(0, 1);
    const wrapper = render(<TodoList items={movie} />);
    const li = wrapper.find("ul > li");
    expect(li.length).toEqual(1);
    expect(li.eq(0).text()).toBe(movie[0].text);
  });

  it("deve renderizar uma <ul> com 3 itens", () => {
    const wrapper = render(<TodoList items={mock} />);
    const li = wrapper.find("ul > li");
    expect(li.length).toEqual(3);

    mock.forEach((item, index) => {
      expect(li.eq(index).text()).toBe(item.text);
    });
  });

});

Tipos_Done_TodoList.tsx

import * as React from "react";

export type ItemType = {
  id: number,
  text: string
};

type PropsType = {
  items: Array<ItemType>
};

const TodoList = (props: PropsType) => (
  <ul>
    {props.items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

export default TodoList;

Tipos_Pre_TodoList.tsx

const TodoList = (props) => (
  <ul>
    {props.items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

Tipos_PT1_TodoApp.tsx

// @@ 1,10 @@
import * as React from "react";
import TodoList, { ItemType } from "./TodoList";

type StateType = {
  items: Array<ItemType>,
  text: string
};

class TodoApp extends React.Component<{}, StateType> {
  constructor(props: {}) {

Tipos_PT2_TodoApp.tsx

// @@ 9,20 @@
class TodoApp extends React.Component<{}, StateType> {
  static defaultState: StateType = {
    items:[],
    text: ""
  };

  constructor(props: {}) {
    super(props);
    this.state = TodoApp.defaultState;
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

Tipos_PT3_TodoApp.tsx

// @@ 40,44 @@
  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e: React.FormEvent<HTMLFormElement>) {