text: import { createVue, destroyVM } from '../util';
  
  describe('Carousel', () => {
    let vm;
    afterEach(() => {
      destroyVM(vm);
    });
  
    it('create', () => {
      vm = createVue({
        template: `
          <div>
            <el-carousel>
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
      });
      expect(vm.$el.querySelectorAll('.el-carousel__item').length).to.equal(3);
    });
  
    it('auto play', done => {
      vm = createVue({
        template: `
          <div>
            <el-carousel :interval="50">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
      });
  
      setTimeout(() => {
        const items = vm.$el.querySelectorAll('.el-carousel__item');
        expect(items[0].classList.contains('is-active')).to.true;
        setTimeout(() => {
          expect(items[1].classList.contains('is-active')).to.true;
          done();
        }, 60);
      }, 10);
    });
  
    it('initial index', done => {
      vm = createVue({
        template: `
          <div>
            <el-carousel :autoplay="false" :initial-index="1">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
      });
  
      setTimeout(() => {
        expect(vm.$el.querySelectorAll('.el-carousel__item')[1].classList.contains('is-active')).to.true;
        done();
      }, 10);
    });
  
    it('reset timer', done => {
      vm = createVue({
        template: `
          <div>
            <el-carousel :interval="20">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
      });
  
      setTimeout(() => {
        const carousel = vm.$children[0];
        const items = vm.$el.querySelectorAll('.el-carousel__item');
        carousel.handleMouseEnter();
        setTimeout(() => {
          expect(items[0].classList.contains('is-active')).to.true;
          carousel.handleMouseLeave();
          setTimeout(() => {
            expect(items[1].classList.contains('is-active')).to.true;
            done();
          }, 30);
        }, 20);
      }, 10);
    });
  
    it('change', done => {
      vm = createVue({
        template: `
          <div>
            <el-carousel :interval="50" @change="handleChange">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `,
        data() {
          return {
            val: -1,
            oldVal: -1
          };
        },
        methods: {
          handleChange(val, oldVal) {
            this.val = val;
            this.oldVal = oldVal;
          }
        }
      });
  
      setTimeout(() => {
        expect(vm.val).to.equal(1);
        expect(vm.oldVal).to.equal(0);
        done();
      }, 60);
    });
  
    describe('manual control', () => {
      it('hover', done => {
        vm = createVue({
          template: `
          <div>
            <el-carousel :autoplay="false">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
        });
  
        setTimeout(() => {
          vm.$children[0].throttledIndicatorHover(1);
          setTimeout(() => {
            expect(vm.$el.querySelectorAll('.el-carousel__item')[1].classList.contains('is-active')).to.true;
            done();
          }, 10);
        }, 10);
      });
  
      it('click', done => {
        vm = createVue({
          template: `
          <div>
            <el-carousel :autoplay="false" trigger="click" ref="carousel">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
        });
  
        setTimeout(() => {
          const items = vm.$el.querySelectorAll('.el-carousel__item');
          const carousel = vm.$refs.carousel;
          vm.$el.querySelectorAll('.el-carousel__indicator')[2].click();
          setTimeout(() => {
            expect(items[2].classList.contains('is-active')).to.true;
            carousel.handleButtonEnter('right');
            vm.$el.querySelector('.el-carousel__arrow--right').click();
            setTimeout(() => {
              expect(items[0].classList.contains('is-active')).to.true;
              done();
            }, 10);
          }, 10);
        }, 10);
      });
    });
  
    describe('methods', () => {
      it('setActiveItem', done => {
        vm = createVue({
          template: `
          <div>
            <el-carousel :autoplay="false">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
        });
  
        setTimeout(() => {
          vm.$children[0].setActiveItem(1);
          setTimeout(() => {
            expect(vm.$el.querySelectorAll('.el-carousel__item')[1].classList.contains('is-active')).to.true;
            done();
          }, 10);
        }, 10);
      });
  
      it('slide', done => {
        vm = createVue({
          template: `
          <div>
            <el-carousel :autoplay="false">
              <el-carousel-item v-for="item in 3"></el-carousel-item>
            </el-carousel>
          </div>
        `
        });
  
        setTimeout(() => {
          vm.$children[0].prev(1);
          const items = vm.$el.querySelectorAll('.el-carousel__item');
          setTimeout(() => {
            expect(items[2].classList.contains('is-active')).to.true;
            vm.$children[0].next(1);
            setTimeout(() => {
              expect(items[0].classList.contains('is-active')).to.true;
              done();
            }, 10);
          }, 10);
        }, 10);
      });
    });
  
    it('card', done => {
      vm = createVue({
        template: `
          <div>
            <el-carousel :autoplay="false" type="card">
              <el-carousel-item v-for="item in 7"></el-carousel-item>
            </el-carousel>
          </div>
        `
      });
  
      setTimeout(() => {
        const items = vm.$el.querySelectorAll('.el-carousel__item');
        expect(items[0].classList.contains('is-active')).to.true;
        expect(items[1].classList.contains('is-in-stage')).to.true;
        expect(items[6].classList.contains('is-in-stage')).to.true;
        items[1].click();
        setTimeout(() => {
          expect(items[1].classList.contains('is-active')).to.true;
          vm.$el.querySelector('.el-carousel__arrow--left').click();
          setTimeout(() => {
            expect(items[0].classList.contains('is-active')).to.true;
            items[6].click();
            setTimeout(() => {
              expect(items[6].classList.contains('is-active')).to.true;
              done();
            }, 10);
          }, 10);
        }, 10);
      }, 10);
    });
  });
  
  