test(esl-toggleable): cover dispatcher with tests

src/modules/esl-toggleable/test/toggleable.dispatcher.integration.test.ts

@@ -0,0 +1,99 @@
+import {ESLEventUtils} from '../../esl-event-listener/core/api';
+import {ESLToggleableDispatcher, ESLToggleable} from '../core';
+
+describe('ESLToggleableDispatcher - integration with ESLToggleable', () => {
+  ESLToggleableDispatcher.init();
+  const $dispatcher = document.querySelector(ESLToggleableDispatcher.is) as ESLToggleableDispatcher;
+
+  const groupAttr1 = 'test-group1';
+  const groupAttr2 = 'test-group2';
+
+  const $el1 = ESLToggleable.create();
+  const $el2 = ESLToggleable.create();
+
+  $el1.setAttribute('group', groupAttr1);
+  $el2.setAttribute('group', groupAttr1);
+
+  document.body.appendChild($el1);
+  document.body.appendChild($el2);
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+    ESLToggleable.register();
+  });
+
+  describe('Basic integration tests', () => {
+    describe('toggle actions', () => {
+      test('show', () => {
+        $el1.show();
+        jest.advanceTimersByTime(1);
+        expect($dispatcher.getActive(groupAttr1)).toBe($el1);
+
+        $el2.show();
+        jest.advanceTimersByTime(1);
+        expect($dispatcher.getActive(groupAttr1)).toBe($el2);
+        expect($el1.open).toBe(false);
+      });
+
+      test('hide', () => {
+        $el2.hide();
+        jest.advanceTimersByTime(1);
+        expect($dispatcher.getActive(groupAttr1)).toBe(undefined);
+      });
+    });
+
+    test('group change action', () => {
+      $el1.show();
+      jest.advanceTimersByTime(1);
+      expect($dispatcher.getActive(groupAttr1)).toBe($el1);
+
+      $el1.setAttribute('group', groupAttr2);
+      jest.advanceTimersByTime(1);
+      expect($dispatcher.getActive(groupAttr1)).toBe(undefined);
+      expect($dispatcher.getActive(groupAttr2)).toBe($el1);
+    });
+  });
+
+  describe('Invalid action calls', () => {
+    test('invalid group change', () => {
+      const groupAttrInvalid = '';
+      const $el3 = ESLToggleable.create();
+      document.body.appendChild($el3);
+
+      $dispatcher.setActive(groupAttrInvalid, $el3);
+      expect($dispatcher.getActive(groupAttrInvalid)).toBe(undefined);
+    });
+
+    describe('Invalid dispatcher target', () => {
+      const $el3 = document.createElement('div');
+      Object.assign($el3, {groupName: groupAttr1});
+      document.body.appendChild($el3);
+
+      test('invalid show', () => {
+        $el2.show();
+        jest.advanceTimersByTime(1);
+        expect($dispatcher.getActive(groupAttr1)).toBe($el2);
+
+        ESLEventUtils.dispatch($el3, ESLToggleable.prototype.BEFORE_SHOW_EVENT);
+        jest.advanceTimersByTime(1);
+        expect($el2.open).toBe(true);
+
+        ESLEventUtils.dispatch($el3, ESLToggleable.prototype.SHOW_EVENT);
+        jest.advanceTimersByTime(1);
+        expect($dispatcher.getActive(groupAttr1)).toBe($el2);
+      });
+
+      test('invalid group change', () => {
+        ESLEventUtils.dispatch($el3, ESLToggleable.prototype.GROUP_CHANGED_EVENT);
+        jest.advanceTimersByTime(1);
+        expect($dispatcher.getActive(groupAttr1)).toBe($el2);
+      });
+
+      test('invalid hide', () => {
+        ESLEventUtils.dispatch($el3, ESLToggleable.prototype.HIDE_EVENT);
+        jest.advanceTimersByTime(1);
+        expect($dispatcher.getActive(groupAttr1)).toBe($el2);
+      });
+    });
+  });
+});

src/modules/esl-toggleable/test/toggleable.dispatcher.test.ts

@@ -0,0 +1,74 @@
+import {SyntheticEventTarget} from '../../esl-utils/dom/events/target';
+import {ESLToggleableDispatcher, ESLToggleable} from '../core';
+
+const createToggleableMock = (): ESLToggleable =>
+  Object.assign(new SyntheticEventTarget(), {
+    hide: jest.fn(),
+  }) as any;
+
+describe('ESLToggleableDispatcher custom element', () => {
+  ESLToggleableDispatcher.init();
+  const $dispatcher = document.querySelector(ESLToggleableDispatcher.is) as ESLToggleableDispatcher;
+
+  const groupAttr1 = 'test-group1';
+
+  const $el1 = createToggleableMock();
+  const $el2 = createToggleableMock();
+
+  $el1.groupName = groupAttr1;
+  $el2.groupName = groupAttr1;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+    ESLToggleable.register();
+  });
+
+  describe('ESLToggleableDispatcher instance', () => {
+    test('should initialize with correct tag name and default root as body', () => {
+      expect($dispatcher).toBeInstanceOf(ESLToggleableDispatcher);
+      expect($dispatcher.root).toBe(document.body);
+    });
+
+    test('should initialize again for child nodes', () => {
+      const $root = document.createElement('div');
+      const $child = document.createElement('div');
+      $root.appendChild($child);
+
+      ESLToggleableDispatcher.init($root);
+      ESLToggleableDispatcher.init($child);
+      expect($root.querySelectorAll(ESLToggleableDispatcher.is)).toHaveLength(2);
+    });
+
+    test('shouldn`t initialize if no parent element provided', () => expect(() => ESLToggleableDispatcher.init(null as any)).toThrowError());
+
+    test('shouldn`t initialize on the same level twice', () => {
+      const $root = document.createElement('div');
+
+      ESLToggleableDispatcher.init($root);
+      ESLToggleableDispatcher.init($root);
+      expect($root.querySelectorAll(ESLToggleableDispatcher.is)).toHaveLength(1);
+    });
+  });
+
+  describe('Basic functionality', () => {
+    test('function getActive', () => {
+      expect($dispatcher.getActive(groupAttr1)).toBe(undefined);
+    });
+
+    test('function setActive', () => {
+      $dispatcher.setActive(groupAttr1, $el1);
+      expect($dispatcher.getActive(groupAttr1)).toBe($el1);
+    });
+
+    test('function deleteActive', () => {
+      $dispatcher.deleteActive(groupAttr1, $el1);
+      expect($dispatcher.getActive(groupAttr1)).toBe(undefined);
+    });
+
+    test('function hideActive', () => {
+      $dispatcher.setActive(groupAttr1, $el1);
+      $dispatcher.hideActive(groupAttr1);
+      expect($el1.hide).toBeCalledTimes(1);
+    });
+  });
+});