SearchBar.test.js

// @flow
import { mount, shallow } from 'enzyme';
import enzymeSnapshotSerializer from 'enzyme-to-json/serializer';
import { noop } from 'lodash/fp';
import React from 'react';
import { snapshotSerializer as apolloSnapshotSerializer } from 'core/apollo';
import { snapshotSerializer as graphqlSnapshotSerializer } from 'core/graphql';
import renderApp from 'test/renderApp';
import Client from 'test/client';
import SearchBar, { InnerComponent, SEARCH_BAR_QUERY_DEF } from './SearchBar';
import SearchBarInput from './SearchBarInput';

expect.addSnapshotSerializer(graphqlSnapshotSerializer);
expect.addSnapshotSerializer(apolloSnapshotSerializer);
expect.addSnapshotSerializer(enzymeSnapshotSerializer);

describe('SearchBar', () => {
  const client = new Client();

  beforeAll(() => client.init());

  afterEach(() => client.resetStore());

  describe('inner component', () => {
    it('renders', () => {
      const wrapper = shallow(
        <InnerComponent
          onQueryChange={noop}
          query="test query"
          results={[
            { id: 'id-1', name: 'one', type: 'type-1' },
            { id: 'id-2', name: 'two', type: 'type-2' },
          ]}
        />,
      );
      expect(wrapper).toMatchSnapshot();
    });

    it('calls onQueryChange when SearchBarInput value changes', () => {
      const onQueryChange = jest.fn();
      const wrapper = shallow(
        <InnerComponent
          onQueryChange={onQueryChange}
          query="test query"
          results={[
            { id: 'id-1', name: 'one', type: 'type-1' },
            { id: 'id-2', name: 'two', type: 'type-2' },
          ]}
        />,
      );
      const event = {};
      wrapper.find(SearchBarInput).simulate('change', event);
      expect(onQueryChange).toHaveBeenCalledWith(event);
    });
  });

  describe('network', () => {
    it('should be able to perform SearchBarQuery', () =>
      client
        .query({ query: SEARCH_BAR_QUERY_DEF, variables: { query: 'a ' } })
        .then(res => expect(res).toMatchSnapshot()));
  });

  describe('functionality', () => {
    it('should perform a search and show the results', done =>
      // The temporal element is to test the debounce
      // We expect a delay of about 300ms
      //
      // Instead of selecting SearchBar directly for the snapshots
      // we select the child components to avoid snapshotting apollo
      // client internal data
      renderApp(<SearchBar />).then(mount).then(wrapper => {
        // Check initial state
        expect(wrapper.find(SearchBar)).toMatchSnapshot();

        // First key stroke
        wrapper
          .find(SearchBarInput)
          .simulate('change', { target: { value: 'a' } });

        // Check post-input state
        expect(wrapper.find(SearchBar)).toMatchSnapshot();

        // A couple ticks later
        setTimeout(() => {
          // Check that we're still "waiting"
          expect(wrapper.find(SearchBar)).toMatchSnapshot();

          // Second key stroke
          wrapper
            .find(SearchBarInput)
            .simulate('change', { target: { value: 'ap' } });

          // Check the post-input state
          expect(wrapper.find(SearchBar)).toMatchSnapshot();

          // Many ticks later
          setTimeout(() => {
            // Expect that results have resolved and displayed
            expect(wrapper.find(SearchBar)).toMatchSnapshot();

            done();
          }, 500);
        }, 200);
      }));
  });
});