Reorganizing tests

test/plugins/autoslide.test.js

@@ -0,0 +1,43 @@
+import DOM from '../../src/js/utils/dom';
+import AutoSlide from '../../src/js/plugins/autoslide';
+
+jest.useFakeTimers();
+
+beforeAll(() => {
+  document.body.innerHTML = `<div id="webslides"></div><input id="focusable" />`;
+});
+
+test('AutoSlide plugin', () => {
+  const next = jest.fn();
+  const ws = document.getElementById('webslides');
+  const webslides = {
+    options: {
+      autoslide: 100
+    },
+    goNext: next,
+    el: ws
+  };
+
+  expect(next).not.toBeCalled();
+
+  const autoslide = new AutoSlide(webslides);
+  DOM.fireEvent(ws, 'ws:init');
+
+  // Wait until next execution
+  jest.runTimersToTime(101);
+
+  expect(next.mock.calls.length).toBe(1);
+
+  // Wait until next execution
+  jest.runTimersToTime(101);
+
+  expect(next.mock.calls.length).toBe(2);
+
+  // Pause on focus
+  document.getElementById('focusable').focus();
+  DOM.fireEvent(document.body, 'focus');
+  jest.runTimersToTime(101);
+
+  expect(next.mock.calls.length).toBe(2);
+
+});

test/plugins/click-nav.test.js

@@ -0,0 +1,26 @@
+import DOM from '../../src/js/utils/dom';
+import ClickNav from '../../src/js/plugins/click-nav';
+
+beforeAll(() => {
+  document.body.innerHTML = `<div id="webslides" data-test="test"><p>Text</p></div>`;
+});
+
+test('Click nav plugin', () => {
+  const next = jest.fn();
+  const ws = document.getElementById('webslides');
+  // Simulates dataset
+  ws.dataset = {};
+  const webslides = {
+    options: {
+      changeOnClick: true
+    },
+    goNext: next,
+    el: ws
+  };
+
+  expect(next).not.toBeCalled();
+
+  const clicknav = new ClickNav(webslides);
+  DOM.fireEvent(ws, 'click');
+  expect(next.mock.calls.length).toBe(1);
+});

test/plugins/keyboard.test.js

@@ -0,0 +1,62 @@
+import DOM from '../../src/js/utils/dom';
+import Keyboard from '../../src/js/plugins/keyboard';
+import Keys from '../../src/js/utils/keys';
+
+const simulateKeyEvent = (el, code) => {
+  const evt = new KeyboardEvent("keydown", {
+    bubbles: true,
+    cancelableCode: true,
+    which: code,
+    shiftKey: true});
+  el.dispatchEvent(evt);
+};
+
+beforeAll(() => {
+  document.body.innerHTML = `<div id="webslides" data-test="test"><p>Text</p></div><input id="focusable" />`;
+});
+
+test('Keyboard plugin', () => {
+  const goto = jest.fn();
+  const next = jest.fn();
+  const prev = jest.fn();
+  const ws = document.getElementById('webslides');
+  const focusable = document.getElementById('focusable');
+
+  let disabled = true;
+
+  const webslides = {
+    goToSlide: goto,
+    goNext: next,
+    goPrev: prev,
+    isVertical: false,
+    isDisabled: () => {return disabled;},
+    el: ws
+  };
+
+  const keyboard = new Keyboard(webslides);
+
+  expect(goto).not.toBeCalled();
+  expect(next).not.toBeCalled();
+  expect(prev).not.toBeCalled();
+
+  simulateKeyEvent(document, Keys.AV_PAGE);
+  expect(next.mock.calls.length).toBe(0);
+
+  disabled = false;
+  simulateKeyEvent(document, Keys.AV_PAGE);
+  expect(next.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.SPACE);
+  expect(next.mock.calls.length).toBe(2);
+  simulateKeyEvent(document, Keys.RE_PAGE);
+  expect(prev.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.HOME);
+  expect(goto.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.DOWN);
+  expect(next.mock.calls.length).toBe(2);
+  simulateKeyEvent(document, Keys.UP);
+  expect(prev.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.LEFT);
+  expect(prev.mock.calls.length).toBe(2);
+  simulateKeyEvent(document, Keys.RIGHT);
+  expect(next.mock.calls.length).toBe(3);
+});

