import React from 'react';
import { shallow } from 'enzyme';
import RouteVisibleTodoList from '../RouteVisibleTodoList';
import Store from '../../__mocks__/store'
import Router from '../../__mocks__/router'

describe('RouteVisibleTodoList', () => {

  const todo1 = {
    id: "1",
    text: 'Get state from store',
    completed: true
  };
  const todo2 = {
    id: "2",
    text: 'Transform state for UI consumption',
    completed: false
  };
  const todo3 = {
    id: "3",
    text: 'Pass transformed state to UI',
    completed: true
  };

  const todosList = {
    byId: {
      "1": todo1,
      "2": todo2,
      "3": todo3
    },
    allIds: ["1", "2", "3"]
  };

  it('should set a todos prop', () => {
    const mockRouter = Router({
      params: {
        filter: 'all'
      }
    });

    const component = shallow(
      <RouteVisibleTodoList store={Store({
        todos: {
          byId: {},
          allIds: []
        }
      })} router={mockRouter} />
    ).shallow();

    expect(component.length).toBeTruthy();
    expect(component.prop('todos')).toEqual([]);
  })

  it("should return all todos if the filter value is set to 'all'", () => {
    const mockRouter = Router({
      params: {
        filter: 'all'
      }
    });

    const component = shallow(
      <RouteVisibleTodoList store={Store({
        todos: todosList
      })} router={mockRouter} />
    ).shallow();

    expect(component.prop('todos')).toEqual([todo1, todo2, todo3]);
  })

  it("should return completed todos only if the filter value is set to 'completed'", () => {
    const mockRouter = Router({
      params: {
        filter: 'completed'
      }
    });

    const component = shallow(
      <RouteVisibleTodoList store={Store({
        todos: todosList
      })} router={mockRouter} />
    ).shallow();

    expect(component.prop('todos')).toEqual([todo1, todo3]);
  })

  it("should return an empty array if the filter value is set to 'completed' and there are no completed todo items", () => {
    const todosListActive = {
      byId: {
        "2": todo2
      },
      allIds: ["2"]
    };

    const mockRouter = Router({
      params: {
        filter: 'completed'
      }
    });

    const component = shallow(
      <RouteVisibleTodoList store={Store({
        todos: todosListActive
      })} router={mockRouter} />
    ).shallow();

    expect(component.prop('todos')).toEqual([]);
  })

  it("should return active todos only if the filter value is set to 'active'", () => {
    const mockRouter = Router({
      params: {
        filter: 'active'
      }
    });

    const component = shallow(
      <RouteVisibleTodoList store={Store({
        todos: todosList
      })} router={mockRouter} />
    ).shallow();

    expect(component.prop('todos')).toEqual([todo2]);
  })

  it("should return an empty array if the filter value is set to 'active' and there are no active todo items", () => {
    const todosListCompleted = {
      byId: {
        "1": todo1
      },
      allIds: ["1"]
    };

    const mockRouter = Router({
      params: {
        filter: 'active'
      }
    });

    const component = shallow(
      <RouteVisibleTodoList store={Store({
        todos: todosListCompleted
      })} router={mockRouter} />
    ).shallow();

    expect(component.prop('todos')).toEqual([]);
  })

  it("should dispatch actions", () => {
    const store = Store({
      todos: todosList
    });

    const mockRouter = Router({
      params: {
        filter: 'all'
      }
    });

    const component = shallow(
      <RouteVisibleTodoList store={store} router={mockRouter} />
    ).shallow();

    component.prop('toggleTodo')();
    component.prop('receiveTodos')();
    expect(store.dispatch).toHaveBeenCalledTimes(2);
  })

})

@@ -36,16 +36,23 @@
  shallow
+, mount
  %7D from 
@@ -117,24 +117,75 @@
 eTodoList';%0A
+import %7B ACTIONS %7D from '../../actions/constants';%0A
 import Store
@@ -3365,32 +3365,825 @@
 qual(%5B%5D);%0A  %7D)%0A%0A
+  it(%22should fetch todo data on mount%22, () =%3E %7B%0A%0A    const mockRouter = Router(%7B%0A      params: %7B%0A        filter: 'all'%0A      %7D%0A    %7D);%0A%0A    const component = mount(%0A      %3CRouteVisibleTodoList store=%7BStore(%7B%0A        todos: todosList%0A      %7D)%7D router=%7BmockRouter%7D /%3E%0A    );%0A%0A    const storeDispatch = component.prop('store').dispatch;%0A    const fetchPromise = storeDispatch.mock.calls%5B0%5D%5B0%5D;%0A%0A    // On mount, the store's dispatch function will have been called with%0A    // a promise to fetch the data for the todos%0A    expect(component.prop('store').dispatch).toHaveBeenCalled();%0A    return fetchPromise.then(action =%3E %7B%0A      // Once resolved, we verify that the promise was resolved to the correct%0A      // action type%0A      expect(action.type).toEqual(ACTIONS.RECEIVE_TODOS);%0A    %7D);%0A  %7D)%0A%0A
   it(%22should dis

test fetching todo data on mount