react-photo-viewer/__test__/Gallery.test.js

Responsive React Masonry Photo Gallery Component

import React from 'react';
import Gallery from '../src/Gallery';
import photos from './test-photo-data';
import { shallow, mount, render  } from 'enzyme';

function handleClick(){
  return true; 
}
it('renders correctly', () => {
  const component = mount(
    <Gallery photos={photos} onClick={handleClick}/>
  );
  component.setState({containerWidth: '1139'})
  expect(component).toMatchSnapshot();
});
it('renders correctly if there are more columns than photos', () => {
  const component = mount(
    <Gallery photos={photos} columns={10} onClick={handleClick}/>
  );
  component.setState({containerWidth: '1139'})
  expect(component).toMatchSnapshot();
});
it('renders correctly after click', () => {
  const component = mount(
    <Gallery photos={photos} onClick={handleClick} />
  );
  component.setState({containerWidth: '1139'})
  component.find('img').first().simulate('click');
  expect(component).toMatchSnapshot();
});

it('renders correctly with direction set to column', () => {
  const component = mount(
    <Gallery photos={photos} onClick={handleClick} direction={'column'}/>
  );
  component.setState({containerWidth: '1139'})
  expect(component).toMatchSnapshot();
});

it('unmounts', () => {
  const wrapper = mount(<Gallery photos={photos} />);
  wrapper.setState({'containerWidth':500});
  wrapper.unmount();
});