test/plugins/navigation.test.js

@@ -0,0 +1,64 @@
+import DOM from '../../src/js/utils/dom';
+import Navigation from '../../src/js/plugins/navigation';
+
+beforeAll(() => {
+  document.body.innerHTML = `<div id="webslides"></div>`;
+});
+
+test('Navigation plugin', () => {
+  const ws = document.getElementById('webslides');
+
+  const zoom = jest.fn();
+  const next = jest.fn();
+  const prev = jest.fn();
+  const webslides = {
+    el: ws,
+    goNext: next,
+    goPrev: prev,
+    toggleZoom: zoom
+  };
+
+  const fakeArrow = Navigation.createArrow('arrow', 'Test');
+  expect(fakeArrow.tagName).toBe('A');
+  expect(fakeArrow.title).toBe('Arrow Keys');
+  expect(fakeArrow.id).toBe('arrow');
+  expect(fakeArrow.textContent).toBe('Test');
+
+  const fakeCounter = Navigation.createCounter('counter');
+  expect(fakeCounter.tagName).toBe('SPAN');
+  expect(fakeCounter.childNodes.length).toBe(1);
+  expect(fakeCounter.childNodes[0].tagName).toBe('A');
+  expect(fakeCounter.childNodes[0].href).toBe('about:blank#');
+  expect(fakeCounter.childNodes[0].title).toBe('View all slides');
+
+  const nav = new Navigation(webslides);
+
+  const navElem = ws.querySelector('#navigation');
+  const counter = navElem.querySelector('#counter');
+  const nextElem = navElem.querySelector('#next');
+  const prevElem = navElem.querySelector('#previous');
+  expect(navElem).not.toBe(null);
+  expect(counter).not.toBe(null);
+  expect(nextElem).not.toBe(null);
+  expect(prevElem).not.toBe(null);
+
+  DOM.fireEvent(ws, 'ws:slide-change', {
+    slides: 3,
+    currentSlide0: 1,
+    currentSlide: 2
+  });
+  expect(counter.textContent).toBe('2 / 3');
+
+  expect(next.mock.calls.length).toBe(0);
+  expect(prev.mock.calls.length).toBe(0);
+  expect(zoom.mock.calls.length).toBe(0);
+
+  DOM.fireEvent(nextElem, 'click');
+  expect(next.mock.calls.length).toBe(1);
+
+  DOM.fireEvent(prevElem, 'click');
+  expect(prev.mock.calls.length).toBe(1);
+
+  DOM.fireEvent(counter, 'click');
+  expect(zoom.mock.calls.length).toBe(1);
+});

test/plugins/scroll.test.js

@@ -0,0 +1,65 @@
+import Scroll from '../../src/js/plugins/scroll';
+
+jest.useFakeTimers();
+
+// Copy of DOM.fireEvent, but using wheel deltas
+const fireEvent = (target, eventType, deltaX, deltaY) => {
+  const event = new CustomEvent(eventType);
+  event.deltaX = deltaX;
+  event.deltaY = deltaY;
+
+  target.dispatchEvent(event);
+};
+
+beforeAll(() => {
+  const brs = '<br />'.repeat(20);
+  document.body.innerHTML = `<div id="webslides">${brs}</div>`;
+});
+
+test('Scroll utility', () => {
+  // Forces mobile detection
+  window.navigator = {userAgent: 'Android'};
+  const ws = document.getElementById('webslides');
+  const next = jest.fn();
+  const prev = jest.fn();
+
+  let disabled = true;
+  const webslides = {
+    el: ws,
+    isDisabled: () => {return disabled;},
+    isMoving: false,
+    isVertical: false,
+    goNext: next,
+    goPrev: prev,
+    options: {
+      navigateOnScroll: true,
+      scrollWait: 200,
+      minWheelDelta: 50
+    }
+  };
+
+  const scroll = new Scroll(webslides);
+  fireEvent(ws, 'wheel', 300, 200);
+
+  expect(next).not.toBeCalled();
+  expect(prev).not.toBeCalled();
+
+  // Wait until next execution
+  jest.runTimersToTime(201);
+  expect(next.mock.calls.length).toBe(0);
+  expect(prev.mock.calls.length).toBe(0);
+
+  disabled = false;
+  fireEvent(ws, 'wheel', 300, 200);
+
+  jest.runTimersToTime(201);
+  expect(next.mock.calls.length).toBe(1);
+  expect(prev.mock.calls.length).toBe(0);
+
+  fireEvent(ws, 'wheel', -200, -300);
+
+  jest.runTimersToTime(201);
+  expect(next.mock.calls.length).toBe(1);
+  expect(prev.mock.calls.length).toBe(1);
+
+});

