Add test cases for Redux containers

frontend/container/App.test.tsx

@@ -0,0 +1,67 @@
+import { shallow, mount } from 'enzyme';
+import { noop } from 'lodash';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import createMockStore from 'redux-mock-store';
+
+import AppComponent from '../component/App';
+import { mockState } from '../mock';
+import { State, Store } from '../types/store';
+
+import App from './App';
+
+describe('<App/> container', () => {
+  const mockStore = createMockStore<State>();
+  const renderContainer = (store: Store = mockStore()) => (
+    <Provider store={store}>
+      <App
+        socket={{
+          on: noop,
+          emit: noop,
+          close: noop,
+        }}
+      />
+    </Provider>
+  );
+  const mountContainer = (store: Store = mockStore()) => mount(
+    renderContainer(store),
+  );
+
+  it('should render without throwing exception', () => {
+    expect(shallow(renderContainer())).toMatchSnapshot();
+  });
+
+  it.each([
+    [true],
+    [false],
+  ])(
+    'should read value of `channelListVisible` from Redux state',
+    (channelListVisible) => {
+      const store = mockStore({
+        ...mockState,
+        channelListVisible,
+      });
+      const container = mountContainer(store);
+      const component = container.find(AppComponent);
+
+      expect(component.prop('channelListVisible')).toBe(channelListVisible);
+    },
+  );
+
+  it.each([
+    [true],
+    [false],
+  ])(
+    'should read value of `userListVisible` from Redux state',
+    (userListVisible) => {
+      const store = mockStore({
+        ...mockState,
+        userListVisible,
+      });
+      const container = mountContainer(store);
+      const component = container.find(AppComponent);
+
+      expect(component.prop('userListVisible')).toBe(userListVisible);
+    },
+  );
+});

frontend/container/ChannelList.test.tsx

@@ -0,0 +1,105 @@
+import { shallow, mount } from 'enzyme';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { Button } from 'reactstrap';
+import createMockStore from 'redux-mock-store';
+
+import { changeCurrentChannel, toggleChannelList } from '../action';
+import ChannelListComponent from '../component/ChannelList';
+import ChannelListItem from '../component/ChannelListItem';
+import { mockChannel, mockState } from '../mock';
+import { State, Store } from '../types/store';
+
+import ChannelList from './ChannelList';
+
+describe('<ChannelList/> container', () => {
+  const mockStore = createMockStore<State>();
+  const renderContainer = (store: Store = mockStore()) => (
+    <Provider store={store}>
+      <ChannelList/>
+    </Provider>
+  );
+  const mountContainer = (store: Store = mockStore()) => mount(
+    renderContainer(store),
+  );
+
+  it('should render without throwing exception', () => {
+    expect(shallow(renderContainer())).toMatchSnapshot();
+  });
+
+  it('should read value of `channels` from Redux store', () => {
+    const store = mockStore({
+      ...mockState,
+      channels: {
+        '#test-channel-3': {
+          ...mockChannel,
+          name: '#test-channel-3',
+        },
+        '#test-channel-1': {
+          ...mockChannel,
+          name: '#test-channel-1',
+        },
+        '#test-channel-2': {
+          ...mockChannel,
+          name: '#test-channel-2',
+        },
+      },
+    });
+    const container = mountContainer(store);
+    const component = container.find(ChannelListComponent);
+
+    expect(component.prop('channels')).toEqual([
+      {
+        ...mockChannel,
+        name: '#test-channel-1',
+      },
+      {
+        ...mockChannel,
+        name: '#test-channel-2',
+      },
+      {
+        ...mockChannel,
+        name: '#test-channel-3',
+      },
+    ]);
+  });
+
+  it('should read value of `currentChannel` from Redux store', () => {
+    const store = mockStore({
+      ...mockState,
+      currentChannel: '#test-channel',
+    });
+    const container = mountContainer(store);
+    const component = container.find(ChannelListComponent);
+
+    expect(component.prop('currentChannel')).toBe('#test-channel');
+  });
+
+  it('should dispatch Redux action when channel is selected', () => {
+    const store = mockStore({
+      ...mockState,
+      channels: { [mockChannel.name]: mockChannel },
+    });
+    const container = mountContainer(store);
+
+    container.find(ChannelListItem).at(0).find('a').simulate('click');
+    expect(store.getActions()).toEqual([
+      {
+        payload: mockChannel.name,
+        type: changeCurrentChannel.type,
+      },
+    ]);
+  });
+
+  it('should dispatch Redux action when channel list is toggled', () => {
+    const store = mockStore();
+    const container = mountContainer(store);
+
+    container.find('li').at(0).find(Button).simulate('click');
+    expect(store.getActions()).toEqual([
+      {
+        type: toggleChannelList.type,
+      }
+    ]);
+  });
+});

