waterfall specs

test/unit/components/waterfall.vue

@@ -0,0 +1,49 @@
+<script>
+  import Waterfall from 'packages/waterfall';
+
+  export default {
+    props: {
+      disabled: Boolean,
+      list: Array,
+      onWaterfallLower: {
+        type: Function,
+        default() {
+          return function() {};
+        }
+      },
+      onWaterfallUpper: {
+        type: Function,
+        default() {
+          return function() {};
+        }
+      }
+    },
+    directives: {
+      WaterfallLower: Waterfall('lower'),
+      WaterfallUpper: Waterfall('upper')
+    },
+    methods: {
+      triggerWaterfallLower() {
+        console.log('waterfall lower trigger');
+        this.onWaterfallLower();
+      },
+      triggerWaterfallUpper() {
+        console.log('waterfall upper trigger');
+        this.onWaterfallUpper();
+      }
+    }
+  };
+</script>
+
+<template>
+  <div
+    v-waterfall-lower="triggerWaterfallLower"
+    v-waterfall-upper="triggerWaterfallUpper"
+    waterfall-disabled="disabled"
+  >
+    <div
+      v-for="item in list"
+      class="waterfall-item"
+    >{{ item.id }}</div>
+  </div>
+</template>

test/unit/get-webpack-conf.js

@@ -16,6 +16,10 @@ const webpackConfig = {
   ],
   postcss: getPostcssPlugin,
   resolve: {
+    modules: [
+      path.resolve(process.cwd(), 'node_modules'),
+      'node_modules'
+    ],
     extensions: [
       '',
       '.js',

test/unit/specs/search.spec.js

@@ -36,6 +36,6 @@ describe('Search', () => {
       expect(eventStub.calledOnce).to.be.true;
       expect(eventStub.calledWith('change'));
       done();
-    })
+    });
   });
 });

test/unit/specs/waterfall.spec.js

@@ -0,0 +1,72 @@
+import Waterfall from '../components/waterfall';
+import { mount } from 'avoriaz';
+
+describe('Waterfall', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create', (done) => {
+    const waterfallLowerSpy = sinon.spy();
+    wrapper = mount(Waterfall, {
+      attachToDocument: true,
+      propsData: {
+        disabled: false,
+        list: [],
+        onWaterfallLower: waterfallLowerSpy
+      }
+    });
+
+    setTimeout(() => {
+      expect(waterfallLowerSpy.called).to.be.true;
+      done();
+    }, 500);
+  });
+
+  it('test waterfall lower function', (done) => {
+    const waterfallLowerSpy = sinon.spy(function() {
+      wrapper.vm.list = wrapper.vm.list.concat([{ id: 1 }, { id: 2 }, { id: 3 }]);
+      wrapper.vm.disabled = true;
+    });
+    wrapper = mount(Waterfall, {
+      attachToDocument: true,
+      propsData: {
+        disabled: false,
+        list: [{ id: 10 }],
+        onWaterfallLower: waterfallLowerSpy
+      }
+    });
+
+    setTimeout(() => {
+      const item = wrapper.find('.waterfall-item');
+      expect(waterfallLowerSpy.calledOnce).to.be.true;
+      expect(item.length).to.equal(4);
+      expect(item[item.length - 1].text()).to.equal('3');
+      done();
+    }, 500);
+  });
+
+  it('test waterfall upper function', (done) => {
+    const waterfallUpperSpy = sinon.spy(function() {
+      wrapper.vm.list.unshift({ id: 1 }, { id: 2 }, { id: 3 });
+      wrapper.vm.disabled = true;
+    });
+    wrapper = mount(Waterfall, {
+      attachToDocument: true,
+      propsData: {
+        disabled: false,
+        list: [{ id: 10 }],
+        onWaterfallUpper: waterfallUpperSpy
+      }
+    });
+
+    setTimeout(() => {
+      const item = wrapper.find('.waterfall-item');
+      expect(waterfallUpperSpy.calledOnce).to.be.true;
+      expect(item.length).to.equal(4);
+      expect(item[0].text()).to.equal('1');
+      done();
+    }, 500);
+  });
+});