test/plugins/touch.test.js

@@ -0,0 +1,79 @@
+
+// Copy of DOM.fireEvent, but using touch offets
+const fireEvent = (target, eventType, offsetX, offsetY, touches) => {
+  const event = new CustomEvent(eventType);
+
+  event.offsetX = offsetX;
+  event.offsetY = offsetY;
+  event.touches = touches;
+
+  target.dispatchEvent(event);
+};
+
+beforeAll(() => {
+  const brs = '<br />'.repeat(20);
+  document.body.innerHTML = `<div id="webslides">${brs}</div>`;
+});
+
+test('Touch utility', () => {
+  // Overrides userAgent to force mobile detection
+  const UAProp = Object.getOwnPropertyDescriptor(window.navigator.__proto__, 'userAgent');
+  Object.defineProperty(window.navigator, 'userAgent', {get: () => 'Android'});
+
+  const Touch = require('../../src/js/plugins/touch');
+
+  const ws = document.getElementById('webslides');
+  const next = jest.fn();
+  const prev = jest.fn();
+  const zoom = jest.fn();
+
+  let disabled = true;
+  const webslides = {
+    el: ws,
+    isDisabled: () => {return disabled;},
+    isMoving: false,
+    isVertical: false,
+    goNext: next,
+    goPrev: prev,
+    toggleZoom: zoom,
+    options: {
+      slideOffset: 100
+    }
+  };
+
+  const touch = new Touch.default(webslides);
+  fireEvent(document, 'touchstart', 200, 200, [1]);
+  fireEvent(document, 'touchmove', 200, 400, [1]);
+  fireEvent(document, 'touchend', 200, 200, [1]);
+
+  expect(next).not.toBeCalled();
+  expect(prev).not.toBeCalled();
+  expect(zoom).not.toBeCalled();
+
+  disabled = false;
+
+  fireEvent(document, 'touchstart', 800, 200, [1]);
+  fireEvent(document, 'touchmove', 400, 200, [1]);
+  fireEvent(document, 'touchend', 400, 200, [1]);
+
+  expect(next.mock.calls.length).toBe(1);
+  expect(prev.mock.calls.length).toBe(0);
+  expect(zoom.mock.calls.length).toBe(0);
+
+  fireEvent(document, 'touchstart', 200, 200, [1]);
+  fireEvent(document, 'touchmove', 400, 200, [1]);
+  fireEvent(document, 'touchend', 400, 200, [1]);
+
+  expect(next.mock.calls.length).toBe(1);
+  expect(prev.mock.calls.length).toBe(1);
+  expect(zoom.mock.calls.length).toBe(0);
+
+  fireEvent(document, 'touchstart', 200, 200, [{clientX: 100, clientY: 100}, {clientX: 400, clientY: 400}]);
+  fireEvent(document, 'touchmove', 400, 200, [{clientX: 200, clientY: 200}, {clientX: 300, clientY: 300}]);
+  fireEvent(document, 'touchend', 400, 200, [{clientX: 200, clientY: 200}, {clientX: 300, clientY: 300}]);
+
+  expect(next.mock.calls.length).toBe(1);
+  expect(prev.mock.calls.length).toBe(1);
+  expect(zoom.mock.calls.length).toBe(1);
+
+});

