Refactor Slide test

test/modules/slide.test.js

@@ -1,72 +1,142 @@
 import Slide from '../../src/js/modules/slide';
 
-beforeAll(() => {
-  const slides = '<section class="slide"><div class="content">Content</section>'
-      .repeat(5);
-  document.body.innerHTML = `<div id="webslides">${slides}</div>`;
-});
+describe('Slide module', () => {
+  test('Candidate', () => {
+    const valid = document.createElement('section');
+    const invalid = document.createElement('p');
 
-test('Slide utility', () => {
-  const ws = document.getElementById('webslides');
-  const slides = ws.querySelectorAll('.slide');
-  const leave = jest.fn();
-  const enter = jest.fn();
-  const enable = jest.fn();
-  const disable = jest.fn();
-
-  const webslides = {
-    el: ws,
-    slides: []
-  };
-
-  expect(Slide.isCandidate(slides[0])).toBe(true);
-  slides.forEach((slide, i) => webslides.slides.push(new Slide(slide, i)));
-  expect(webslides.slides.length).toBe(slides.length);
-  webslides.slides.forEach((slide, i) => {
-    expect(typeof slide).toBe('object');
-    expect(slide.el).toBe(slides[i]);
-    expect(slide.el.id).toBe(`section-${i+1}`);
-    expect(slide.el.style.display).toBe('none');
-    slide.show();
-    expect(slide.el.style.display).toBe('');
-    expect(slide.el.classList.contains('current')).toBe(true);
-    slide.hide();
-    expect(slide.el.style.display).toBe('none');
+    expect(Slide.isCandidate(valid)).toBe(true);
+    expect(Slide.isCandidate(invalid)).toBe(false);
   });
 
-  webslides.slides[0].el.addEventListener('dom:leave', leave);
-  webslides.slides[0].el.addEventListener('dom:enter', enter);
-  webslides.slides[0].el.addEventListener('slide:enable', enable);
-  webslides.slides[0].el.addEventListener('slide:disable', disable);
+  describe('Instance behaviour', () => {
+    let ws;
+    let slides;
 
-  expect(enter.mock.calls.length).toBe(0);
-  expect(leave.mock.calls.length).toBe(0);
-  expect(enable.mock.calls.length).toBe(0);
-  expect(disable.mock.calls.length).toBe(0);
-  webslides.slides[0].moveAfterLast();
-  expect(ws.querySelector('.slide').id).toBe('section-2');
-  expect(enter.mock.calls.length).toBe(1);
-  expect(leave.mock.calls.length).toBe(1);
-  expect(enable.mock.calls.length).toBe(0);
-  expect(disable.mock.calls.length).toBe(0);
-  webslides.slides[0].moveBeforeFirst();
-  expect(ws.querySelector('.slide').id).toBe('section-1');
-  expect(enter.mock.calls.length).toBe(2);
-  expect(leave.mock.calls.length).toBe(2);
-  expect(enable.mock.calls.length).toBe(0);
-  expect(disable.mock.calls.length).toBe(0);
-  webslides.slides[0].enable();
-  expect(enter.mock.calls.length).toBe(2);
-  expect(leave.mock.calls.length).toBe(2);
-  expect(enable.mock.calls.length).toBe(1);
-  expect(disable.mock.calls.length).toBe(0);
-  webslides.slides[0].disable();
-  expect(enter.mock.calls.length).toBe(2);
-  expect(leave.mock.calls.length).toBe(2);
-  expect(enable.mock.calls.length).toBe(1);
-  expect(disable.mock.calls.length).toBe(1);
+    beforeEach(() => {
+      const template =
+        '<section><div class="content">Content</div></section>'
+        .repeat(5);
+      document.body.innerHTML = `<div id="webslides">${template}</div>`;
 
-  const found = Slide.getSectionFromEl(ws.querySelector('.content'));
-  expect(found.section.id).toBe('section-1');
-  expect(found.i).toBe(1);
+      const el = document.getElementById('webslides');
+      slides = [];
+
+      el.querySelectorAll('section').forEach((el, i) => {
+        slides.push(new Slide(el, i));
+      });
+
+      ws = {
+        el,
+        slides
+      };
+    });
+
+    afterEach(() => {
+      document.body.innerHTML = '';
+    });
+
+    test('Slides should have some properties', () => {
+      const slide = ws.slides[0];
+
+      expect(slide.el).toBeInstanceOf(Element);
+      expect(slide.el.id).toBe('section-1');
+      expect(slide.parent).toBeInstanceOf(Element);
+      expect(slide.parent.id).toBe('webslides');
+      expect(slide.i).toBe(0);
+    });
+
+    test('Slides should get a slide class and be hidden', () => {
+      const slide = ws.slides[0];
+
+      expect(slide.el.classList.contains('slide')).toBe(true);
+      expect(slide.el.style.display).toBe('none');
+    });
+
+    test('Show/hide', () => {
+      const slide = ws.slides[0];
+
+      slide.show();
+      expect(slide.el.style.display).not.toBe('none');
+      expect(slide.el.classList.contains('current')).toBe(true);
+
+      slide.hide();
+      expect(slide.el.style.display).toBe('none');
+      expect(slide.el.classList.contains('current')).not.toBe(true);
+    });
+
+    test('Events', () => {
+      const slide = ws.slides[0];
+      const leave = jest.fn();
+      const enter = jest.fn();
+      const enable = jest.fn();
+      const disable = jest.fn();
+
+      slide.el.addEventListener('dom:leave', leave);
+      slide.el.addEventListener('dom:enter', enter);
+      slide.el.addEventListener('slide:enable', enable);
+      slide.el.addEventListener('slide:disable', disable);
+
+      expect(enter).not.toHaveBeenCalled();
+      expect(leave).not.toHaveBeenCalled();
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).not.toHaveBeenCalled();
+
+      slide.enable();
+      expect(enter).not.toHaveBeenCalled();
+      expect(leave).not.toHaveBeenCalled();
+      expect(enable).toHaveBeenCalledTimes(1);
+      expect(disable).not.toHaveBeenCalled();
+      enable.mockClear();
+
+      slide.disable();
+      expect(enter).not.toHaveBeenCalled();
+      expect(leave).not.toHaveBeenCalled();
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).toHaveBeenCalledTimes(1);
+      disable.mockClear();
+
+      slide.moveAfterLast();
+      expect(enter).toHaveBeenCalledTimes(1);
+      expect(leave).toHaveBeenCalledTimes(1);
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).not.toHaveBeenCalled();
+      enter.mockClear();
+      leave.mockClear();
+
+      slide.moveBeforeFirst();
+      expect(enter).toHaveBeenCalledTimes(1);
+      expect(leave).toHaveBeenCalledTimes(1);
+      expect(enable).not.toHaveBeenCalled();
+      expect(disable).not.toHaveBeenCalled();
+      enter.mockClear();
+      leave.mockClear();
+    });
+
+    test('Move', () => {
+      const wsEl = document.getElementById('webslides');
+      const slide = ws.slides[0];
+
+      expect(wsEl.lastChild).not.toBe(slide.el);
+      slide.moveAfterLast();
+      expect(wsEl.lastChild).toBe(slide.el);
+
+      expect(wsEl.firstChild).not.toBe(slide.el);
+      slide.moveBeforeFirst();
+      expect(wsEl.firstChild).toBe(slide.el);
+    });
+
+    test('Get section from el', () => {
+      const wsEl = document.getElementById('webslides');
+      const el = ws.slides[3].el.firstChild;
+      const found = Slide.getSectionFromEl(el);
+
+      expect(found.section.id).toBe('section-4');
+      expect(found.i).toBe(4);
+
+      const notFound = Slide.getSectionFromEl(wsEl);
+      expect(notFound.section).toBeNull();
+      expect(notFound.i).toBeNull();
+    });
+  });
 });