wix-style-react/dist/es/src/Carousel/Carousel.spec.js

wix-style-react

var _this = this;

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

import React from 'react';
import carouselDriverFactory from './Carousel.driver.private';
import Carousel from './Carousel';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';

describe('Carousel', function () {
  var createDriver = createDriverFactory(carouselDriverFactory);
  jest.useFakeTimers();

  it('should be rendered', function () {
    var driver = createDriver(React.createElement(Carousel, { images: [] }));
    expect(driver.exists()).toBeTruthy();
  });

  describe('loader', function () {
    it('should show only the loader when loading', function () {
      var driver = createDriver(React.createElement(Carousel, { images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }] }));
      expect(driver.isLoading()).toBeTruthy();
    });

    it('should hide the loader when images are loaded', function () {
      var driver = createDriver(React.createElement(Carousel, { images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }] }));
      driver.loadImages();
      expect(driver.isLoading()).toBeFalsy();
    });
  });

  describe('basic behaviour', function () {
    it('should show the first image', function () {
      var driver = createDriver(React.createElement(Carousel, { images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }] }));
      expect(driver.getCurrentImageIndex()).toBe(0);
    });

    it('should switch to the next image when clicking next', function () {
      var driver = createDriver(React.createElement(Carousel, { images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }] }));
      driver.clickNext();
      expect(driver.getCurrentImageIndex()).toBe(1);
    });

    it('should switch to the previous image when clicking prev', function () {
      var driver = createDriver(React.createElement(Carousel, { images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }] }));
      driver.clickNext();
      jest.runOnlyPendingTimers();
      driver.clickPrevious();
      expect(driver.getCurrentImageIndex()).toBe(0);
    });
  });

  describe('infinite functionallity', function () {
    describe('default behaviour', function () {
      it('should show the last image when clicing `prev`', function () {
        var driver = createDriver(React.createElement(Carousel, {
          images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }, { src: 'image3.jpg' }]
        }));
        driver.clickPrevious();
        expect(driver.getCurrentImageIndex()).toBe(2);
      });

      it('should show the first image when clicing `next` on the last image', function () {
        var driver = createDriver(React.createElement(Carousel, {
          images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }, { src: 'image3.jpg' }]
        }));
        driver.clickNext();
        expect(driver.getCurrentImageIndex()).toBe(1);
        jest.runOnlyPendingTimers();
        driver.clickNext();
        expect(driver.getCurrentImageIndex()).toBe(2);
        jest.runOnlyPendingTimers();
        driver.clickNext();
        expect(driver.getCurrentImageIndex()).toBe(0);
      });
    });

    describe('when `infinite` is false', function () {
      it('should stay on the same image when clicking `prev`', function () {
        var driver = createDriver(React.createElement(Carousel, {
          images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }, { src: 'image3.jpg' }],
          infinite: false
        }));
        driver.clickPrevious();
        expect(driver.getCurrentImageIndex()).toBe(0);
      });

      it('should stay on the last image when clicing `next` on the last image', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
        var driver;
        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                driver = createDriver(React.createElement(Carousel, {
                  images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }, { src: 'image3.jpg' }],
                  infinite: false
                }));

                driver.clickNext();
                expect(driver.getCurrentImageIndex()).toBe(1);
                jest.runOnlyPendingTimers();
                driver.clickNext();
                expect(driver.getCurrentImageIndex()).toBe(2);
                jest.runOnlyPendingTimers();
                driver.clickNext();
                expect(driver.getCurrentImageIndex()).toBe(2);

              case 9:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, _this);
      })));
    });
  });

  describe('autoplay', function () {
    it('should not change images when disabled', function () {
      var driver = createDriver(React.createElement(Carousel, { images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }] }));
      expect(driver.getCurrentImageIndex()).toBe(0);
      jest.runOnlyPendingTimers();
      expect(driver.getCurrentImageIndex()).toBe(0);
    });

    it('should automaticaly change images when enabled', function () {
      var driver = createDriver(React.createElement(Carousel, {
        autoplay: true,
        images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }]
      }));

      expect(driver.getCurrentImageIndex()).toBe(0);
      jest.runOnlyPendingTimers();
      expect(driver.getCurrentImageIndex()).toBe(1);
    });

    it('should stop playing when mouse is on the image', function () {
      var driver = createDriver(React.createElement(Carousel, {
        autoplay: true,
        images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }]
      }));

      expect(driver.getCurrentImageIndex()).toBe(0);
      driver.mouseOver();
      jest.runOnlyPendingTimers();
      expect(driver.getCurrentImageIndex()).toBe(0);
    });

    it('should continue playing when mouse leaves the image', function () {
      var driver = createDriver(React.createElement(Carousel, {
        autoplay: true,
        images: [{ src: 'image1.jpg' }, { src: 'image2.jpg' }]
      }));

      expect(driver.getCurrentImageIndex()).toBe(0);
      driver.mouseOver();
      driver.mouseOut();
      jest.runOnlyPendingTimers();
      expect(driver.getCurrentImageIndex()).toBe(1);
    });
  });
});