test/plugins/video.test.js

@@ -0,0 +1,52 @@
+import Video from '../../src/js/plugins/video';
+import DOM from '../../src/js/utils/dom';
+
+// Copy of DOM.fireEvent, but using touch offets
+const fireEvent = (target, eventType, offsetX, offsetY, touches) => {
+  const event = new CustomEvent(eventType);
+
+  event.offsetX = offsetX;
+  event.offsetY = offsetY;
+  event.touches = touches;
+
+  target.dispatchEvent(event);
+};
+
+beforeAll(() => {
+  const slides = '12345'.replace(/(\d)/g, '<div id="section-$1" class="slide"><video autoplay="true" /></div>');
+  document.body.innerHTML = `<div id="webslides">${slides}</div>`;
+});
+
+test('Video utility', () => {
+
+  const ws = document.getElementById('webslides');
+  const slides = ws.querySelectorAll('.slide');
+  const videos = ws.querySelectorAll('video');
+  const play = jest.fn();
+  const pause = jest.fn();
+  videos.forEach( video => {
+    video.play = play;
+    video.pause = pause;
+  })
+
+  const webslides = {
+    el: ws,
+    slides: []
+  };
+  slides.forEach( slide => webslides.slides.push({el: slide}));
+
+  expect(ws.querySelectorAll('video[autoplay]').length).toBe(5);
+
+  const video = new Video(webslides);
+
+  expect(ws.querySelectorAll('video[autoplay]').length).toBe(0);
+  expect(pause.mock.calls.length).toBe(5);
+
+  webslides.slides.forEach( slide => {
+    DOM.fireEvent(slide.el, 'slide:enable', {slide: slide});
+    DOM.fireEvent(slide.el, 'slide:disable', {slide: slide});
+  })
+
+  expect(pause.mock.calls.length).toBe(10);
+
+});

test/plugins/youtube.test.js

@@ -0,0 +1,89 @@
+import YouTube from '../../src/js/plugins/youtube';
+import DOM from '../../src/js/utils/dom';
+
+// Copy of DOM.fireEvent, but using touch offets
+const fireEvent = (target, eventType, offsetX, offsetY, touches) => {
+  const event = new CustomEvent(eventType);
+
+  event.offsetX = offsetX;
+  event.offsetY = offsetY;
+  event.touches = touches;
+
+  target.dispatchEvent(event);
+};
+
+beforeAll(() => {
+  const video = '<div id="section-1" class="slide"><div class="embed"><div data-youtube="video" data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop></div></div></div>';
+  document.body.innerHTML = `<script></script><div id="webslides">${video}</div>`;
+});
+
+test('YouTube utility', () => {
+
+  const ws = document.getElementById('webslides');
+  const slides = ws.querySelectorAll('.slide');
+  const play = jest.fn();
+  const pause = jest.fn();
+  const destroy = jest.fn();
+  const create = jest.fn();
+
+  const webslides = {
+    el: ws,
+    slides: []
+  };
+  slides.forEach( slide => webslides.slides.push({el: slide}));
+
+  window.YT = {
+    Player: function(a, b) {
+      return { getIframe: () => {
+        const div = DOM.createNode('div');
+        div.innerHTML = '<iframe id="widget8" src="https://www.youtube.com/embed/_m67JbGjWnc" title="YouTube video player" allowfullscreen="1" data-youtube-id="_m67JbGjWnc" frameborder="0" height="360" width="640"></iframe>';
+        webslides.slides[0].el.appendChild(div);
+        return div.querySelector('iframe');
+      } }
+    }
+  }
+
+  const youtube = new YouTube(webslides);
+
+  expect(typeof window.onYouTubeIframeAPIReady).toBe('function');
+  webslides.el.querySelector('[data-youtube]').dataset = {autoplay: true, youtubeId: 'CQY3KUR3VzM'};
+
+  window.onYouTubeIframeAPIReady();
+
+  const slide = {
+    slide: {
+      player: {
+        autoplay: true,
+        play: play,
+        pause: pause,
+        destroy: destroy,
+        create: create
+      }
+    }
+  };
+
+  DOM.fireEvent(webslides.slides[0].el, 'dom:enter', slide);
+  expect(play.mock.calls.length).toBe(0);
+  expect(pause.mock.calls.length).toBe(0);
+  expect(destroy.mock.calls.length).toBe(0);
+  expect(create.mock.calls.length).toBe(1);
+
+  DOM.fireEvent(webslides.slides[0].el, 'dom:leave', slide);
+  expect(play.mock.calls.length).toBe(0);
+  expect(pause.mock.calls.length).toBe(0);
+  expect(destroy.mock.calls.length).toBe(1);
+  expect(create.mock.calls.length).toBe(1);
+
+  DOM.fireEvent(webslides.slides[0].el, 'slide:enable', slide);
+  expect(play.mock.calls.length).toBe(1);
+  expect(pause.mock.calls.length).toBe(0);
+  expect(destroy.mock.calls.length).toBe(1);
+  expect(create.mock.calls.length).toBe(1);
+
+  DOM.fireEvent(webslides.slides[0].el, 'slide:disable', slide);
+  expect(play.mock.calls.length).toBe(1);
+  expect(pause.mock.calls.length).toBe(1);
+  expect(destroy.mock.calls.length).toBe(1);
+  expect(create.mock.calls.length).toBe(1);
+
+});

