import { mount } from 'enzyme';
import { ApolloProvider } from 'react-apollo';
import { TodoList } from './components';
import { graphqlMock } from './helper';

const query = `
  query Todos {
    items {
      id
      name
    }
  }
`;

const render = () => mount(
  <ApolloProvider client={graphqlMock.client}>
    <TodoList />
  </ApolloProvider>
);

describe('<TodoList />', () => {
  it('renders what server returns', () => {
    graphqlMock.expect(query).reply([
      items: [
        { id: '1', name: 'one' },
        { id: '2', name: 'two' }
      ]
    ]);

    expect(render().html()).toEqual(
      '<ul><li>one</li><li>two</li></ul>'
    );
  });

  it('responds to failures gracefuly', () => {
    graphqlMock.expect(query).fail('everything is terrible');
    expect(render().html()).toEqual('<div>everything is terrible</div>');
  });

  it('shows the loading state too', () => {
    graphqlMock.expect(query).loading(true);
    expect(render().html()).toEqual('<div>Loading...</div>');
  });
});

// use this
<ApolloProvider client={graphqlMock.client}>
  // ...
</ApolloProvider>

// NOT THIS
const { client } = graphqlMock;
<ApolloProvider client={client}>
  // ...
</ApolloProvider>

graphqlMock.expect(mutation).reply({
  createItem: { id: 1, name: 'new item' }
});

const wrapper = render();
wrapper.find('button').simulate('click');

// you need to add those two
await new Promise(r => setTimeout(r, 10));
wrapper.update();

expect(wrapper.html()).toEqual('<div id="id">new item</div>');