added snapshot tests for simple slider

.eslintrc

@@ -3,7 +3,6 @@
     "no-extra-parens": 0,
     "react/jsx-uses-vars": 1,
     "strict": 0,
-    "quotes": [2, "single"],
     "no-underscore-dangle": 0,
     "space-infix-ops": 0,
     "no-alert": 0

examples/SimpleSlider.js

@@ -8,7 +8,7 @@ export default class SimpleSlider extends Component {
       infinite: true,
       speed: 500,
       slidesToShow: 1,
-      slidesToScroll: 1,
+      slidesToScroll: 1
     };
     return (
       <div>

examples/__tests__/SimpleSlider.test.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import {shallow, mount} from 'enzyme';
 import SimpleSlider from '../SimpleSlider';
+import {repeatClicks} from '../../test-helpers';
 
 describe('Simple Slider', function() {
   it('should have 8 slides (6 actual and 2 clone slides)', function() {
@@ -54,4 +55,40 @@ describe('Simple Slider', function() {
     expect(wrapper.find('.slick-dots .slick-active').length).toEqual(1);
     expect(wrapper.find('.slick-dots').childAt(3).hasClass('slick-active')).toEqual(true)
   })
+  // it('should come back to 1st slide after 6 clicks on next button', function () {
+  //   // waitForAnimate option is causing problem for this test
+  //   const wrapper = mount(<SimpleSlider />);
+  //   wrapper.find('.slick-next').first().simulate('click').simulate('click')
+  //   // wrapper.find('.slick-prev').first().simulate('click')
+  //   // wrapper.find('.slick-next').first().simulate('click')
+  //   // console.log(nextButton)
+  //   // nextButton.simulate('click').simulate('click')
+  //   // nextButton.simulate('click')
+  //   // repeatClicks(wrapper.find('.slick-next'), 1)
+  //   expect(wrapper.find('.slick-slide.slick-active').first().text()).toEqual('1');
+  //   expect(wrapper.find('.slick-dots .slick-active').length).toEqual(1);
+  //   expect(wrapper.find('.slick-dots').childAt(0).hasClass('slick-active')).toEqual(true)
+  // })
+});
+
+describe("Simple Slider Snapshots", function () {
+  it("slider initial state", function () {
+    const wrapper = mount(<SimpleSlider />);
+    expect(wrapper.html()).toMatchSnapshot()
+  });
+  it("click on next button", function () {
+    const wrapper = mount(<SimpleSlider />);
+    wrapper.find('.slick-next').simulate('click')
+    expect(wrapper.html()).toMatchSnapshot()
+  });
+  it("click on prev button", function () {
+    const wrapper = mount(<SimpleSlider />);
+    wrapper.find('.slick-prev').simulate('click')
+    expect(wrapper.html()).toMatchSnapshot()
+  });
+  it("click on 3rd dot", function () {
+    const wrapper = mount(<SimpleSlider />);
+    wrapper.find('.slick-dots button').at(2).simulate('click')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 });

examples/__tests__/__snapshots__/SimpleSlider.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Simple Slider Snapshots click on 3rd dot 1`] = `"<div><h2> Single Item</h2><div class=\\"slick-initialized slick-slider\\"><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-prev\\" style=\\"display: block;\\"> Previous</button><div class=\\"slick-list\\"><div class=\\"slick-track\\" style=\\"opacity: 1;\\"><div data-index=\\"-1\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>6</h3></div><div data-index=\\"0\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>1</h3></div><div data-index=\\"1\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>2</h3></div><div data-index=\\"2\\" class=\\"slick-slide slick-active\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>3</h3></div><div data-index=\\"3\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>4</h3></div><div data-index=\\"4\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>5</h3></div><div data-index=\\"5\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>6</h3></div><div data-index=\\"6\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>1</h3></div></div></div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button><ul class=\\"slick-dots\\" style=\\"display: block;\\"><li class=\\"\\"><button>1</button></li><li class=\\"\\"><button>2</button></li><li class=\\"slick-active\\"><button>3</button></li><li class=\\"\\"><button>4</button></li><li class=\\"\\"><button>5</button></li><li class=\\"\\"><button>6</button></li></ul></div></div>"`;
+
+exports[`Simple Slider Snapshots click on next button 1`] = `"<div><h2> Single Item</h2><div class=\\"slick-initialized slick-slider\\"><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-prev\\" style=\\"display: block;\\"> Previous</button><div class=\\"slick-list\\"><div class=\\"slick-track\\" style=\\"opacity: 1;\\"><div data-index=\\"-1\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>6</h3></div><div data-index=\\"0\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>1</h3></div><div data-index=\\"1\\" class=\\"slick-slide slick-active\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>2</h3></div><div data-index=\\"2\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>3</h3></div><div data-index=\\"3\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>4</h3></div><div data-index=\\"4\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>5</h3></div><div data-index=\\"5\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>6</h3></div><div data-index=\\"6\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>1</h3></div></div></div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button><ul class=\\"slick-dots\\" style=\\"display: block;\\"><li class=\\"\\"><button>1</button></li><li class=\\"slick-active\\"><button>2</button></li><li class=\\"\\"><button>3</button></li><li class=\\"\\"><button>4</button></li><li class=\\"\\"><button>5</button></li><li class=\\"\\"><button>6</button></li></ul></div></div>"`;
+
+exports[`Simple Slider Snapshots click on prev button 1`] = `"<div><h2> Single Item</h2><div class=\\"slick-initialized slick-slider\\"><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-prev\\" style=\\"display: block;\\"> Previous</button><div class=\\"slick-list\\"><div class=\\"slick-track\\" style=\\"opacity: 1;\\"><div data-index=\\"-1\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>6</h3></div><div data-index=\\"0\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>1</h3></div><div data-index=\\"1\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>2</h3></div><div data-index=\\"2\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>3</h3></div><div data-index=\\"3\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>4</h3></div><div data-index=\\"4\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>5</h3></div><div data-index=\\"5\\" class=\\"slick-slide slick-active\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>6</h3></div><div data-index=\\"6\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>1</h3></div></div></div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button><ul class=\\"slick-dots\\" style=\\"display: block;\\"><li class=\\"\\"><button>1</button></li><li class=\\"\\"><button>2</button></li><li class=\\"\\"><button>3</button></li><li class=\\"\\"><button>4</button></li><li class=\\"\\"><button>5</button></li><li class=\\"slick-active\\"><button>6</button></li></ul></div></div>"`;
+
+exports[`Simple Slider Snapshots slider initial state 1`] = `"<div><h2> Single Item</h2><div class=\\"slick-initialized slick-slider\\"><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-prev\\" style=\\"display: block;\\"> Previous</button><div class=\\"slick-list\\"><div class=\\"slick-track\\" style=\\"opacity: 1;\\"><div data-index=\\"-1\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>6</h3></div><div data-index=\\"0\\" class=\\"slick-slide slick-active\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>1</h3></div><div data-index=\\"1\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>2</h3></div><div data-index=\\"2\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>3</h3></div><div data-index=\\"3\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>4</h3></div><div data-index=\\"4\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>5</h3></div><div data-index=\\"5\\" class=\\"slick-slide\\" tabindex=\\"-1\\" style=\\"outline: none; width: 0px;\\"><h3>6</h3></div><div data-index=\\"6\\" class=\\"slick-slide slick-cloned\\" style=\\"width: 0px;\\"><h3>1</h3></div></div></div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button><ul class=\\"slick-dots\\" style=\\"display: block;\\"><li class=\\"slick-active\\"><button>1</button></li><li class=\\"\\"><button>2</button></li><li class=\\"\\"><button>3</button></li><li class=\\"\\"><button>4</button></li><li class=\\"\\"><button>5</button></li><li class=\\"\\"><button>6</button></li></ul></div></div>"`;

examples/__tests__/sample.test.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import {mount} from 'enzyme'
+
+export default class Counter extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      count: 0
+    }
+  }
+  render() {
+    return (
+      <button onClick={() => this.setState({count: this.state.count + 1})}>
+        Count {this.state.count}
+      </button>
+    )
+  }
+}
+
+describe('sample counter test', function () {
+  it('mutliple counts', function () {
+    const wrapper = mount(<Counter />)
+    wrapper.simulate('click').simulate('click')
+    expect(wrapper.text()).toEqual('Count 2')
+  });
+});

test-helpers.js

@@ -0,0 +1,11 @@
+export function repeatClicks(node, count) {
+  for (let i = 0; i < count; i++) {
+    node.simulate('click')
+  }
+}
+
+export function delay(duration) {
+  return new Promise(function (resolve) {
+    setTimeout(resolve, duration)
+  })
+}