test/plugins/zoom.test.js

@@ -0,0 +1,66 @@
+import Zoom from '../../src/js/plugins/zoom';
+import DOM from '../../src/js/utils/dom';
+
+jest.useFakeTimers();
+
+// Copy of DOM.fireEvent, but using keydown
+const simulateKeyEvent = (el, code) => {
+  const evt = new KeyboardEvent("keydown", {
+    bubbles: true,
+    cancelableCode: true,
+    which: code,
+    shiftKey: true});
+  el.dispatchEvent(evt);
+};
+
+beforeAll(() => {
+  const slides = '12345'.replace(/(\d)/g, '<div id="section-$1" class="slide"><div>Slide $1</div></div>');
+  document.body.innerHTML = `<div id="webslides">${slides}</div>`;
+});
+
+test('Zoom utility', () => {
+
+  const ws = document.getElementById('webslides');
+  const slides = ws.querySelectorAll('.slide');
+  const goto = jest.fn();
+  const enable = jest.fn();
+  const disable = jest.fn();
+
+  const webslides = {
+    el: ws,
+    slides: [],
+    goToSlide: goto,
+    enable: enable,
+    disable: disable
+  };
+  slides.forEach( slide => webslides.slides.push({el: slide}));
+
+  const zoom = new Zoom(webslides);
+
+  const zws = document.querySelector('#webslides-zoomed');
+  const zoomSlides = zws.querySelectorAll('.slide');
+
+  expect(zws).not.toBe(null);
+  expect(zws.style.display).toBe('none');
+  expect(slides.length).toBe(zoomSlides.length);
+  expect(zws.childNodes[0].className).toBe('wrap');
+  expect(zws.childNodes[0].childNodes[0].className).toBe('grid');
+
+  simulateKeyEvent(document.body, 109);
+  expect(zws.style.display).toBe('');
+
+  // Wait until next execution
+  jest.runTimersToTime(401);
+  expect(disable.mock.calls.length).toBe(1);
+  expect(enable.mock.calls.length).toBe(0);
+  expect(goto.mock.calls.length).toBe(0);
+
+  DOM.fireEvent(zws.querySelector('.zoom-layer'), 'click');
+
+  // Wait until next execution
+  jest.runTimersToTime(401);
+  expect(disable.mock.calls.length).toBe(1);
+  expect(enable.mock.calls.length).toBe(1);
+  expect(goto.mock.calls.length).toBe(1);
+
+});