frontend/container/ChannelUserList.test.tsx

@@ -0,0 +1,70 @@
+import { shallow, mount } from 'enzyme';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { Button } from 'reactstrap';
+import createMockStore from 'redux-mock-store';
+
+import { toggleUserList } from '../action';
+import ChannelUserListComponent from '../component/ChannelUserList';
+import { mockChannel, mockState } from '../mock';
+import { State, Store } from '../types/store';
+
+import ChannelUserList from './ChannelUserList';
+
+describe('<ChannelUserList/> container', () => {
+  const mockStore = createMockStore<State>();
+  const renderContainer = (store: Store = mockStore()) => (
+    <Provider store={store}>
+      <ChannelUserList/>
+    </Provider>
+  );
+  const mountContainer = (store: Store = mockStore()) => mount(
+    renderContainer(store),
+  );
+
+  it('should render without throwing exception', () => {
+    expect(shallow(renderContainer()));
+  });
+
+  it('should read `channelName` and `users` from Redux state', () => {
+    const store = mockStore({
+      ...mockState,
+      channels: {
+        [mockChannel.name]: {
+          ...mockChannel,
+          users: ['foo', 'bar'],
+        },
+      },
+      currentChannel: mockChannel.name,
+    });
+    const container = mountContainer(store);
+    const component = container.find(ChannelUserListComponent);
+
+    expect(component.prop('channelName')).toBe(mockChannel.name);
+    expect(component.prop('users')).toEqual(['bar', 'foo']);
+  });
+
+  it('should work even when there is no current channel', () => {
+    const store = mockStore({
+      ...mockState,
+      currentChannel: undefined,
+    });
+    const container = mountContainer(store);
+    const component = container.find(ChannelUserListComponent);
+
+    expect(component.prop('channelName')).toBeUndefined();
+    expect(component.prop('users')).toEqual([]);
+  });
+
+  it('should dispatch Redux action when user list is toggled', () => {
+    const store = mockStore();
+    const container = mountContainer(store);
+
+    container.find('li').at(0).find(Button).simulate('click');
+    expect(store.getActions()).toEqual([
+      {
+        type: toggleUserList.type,
+      },
+    ]);
+  });
+});

frontend/container/CommandInput.test.tsx

@@ -0,0 +1,70 @@
+import { mount, shallow } from 'enzyme';
+import { noop } from 'lodash';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import createMockStore from 'redux-mock-store';
+
+import CommandInputComponent from '../component/CommandInput';
+import { mockChannel, mockState } from '../mock';
+import { State, Store } from '../types/store';
+
+import CommandInput from './CommandInput';
+
+describe('<CommandInput/> container', () => {
+  const mockStore = createMockStore<State>();
+  const renderContainer = (store: Store = mockStore()) => (
+    <Provider store={store}>
+      <CommandInput
+        currentChannel={mockChannel}
+        onCommand={noop}
+        onCommandError={noop}
+      />
+    </Provider>
+  );
+  const mountContainer = (store: Store = mockStore()) => mount(
+    renderContainer(store),
+  );
+
+  it('should render without throwing exception', () => {
+    expect(shallow(renderContainer()));
+  });
+
+  it('should read `nick` from Redux state', () => {
+    const store = mockStore({
+      ...mockState,
+      nick: 'test',
+    });
+    const container = mountContainer(store);
+    const component = container.find(CommandInputComponent);
+
+    expect(component.prop('nick')).toBe('test');
+  });
+
+  it('should read `users` from Redux state', () => {
+    const store = mockStore({
+      ...mockState,
+      channels: {
+        [mockChannel.name]: {
+          ...mockChannel,
+          users: ['foo', 'bar'],
+        },
+      },
+      currentChannel: mockChannel.name,
+    });
+    const container = mountContainer(store);
+    const component = container.find(CommandInputComponent);
+
+    expect(component.prop('users')).toEqual(['foo', 'bar']);
+  });
+
+  it('should work even when there is no current channel', () => {
+    const store = mockStore({
+      ...mockState,
+      currentChannel: undefined,
+    });
+    const container = mountContainer(store);
+    const component = container.find(CommandInputComponent);
+
+    expect(component.prop('users')).toBeUndefined();
+  });
+});